srcdev-nuxt-components 9.0.15 → 9.0.17

package/app/components/01.atoms/card/tests/CardCore.spec.ts

@@ -0,0 +1,207 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import CardCore from "../CardCore.vue";
+
+describe("CardCore", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>Title</h2>",
+        body: "<p>Content</p>",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (article, subtle, dividers)", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { tag: "article", variant: "subtle", hasDividers: true },
+      slots: {
+        header: "<h2>Title</h2>",
+        body: "<p>Content</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: ["featured-card"] },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Tag rendering ───────────────────────────────────────────────────────
+
+  it("renders as <div> by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it.each([
+    ["section", "SECTION"],
+    ["article", "ARTICLE"],
+    ["aside", "ASIDE"],
+    ["main", "MAIN"],
+    ["nav", "NAV"],
+  ] as const)("renders as <%s> when tag='%s'", async (tag, expected) => {
+    const wrapper = await mountSuspended(CardCore, { props: { tag } });
+    expect(wrapper.element.tagName).toBe(expected);
+  });
+
+  // ─── Base class ──────────────────────────────────────────────────────────
+
+  it("always has the card-core class", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).toContain("card-core");
+  });
+
+  // ─── Variant ─────────────────────────────────────────────────────────────
+
+  it("applies solid class by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).toContain("solid");
+  });
+
+  it.each(["solid", "subtle", "soft", "outline"] as const)(
+    "applies %s variant class",
+    async (variant) => {
+      const wrapper = await mountSuspended(CardCore, { props: { variant } });
+      expect(wrapper.classes()).toContain(variant);
+    }
+  );
+
+  // ─── hasDividers ─────────────────────────────────────────────────────────
+
+  it("does not have has-dividers class by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).not.toContain("has-dividers");
+  });
+
+  it("applies has-dividers class when hasDividers=true", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { hasDividers: true },
+    });
+    expect(wrapper.classes()).toContain("has-dividers");
+  });
+
+  // ─── noOutline ───────────────────────────────────────────────────────────
+
+  it("does not have no-outline class by default", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.classes()).not.toContain("no-outline");
+  });
+
+  it("applies no-outline class when noOutline=true", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { noOutline: true },
+    });
+    expect(wrapper.classes()).toContain("no-outline");
+  });
+
+  // ─── Dynamic slots ───────────────────────────────────────────────────────
+
+  it("renders a .card-row wrapper for each slot", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>Header</h2>",
+        body: "<p>Body</p>",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.findAll(".card-row")).toHaveLength(3);
+  });
+
+  it("applies card-row-{name} class derived from the slot name", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>Header</h2>",
+        media: "<img src='x.jpg' alt='' />",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.find(".card-row-header").exists()).toBe(true);
+    expect(wrapper.find(".card-row-media").exists()).toBe(true);
+    expect(wrapper.find(".card-row-footer").exists()).toBe(true);
+  });
+
+  it("renders slot content inside the correct card-row", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      slots: {
+        header: "<h2>My Title</h2>",
+        body: "<p>My Body</p>",
+      },
+    });
+    expect(wrapper.find(".card-row-header").text()).toBe("My Title");
+    expect(wrapper.find(".card-row-body").text()).toBe("My Body");
+  });
+
+  it("renders no card-row elements when no slots are provided", async () => {
+    const wrapper = await mountSuspended(CardCore);
+    expect(wrapper.findAll(".card-row")).toHaveLength(0);
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: "featured-card" },
+    });
+    expect(wrapper.classes()).toContain("featured-card");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: ["featured-card", "highlight"] },
+    });
+    expect(wrapper.classes()).toContain("featured-card");
+    expect(wrapper.classes()).toContain("highlight");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+
+  // ─── Combined ────────────────────────────────────────────────────────────
+
+  it("renders correctly with all props and slots combined", async () => {
+    const wrapper = await mountSuspended(CardCore, {
+      props: {
+        tag: "article",
+        variant: "soft",
+        hasDividers: true,
+        noOutline: true,
+        styleClassPassthrough: ["featured-card"],
+      },
+      slots: {
+        header: "<h2>Title</h2>",
+        media: "<img src='x.jpg' alt='' />",
+        body: "<p>Content</p>",
+        footer: "<p>Footer</p>",
+      },
+    });
+    expect(wrapper.element.tagName).toBe("ARTICLE");
+    expect(wrapper.classes()).toContain("soft");
+    expect(wrapper.classes()).toContain("has-dividers");
+    expect(wrapper.classes()).toContain("no-outline");
+    expect(wrapper.classes()).toContain("featured-card");
+    expect(wrapper.findAll(".card-row")).toHaveLength(4);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/app/components/01.atoms/card/tests/__snapshots__/CardCore.spec.ts.snap

@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CardCore > renders correct HTML structure (article, subtle, dividers) 1`] = `
+"<article class="card-core subtle has-dividers">
+  <div class="card-row card-row-header">
+    <h2>Title</h2>
+  </div>
+  <div class="card-row card-row-body">
+    <p>Content</p>
+  </div>
+</article>"
+`;
+
+exports[`CardCore > renders correct HTML structure (default) 1`] = `
+"<div class="card-core solid">
+  <div class="card-row card-row-header">
+    <h2>Title</h2>
+  </div>
+  <div class="card-row card-row-body">
+    <p>Content</p>
+  </div>
+  <div class="card-row card-row-footer">
+    <p>Footer</p>
+  </div>
+</div>"
+`;
+
+exports[`CardCore > renders correct HTML structure with styleClassPassthrough 1`] = `"<div class="card-core solid featured-card"></div>"`;
+
+exports[`CardCore > renders correctly with all props and slots combined 1`] = `
+"<article class="card-core soft featured-card has-dividers no-outline">
+  <div class="card-row card-row-header">
+    <h2>Title</h2>
+  </div>
+  <div class="card-row card-row-media"><img src="x.jpg" alt=""></div>
+  <div class="card-row card-row-body">
+    <p>Content</p>
+  </div>
+  <div class="card-row card-row-footer">
+    <p>Footer</p>
+  </div>
+</article>"
+`;

package/app/components/01.atoms/content-wrappers/content-columns-2/ContentColumns2.vue

@@ -0,0 +1,51 @@
+<template>
+  <component :is="tag" class="content-columns-2" :class="[elementClasses]" :data-testid="dataTestid">
+    <div class="inner">
+      <div v-if="hasSlot1" class="col-1">
+        <slot name="slot1"></slot>
+      </div>
+      <div v-if="hasSlot2" class="col-2">
+        <slot name="slot2"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  dataTestid?: string;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  dataTestid: "content-columns-2",
+  styleClassPassthrough: () => [],
+});
+
+const slots = useSlots();
+const hasSlot1 = computed(() => !!slots.slot1);
+const hasSlot2 = computed(() => !!slots.slot2);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .content-columns-2 {
+    container-type: inline-size;
+    container-name: contentColumns2;
+
+    .inner {
+      display: grid;
+      grid-auto-flow: row;
+      gap: 1.6rem;
+
+      @container contentColumns2 (width >= 768px) {
+        gap: 1.6rem;
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/content-wrappers/content-columns-2/stories/ContentColumns2.stories.ts

@@ -0,0 +1,110 @@
+import ContentColumns2 from "../ContentColumns2.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ContentColumns2> = {
+  title: "Atoms/Content Wrappers/ContentColumns2",
+  component: ContentColumns2,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "Semantic HTML tag for the root element",
+      table: { category: "Semantic" },
+    },
+    dataTestid: {
+      control: { type: "text" },
+      description: "Test ID for the root element",
+      table: { category: "Testing" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A responsive two-column layout using CSS Container Queries. Stacks to a single column below 768px container width, switching to equal-width columns above that threshold.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContentColumns2>;
+
+const placeholder = (label: string, bg: string, color: string) =>
+  `<div style="padding: 2.4rem; background: ${bg}; border-radius: 0.8rem; color: ${color}; font-family: sans-serif;">
+    <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;">Placeholder content for this column slot.</p>
+  </div>`;
+
+export const Default: Story = {
+  args: {
+    tag: "div",
+    dataTestid: "content-columns-2",
+  },
+  render: (args) => ({
+    components: { ContentColumns2 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContentColumns2 v-bind="args">
+        <template #slot1>${placeholder("Column 1", "#dbeafe", "#1e40af")}</template>
+        <template #slot2>${placeholder("Column 2", "#dcfce7", "#166534")}</template>
+      </ContentColumns2>
+    `,
+  }),
+};
+
+export const SingleColumn: Story = {
+  args: {
+    tag: "div",
+    dataTestid: "content-columns-2",
+  },
+  render: (args) => ({
+    components: { ContentColumns2 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContentColumns2 v-bind="args">
+        <template #slot1>${placeholder("Column 1 only", "#fef3c7", "#92400e")}</template>
+      </ContentColumns2>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "When only one slot is provided, that column renders alone with no empty space reserved for the other.",
+      },
+    },
+  },
+};
+
+export const SemanticSection: Story = {
+  args: {
+    tag: "section",
+    dataTestid: "content-columns-2",
+  },
+  render: (args) => ({
+    components: { ContentColumns2 },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ContentColumns2 v-bind="args">
+        <template #slot1>${placeholder("Left", "#ede9fe", "#5b21b6")}</template>
+        <template #slot2>${placeholder("Right", "#fce7f3", "#9d174d")}</template>
+      </ContentColumns2>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Rendered as a <code>&lt;section&gt;</code> for thematic content groupings.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/content-wrappers/content-columns-2/tests/ContentColumns2.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ContentColumns2 from "../ContentColumns2.vue";
+
+describe("ContentColumns2", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ContentColumns2);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      slots: {
+        slot1: "<p>Column 1</p>",
+        slot2: "<p>Column 2</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("applies the default data-testid", async () => {
+    const wrapper = await mountSuspended(ContentColumns2);
+    expect(wrapper.find("[data-testid='content-columns-2']").exists()).toBe(true);
+  });
+
+  it("applies a custom data-testid", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      props: { dataTestid: "my-layout" },
+    });
+    expect(wrapper.find("[data-testid='my-layout']").exists()).toBe(true);
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      props: { styleClassPassthrough: ["custom-class", "another-class"] },
+    });
+    const el = wrapper.find(".content-columns-2");
+    expect(el.classes()).toContain("custom-class");
+    expect(el.classes()).toContain("another-class");
+  });
+
+  it("applies styleClassPassthrough as a string", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      props: { styleClassPassthrough: "string-class" },
+    });
+    expect(wrapper.find(".content-columns-2").classes()).toContain("string-class");
+  });
+
+  it("renders slot1 content when slot1 is provided", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      slots: { slot1: "<p>Left content</p>" },
+    });
+    expect(wrapper.find(".col-1").exists()).toBe(true);
+    expect(wrapper.find(".col-1").text()).toBe("Left content");
+  });
+
+  it("renders slot2 content when slot2 is provided", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      slots: { slot2: "<p>Right content</p>" },
+    });
+    expect(wrapper.find(".col-2").exists()).toBe(true);
+    expect(wrapper.find(".col-2").text()).toBe("Right content");
+  });
+
+  it("does not render col-1 when slot1 is not provided", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      slots: { slot2: "<p>Right only</p>" },
+    });
+    expect(wrapper.find(".col-1").exists()).toBe(false);
+  });
+
+  it("does not render col-2 when slot2 is not provided", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      slots: { slot1: "<p>Left only</p>" },
+    });
+    expect(wrapper.find(".col-2").exists()).toBe(false);
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ContentColumns2);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it.each(["section", "article", "main"] as const)("renders as <%s> when tag prop is set", async (tag) => {
+    const wrapper = await mountSuspended(ContentColumns2, { props: { tag } });
+    expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+  });
+
+  it("renders neither column when no slots are provided", async () => {
+    const wrapper = await mountSuspended(ContentColumns2);
+    expect(wrapper.find(".col-1").exists()).toBe(false);
+    expect(wrapper.find(".col-2").exists()).toBe(false);
+  });
+
+  it("renders both columns when both slots are provided", async () => {
+    const wrapper = await mountSuspended(ContentColumns2, {
+      slots: {
+        slot1: "<p>Left</p>",
+        slot2: "<p>Right</p>",
+      },
+    });
+    expect(wrapper.find(".col-1").exists()).toBe(true);
+    expect(wrapper.find(".col-2").exists()).toBe(true);
+  });
+});

package/app/components/01.atoms/content-wrappers/content-columns-2/tests/__snapshots__/ContentColumns2.spec.ts.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ContentColumns2 > renders correct HTML structure 1`] = `
+"<div class="content-columns-2" data-testid="content-columns-2">
+  <div class="inner">
+    <div class="col-1">
+      <p>Column 1</p>
+    </div>
+    <div class="col-2">
+      <p>Column 2</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/01.atoms/content-wrappers/content-width/ContentWidth.vue

@@ -0,0 +1,88 @@
+<template>
+  <component
+    :is="tag"
+    :id="id"
+    class="content-width-wrapper"
+    :class="elementClasses"
+    :tab-index="isLandmark ? 0 : null"
+    :aria-label="isLandmark ? 'Content Width Landmark' : undefined"
+  >
+    <div class="content-width" :class="justifyContent">
+      <div class="content-width-inner">
+        <slot name="default"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav";
+  label?: string;
+  isLandmark?: boolean;
+  justifyContent?: "start" | "center" | "end";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  label: "",
+  isLandmark: false,
+  justifyContent: "center",
+  styleClassPassthrough: () => [],
+});
+
+const id = useId();
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .content-width-wrapper {
+    container-type: inline-size;
+    container-name: content-width;
+
+    .content-width {
+      --gutter: 16px;
+      --content-max-width: auto;
+      --justify-content: initial;
+
+      display: grid;
+
+      grid-template-columns:
+        [gutter-start]
+        var(--gutter)
+        [content-start]
+        var(--content-max-width)
+        [content-end]
+        var(--gutter)
+        [gutter-end];
+
+      justify-content: var(--justify-content);
+      box-sizing: border-box;
+
+      @container content-width (width >= 1092px) {
+        --gutter: 0;
+        --content-max-width: 1064px;
+        --justify-content: center;
+
+        &.start {
+          --gutter: 16px;
+          --justify-content: start;
+        }
+
+        &.end {
+          --gutter: 16px;
+          --justify-content: end;
+        }
+      }
+
+      .content-width-inner {
+        grid-column: content;
+        background-color: var(--page-bg);
+      }
+    }
+  }
+}
+</style>