srcdev-nuxt-components 9.0.14 → 9.0.16

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/LayoutGridByWidth.vue

@@ -0,0 +1,70 @@
+<template>
+  <component
+    :is="tag"
+    class="layout-grid-by-width"
+    :aria-labelledby="ariaLabelledby"
+    :class="[elementClasses]"
+  >
+    <p v-if="ariaLabelledby" :id="headingId" class="sr-only">
+      {{ props.label || "If tag='section' then a label is required" }}
+    </p>
+    <div class="layout-grid-inner">
+      <template v-for="(_, name) in $slots" :key="name">
+        <slot :name="name"></slot>
+      </template>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section";
+  label?: string;
+  columnWidth?: string;
+  gap?: string;
+  singleColBelow?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  label: "",
+  columnWidth: "300px",
+  gap: "1rem",
+  singleColBelow: "768px",
+  styleClassPassthrough: () => [],
+});
+
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    updateElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .layout-grid-by-width {
+    container-type: inline-size;
+    container-name: layoutGrid;
+
+    --_gap: v-bind(gap);
+
+    .layout-grid-inner {
+      display: grid;
+      grid-auto-flow: row;
+      gap: var(--_gap);
+
+      @container layoutGrid (width >= 768px) {
+        grid-template-columns: repeat(auto-fit, minmax(v-bind(columnWidth), 1fr));
+        gap: var(--_gap);
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/stories/LayoutGridByWidth.stories.ts

@@ -0,0 +1,220 @@
+import { computed } from "vue";
+import LayoutGridByWidth from "../LayoutGridByWidth.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+type StoryArgs = InstanceType<typeof LayoutGridByWidth>["$props"] & { itemCount?: number };
+
+const meta: Meta<StoryArgs> = {
+  title: "Atoms/Content Wrappers/Layout Grid By Width",
+  component: LayoutGridByWidth,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section"],
+      description: "Semantic HTML tag for the root element — use section with a label for landmark regions",
+      table: { category: "Semantic" },
+    },
+    label: {
+      control: "text",
+      description:
+        "Accessible label for the grid — required when tag is section (rendered as a visually hidden element)",
+      table: { category: "Semantic" },
+    },
+    itemCount: {
+      control: { type: "range", min: 0, max: 18, step: 1 },
+      description: "Number of grid cells to render — must match the number of #item-{n} slots provided",
+    },
+    columnWidth: {
+      control: { type: "select" },
+      options: ["200px", "312px", "400px", "500px"],
+      description:
+        "String → value to set repeat minmax minimum value CSS string (e.g. '200px', '15rem') → repeat(auto-fill, minmax(value, 1fr)) wrapping columns.",
+    },
+    gap: {
+      control: "text",
+      description: "Grid gap — any valid CSS length (e.g. '1rem', '2.4rem', '16px')",
+    },
+    singleColBelow: {
+      control: "text",
+      description:
+        "Container width below which the grid collapses to a single column — any valid CSS length (e.g. '600px', '40rem'). Default '0px' means never collapse.",
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    itemCount: 6,
+    columnWidth: "312px",
+    gap: "1rem",
+    singleColBelow: "768px",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A CSS grid wrapper driven by props. Content is placed via dynamic named slots (#item-0, #item-1, …). Pass an integer to columnWidth for N equal columns, or a CSS width string for auto-fill behaviour. The grid collapses to a single column below singleColBelow using a CSS container query.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const colours = [
+  { bg: "#dbeafe", fg: "#1e40af" },
+  { bg: "#dcfce7", fg: "#166534" },
+  { bg: "#fef3c7", fg: "#92400e" },
+  { bg: "#ede9fe", fg: "#5b21b6" },
+  { bg: "#fce7f3", fg: "#9d174d" },
+  { bg: "#ffedd5", fg: "#9a3412" },
+  { bg: "#f0fdf4", fg: "#14532d" },
+  { bg: "#fdf4ff", fg: "#7e22ce" },
+];
+
+const cell = (label: string, index: number, body = "Placeholder content for this grid cell.") =>
+  `<div style="padding: 2.4rem; background: ${colours[index % colours.length]?.bg}; border-radius: 0.8rem; color: ${colours[index % colours.length]?.fg}; font-family: sans-serif; height: 100%;">
+    <strong style="display: block; margin-bottom: 0.8rem;">${label}</strong>
+    <p style="margin: 0; font-size: 1.4rem; line-height: 1.6; opacity: 0.8;">${body}</p>
+  </div>`;
+
+// Pre-generate max slots — the component only renders up to itemCount, extras are ignored.
+const allSlots = Array.from(
+  { length: 18 },
+  (_, i) => `<template #item-${i}>${cell(`Item ${i + 1}`, i)}</template>`
+).join("\n        ");
+
+// Normalise args: explicitly maps each prop so no raw slider number leaks through to the component.
+// colWidth: 0 → undefined (not set), N → "Nrem" CSS string.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const toStoryArgs = (args: any) =>
+  computed(() => ({
+    tag: args.tag as "div" | "section",
+    label: args.label as string,
+    itemCount: Number(args.itemCount),
+    columnWidth: args.columnWidth as string,
+    gap: args.gap as string,
+    singleColBelow: args.singleColBelow as string,
+    styleClassPassthrough: args.styleClassPassthrough as string[],
+  }));
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+/** Default — equal columns. Adjust columns, colWidth and itemCount with the sliders. */
+export const Default: Story = {
+  args: {
+    itemCount: 6,
+    columnWidth: "240px",
+  },
+  render: (args) => ({
+    components: { LayoutGridByWidth },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByWidth v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByWidth>
+    `,
+  }),
+};
+
+/** Single column below a breakpoint — collapses to stacked layout on narrow containers. */
+export const SingleColBelow: Story = {
+  name: "Single Column Below 600px",
+  args: {
+    itemCount: 6,
+    columnWidth: "300px",
+    singleColBelow: "600px",
+  },
+  render: (args) => ({
+    components: { LayoutGridByWidth },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByWidth v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByWidth>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Below 600px container width the grid collapses to a single column via a CSS container query. Resize the canvas to see the switch.",
+      },
+    },
+  },
+};
+
+/** Custom gap — wider spacing between cells. */
+export const CustomGap: Story = {
+  name: "Custom Gap",
+  args: {
+    itemCount: 6,
+    columnWidth: "300px",
+    gap: "3.2rem",
+  },
+  render: (args) => ({
+    components: { LayoutGridByWidth },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByWidth v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByWidth>
+    `,
+  }),
+};
+
+/** Semantic section — tag='section' with a visually hidden label for accessibility. */
+export const SemanticSection: Story = {
+  name: "Semantic Section",
+  args: {
+    tag: "section",
+    label: "Feature highlights",
+    itemCount: 6,
+    columnWidth: "300px",
+  },
+  render: (args) => ({
+    components: { LayoutGridByWidth },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByWidth v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByWidth>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When tag is section, an aria-labelledby attribute is added and the label is rendered as a visually hidden element for screen readers.",
+      },
+    },
+  },
+};
+
+/** Zero items — renders an empty grid with no cells. */
+export const ZeroItems: Story = {
+  name: "Zero Items",
+  args: {
+    itemCount: 0,
+  },
+  render: (args) => ({
+    components: { LayoutGridByWidth },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `<LayoutGridByWidth v-bind="storyArgs" />`,
+  }),
+};

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/LayoutGridByWidth.spec.ts

@@ -0,0 +1,174 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import LayoutGridByWidth from "../LayoutGridByWidth.vue";
+
+describe("LayoutGridByWidth", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (div, 2 items)", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      slots: {
+        "item-0": "<p>First</p>",
+        "item-1": "<p>Second</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (section with label)", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { tag: "section", label: "Feature grid" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { styleClassPassthrough: ["custom-class", "another-class"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Tag rendering ───────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders as <section> when tag='section'", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  // ─── Base class ──────────────────────────────────────────────────────────
+
+  it("always has the layout-grid class", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth);
+    expect(wrapper.classes()).toContain("layout-grid-by-width");
+  });
+
+  // ─── Inner div ───────────────────────────────────────────────────────────
+
+  it("renders a .layout-grid-inner div", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth);
+    expect(wrapper.find(".layout-grid-inner").exists()).toBe(true);
+  });
+
+  // ─── Accessibility ───────────────────────────────────────────────────────
+
+  it("renders sr-only label and aria-labelledby when tag is section", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { tag: "section", label: "Card grid" },
+    });
+    const srOnly = wrapper.find(".sr-only");
+    expect(srOnly.exists()).toBe(true);
+    expect(srOnly.text()).toBe("Card grid");
+    expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
+  });
+
+  it("does not render sr-only label or aria-labelledby when tag is div", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { tag: "div", label: "Ignored" },
+    });
+    expect(wrapper.find(".sr-only").exists()).toBe(false);
+    expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
+  });
+
+  // ─── Dynamic slots ───────────────────────────────────────────────────────
+
+  it("renders slot content for each item inside the inner div", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      slots: {
+        "item-0": "<span>Alpha</span>",
+        "item-1": "<span>Beta</span>",
+        "item-2": "<span>Gamma</span>",
+      },
+    });
+    const inner = wrapper.find(".layout-grid-inner");
+    expect(inner.text()).toContain("Alpha");
+    expect(inner.text()).toContain("Beta");
+    expect(inner.text()).toContain("Gamma");
+  });
+
+  it("renders no slot content when no slots are provided", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth);
+    expect(wrapper.find(".layout-grid-inner").text().trim()).toBe("");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { styleClassPassthrough: "my-class" },
+    });
+    expect(wrapper.classes()).toContain("my-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  // ─── columnWidth prop ─────────────────────────────────────────────────────
+
+  it("accepts columnWidth without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { columnWidth: "312px" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Other prop acceptance ────────────────────────────────────────────────
+
+  it("accepts gap prop without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { gap: "2rem" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("accepts singleColBelow prop without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: { singleColBelow: "600px" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Combined ────────────────────────────────────────────────────────────
+
+  it("renders correctly with all props and slots combined", async () => {
+    const wrapper = await mountSuspended(LayoutGridByWidth, {
+      props: {
+        tag: "section",
+        label: "Services",
+        columnWidth: "260px",
+        gap: "2rem",
+        singleColBelow: "768px",
+        styleClassPassthrough: ["services-grid"],
+      },
+      slots: {
+        "item-0": "<p>One</p>",
+        "item-1": "<p>Two</p>",
+        "item-2": "<p>Three</p>",
+      },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+    expect(wrapper.classes()).toContain("services-grid");
+    expect(wrapper.find(".layout-grid-inner").exists()).toBe(true);
+    expect(wrapper.text()).toContain("One");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGrid.spec.ts.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LayoutGridByCols > renders correct HTML structure (div, 2 items) 1`] = `
+"<div class="layout-grid">
+  <!--v-if-->
+  <div class="layout-grid-inner">
+    <p>First</p>
+    <p>Second</p>
+  </div>
+</div>"
+`;
+
+exports[`LayoutGridByCols > renders correct HTML structure (section with label) 1`] = `
+"<section class="layout-grid" aria-labelledby="v-0-0">
+  <p id="v-0-0" class="sr-only">Feature grid</p>
+  <div class="layout-grid-inner"></div>
+</section>"
+`;
+
+exports[`LayoutGridByCols > renders correct HTML structure with styleClassPassthrough 1`] = `
+"<div class="layout-grid custom-class another-class">
+  <!--v-if-->
+  <div class="layout-grid-inner"></div>
+</div>"
+`;
+
+exports[`LayoutGridByCols > renders correctly with all props and slots combined 1`] = `
+"<section class="layout-grid services-grid" aria-labelledby="v-0-0" columns="3">
+  <p id="v-0-0" class="sr-only">Services</p>
+  <div class="layout-grid-inner">
+    <p>One</p>
+    <p>Two</p>
+    <p>Three</p>
+  </div>
+</section>"
+`;

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGridByCols.spec.ts.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LayoutGridByCols > renders correct HTML structure (div, 2 items) 1`] = `
+"<div class="layout-grid-by-width">
+  <!--v-if-->
+  <div class="layout-grid-inner">
+    <p>First</p>
+    <p>Second</p>
+  </div>
+</div>"
+`;
+
+exports[`LayoutGridByCols > renders correct HTML structure (section with label) 1`] = `
+"<section class="layout-grid-by-width" aria-labelledby="v-0-0">
+  <p id="v-0-0" class="sr-only">Feature grid</p>
+  <div class="layout-grid-inner"></div>
+</section>"
+`;
+
+exports[`LayoutGridByCols > renders correct HTML structure with styleClassPassthrough 1`] = `
+"<div class="layout-grid-by-width custom-class another-class">
+  <!--v-if-->
+  <div class="layout-grid-inner"></div>
+</div>"
+`;
+
+exports[`LayoutGridByCols > renders correctly with all props and slots combined 1`] = `
+"<section class="layout-grid-by-width services-grid" aria-labelledby="v-0-0" columns="3">
+  <p id="v-0-0" class="sr-only">Services</p>
+  <div class="layout-grid-inner">
+    <p>One</p>
+    <p>Two</p>
+    <p>Three</p>
+  </div>
+</section>"
+`;

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGridByWidth.spec.ts.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LayoutGridByWidth > renders correct HTML structure (div, 2 items) 1`] = `
+"<div class="layout-grid-by-width">
+  <!--v-if-->
+  <div class="layout-grid-inner">
+    <p>First</p>
+    <p>Second</p>
+  </div>
+</div>"
+`;
+
+exports[`LayoutGridByWidth > renders correct HTML structure (section with label) 1`] = `
+"<section class="layout-grid-by-width" aria-labelledby="v-0-0">
+  <p id="v-0-0" class="sr-only">Feature grid</p>
+  <div class="layout-grid-inner"></div>
+</section>"
+`;
+
+exports[`LayoutGridByWidth > renders correct HTML structure with styleClassPassthrough 1`] = `
+"<div class="layout-grid-by-width custom-class another-class">
+  <!--v-if-->
+  <div class="layout-grid-inner"></div>
+</div>"
+`;
+
+exports[`LayoutGridByWidth > renders correctly with all props and slots combined 1`] = `
+"<section class="layout-grid-by-width services-grid" aria-labelledby="v-0-0">
+  <p id="v-0-0" class="sr-only">Services</p>
+  <div class="layout-grid-inner">
+    <p>One</p>
+    <p>Two</p>
+    <p>Three</p>
+  </div>
+</section>"
+`;

package/app/components/01.atoms/text-blocks/eyebrow-text/stories/EyebrowText.stories.ts

@@ -2,7 +2,7 @@ import EyebrowText from "../EyebrowText.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
 const meta: Meta<typeof EyebrowText> = {
-  title: "Atoms/Text Blocks/EyebrowText",
+  title: "Atoms/Text Blocks/Eyebrow Text",
   component: EyebrowText,
   argTypes: {
     tag: {

package/app/components/01.atoms/text-blocks/hero-text/stories/HeroText.stories.ts

@@ -2,7 +2,7 @@ import HeroText from "../HeroText.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
 const meta: Meta<typeof HeroText> = {
-  title: "Atoms/Text Blocks/HeroText",
+  title: "Atoms/Text Blocks/Hero Text",
   component: HeroText,
   argTypes: {
     tag: {

package/app/components/01.atoms/text-blocks/link-text/stories/LinkText.stories.ts

@@ -2,7 +2,7 @@ import LinkText from "../LinkText.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
 const meta: Meta<typeof LinkText> = {
-  title: "Atoms/Text Blocks/LinkText",
+  title: "Atoms/Text Blocks/Link Text",
   component: LinkText,
   argTypes: {
     to: {

package/app/components/02.molecules/contact-section/stories/ContactSection.stories.ts

@@ -10,6 +10,10 @@ const meta: Meta<typeof ContactSection> = {
       options: ["div", "section", "article", "main"],
       description: "HTML element to render as the root",
     },
+    stepperIndicatorSize: {
+      control: "text",
+      description: "Size of the StepperList indicator bubble (any valid CSS length)",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -17,6 +21,7 @@ const meta: Meta<typeof ContactSection> = {
   },
   args: {
     tag: "div",
+    stepperIndicatorSize: "3rem",
     styleClassPassthrough: [],
   },
 };

package/app/components/02.molecules/contact-section/tests/ContactSection.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ContactSection from "./ContactSection.vue";
+import StepperList from "../../stepper-list/StepperList.vue";
 
 describe("ContactSection", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
@@ -174,6 +175,20 @@ describe("ContactSection", () => {
     expect(wrapper.classes()).toContain("contact-section");
   });
 
+  // ─── stepperIndicatorSize ─────────────────────────────────────────────────
+
+  it("passes stepperIndicatorSize to the internal StepperList", async () => {
+    const wrapper = await mountSuspended(ContactSection, {
+      props: { stepperIndicatorSize: "4rem" },
+    });
+    expect(wrapper.findComponent(StepperList).props("indicatorSize")).toBe("4rem");
+  });
+
+  it("uses the default stepperIndicatorSize of 3rem", async () => {
+    const wrapper = await mountSuspended(ContactSection);
+    expect(wrapper.findComponent(StepperList).props("indicatorSize")).toBe("3rem");
+  });
+
   // ─── Combined ─────────────────────────────────────────────────────────────
 
   it("renders correctly with all props and slots combined", async () => {