srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/03.organisms/treatment-consultant/stories/TreatmentConsultant.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import TreatmentConsultant from "../TreatmentConsultant.vue";
+
+const meta: Meta<typeof TreatmentConsultant> = {
+  title: "Organisms/TreatmentConsultant",
+  component: TreatmentConsultant,
+  argTypes: {
+    autoAdvance: {
+      control: "boolean",
+      description: "Automatically advance to the next step after selection",
+    },
+    allowMultipleTreatments: {
+      control: "boolean",
+      description: "Allow users to select multiple treatments",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TreatmentConsultant>;
+
+// ─── Stories ─────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  args: {
+    autoAdvance: true,
+    allowMultipleTreatments: true,
+  },
+  render: (args) => ({
+    components: { TreatmentConsultant },
+    setup() {
+      return { args };
+    },
+    template: `
+      <TreatmentConsultant v-bind="args" />
+    `,
+  }),
+};

package/app/components/accordian/AccordianCore.vue

@@ -4,7 +4,7 @@
       v-for="(item, key) in itemCount"
       :key="key"
       :name
-      :animation-duration="300"
+      :animation-duration="animationDuration"
       icon-size="medium"
       :style-class-passthrough="['accordian-item']"
     >
@@ -22,32 +22,37 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  name: {
-    type: String,
-    default: null,
-  },
-  itemCount: {
-    type: Number as PropType<number>,
-    default: 0,
-  },
-  animationDuration: {
-    type: Number,
-    default: 400,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
+interface Props {
+  name?: string;
+  itemCount?: number;
+  animationDuration?: number;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  itemCount: 0,
+  animationDuration: 300,
+  styleClassPassthrough: () => [],
+});
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-const animationDurationStr = computed(() => `${props.animationDuration}ms`)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
 </script>
 
 <style lang="css">
+@layer components {
 .display-accordian {
   max-width: 600px;
   margin: 0 auto;
+
+  .accordian-item {
+    &.expanding-panel {
+      transition:
+        margin-block-end v-bind(animationDurationStr) ease-in-out,
+        border-radius v-bind(animationDurationStr) ease-in-out;
+    }
+  }
+}
 }
 </style>

package/app/components/accordian/stories/AccordianCore.stories.ts

@@ -0,0 +1,241 @@
+import AccordianCore from "../AccordianCore.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof AccordianCore> = {
+  title: "Molecules/Accordian/AccordianCore",
+  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",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    name: undefined,
+    itemCount: 3,
+    animationDuration: 300,
+    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 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/accordian/tests/AccordianCore.spec.ts

@@ -0,0 +1,218 @@
+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;
+  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 ExpandingPanel components", async () => {
+    const wrapper = await mountSuspended(AccordianCore, {
+      props: { itemCount: 4 },
+    });
+    expect(wrapper.findAll(".expanding-panel")).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);
+  });
+
+  // ─── Props forwarded to ExpandingPanel ───────────────────────────────────
+
+  it("forwards animationDuration to every ExpandingPanel", async () => {
+    const wrapper = await mountSuspended(AccordianCore, {
+      props: { itemCount: 3, animationDuration: 500 },
+    });
+    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" },
+    });
+    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 },
+    });
+    wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
+      expect(panel.props("styleClassPassthrough")).toEqual(["accordian-item"]);
+    });
+  });
+
+  // ─── Default prop values ──────────────────────────────────────────────────
+
+  it("defaults animationDuration to 300 on ExpandingPanel when not provided", async () => {
+    const wrapper = await mountSuspended(AccordianCore, {
+      props: { itemCount: 1 },
+    });
+    const panel = wrapper.findComponent({ name: "ExpandingPanel" });
+    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.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: "ExpandingPanel" });
+    expect(panels[0]?.text()).toContain("Alpha");
+    expect(panels[1]?.text()).toContain("Beta");
+    expect(panels[2]?.text()).toContain("Gamma");
+  });
+});

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

@@ -0,0 +1,74 @@
+// 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 accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="snapshot-accordian">
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+    </details>
+    <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
+      <div class="inner"></div>
+    </div>
+  </div>
+  <div class="expanding-panel accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="snapshot-accordian">
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+    </details>
+    <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
+      <div class="inner"></div>
+    </div>
+  </div>
+  <div class="expanding-panel accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="snapshot-accordian">
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+    </details>
+    <div id="id-snapshot-accordian-content" class="expanding-panel-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 accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="v-0-0-0">
+      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+    </details>
+    <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
+      <div class="inner"></div>
+    </div>
+  </div>
+  <div class="expanding-panel accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="v-0-0-1">
+      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+    </details>
+    <div id="id-v-0-0-1-content" class="expanding-panel-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 accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="v-0-0-0">
+      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper"><span>Summary 0</span></span><span class="icon-wrapper"><span>Icon 0</span></span></summary>
+    </details>
+    <div id="id-v-0-0-0-content" class="expanding-panel-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 accordian-item" icon-size="medium">
+    <details class="expanding-panel-details" name="v-0-0-1">
+      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false"><span class="label-wrapper"><span>Summary 1</span></span><span class="icon-wrapper"><span>Icon 1</span></span></summary>
+    </details>
+    <div id="id-v-0-0-1-content" class="expanding-panel-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>"`;