srcdev-nuxt-components 9.6.3 → 9.6.4

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-copy" :class="elementClasses">
+  <div class="input-copy" :class="[{ 'input-copy-copied': copied }, elementClasses]">
     <div class="input-copy__wrapper">
       <input
         :id="resolvedId"
@@ -8,20 +8,26 @@
         :name="name || resolvedId"
         :value="value"
         :aria-label="ariaLabel || label"
+        :aria-describedby="description ? descriptionId : undefined"
         readonly
       />
-      <button
+      <InputButton
         type="button"
+        variant="inline"
         class="input-copy__button"
-        :aria-label="`Copy ${ariaLabel || label || 'value'} to clipboard`"
-        :disabled="copied || isDisabled"
+        :button-text="copied ? copiedText : buttonText"
+        :aria-label="resolvedButtonAriaLabel"
+        :disabled="isDisabled"
+        :readonly="copied"
         @click="handleCopy"
       >
-        <Icon name="lucide:copy" class="input-copy__icon" />
-        <span class="input-copy__button-text">{{ copied ? copiedText : buttonText }}</span>
-      </button>
+        <template #left>
+          <Icon :name="copied ? copiedIcon : icon" class="input-copy__icon" />
+        </template>
+      </InputButton>
     </div>
-    <p v-if="description" class="input-copy__description">{{ description }}</p>
+    <p v-if="description" :id="descriptionId" class="input-copy__description">{{ description }}</p>
+    <span class="sr-only" role="status">{{ copied ? copiedText : "" }}</span>
   </div>
 </template>
 
@@ -36,6 +42,9 @@ interface Props {
   description?: string;
   buttonText?: string;
   copiedText?: string;
+  buttonAriaLabel?: string;
+  icon?: string;
+  copiedIcon?: string;
   copiedDuration?: number;
   isDisabled?: boolean;
   styleClassPassthrough?: string | string[];
@@ -49,17 +58,23 @@ const props = withDefaults(defineProps<Props>(), {
   description: undefined,
   buttonText: "Copy",
   copiedText: "Copied!",
+  buttonAriaLabel: undefined,
+  icon: "lucide:copy",
+  copiedIcon: "lucide:check",
   copiedDuration: 2000,
   isDisabled: false,
   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.
+// id or name attribute", so one is auto-generated when none is passed.
 const autoId = useId();
 const resolvedId = computed(() => props.id ?? autoId);
+const descriptionId = computed(() => `${resolvedId.value}-description`);
+
+const resolvedButtonAriaLabel = computed(
+  () => props.buttonAriaLabel ?? `Copy ${props.ariaLabel || props.label || "value"} to clipboard`
+);
 
 const emit = defineEmits<{
   copy: [value: string];
@@ -95,7 +110,7 @@ watch(
   () => props.styleClassPassthrough,
   () => {
     resetElementClasses(props.styleClassPassthrough);
-  },
+  }
 );
 
 onUnmounted(() => {
@@ -108,95 +123,105 @@ onUnmounted(() => {
 <style lang="css">
 @layer components {
   .input-copy {
-    --_input-border-radius: var(--input-copy-input-border-radius, 0.4rem);
-    --_input-font-size: var(--input-copy-input-font-size, 0.95rem);
-
-    --_button-bg-hover: var(
-      --input-copy-button-bg-hover,
-      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
-    );
-    --_button-text-color: var(
-      --input-copy-button-text-color,
-      var(--input-button-primary-text, var(--theme-on-surface))
-    );
+    --_input-font-size: var(--input-copy-input-font-size, var(--step-4));
 
+    container: input-copy / inline-size;
     display: flex;
     flex-direction: column;
-    gap: 0.8rem;
-  }
+    gap: var(--input-copy-gap, 0.8rem);
 
-  .input-copy__wrapper {
-    display: flex;
-    gap: 0.8rem;
-    align-items: stretch;
-  }
+    .input-copy__wrapper {
+      display: flex;
+      gap: var(--input-copy-gap, 0.8rem);
+      align-items: stretch;
+    }
 
-  .input-copy__input {
-    flex: 1;
-    min-width: 0;
+    .input-copy__input {
+      flex: 1;
+      min-width: 0;
+      padding: var(--input-copy-input-padding, 0.8rem 1rem);
+      background-color: var(--input-copy-input-bg, var(--theme-input-surface));
+      border: var(--input-copy-input-border, 0.1rem solid var(--theme-border));
+      border-radius: var(--input-copy-input-border-radius, 0.4rem);
+      font-size: var(--_input-font-size);
+      color: var(--input-copy-input-text-color, var(--theme-text));
+      font-family: inherit;
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus, 0.2rem) solid
+          var(--input-copy-focus-ring, var(--theme-border-focus));
+        outline-offset: var(--form-element-outline-offset-focus, 0.2rem);
+      }
+    }
 
-    padding: var(--input-copy-input-padding, 0.8rem 1rem);
-    background-color: var(--input-copy-input-bg, var(--slate-00));
-    border: var(--input-copy-input-border, 1px solid var(--slate-03));
-    border-radius: var(--_input-border-radius);
-    font-size: var(--_input-font-size);
-    color: var(--input-copy-input-text-color, #333);
-    font-family: inherit;
+    .input-copy__button.input-button {
+      flex-shrink: 0;
+      max-inline-size: 50%;
+      box-sizing: border-box;
+      min-height: auto;
+      gap: var(--input-copy-button-gap, 0.6rem);
+      padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
+      background-color: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
+      color: var(--input-copy-button-text-color, var(--input-button-primary-text, var(--theme-on-surface)));
+      border: none;
+      border-radius: var(--input-copy-button-border-radius, 0.4rem);
+      font-size: var(--_input-font-size);
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      --input-button-text-white-space: normal;
+
+      &:hover:not(:disabled, [aria-disabled="true"]) {
+        background-color: var(
+          --input-copy-button-bg-hover,
+          var(--input-button-primary-surface-hover, var(--theme-surface-hover))
+        );
+      }
 
-    &::placeholder {
-      color: var(--input-copy-input-placeholder-color, #999);
-    }
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus, 0.2rem) solid
+          var(--input-copy-focus-ring, var(--theme-border-focus));
+        outline-offset: var(--form-element-outline-offset-focus, 0.2rem);
+      }
 
-    &:focus {
-      outline: 2px solid var(--_input-border-radius);
-      outline-offset: 2px;
-    }
-  }
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
 
-  .input-copy__button {
-    display: flex;
-    align-items: center;
-    gap: var(--input-copy-button-gap, 0.6rem);
-    padding: var(--input-copy-button-padding, 0.8rem 1.2rem);
-
-    background-color: var(--input-copy-button-bg, var(--input-button-primary-surface, var(--theme-surface)));
-    color: var(--_button-text-color);
-    border: none;
-    border-radius: var(--input-copy-button-border-radius, 0.4rem);
-    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);
-    }
+      &[aria-disabled="true"] {
+        cursor: default;
+      }
 
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
+      .input-copy__icon {
+        width: 1.2em;
+        height: 1.2em;
+        flex-shrink: 0;
+      }
 
-    .input-copy__icon {
-      width: 1.2em;
-      height: 1.2em;
-      flex-shrink: 0;
+      .button-text {
+        font-size: inherit;
+        text-transform: none;
+      }
     }
 
-    .input-copy__button-text {
-      display: none;
-
-      @media (min-width: 480px) {
-        display: inline;
+    @container input-copy (width < 48rem) {
+      .input-copy__button.input-button .button-text {
+        display: none;
       }
     }
-  }
 
-  .input-copy__description {
-    margin: var(--input-copy-description-margin, 0.6rem 0 0 0);
-    font-size: var(--input-copy-description-font-size, 0.85rem);
-    color: var(--input-copy-description-color, #666);
+    .input-copy__description {
+      margin: var(--input-copy-description-margin, 0);
+      font-size: var(--input-copy-description-font-size, var(--step-4));
+      color: var(--input-copy-description-color, var(--theme-text));
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      overflow-wrap: anywhere;
+      -webkit-line-clamp: var(--input-copy-description-line-clamp, none);
+      line-clamp: var(--input-copy-description-line-clamp, none);
+    }
   }
 }
 </style>

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

@@ -1,22 +1,79 @@
+import { computed, ref } from "vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import InputCopy from "../InputCopy.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
-const meta: Meta<typeof InputCopy> = {
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only arg: drives a CSS token, not an InputCopy prop. See its argTypes entry.
+type StoryArgs = InstanceType<typeof InputCopy>["$props"] & {
+  descriptionLineClamp: LineClamp;
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Molecules/Input Copy",
   component: InputCopy,
   argTypes: {
-    value: { control: "text" },
+    value: { control: "text", description: "The text copied to the clipboard", table: { category: "Content" } },
+    label: {
+      control: "text",
+      description: "Accessible name for the input (not rendered visibly) and the default button aria-label",
+      table: { category: "Content" },
+    },
+    description: {
+      control: "text",
+      description: "Helper text below the input, linked to it with aria-describedby",
+      table: { category: "Content" },
+    },
+    buttonText: { control: "text", description: "Button label", table: { category: "Content" } },
+    copiedText: {
+      control: "text",
+      description: "Button label and status announcement after a successful copy",
+      table: { category: "Content" },
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessible name for the input; overrides label",
+      table: { category: "Accessibility" },
+    },
+    buttonAriaLabel: {
+      control: "text",
+      description: "Accessible name for the button. Defaults to `Copy <label> to clipboard`; pass translated copy in other languages.",
+      table: { category: "Accessibility" },
+    },
+    icon: { control: "text", description: "Iconify name for the resting icon", table: { category: "Appearance" } },
+    copiedIcon: {
+      control: "text",
+      description: "Iconify name shown after a successful copy",
+      table: { category: "Appearance" },
+    },
+    copiedDuration: {
+      control: "number",
+      description: "Milliseconds the copied state lasts",
+      table: { category: "Behaviour" },
+    },
+    isDisabled: { control: "boolean", description: "Disables the copy button", table: { category: "Behaviour" } },
     id: {
       control: "text",
-      description: "Defaults to an auto-generated id — pass one only if something needs to target this input.",
+      description: "Defaults to an auto-generated id; pass one only if something needs to target this input.",
+      table: { category: "Form" },
+    },
+    name: { control: "text", description: "Defaults to the resolved id", table: { category: "Form" } },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Extra classes on the root element",
+      table: { category: "Styling" },
+    },
+    descriptionLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--input-copy-description-line-clamp` CSS token on a wrapper so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.account-page { --input-copy-description-line-clamp: 2; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
     },
-    name: { control: "text", description: "Defaults to the resolved id if not provided." },
-    label: { control: "text" },
-    description: { control: "text" },
-    buttonText: { control: "text" },
-    copiedText: { control: "text" },
-    copiedDuration: { control: "number" },
-    isDisabled: { control: "boolean" },
   },
   args: {
     value: "sk_live_abc123defgh456xyz789uvw",
@@ -24,59 +81,73 @@ const meta: Meta<typeof InputCopy> = {
     description: "Your license key is ready to use. Copy it to embed in your application.",
     buttonText: "Copy",
     copiedText: "Copied!",
+    icon: "lucide:copy",
+    copiedIcon: "lucide:check",
     copiedDuration: 2000,
     isDisabled: false,
+    styleClassPassthrough: [],
+    descriptionLineClamp: "none",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "tabletCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  render: (args) => ({
+    components: { InputCopy },
+    setup() {
+      const componentArgs = computed(() => {
+        const { descriptionLineClamp: _descriptionLineClamp, ...rest } = args;
+        return rest;
+      });
+      const tokenStyles = computed(() => ({ "--input-copy-description-line-clamp": args.descriptionLineClamp }));
+      const log = (event: string) => (value: string) => console.log(`${event}: ${value}`);
+      return { componentArgs, tokenStyles, log };
+    },
+    template: `
+      <div :style="tokenStyles">
+        <InputCopy v-bind="componentArgs" @copy="log('copy')" @copied="log('copied')" />
+      </div>
+    `,
+  }),
   parameters: {
+    layout: "fullscreen",
     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.",
+          "A readonly input with a copy-to-clipboard button, for license keys, API tokens or any copyable identifier. " +
+          "The button is an inline `InputButton`; after a successful copy it shows `copiedText` and `copiedIcon` for `copiedDuration` ms, " +
+          "announces `copiedText` through a status region and stays focusable (aria-disabled) so focus isn't lost. " +
+          "Below 48rem of its own width the button shows only its icon. Emits `copy` and `copied` after the clipboard write succeeds.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<StoryArgs>;
 
-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 Default: Story = {};
 
 export const APIToken: Story = {
   args: {
     value: "example_token_not_real_0123456789abcdef",
     label: "API token",
     description: "Your API token for authentication. Do not share this token.",
+    buttonText: "Copy token",
+    copiedText: "Token copied!",
   },
 };
 
@@ -107,18 +178,104 @@ 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.",
+    description: "Passes an explicit id and name instead of relying on the auto-generated one.",
   },
 };
 
 export const LongValue: Story = {
   args: {
-    value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.POdHyP_DQkT3WTZhu9qLWSwVe8ZlHfHEPBOzzVI3vFA",
+    value:
+      "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsZXggTW9yZ2FuIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.POdHyP_DQkT3WTZhu9qLWSwVe8ZlHfHEPBOzzVI3vFA",
     label: "JWT token",
     description: "Your JWT authentication token. This is a long-lived token used for API access.",
   },
 };
+
+const stressCases = [
+  {
+    key: "german",
+    value: "Lizenzschlüssel-Einzelplatz-Nordstadt-2026-ABCDEF-123456",
+    label: "Lizenzschlüssel",
+    buttonText: "In die Zwischenablage kopieren",
+    copiedText: "Erfolgreich in die Zwischenablage kopiert!",
+    buttonAriaLabel: "Lizenzschlüssel in die Zwischenablage kopieren",
+    description:
+      "Ihr Lizenzschlüssel ist einsatzbereit. Kopieren Sie ihn und fügen Sie ihn in die Einstellungen Ihrer Anwendung ein, um die Komponente zu aktivieren. Bewahren Sie ihn sicher auf.",
+  },
+  {
+    key: "unbroken",
+    value: "x".repeat(240),
+    label: "Token",
+    buttonText: "Zwischenablagekopiervorgangsbestätigung",
+    copiedText: "Kopiert",
+    description: "https://example.com/a-very-long-path-segment-without-any-spaces-at-all-in-it/and-another-one-after-it",
+  },
+  {
+    key: "emoji-html",
+    value: "🔑 <script>alert('xss')</script>",
+    label: "<b>Key</b>",
+    buttonText: "📋 <i>Copy</i>",
+    copiedText: "✅",
+    description: "🙂 <em>HTML-like</em> text must render as text & never as markup.",
+  },
+  {
+    key: "rtl",
+    value: "مفتاح-الترخيص-١٢٣٤٥",
+    label: "مفتاح الترخيص",
+    buttonText: "نسخ",
+    copiedText: "تم النسخ!",
+    buttonAriaLabel: "نسخ مفتاح الترخيص",
+    description: "مفتاح الترخيص جاهز للاستخدام. انسخه وأضفه إلى تطبيقك.",
+    dir: "rtl",
+  },
+  {
+    key: "minimal",
+    value: "",
+    label: "",
+    buttonText: "",
+    copiedText: "",
+    description: "A",
+  },
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: (args) => ({
+    components: { InputCopy },
+    setup() {
+      const tokenStyles = computed(() => ({ "--input-copy-description-line-clamp": args.descriptionLineClamp }));
+      return { args, tokenStyles, stressCases };
+    },
+    template: `
+      <div :style="tokenStyles" style="display: grid; gap: 2.4rem;">
+        <div v-for="item in stressCases" :key="item.key" :dir="item.dir">
+          <InputCopy
+            :value="item.value"
+            :label="item.label"
+            :button-text="item.buttonText"
+            :copied-text="item.copiedText"
+            :button-aria-label="item.buttonAriaLabel"
+            :description="item.description"
+            :copied-duration="args.copiedDuration"
+          />
+        </div>
+        <InputCopy value="x" description="Broken icon names: the button must still render and work." icon="not-a-real:icon" copied-icon="also-not:real" />
+      </div>
+    `,
+  }),
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Hostile data: long German value, label, button text, copied text and description; a 240-character unbroken value with an unbroken " +
+          "button label and a long URL as the description; emoji and HTML-like text (must render as text); right-to-left Arabic; an empty " +
+          "value, label and button text; and broken icon names. Check at every CanvasSwitcher width that the input never collapses to " +
+          "nothing (the button is capped at half the row and its label wraps), the description wraps instead of overflowing, the button " +
+          "drops to icon-only below 48rem, and copying still shows the copied state. Try the description line-clamp control (a CSS token).",
+      },
+    },
+  },
+};