srcdev-nuxt-components 9.0.15 → 9.0.16

package/app/components/01.atoms/content-wrappers/content-width/tests/ContentWidth.spec.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ContentWidth from "../ContentWidth.vue";
+
+const mockElementClasses = { value: "" };
+
+const mockUseStyleClassPassthrough = vi.fn(() => ({
+  elementClasses: mockElementClasses,
+}));
+
+vi.mock("#imports", () => ({
+  useStyleClassPassthrough: mockUseStyleClassPassthrough,
+  useId: () => "test-id",
+}));
+
+describe("ContentWidth", () => {
+  let wrapper: Awaited<ReturnType<typeof mountSuspended>>;
+
+  const createWrapper = async (props = {}, slots = {}) => {
+    wrapper = await mountSuspended(ContentWidth, {
+      props: { styleClassPassthrough: [], ...props },
+      slots,
+    });
+    return wrapper;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockElementClasses.value = "";
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  describe("Component Rendering", () => {
+    it("mounts without error", async () => {
+      await createWrapper();
+      expect(wrapper.find(".content-width-wrapper").exists()).toBe(true);
+    });
+
+    it("renders the correct inner structure", async () => {
+      await createWrapper();
+      expect(wrapper.find(".content-width").exists()).toBe(true);
+      expect(wrapper.find(".content-width-inner").exists()).toBe(true);
+    });
+
+    it("renders as a div by default", async () => {
+      await createWrapper();
+      expect(wrapper.find(".content-width-wrapper").element.tagName).toBe("DIV");
+    });
+  });
+
+  describe("Tag Prop", () => {
+    const tags = ["section", "article", "aside", "header", "footer", "main", "nav"] as const;
+
+    tags.forEach((tag) => {
+      it(`renders as <${tag}> when tag="${tag}"`, async () => {
+        await createWrapper({ tag });
+        expect(wrapper.find(".content-width-wrapper").element.tagName).toBe(tag.toUpperCase());
+      });
+    });
+  });
+
+  describe("isLandmark Prop", () => {
+    it("does not set tabindex or aria-label by default", async () => {
+      await createWrapper();
+      const el = wrapper.find(".content-width-wrapper");
+      expect(el.attributes("tabindex")).toBeUndefined();
+      expect(el.attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets tab-index=0 when isLandmark is true", async () => {
+      await createWrapper({ isLandmark: true });
+      expect(wrapper.find(".content-width-wrapper").attributes("tab-index")).toBe("0");
+    });
+
+    it("sets aria-label when isLandmark is true", async () => {
+      await createWrapper({ isLandmark: true });
+      expect(wrapper.find(".content-width-wrapper").attributes("aria-label")).toBe(
+        "Content Width Landmark"
+      );
+    });
+  });
+
+  describe("Slot", () => {
+    it("renders default slot content", async () => {
+      await createWrapper({}, { default: "<p>Slot content</p>" });
+      expect(wrapper.find(".content-width-inner").html()).toContain("Slot content");
+    });
+
+    it("renders nested slot content", async () => {
+      await createWrapper(
+        {},
+        { default: "<section><h2>Title</h2><p>Body</p></section>" }
+      );
+      expect(wrapper.find(".content-width-inner h2").text()).toBe("Title");
+    });
+
+    it("renders without slot content gracefully", async () => {
+      await createWrapper();
+      expect(wrapper.find(".content-width-inner").exists()).toBe(true);
+    });
+  });
+
+  describe("styleClassPassthrough Prop", () => {
+    it("accepts a string value", async () => {
+      await createWrapper({ styleClassPassthrough: "custom-class" });
+      expect(wrapper.find(".content-width-wrapper").exists()).toBe(true);
+    });
+
+    it("accepts an array of strings", async () => {
+      await createWrapper({ styleClassPassthrough: ["class-a", "class-b"] });
+      expect(wrapper.find(".content-width-wrapper").exists()).toBe(true);
+    });
+
+    it("applies elementClasses from useStyleClassPassthrough to wrapper", async () => {
+      mockElementClasses.value = "injected-class";
+      await createWrapper({ styleClassPassthrough: "injected-class" });
+      expect(wrapper.find(".content-width-wrapper").classes()).toContain("injected-class");
+    });
+  });
+
+  describe("DOM Structure", () => {
+    it("maintains correct nesting: wrapper > content-width > inner > slot", async () => {
+      await createWrapper({}, { default: "<span>nested</span>" });
+      const inner = wrapper.find(".content-width-wrapper .content-width .content-width-inner");
+      expect(inner.exists()).toBe(true);
+      expect(inner.find("span").text()).toBe("nested");
+    });
+  });
+});

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/LayoutGridByCols.vue

@@ -0,0 +1,71 @@
+<template>
+  <component
+    :is="tag"
+    class="layout-grid-by-cols"
+    :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;
+  columnCount?: 2 | 3 | 4 | 5 | 6;
+  gap?: string;
+  singleColBelow?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  label: "",
+  columnCount: 2,
+  gap: "1rem",
+  singleColBelow: "768px",
+  styleClassPassthrough: () => [],
+});
+
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
+const columnCount = computed(() => (props.columnCount < 2 ? 2 : props.columnCount));
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    updateElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .layout-grid-by-cols {
+    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(v-bind(columnCount), 1fr);
+        gap: var(--_gap);
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/stories/LayoutGridByCols.stories.ts

@@ -0,0 +1,219 @@
+import { computed } from "vue";
+import LayoutGridByCols from "../LayoutGridByCols.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+type StoryArgs = InstanceType<typeof LayoutGridByCols>["$props"] & { itemCount?: number };
+
+const meta: Meta<StoryArgs> = {
+  title: "Atoms/Content Wrappers/Layout Grid By Cols",
+  component: LayoutGridByCols,
+  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",
+    },
+    columnCount: {
+      control: { type: "range", min: 1, max: 8, step: 1 },
+      description:
+        "Integer → repeat(N, 1fr) equal columns. 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,
+    columnCount: 3,
+    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 columnCount 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),
+    columnCount: args.columnCount as number,
+    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,
+    columnCount: 3,
+  },
+  render: (args) => ({
+    components: { LayoutGridByCols },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByCols v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByCols>
+    `,
+  }),
+};
+
+/** Single column below a breakpoint — collapses to stacked layout on narrow containers. */
+export const SingleColBelow: Story = {
+  name: "Single Column Below 600px",
+  args: {
+    itemCount: 6,
+    columnCount: 3,
+    singleColBelow: "600px",
+  },
+  render: (args) => ({
+    components: { LayoutGridByCols },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByCols v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByCols>
+    `,
+  }),
+  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,
+    columnCount: 3,
+    gap: "3.2rem",
+  },
+  render: (args) => ({
+    components: { LayoutGridByCols },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByCols v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByCols>
+    `,
+  }),
+};
+
+/** 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,
+    columnCount: 3,
+  },
+  render: (args) => ({
+    components: { LayoutGridByCols },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `
+      <LayoutGridByCols v-bind="storyArgs">
+        ${allSlots}
+      </LayoutGridByCols>
+    `,
+  }),
+  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: { LayoutGridByCols },
+    setup() {
+      return { storyArgs: toStoryArgs(args) };
+    },
+    template: `<LayoutGridByCols v-bind="storyArgs" />`,
+  }),
+};

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

@@ -0,0 +1,174 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import LayoutGridByCols from "../LayoutGridByCols.vue";
+
+describe("LayoutGridByCols", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (div, 2 items)", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      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(LayoutGridByCols, {
+      props: { tag: "section", label: "Feature grid" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { styleClassPassthrough: ["custom-class", "another-class"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Tag rendering ───────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders as <section> when tag='section'", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  // ─── Base class ──────────────────────────────────────────────────────────
+
+  it("always has the layout-grid class", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols);
+    expect(wrapper.classes()).toContain("layout-grid-by-cols");
+  });
+
+  // ─── Inner div ───────────────────────────────────────────────────────────
+
+  it("renders a .layout-grid-inner div", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols);
+    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(LayoutGridByCols, {
+      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(LayoutGridByCols, {
+      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(LayoutGridByCols, {
+      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(LayoutGridByCols);
+    expect(wrapper.find(".layout-grid-inner").text().trim()).toBe("");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { styleClassPassthrough: "my-class" },
+    });
+    expect(wrapper.classes()).toContain("my-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  // ─── columnCount prop ─────────────────────────────────────────────────────
+
+  it("accepts columnCount without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { columnCount: 3 },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Other prop acceptance ────────────────────────────────────────────────
+
+  it("accepts gap prop without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { gap: "2rem" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("accepts singleColBelow prop without error", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: { singleColBelow: "600px" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Combined ────────────────────────────────────────────────────────────
+
+  it("renders correctly with all props and slots combined", async () => {
+    const wrapper = await mountSuspended(LayoutGridByCols, {
+      props: {
+        tag: "section",
+        label: "Services",
+        columnCount: 3,
+        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-cols/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-cols/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-cols">
+  <!--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-cols" 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-cols 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-cols 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>"
+`;