srcdev-nuxt-components 9.2.1 → 9.2.2

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.",
+  },
+};

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

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import InputCopy from "../InputCopy.vue";
+
+describe("InputCopy", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders readonly input with value", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key-123",
+        label: "Test key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.element.value).toBe("test-key-123");
+    expect(input.element.readOnly).toBe(true);
+  });
+
+  it("displays description when provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        description: "This is your license key.",
+      },
+    });
+
+    expect(wrapper.text()).toContain("This is your license key.");
+  });
+
+  it("does not display description when not provided", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        description: undefined,
+      },
+    });
+
+    const description = wrapper.find(".input-copy__description");
+    expect(description.exists()).toBe(false);
+  });
+
+  it("renders copy button with default text", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        buttonText: "Copy",
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.text()).toContain("Copy");
+  });
+
+  it("renders copy button with custom text", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        buttonText: "Copy to clipboard",
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.text()).toContain("Copy to clipboard");
+  });
+
+  it("disables button when isDisabled is true", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        isDisabled: true,
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeDefined();
+  });
+
+  it("button is not disabled when isDisabled is false", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        isDisabled: false,
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("disabled")).toBeUndefined();
+  });
+
+  it("has proper aria-label on input from label prop", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        label: "License key",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("aria-label")).toBe("License key");
+  });
+
+  it("has proper aria-label on input from ariaLabel prop (takes precedence)", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        label: "License key",
+        ariaLabel: "Unique license identifier",
+      },
+    });
+
+    const input = wrapper.find("input");
+    expect(input.attributes("aria-label")).toBe("Unique license identifier");
+  });
+
+  it("has proper aria-label on button", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        label: "API token",
+      },
+    });
+
+    const button = wrapper.find("button");
+    expect(button.attributes("aria-label")).toContain("Copy");
+    expect(button.attributes("aria-label")).toContain("API token");
+  });
+
+  it("has icon element in button", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const icon = wrapper.find(".input-copy__icon");
+    expect(icon.exists()).toBe(true);
+  });
+
+  it("input wrapper contains both input and button", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    const wrapper_el = wrapper.find(".input-copy__wrapper");
+    expect(wrapper_el.exists()).toBe(true);
+
+    const input = wrapper_el.find("input");
+    const button = wrapper_el.find("button");
+
+    expect(input.exists()).toBe(true);
+    expect(button.exists()).toBe(true);
+  });
+
+  it("renders with correct component classes", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("input-copy");
+  });
+
+  it("applies styleClassPassthrough classes", () => {
+    const wrapper = mount(InputCopy, {
+      props: {
+        value: "test-key",
+        styleClassPassthrough: ["custom-class", "another-class"],
+      },
+    });
+
+    expect(wrapper.classes()).toContain("custom-class");
+    expect(wrapper.classes()).toContain("another-class");
+  });
+});