srcdev-nuxt-components 9.4.6 → 9.4.8

package/app/components/01.atoms/pop-over/tests/PopOver.spec.ts

@@ -0,0 +1,195 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import PopOver from "../PopOver.vue";
+
+interface PopOverInstance {
+  popoverId: string;
+  anchorName: string;
+  handleToggle: (event: Event) => void;
+}
+
+const createWrapper = async (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
+  return mountSuspended(PopOver, { props, slots });
+};
+
+describe("PopOver", () => {
+  let wrapper: Awaited<ReturnType<typeof createWrapper>>;
+
+  beforeEach(() => {
+    // Popover API is not implemented in jsdom — define stubs so we can test
+    Object.defineProperty(HTMLElement.prototype, "hidePopover", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(HTMLElement.prototype, "showPopover", {
+      value: vi.fn(),
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["hidePopover"];
+    delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
+  });
+
+  it("mounts without error", async () => {
+    wrapper = await createWrapper();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    wrapper = await createWrapper(
+      {},
+      { trigger: "<span>Open</span>", content: "<p>Details</p>" }
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe("Trigger", () => {
+    it("renders the trigger slot", async () => {
+      wrapper = await createWrapper({}, { trigger: '<span class="slot-trigger">Open</span>' });
+      expect(wrapper.find(".slot-trigger").text()).toBe("Open");
+    });
+
+    it("trigger button has type='button'", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("type")).toBe("button");
+    });
+
+    it("does not set aria-label on the trigger by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets aria-label on the trigger when triggerAriaLabel is given", async () => {
+      wrapper = await createWrapper({ triggerAriaLabel: "Show filters" });
+      expect(wrapper.find(".pop-over-trigger").attributes("aria-label")).toBe("Show filters");
+    });
+
+    it("trigger button popovertarget matches the popover id", async () => {
+      wrapper = await createWrapper();
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      expect(wrapper.find(".pop-over-trigger").attributes("popovertarget")).toBe(vm.popoverId);
+    });
+
+    it("trigger button has popovertargetaction='toggle'", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-trigger").attributes("popovertargetaction")).toBe("toggle");
+    });
+  });
+
+  describe("Popover panel", () => {
+    it("renders the content slot", async () => {
+      wrapper = await createWrapper({}, { content: '<p class="slot-content">Details</p>' });
+      expect(wrapper.find(".pop-over-popover .slot-content").text()).toBe("Details");
+    });
+
+    it("has the popover attribute", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("popover")).toBeDefined();
+    });
+
+    it("does not set aria-label by default", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBeUndefined();
+    });
+
+    it("sets aria-label when popoverAriaLabel is given", async () => {
+      wrapper = await createWrapper({ popoverAriaLabel: "Filter options" });
+      expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBe("Filter options");
+    });
+
+    it("sets data-placement on the root element", async () => {
+      wrapper = await createWrapper({ placement: "top" });
+      expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("top");
+    });
+
+    it("defaults placement to right", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("right");
+    });
+  });
+
+  describe("Close button", () => {
+    it("has a default aria-label", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-close-button").attributes("aria-label")).toBe("Close");
+    });
+
+    it("uses a custom closeButtonAriaLabel", async () => {
+      wrapper = await createWrapper({ closeButtonAriaLabel: "Dismiss" });
+      expect(wrapper.find(".pop-over-close-button").attributes("aria-label")).toBe("Dismiss");
+    });
+
+    it("has popovertargetaction='hide' pointing at the popover", async () => {
+      wrapper = await createWrapper();
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      const closeButton = wrapper.find(".pop-over-close-button");
+      expect(closeButton.attributes("popovertargetaction")).toBe("hide");
+      expect(closeButton.attributes("popovertarget")).toBe(vm.popoverId);
+    });
+  });
+
+  describe("handleToggle focus management", () => {
+    it("focuses the close button when the popover opens", async () => {
+      wrapper = await createWrapper();
+      const closeButtonEl = wrapper.find(".pop-over-close-button").element as HTMLElement;
+      const focusSpy = vi.spyOn(closeButtonEl, "focus");
+
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+
+      expect(focusSpy).toHaveBeenCalledOnce();
+    });
+
+    it("does not move focus when the popover closes", async () => {
+      wrapper = await createWrapper();
+      const closeButtonEl = wrapper.find(".pop-over-close-button").element as HTMLElement;
+      const focusSpy = vi.spyOn(closeButtonEl, "focus");
+
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "closed" }));
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Anchor name", () => {
+    it("sets a unique --_anchor-name on the root element style", async () => {
+      wrapper = await createWrapper();
+      const style = wrapper.find(".pop-over").attributes("style") ?? "";
+      expect(style).toContain("--_anchor-name: --pop-over-anchor-");
+    });
+  });
+
+  describe("styleClassPassthrough", () => {
+    it("applies a string class to the root element", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "custom-pop-over" });
+      expect(wrapper.find(".pop-over").classes()).toContain("custom-pop-over");
+    });
+
+    it("applies an array of classes to the root element", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: ["pop-over-a", "pop-over-b"] });
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over-a");
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over-b");
+    });
+
+    it("root element always has the 'pop-over' class", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "extra-class" });
+      expect(wrapper.find(".pop-over").classes()).toContain("pop-over");
+    });
+
+    it("resets classes when styleClassPassthrough prop changes", async () => {
+      wrapper = await createWrapper({ styleClassPassthrough: "initial-class" });
+      expect(wrapper.find(".pop-over").classes()).toContain("initial-class");
+
+      await wrapper.setProps({ styleClassPassthrough: "updated-class" });
+      expect(wrapper.find(".pop-over").classes()).not.toContain("initial-class");
+      expect(wrapper.find(".pop-over").classes()).toContain("updated-class");
+    });
+  });
+});

package/app/components/01.atoms/pop-over/tests/__snapshots__/PopOver.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PopOver > renders correct HTML structure 1`] = `
+"<div class="pop-over" style="--_anchor-name: --pop-over-anchor-v-0-0;" data-placement="right"><button popovertarget="pop-over-v-0-0" popovertargetaction="toggle" type="button" class="pop-over-trigger"><span>Open</span></button>
+  <div id="pop-over-v-0-0" popover="" class="pop-over-popover"><button popovertarget="pop-over-v-0-0" popovertargetaction="hide" type="button" class="pop-over-close-button" aria-label="Close"><span class="iconify i-lucide:x pop-over-close-button-icon" aria-hidden="true"></span></button>
+    <div class="pop-over-content">
+      <p>Details</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/01.atoms/text-blocks/header-block/CONSUMER-STYLING.md

@@ -0,0 +1,43 @@
+# HeaderBlock — Consumer Styling Guide
+
+## No component-owned CSS tokens
+
+`HeaderBlock` has no `<style>` block of its own. Visual size comes from applying one of six global
+`.page-heading-1`–`.page-heading-6` utility classes (`classLevel` prop), defined in
+`app/assets/styles/setup/05.typography/02.utility-classes/_font-classes-page-heading.css`:
+
+```css
+.page-heading-1 { font-size: var(--step-8); }
+.page-heading-2 { font-size: var(--step-7); }
+/* … down to .page-heading-6 { font-size: var(--step-3); } */
+```
+
+Each size is a fluid type-scale token (`--step-3` through `--step-8`, defined globally, not by
+this component) — override those tokens at a page/section scope to change every `page-heading-*`
+element's size at once, not just this component's.
+
+All six levels also reset `margin-block: 0rem` and `padding-block: 0rem` (instead of relying on the
+browser's own per-level heading margins, which vary by `<h1>`–`<h6>` and would otherwise fight
+`classLevel`/`tagLevel` being independent). This is a deliberate blank slate — add spacing in your
+own CSS rather than expecting a level to come with baked-in margin:
+
+```css
+.my-page .page-heading-1 {
+  margin-block: 2.4rem 1.6rem;
+}
+```
+
+## Overriding one instance
+
+Use `styleClassPassthrough` to add your own class and override `font-size`/`font-weight`/etc. for
+a single `HeaderBlock` instance without touching the shared `.page-heading-*` utility classes:
+
+```vue
+<HeaderBlock :tag-level="2" :class-level="1" style-class-passthrough="hero-title">Big idea</HeaderBlock>
+```
+
+```css
+.hero-title {
+  font-size: 6rem;
+}
+```

package/app/components/01.atoms/text-blocks/header-block/HeaderBlock.vue

@@ -0,0 +1,50 @@
+<template>
+  <component :is="tag" :id :class="[classLevelClass, elementClasses]">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+interface Props {
+  /** Semantic heading level — controls which <h1>-<h6> tag is rendered. */
+  tagLevel?: HeadingLevel | `${HeadingLevel}`;
+  /** Visual size level — controls which `.page-heading-N` utility class is applied. Independent of tagLevel, so a component can be, e.g., a semantic h2 styled at the page-heading-1 size. */
+  classLevel?: HeadingLevel | `${HeadingLevel}`;
+  /** Bind to a wrapping section's aria-labelledby target (e.g. the heading-id slot prop from PageRow/useAriaLabelledById). */
+  id?: string | null;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tagLevel: 1,
+  classLevel: 1,
+  id: null,
+  styleClassPassthrough: () => [],
+});
+
+const validLevels = [1, 2, 3, 4, 5, 6];
+
+const tagLevel = computed(() => {
+  const n = Number(props.tagLevel);
+  return validLevels.includes(n) ? n : 1;
+});
+
+const classLevel = computed(() => {
+  const n = Number(props.classLevel);
+  return validLevels.includes(n) ? n : 1;
+});
+
+const tag = computed(() => `h${tagLevel.value}`);
+const classLevelClass = computed(() => `page-heading-${classLevel.value}`);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  (newVal) => {
+    resetElementClasses(newVal ?? []);
+  }
+);
+</script>

package/app/components/01.atoms/text-blocks/header-block/stories/HeaderBlock.stories.ts

@@ -0,0 +1,111 @@
+import HeaderBlock from "../HeaderBlock.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof HeaderBlock> = {
+  title: "Atoms/Text Blocks/Header Block",
+  component: HeaderBlock,
+  argTypes: {
+    tagLevel: {
+      control: { type: "select" },
+      options: [1, 2, 3, 4, 5, 6],
+      description: "Semantic heading level — which <h1>-<h6> tag is rendered",
+    },
+    classLevel: {
+      control: { type: "select" },
+      options: [1, 2, 3, 4, 5, 6],
+      description: "Visual size level — which .page-heading-N utility class is applied, independent of tagLevel",
+    },
+    id: {
+      control: "text",
+      description: "Bind to a wrapping section's aria-labelledby target (e.g. PageRow's heading-id slot prop)",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional classes applied to the root element",
+    },
+  },
+  args: {
+    tagLevel: 1,
+    classLevel: 1,
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders an <h1>-<h6> tag chosen by tagLevel (document structure/accessibility), styled by the global .page-heading-{classLevel} utility class (visual size) — the two are independent, so a component can be a semantic h2 styled at the page-heading-1 size.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderBlock>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { HeaderBlock },
+    setup() {
+      return { args };
+    },
+    template: `<HeaderBlock v-bind="args">Page title</HeaderBlock>`,
+  }),
+};
+
+export const DecoupledLevels: Story = {
+  name: "Semantic vs Visual Level Decoupled",
+  args: { tagLevel: 2, classLevel: 1 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "tagLevel=2 (renders an <h2>, correct for document structure below the page's real <h1>) but classLevel=1 (styled at the largest page-heading size) — inspect the DOM to confirm the tag is <h2> while it visually reads as the biggest heading on the page.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { HeaderBlock },
+    setup() {
+      return { args };
+    },
+    template: `<HeaderBlock v-bind="args">Section heading, styled big</HeaderBlock>`,
+  }),
+};
+
+export const SectionAriaLabelledby: Story = {
+  name: "Paired with a Section's aria-labelledby",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The id prop lets HeaderBlock be the target of a wrapping landmark's aria-labelledby — pass the same id both places (or, inside this library, the heading-id slot prop that PageRow/other section wrappers expose via useAriaLabelledById).",
+      },
+    },
+  },
+  render: () => ({
+    components: { HeaderBlock },
+    template: `
+      <section aria-labelledby="story-section-heading">
+        <HeaderBlock id="story-section-heading" :tag-level="2" :class-level="2">Section title</HeaderBlock>
+        <p>Section content…</p>
+      </section>
+    `,
+  }),
+};
+
+export const AllSizes: Story = {
+  name: "All classLevel Sizes",
+  render: () => ({
+    components: { HeaderBlock },
+    template: `
+      <div>
+        <HeaderBlock :tag-level="1" :class-level="1">page-heading-1</HeaderBlock>
+        <HeaderBlock :tag-level="2" :class-level="2">page-heading-2</HeaderBlock>
+        <HeaderBlock :tag-level="3" :class-level="3">page-heading-3</HeaderBlock>
+        <HeaderBlock :tag-level="4" :class-level="4">page-heading-4</HeaderBlock>
+        <HeaderBlock :tag-level="5" :class-level="5">page-heading-5</HeaderBlock>
+        <HeaderBlock :tag-level="6" :class-level="6">page-heading-6</HeaderBlock>
+      </div>
+    `,
+  }),
+};

package/app/components/01.atoms/text-blocks/header-block/tests/HeaderBlock.spec.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import HeaderBlock from "../HeaderBlock.vue";
+
+describe("HeaderBlock", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      slots: { default: "Hello World" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      slots: { default: "Default heading" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with all props set", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      props: { tagLevel: 3, classLevel: 5, id: "section-heading", styleClassPassthrough: ["custom-class"] },
+      slots: { default: "Custom heading" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── tagLevel / classLevel ───────────────────────────────────────────────
+
+  it("defaults to an h1 with the page-heading-1 class", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, { slots: { default: "Title" } });
+    expect(wrapper.element.tagName).toBe("H1");
+    expect(wrapper.classes()).toContain("page-heading-1");
+  });
+
+  it("renders the tag matching tagLevel", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      props: { tagLevel: 4 },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.element.tagName).toBe("H4");
+  });
+
+  it("applies the page-heading class matching classLevel, independent of tagLevel", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      props: { tagLevel: 2, classLevel: 6 },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.element.tagName).toBe("H2");
+    expect(wrapper.classes()).toContain("page-heading-6");
+    expect(wrapper.classes()).not.toContain("page-heading-2");
+  });
+
+  it("accepts tagLevel/classLevel as numeric strings", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      props: { tagLevel: "5", classLevel: "2" },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.element.tagName).toBe("H5");
+    expect(wrapper.classes()).toContain("page-heading-2");
+  });
+
+  it("clamps an out-of-range tagLevel to 1", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      // @ts-expect-error deliberately invalid at the type level to test the runtime clamp
+      props: { tagLevel: 9 },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.element.tagName).toBe("H1");
+  });
+
+  it("clamps an out-of-range classLevel to 1", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      // @ts-expect-error deliberately invalid at the type level to test the runtime clamp
+      props: { classLevel: 0 },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.classes()).toContain("page-heading-1");
+  });
+
+  // ─── Slot content ────────────────────────────────────────────────────────
+
+  it("renders slot content", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      slots: { default: "<span class='highlight'>Big</span> idea" },
+    });
+    expect(wrapper.find(".highlight").exists()).toBe(true);
+    expect(wrapper.text()).toContain("idea");
+  });
+
+  // ─── id ──────────────────────────────────────────────────────────────────
+
+  it("does not render an id attribute by default", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, { slots: { default: "Title" } });
+    expect(wrapper.attributes("id")).toBeUndefined();
+  });
+
+  it("renders a given id, for pairing with a wrapping section's aria-labelledby", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      props: { id: "section-heading" },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.attributes("id")).toBe("section-heading");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(HeaderBlock, {
+      props: { styleClassPassthrough: "hero-title" },
+      slots: { default: "Title" },
+    });
+    expect(wrapper.classes()).toContain("hero-title");
+  });
+});

package/app/components/01.atoms/text-blocks/header-block/tests/__snapshots__/HeaderBlock.spec.ts.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeaderBlock > renders correct HTML structure with all props set 1`] = `"<h3 id="section-heading" class="page-heading-5 custom-class">Custom heading</h3>"`;
+
+exports[`HeaderBlock > renders correct HTML structure with default props 1`] = `"<h1 class="page-heading-1">Default heading</h1>"`;

package/app/components/02.molecules/action-menu/stories/ActionMenu.stories.ts

@@ -74,10 +74,16 @@ export const Default: Story = {
   render: (args) => ({
     components: { ActionMenu, ActionMenuItemCore },
     setup() {
-      const { itemCount, ...componentArgs } = args;
+      // `args` is Storybook's own reactive object — read from it directly (`args.x`) inside
+      // these computeds rather than destructuring it into local variables at setup-time, which
+      // would snapshot the values once and stop reflecting later Controls-panel changes.
+      const componentArgs = computed(() => {
+        const { itemCount, ...rest } = args;
+        return rest;
+      });
       const lastAction = ref<string | null>(null);
       const items = computed(() =>
-        actionItems.slice(0, itemCount ?? 5).map((item, i) => ({
+        actionItems.slice(0, args.itemCount ?? 5).map((item, i) => ({
           ...item,
           slotName: `item-${i}`,
         }))

package/app/components/02.molecules/input-copy/InputCopy.vue

@@ -2,8 +2,10 @@
   <div class="input-copy" :class="elementClasses">
     <div class="input-copy__wrapper">
       <input
+        :id="resolvedId"
         type="text"
         class="input-copy__input"
+        :name="name || resolvedId"
         :value="value"
         :aria-label="ariaLabel || label"
         readonly
@@ -26,6 +28,9 @@
 <script setup lang="ts">
 interface Props {
   value: string;
+  /** Defaults to an auto-generated id — pass one explicitly only if something needs to target this input. */
+  id?: string;
+  name?: string;
   label?: string;
   ariaLabel?: string;
   description?: string;
@@ -37,6 +42,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
+  name: undefined,
   label: undefined,
   ariaLabel: undefined,
   description: undefined,
@@ -47,6 +54,13 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// Readonly text inputs still need an id/name to satisfy "a form field element should have an
+// id or name attribute" — auto-generated so every existing call site (none of which pass one)
+// gets a valid, unique id for free. Named resolvedId, not id, so it can't be confused with (or
+// silently shadow) the `id` prop it falls back to.
+const autoId = useId();
+const resolvedId = computed(() => props.id ?? autoId);
+
 const emit = defineEmits<{
   copy: [value: string];
   copied: [value: string];

package/app/components/02.molecules/input-copy/stories/InputCopy.stories.ts

@@ -7,6 +7,11 @@ const meta: Meta<typeof InputCopy> = {
   tags: ["autodocs"],
   argTypes: {
     value: { control: "text" },
+    id: {
+      control: "text",
+      description: "Defaults to an auto-generated id — pass one only if something needs to target this input.",
+    },
+    name: { control: "text", description: "Defaults to the resolved id if not provided." },
     label: { control: "text" },
     description: { control: "text" },
     buttonText: { control: "text" },
@@ -101,6 +106,16 @@ export const NoDescription: Story = {
   },
 };
 
+export const WithExplicitIdAndName: Story = {
+  args: {
+    value: "sk_live_abc123defgh456xyz789uvw",
+    id: "checkout-license-key",
+    name: "licenseKey",
+    label: "License key",
+    description: "Demonstrates passing explicit id/name instead of relying on the auto-generated one.",
+  },
+};
+
 export const LongValue: Story = {
   args: {
     value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.POdHyP_DQkT3WTZhu9qLWSwVe8ZlHfHEPBOzzVI3vFA",

package/app/components/02.molecules/input-copy/tests/InputCopy.spec.ts

@@ -178,4 +178,45 @@ describe("InputCopy", () => {
     expect(wrapper.classes()).toContain("custom-class");
     expect(wrapper.classes()).toContain("another-class");
   });
+
+  it("auto-generates an id and mirrors it as the name when neither is provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    const id = input.attributes("id");
+
+    expect(id).toBeTruthy();
+    expect(input.attributes("name")).toBe(id);
+  });
+
+  it("uses the provided id prop instead of auto-generating one", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        id: "license-key-input",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("id")).toBe("license-key-input");
+    expect(input.attributes("name")).toBe("license-key-input");
+  });
+
+  it("uses the provided name prop instead of falling back to the id", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        id: "license-key-input",
+        name: "licenseKey",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("id")).toBe("license-key-input");
+    expect(input.attributes("name")).toBe("licenseKey");
+  });
 });