srcdev-nuxt-components 9.6.18 → 9.6.19

package/app/components/02.molecules/expandable/accordian/stories/AccordianCore.stories.ts

@@ -1,272 +0,0 @@
-import AccordianCore from "../AccordianCore.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-
-const meta: Meta<typeof AccordianCore> = {
-  title: "Molecules/Expandable/Accordian Core",
-  component: AccordianCore,
-  argTypes: {
-    name: {
-      control: { type: "text" },
-      description:
-        "Shared name attribute passed to each ExpandingPanel — used to group panels so only one can be open at a time (native <details> behaviour)",
-    },
-    itemCount: {
-      control: { type: "number", min: 0, step: 1 },
-      description: "Number of accordion panels to render",
-    },
-    animationDuration: {
-      control: { type: "number", min: 0, step: 50 },
-      description: "Expand/collapse animation duration in milliseconds",
-    },
-    variant: {
-      control: { type: "radio" },
-      options: ["modern", "classic"],
-      description:
-        "Which panel implementation to render: 'modern' (ExpandingPanel, ::details-content based) or " +
-        "'classic' (ExpandingPanelClassic, grid-template-rows based) — use classic when the open/close " +
-        "animation must run identically in every browser today",
-    },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional CSS classes applied to the root element",
-    },
-  },
-  args: {
-    name: undefined,
-    itemCount: 3,
-    animationDuration: 300,
-    variant: "modern",
-    styleClassPassthrough: [],
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AccordianCore>;
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-/** Builds a slot object for N items with generic placeholder content. */
-function buildGenericSlots(count: number): Record<string, string> {
-  const slots: Record<string, string> = {};
-  for (let i = 0; i < count; i++) {
-    slots[`accordian-${i}-summary`] = `<span>Panel ${i + 1} — Summary</span>`;
-    slots[`accordian-${i}-icon`] = `<span>▸</span>`;
-    slots[`accordian-${i}-content`] =
-      `<p style="margin:0;padding:0.5rem 0">This is the content for panel ${i + 1}. ` +
-      `Add whatever you need here — text, images, components.</p>`;
-  }
-  return slots;
-}
-
-// ─── Stories ─────────────────────────────────────────────────────────────────
-
-export const Default: Story = {
-  args: {
-    itemCount: 3,
-    animationDuration: 300,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args, slots: buildGenericSlots(args.itemCount ?? 3) };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template v-for="(content, name) in slots" #[name] :key="name">
-          <span v-html="content" />
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const ClassicVariant: Story = {
-  name: "Classic Variant",
-  args: {
-    itemCount: 3,
-    animationDuration: 300,
-    variant: "classic",
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args, slots: buildGenericSlots(args.itemCount ?? 3) };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template v-for="(content, name) in slots" #[name] :key="name">
-          <span v-html="content" />
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const SinglePanel: Story = {
-  args: {
-    itemCount: 1,
-    animationDuration: 300,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template #accordian-0-summary>
-          <span>The only panel</span>
-        </template>
-        <template #accordian-0-content>
-          <p style="margin:0;padding:0.5rem 0">Content for the single panel.</p>
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-/** Panels share a name so the browser enforces only one open at a time. */
-export const ExclusiveOpen: Story = {
-  name: "Exclusive Open (name grouped)",
-  args: {
-    itemCount: 4,
-    name: "exclusive-group",
-    animationDuration: 300,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args, slots: buildGenericSlots(args.itemCount ?? 4) };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template v-for="(content, name) in slots" #[name] :key="name">
-          <span v-html="content" />
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const SlowAnimation: Story = {
-  name: "Slow Animation (800ms)",
-  args: {
-    itemCount: 3,
-    animationDuration: 800,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args, slots: buildGenericSlots(args.itemCount ?? 3) };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template v-for="(content, name) in slots" #[name] :key="name">
-          <span v-html="content" />
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const NoAnimation: Story = {
-  name: "No Animation (0ms)",
-  args: {
-    itemCount: 3,
-    animationDuration: 0,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args, slots: buildGenericSlots(args.itemCount ?? 3) };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template v-for="(content, name) in slots" #[name] :key="name">
-          <span v-html="content" />
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const WithStyleClassPassthrough: Story = {
-  name: "With styleClassPassthrough",
-  args: {
-    itemCount: 2,
-    styleClassPassthrough: ["custom-class", "another-class"],
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args, slots: buildGenericSlots(args.itemCount ?? 2) };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template v-for="(content, name) in slots" #[name] :key="name">
-          <span v-html="content" />
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const RichContent: Story = {
-  name: "Rich Slot Content",
-  args: {
-    itemCount: 3,
-    animationDuration: 300,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args };
-    },
-    template: `
-      <AccordianCore v-bind="args">
-        <template #accordian-0-summary>
-          <strong>Delivery &amp; Returns</strong>
-        </template>
-        <template #accordian-0-content>
-          <p style="margin:0;padding:0.5rem 0">
-            Free standard delivery on orders over £50. Returns accepted within 30 days.
-          </p>
-        </template>
-
-        <template #accordian-1-summary>
-          <strong>Materials &amp; Care</strong>
-        </template>
-        <template #accordian-1-content>
-          <ul style="margin:0;padding:0.5rem 0 0.5rem 1.2rem">
-            <li>100% organic cotton</li>
-            <li>Machine wash at 30°C</li>
-            <li>Do not tumble dry</li>
-          </ul>
-        </template>
-
-        <template #accordian-2-summary>
-          <strong>Sizing Guide</strong>
-        </template>
-        <template #accordian-2-content>
-          <p style="margin:0;padding:0.5rem 0">
-            Our pieces run true to size. If you're between sizes, we recommend sizing up.
-          </p>
-        </template>
-      </AccordianCore>
-    `,
-  }),
-};
-
-export const Empty: Story = {
-  name: "Zero Items",
-  args: {
-    itemCount: 0,
-  },
-  render: (args) => ({
-    components: { AccordianCore },
-    setup() {
-      return { args };
-    },
-    template: `<AccordianCore v-bind="args" />`,
-  }),
-};

package/app/components/02.molecules/expandable/accordian/tests/AccordianCore.spec.ts

@@ -1,257 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import AccordianCore from "../AccordianCore.vue";
-import type { ComponentPublicInstance } from "vue";
-
-interface AccordianCoreInstance extends ComponentPublicInstance {
-  animationDurationStr: string;
-  name: string | undefined;
-  itemCount: number;
-  animationDuration: number;
-  variant: "modern" | "classic";
-  styleClassPassthrough: string | string[];
-}
-
-describe("AccordianCore", () => {
-  // ─── Mount ───────────────────────────────────────────────────────────────
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 3 },
-    });
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  // ─── Snapshots ───────────────────────────────────────────────────────────
-
-  it("renders correct HTML structure with default props", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2 },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders correct HTML structure with all props set", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: {
-        itemCount: 3,
-        name: "snapshot-accordian",
-        animationDuration: 500,
-        styleClassPassthrough: ["extra-class"],
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders correct HTML structure with populated slots", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2 },
-      slots: {
-        "accordian-0-summary": "<span>Summary 0</span>",
-        "accordian-0-icon": "<span>Icon 0</span>",
-        "accordian-0-content": "<span>Content 0</span>",
-        "accordian-1-summary": "<span>Summary 1</span>",
-        "accordian-1-icon": "<span>Icon 1</span>",
-        "accordian-1-content": "<span>Content 1</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("renders correctly with zero items", async () => {
-    const wrapper = await mountSuspended(AccordianCore);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  // ─── Root element ─────────────────────────────────────────────────────────
-
-  it("renders the root .display-accordian element", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 1 },
-    });
-    expect(wrapper.find(".display-accordian").exists()).toBe(true);
-  });
-
-  // ─── Item count ───────────────────────────────────────────────────────────
-
-  it("renders the correct number of panel components", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 4 },
-    });
-    expect(wrapper.findAll(".accordian-item")).toHaveLength(4);
-  });
-
-  it("renders no ExpandingPanel components when itemCount is 0", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 0 },
-    });
-    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
-  });
-
-  it("renders no ExpandingPanel components when itemCount is omitted", async () => {
-    const wrapper = await mountSuspended(AccordianCore);
-    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
-  });
-
-  // ─── variant ──────────────────────────────────────────────────────────────
-
-  it("renders ExpandingPanelClassic by default (variant: classic)", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2 },
-    });
-    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(2);
-    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
-  });
-
-  it("renders ExpandingPanelClassic when variant is classic (explicit)", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2, variant: "classic" },
-    });
-    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(2);
-    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
-  });
-
-  it("renders ExpandingPanel when variant is modern", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2, variant: "modern" },
-    });
-    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(2);
-    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(0);
-  });
-
-  it("forwards props identically to ExpandingPanelClassic when variant is classic", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2, name: "classic-accordian", animationDuration: 500, variant: "classic" },
-    });
-    wrapper.findAllComponents({ name: "ExpandingPanelClassic" }).forEach((panel) => {
-      expect(panel.props("name")).toBe("classic-accordian");
-      expect(panel.props("animationDuration")).toBe(500);
-      expect(panel.props("styleClassPassthrough")).toEqual(["accordian-item"]);
-    });
-  });
-
-  // ─── Props forwarded to ExpandingPanel (variant: modern) ─────────────────
-
-  it("forwards animationDuration to every ExpandingPanel", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 3, animationDuration: 500, variant: "modern" },
-    });
-    wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
-      expect(panel.props("animationDuration")).toBe(500);
-    });
-  });
-
-  it("forwards name to every ExpandingPanel", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2, name: "test-accordian", variant: "modern" },
-    });
-    wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
-      expect(panel.props("name")).toBe("test-accordian");
-    });
-  });
-
-  it("passes accordian-item styleClassPassthrough to every ExpandingPanel", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2, variant: "modern" },
-    });
-    wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
-      expect(panel.props("styleClassPassthrough")).toEqual(["accordian-item"]);
-    });
-  });
-
-  // ─── Default prop values ──────────────────────────────────────────────────
-
-  it("defaults animationDuration to 300 on ExpandingPanelClassic when not provided", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 1 },
-    });
-    const panel = wrapper.findComponent({ name: "ExpandingPanelClassic" });
-    expect(panel.props("animationDuration")).toBe(300);
-  });
-
-  it("uses correct default prop values on the component instance", async () => {
-    const wrapper = await mountSuspended(AccordianCore);
-    const vm = wrapper.vm as AccordianCoreInstance;
-    expect(vm.name).toBeUndefined();
-    expect(vm.itemCount).toBe(0);
-    expect(vm.animationDuration).toBe(300);
-    expect(vm.variant).toBe("classic");
-    expect(vm.styleClassPassthrough).toEqual([]);
-  });
-
-  // ─── Computed ─────────────────────────────────────────────────────────────
-
-  it("computes animationDurationStr as '<value>ms'", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 1, animationDuration: 750 },
-    });
-    const vm = wrapper.vm as AccordianCoreInstance;
-    expect(vm.animationDurationStr).toBe("750ms");
-  });
-
-  it("computes animationDurationStr using the default duration", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 1 },
-    });
-    const vm = wrapper.vm as AccordianCoreInstance;
-    expect(vm.animationDurationStr).toBe("300ms");
-  });
-
-  // ─── styleClassPassthrough ────────────────────────────────────────────────
-
-  it("applies a styleClassPassthrough array to the root element", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: {
-        itemCount: 1,
-        styleClassPassthrough: ["custom-class", "another-class"],
-      },
-    });
-    const root = wrapper.find(".display-accordian");
-    expect(root.classes()).toContain("custom-class");
-    expect(root.classes()).toContain("another-class");
-  });
-
-  it("applies a single styleClassPassthrough string to the root element", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 1, styleClassPassthrough: "single-class" },
-    });
-    expect(wrapper.find(".display-accordian").classes()).toContain("single-class");
-  });
-
-  // ─── Slots ────────────────────────────────────────────────────────────────
-
-  it("renders summary, icon, and content slot content for each item", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2 },
-      slots: {
-        "accordian-0-summary": '<div data-testid="summary-0">Summary 0</div>',
-        "accordian-0-icon": '<div data-testid="icon-0">Icon 0</div>',
-        "accordian-0-content": '<div data-testid="content-0">Content 0</div>',
-        "accordian-1-summary": '<div data-testid="summary-1">Summary 1</div>',
-        "accordian-1-icon": '<div data-testid="icon-1">Icon 1</div>',
-        "accordian-1-content": '<div data-testid="content-1">Content 1</div>',
-      },
-    });
-
-    for (let i = 0; i < 2; i++) {
-      expect(wrapper.find(`[data-testid="summary-${i}"]`).text()).toBe(`Summary ${i}`);
-      expect(wrapper.find(`[data-testid="icon-${i}"]`).text()).toBe(`Icon ${i}`);
-      expect(wrapper.find(`[data-testid="content-${i}"]`).text()).toBe(`Content ${i}`);
-    }
-  });
-
-  it("renders slot content in the correct panel (slots are not mixed up)", async () => {
-    const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 3 },
-      slots: {
-        "accordian-0-summary": "<span>Alpha</span>",
-        "accordian-1-summary": "<span>Beta</span>",
-        "accordian-2-summary": "<span>Gamma</span>",
-      },
-    });
-    const panels = wrapper.findAllComponents({ name: "ExpandingPanelClassic" });
-    expect(panels[0]?.text()).toContain("Alpha");
-    expect(panels[1]?.text()).toContain("Beta");
-    expect(panels[2]?.text()).toContain("Gamma");
-  });
-});

package/app/components/02.molecules/expandable/accordian/tests/__snapshots__/AccordianCore.spec.ts.snap

@@ -1,95 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AccordianCore > renders correct HTML structure with all props set 1`] = `
-"<div class="display-accordian extra-class">
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-classic-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
-        <div class="label-wrapper"></div>
-        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
-      </summary>
-    </details>
-    <div id="id-snapshot-accordian-content" class="expanding-panel-classic-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
-      <div class="inner"></div>
-    </div>
-  </div>
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-classic-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
-        <div class="label-wrapper"></div>
-        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
-      </summary>
-    </details>
-    <div id="id-snapshot-accordian-content" class="expanding-panel-classic-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
-      <div class="inner"></div>
-    </div>
-  </div>
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-classic-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
-        <div class="label-wrapper"></div>
-        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
-      </summary>
-    </details>
-    <div id="id-snapshot-accordian-content" class="expanding-panel-classic-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
-      <div class="inner"></div>
-    </div>
-  </div>
-</div>"
-`;
-
-exports[`AccordianCore > renders correct HTML structure with default props 1`] = `
-"<div class="display-accordian">
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="v-0-0-0">
-      <summary id="id-v-0-0-0-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
-        <div class="label-wrapper"></div>
-        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
-      </summary>
-    </details>
-    <div id="id-v-0-0-0-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
-      <div class="inner"></div>
-    </div>
-  </div>
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="v-0-0-1">
-      <summary id="id-v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
-        <div class="label-wrapper"></div>
-        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
-      </summary>
-    </details>
-    <div id="id-v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-1-trigger" role="region">
-      <div class="inner"></div>
-    </div>
-  </div>
-</div>"
-`;
-
-exports[`AccordianCore > renders correct HTML structure with populated slots 1`] = `
-"<div class="display-accordian">
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="v-0-0-0">
-      <summary id="id-v-0-0-0-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
-        <div class="label-wrapper"><span>Summary 0</span></div>
-        <div class="icon-wrapper"><span>Icon 0</span></div>
-      </summary>
-    </details>
-    <div id="id-v-0-0-0-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
-      <div class="inner"><span>Content 0</span></div>
-    </div>
-  </div>
-  <div class="expanding-panel-classic accordian-item" icon-size="medium">
-    <details class="expanding-panel-classic-details" name="v-0-0-1">
-      <summary id="id-v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
-        <div class="label-wrapper"><span>Summary 1</span></div>
-        <div class="icon-wrapper"><span>Icon 1</span></div>
-      </summary>
-    </details>
-    <div id="id-v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-1-trigger" role="region">
-      <div class="inner"><span>Content 1</span></div>
-    </div>
-  </div>
-</div>"
-`;
-
-exports[`AccordianCore > renders correctly with zero items 1`] = `"<div class="display-accordian"></div>"`;