srcdev-nuxt-components 9.2.0 → 9.2.2

package/app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts

@@ -127,6 +127,51 @@ describe("BannerVideo", () => {
     expect(play).toHaveBeenCalled();
   });
 
+  // ─── Pause/play toggle (WCAG 2.2.2) ─────────────────────────────────────
+
+  it("renders a pause/play toggle button", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find(".banner-video__toggle").exists()).toBe(true);
+  });
+
+  it("toggle defaults to a 'Pause background video' label once playback starts", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    await wrapper.find("video").trigger("play");
+    expect(wrapper.find(".banner-video__toggle").attributes("aria-label")).toBe("Pause background video");
+  });
+
+  it("toggle reads 'Play background video' before playback has started", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find(".banner-video__toggle").attributes("aria-label")).toBe("Play background video");
+  });
+
+  it("clicking the toggle calls pause() while playing", async () => {
+    const pause = vi.fn();
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const videoElement = wrapper.find("video").element as HTMLVideoElement;
+    videoElement.pause = pause;
+    Object.defineProperty(videoElement, "paused", { value: false, configurable: true });
+    await wrapper.find(".banner-video__toggle").trigger("click");
+    expect(pause).toHaveBeenCalled();
+  });
+
+  it("clicking the toggle calls play() while paused", async () => {
+    const play = vi.fn().mockResolvedValue(undefined);
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const videoElement = wrapper.find("video").element as HTMLVideoElement;
+    videoElement.play = play;
+    Object.defineProperty(videoElement, "paused", { value: true, configurable: true });
+    await wrapper.find(".banner-video__toggle").trigger("click");
+    expect(play).toHaveBeenCalled();
+  });
+
+  it("updates aria-label to 'Play background video' after the video pauses", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    await wrapper.find("video").trigger("play");
+    await wrapper.find("video").trigger("pause");
+    expect(wrapper.find(".banner-video__toggle").attributes("aria-label")).toBe("Play background video");
+  });
+
   // ─── Fallback image ──────────────────────────────────────────────────────
 
   it("renders a NuxtImg fallback element", async () => {
@@ -349,4 +394,54 @@ describe("BannerVideo", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  // ─── Toggle icon ─────────────────────────────────────────────────────────
+
+  it("renders the default play icon before playback starts", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:play");
+  });
+
+  it("renders the default pause icon once playback starts", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    await wrapper.find("video").trigger("play");
+    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:pause");
+  });
+
+  it("renders a custom playIcon", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, playIcon: "mdi:play-circle" },
+    });
+    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:play-circle");
+  });
+
+  it("renders a custom pauseIcon", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, pauseIcon: "mdi:pause-circle" },
+    });
+    await wrapper.find("video").trigger("play");
+    expect(wrapper.find(".banner-video__toggle").html()).toContain("mdi:pause-circle");
+  });
+
+  it("replaces the toggle icon via the toggle-icon slot", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: defaultProps,
+      slots: {
+        "toggle-icon": '<span class="test-custom-icon">custom</span>',
+      },
+    });
+    expect(wrapper.find(".test-custom-icon").exists()).toBe(true);
+  });
+
+  it("passes isPlaying to the toggle-icon slot", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: defaultProps,
+      slots: {
+        "toggle-icon": `<span class="test-is-playing">{{ params.isPlaying }}</span>`,
+      },
+    });
+    expect(wrapper.find(".test-is-playing").text()).toBe("false");
+    await wrapper.find("video").trigger("play");
+    expect(wrapper.find(".test-is-playing").text()).toBe("true");
+  });
 });

package/app/components/01.atoms/banner-video/tests/__snapshots__/BannerVideo.spec.ts.snap

@@ -3,11 +3,11 @@
 exports[`BannerVideo > renders correct HTML structure (all props set) 1`] = `
 "<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
+  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"><button type="button" class="banner-video__toggle" aria-label="Play background video"><span class="iconify i-mdi:play" aria-hidden="true"></span></button></header>"
 `;
 
 exports[`BannerVideo > renders correct HTML structure (default props) 1`] = `
 "<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></div>"
+  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"><button type="button" class="banner-video__toggle" aria-label="Play background video"><span class="iconify i-mdi:play" aria-hidden="true"></span></button></div>"
 `;

package/app/components/02.molecules/input-copy/CONSUMER-STYLING.md

@@ -0,0 +1,143 @@
+# InputCopy — Consumer Styling Guide
+
+## Public token API
+
+All `--input-copy-*` tokens are the stable override surface. Set them at any scope (global, page,
+or instance) without touching the component itself.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-copy-input-bg` | `var(--slate-00)` | Input field background colour |
+| `--input-copy-input-border` | `1px solid var(--slate-03)` | Input field border |
+| `--input-copy-input-border-radius` | `0.4rem` | Input field corner rounding |
+| `--input-copy-input-padding` | `0.8rem 1rem` | Input field padding |
+| `--input-copy-input-text-color` | `#333` | Input text colour |
+| `--input-copy-input-placeholder-color` | `#999` | Placeholder text colour |
+| `--input-copy-input-font-size` | `0.95rem` | Input field font size |
+| `--input-copy-button-bg` | `var(--theme-button-primary-surface)` | Copy button background |
+| `--input-copy-button-bg-hover` | `var(--theme-button-primary-surface-hover)` | Copy button background on hover |
+| `--input-copy-button-text-color` | `var(--theme-button-primary-text)` | Copy button text colour |
+| `--input-copy-button-padding` | `0.8rem 1.2rem` | Copy button padding |
+| `--input-copy-button-border-radius` | `0.4rem` | Copy button corner rounding |
+| `--input-copy-button-gap` | `0.6rem` | Gap between icon and text in button |
+| `--input-copy-description-color` | `#666` | Description text colour |
+| `--input-copy-description-font-size` | `0.85rem` | Description font size |
+| `--input-copy-description-margin` | `0.6rem 0 0 0` | Description margin |
+
+---
+
+## Global theming — app-level CSS file
+
+Create `assets/styles/setup/07.components/input-copy.css` in the consuming app and set tokens on
+`:root`. These values apply to every `InputCopy` instance across the site.
+
+```css
+/* assets/styles/setup/07.components/input-copy.css */
+:root {
+  --input-copy-input-border-radius: 0.6rem;
+  --input-copy-input-padding: 1rem 1.2rem;
+  --input-copy-button-border-radius: 0.6rem;
+  --input-copy-button-gap: 0.8rem;
+  --input-copy-description-color: var(--slate-06);
+}
+```
+
+---
+
+## Per-instance overrides via inline styles
+
+Override tokens directly on a single InputCopy instance:
+
+```vue
+<InputCopy
+  value="sk_live_abc123"
+  label="API key"
+  style="
+    --input-copy-input-border-radius: 0.8rem;
+    --input-copy-button-bg: var(--brand-success);
+  "
+/>
+```
+
+---
+
+## Page-scoped overrides
+
+When input-copy appears in a specific page context (e.g., checkout success page), scope overrides
+under the page wrapper:
+
+```css
+/* In the consuming page's unscoped <style> block */
+.success-page {
+  .input-copy {
+    --input-copy-input-bg: var(--brand-surface-light);
+    --input-copy-input-border: 2px solid var(--brand-primary);
+    --input-copy-button-bg: var(--brand-primary);
+    --input-copy-button-bg-hover: var(--brand-primary-hover);
+  }
+}
+```
+
+---
+
+## License key display pattern
+
+Typical usage on a success page or dashboard to display a license key:
+
+```vue
+<InputCopy
+  :value="licenseKey"
+  label="License key"
+  description="Your license key is ready to use. Copy it and add to your component."
+  buttonText="Copy"
+  copiedText="Copied!"
+  @copied="showFeedback"
+/>
+```
+
+```css
+.success-page {
+  .input-copy {
+    max-width: 500px;
+
+    --input-copy-input-bg: #f9f9f9;
+    --input-copy-input-border: 1px solid var(--slate-02);
+    --input-copy-input-text-color: var(--slate-09);
+  }
+}
+```
+
+---
+
+## Readonly input styling
+
+The input field is always readonly to prevent accidental edits. Style it distinctly if needed:
+
+```css
+.input-copy {
+  .input-copy__input {
+    background-color: var(--slate-00);
+    color: var(--slate-09);
+    cursor: default;
+  }
+}
+```
+
+---
+
+## Button text visibility on small screens
+
+By default, the button text is hidden on screens < 480px. Override for always-visible text:
+
+```css
+.input-copy__button-text {
+  display: inline !important;
+}
+```
+
+Or show only the icon on mobile and text on desktop (default behavior):
+
+```css
+/* Default: button shows only icon on mobile, icon + text on desktop (480px+) */
+/* No override needed; this is the built-in behavior */
+```

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

@@ -0,0 +1,195 @@
+<template>
+  <div class="input-copy" :class="elementClasses">
+    <div class="input-copy__wrapper">
+      <input
+        type="text"
+        class="input-copy__input"
+        :value="value"
+        :aria-label="ariaLabel || label"
+        readonly
+      />
+      <button
+        type="button"
+        class="input-copy__button"
+        :aria-label="`Copy ${ariaLabel || label || 'value'} to clipboard`"
+        :disabled="copied || isDisabled"
+        @click="handleCopy"
+      >
+        <Icon name="lucide:copy" class="input-copy__icon" />
+        <span class="input-copy__button-text">{{ copied ? copiedText : buttonText }}</span>
+      </button>
+    </div>
+    <p v-if="description" class="input-copy__description">{{ description }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  value: string;
+  label?: string;
+  ariaLabel?: string;
+  description?: string;
+  buttonText?: string;
+  copiedText?: string;
+  copiedDuration?: number;
+  isDisabled?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  ariaLabel: undefined,
+  description: undefined,
+  buttonText: "Copy",
+  copiedText: "Copied!",
+  copiedDuration: 2000,
+  isDisabled: false,
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{
+  copy: [value: string];
+  copied: [value: string];
+}>();
+
+const copied = ref(false);
+let copyTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.value);
+    copied.value = true;
+    emit("copy", props.value);
+    emit("copied", props.value);
+
+    if (copyTimeoutId) {
+      clearTimeout(copyTimeoutId);
+    }
+
+    copyTimeoutId = setTimeout(() => {
+      copied.value = false;
+      copyTimeoutId = null;
+    }, props.copiedDuration);
+  } catch (err) {
+    console.error("Failed to copy to clipboard:", err);
+  }
+};
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  },
+);
+
+onUnmounted(() => {
+  if (copyTimeoutId) {
+    clearTimeout(copyTimeoutId);
+  }
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .input-copy {
+    --_input-bg: var(--input-copy-input-bg, var(--slate-00));
+    --_input-border: var(--input-copy-input-border, 1px solid var(--slate-03));
+    --_input-border-radius: var(--input-copy-input-border-radius, 0.4rem);
+    --_input-padding: var(--input-copy-input-padding, 0.8rem 1rem);
+    --_input-text-color: var(--input-copy-input-text-color, #333);
+    --_input-placeholder-color: var(--input-copy-input-placeholder-color, #999);
+    --_input-font-size: var(--input-copy-input-font-size, 0.95rem);
+
+    --_button-bg: var(--input-copy-button-bg, var(--theme-button-primary-surface));
+    --_button-bg-hover: var(--input-copy-button-bg-hover, var(--theme-button-primary-surface-hover));
+    --_button-text-color: var(--input-copy-button-text-color, var(--theme-button-primary-text));
+    --_button-padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
+    --_button-border-radius: var(--input-copy-button-border-radius, 0.4rem);
+    --_button-gap: var(--input-copy-button-gap, 0.6rem);
+
+    --_description-color: var(--input-copy-description-color, #666);
+    --_description-font-size: var(--input-copy-description-font-size, 0.85rem);
+    --_description-margin: var(--input-copy-description-margin, 0.6rem 0 0 0);
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .input-copy__wrapper {
+    display: flex;
+    gap: 0.8rem;
+    align-items: stretch;
+  }
+
+  .input-copy__input {
+    flex: 1;
+    min-width: 0;
+
+    padding: var(--_input-padding);
+    background-color: var(--_input-bg);
+    border: var(--_input-border);
+    border-radius: var(--_input-border-radius);
+    font-size: var(--_input-font-size);
+    color: var(--_input-text-color);
+    font-family: inherit;
+
+    &::placeholder {
+      color: var(--_input-placeholder-color);
+    }
+
+    &:focus {
+      outline: 2px solid var(--_input-border-radius);
+      outline-offset: 2px;
+    }
+  }
+
+  .input-copy__button {
+    display: flex;
+    align-items: center;
+    gap: var(--_button-gap);
+    padding: var(--_button-padding);
+
+    background-color: var(--_button-bg);
+    color: var(--_button-text-color);
+    border: none;
+    border-radius: var(--_button-border-radius);
+    font-size: var(--_input-font-size);
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color 0.2s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--_button-bg-hover);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .input-copy__icon {
+      width: 1.2em;
+      height: 1.2em;
+      flex-shrink: 0;
+    }
+
+    .input-copy__button-text {
+      display: none;
+
+      @media (min-width: 480px) {
+        display: inline;
+      }
+    }
+  }
+
+  .input-copy__description {
+    margin: var(--_description-margin);
+    font-size: var(--_description-font-size);
+    color: var(--_description-color);
+  }
+}
+</style>

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

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCopy from "../InputCopy.vue";
+
+const meta: Meta<typeof InputCopy> = {
+  title: "Molecules/Input Copy",
+  component: InputCopy,
+  tags: ["autodocs"],
+  argTypes: {
+    value: { control: "text" },
+    label: { control: "text" },
+    description: { control: "text" },
+    buttonText: { control: "text" },
+    copiedText: { control: "text" },
+    copiedDuration: { control: "number" },
+    isDisabled: { control: "boolean" },
+  },
+  args: {
+    value: "sk_live_abc123defgh456xyz789uvw",
+    label: "License key",
+    description: "Your license key is ready to use. Copy it to embed in your application.",
+    buttonText: "Copy",
+    copiedText: "Copied!",
+    copiedDuration: 2000,
+    isDisabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A readonly input field with a copy-to-clipboard button. Displays a value that users can quickly copy to their clipboard. " +
+          "Shows feedback ('Copied!') for a brief duration after successful copy. " +
+          "Emits `copy` and `copied` events. Useful for license keys, API tokens, or any copyable identifier.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const storyWrapper = (args: Record<string, unknown>) => ({
+  components: { InputCopy },
+  setup() {
+    const handleCopy = (value: string) => {
+      console.log(`Copied: ${value}`);
+    };
+    const handleCopied = (value: string) => {
+      console.log(`Copied event fired: ${value}`);
+    };
+    return { args, handleCopy, handleCopied };
+  },
+  template: `
+    <div style="padding: 2rem; background: #f5f5f5; border-radius: 0.5rem; max-width: 600px;">
+      <InputCopy v-bind="args" @copy="handleCopy" @copied="handleCopied" />
+    </div>
+  `,
+});
+
+export const Default: Story = {
+  render: (args) => storyWrapper(args),
+};
+
+export const LicenseKey: Story = {
+  args: {
+    value: "gmh_lic_single_site_abc123def456ghi789",
+    label: "License key",
+    description: "Your GuideMyHair license key. Keep this safe and use it to embed the widget.",
+  },
+};
+
+export const APIToken: Story = {
+  args: {
+    value: "ghp_16C7e42F292c6912E7710c838347Ae178B4a",
+    label: "API token",
+    description: "Your API token for authentication. Do not share this token.",
+  },
+};
+
+export const ShortValue: Story = {
+  args: {
+    value: "ABC-123-XYZ",
+    label: "Invite code",
+    description: "Share this invite code with your team members.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: "Disabled input",
+    label: "License key",
+    isDisabled: true,
+    description: "This input is disabled and cannot be copied.",
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    value: "sk_test_51234567890abcdef",
+    label: "Secret key",
+    description: undefined,
+  },
+};
+
+export const LongValue: Story = {
+  args: {
+    value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.POdHyP_DQkT3WTZhu9qLWSwVe8ZlHfHEPBOzzVI3vFA",
+    label: "JWT token",
+    description: "Your JWT authentication token. This is a long-lived token used for API access.",
+  },
+};