srcdev-nuxt-components 9.0.18 → 9.1.0

package/app/components/01.atoms/text-blocks/hero-text/HeroText.vue

@@ -93,8 +93,10 @@ const normalisedContent = computed(() =>
     }
 
     .accent {
+      background-clip: text;
+      background-image: var(--hero-text-bg-img);
       font-style: italic;
-      color: var(--colour-text-accent);
+      color: transparent;
     }
   }
 }

package/app/components/forms/form-errors/InputError.vue

@@ -55,154 +55,155 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 @layer components {
-.input-error-message {
-  grid-row: 2;
-  grid-column: 1;
-  display: grid;
-  grid-template-rows: 0fr;
+  .input-error-message {
+    grid-row: 2;
+    grid-column: 1;
+    display: grid;
+    grid-template-rows: 0fr;
 
-  color: var(--input-error-color);
-  background-color: var(--theme-error-surface);
-  opacity: 0;
+    color: var(--input-error-color);
+    background-color: var(--theme-error-surface);
+    opacity: 0;
 
-  transition:
-    grid-template-rows var(--theme-form-transition-duration) linear,
-    opacity var(--theme-form-transition-duration) linear,
-    margin-block-start var(--theme-form-transition-duration) linear;
+    transition:
+      grid-template-rows var(--theme-form-transition-duration) linear,
+      opacity var(--theme-form-transition-duration) linear,
+      margin-block-start var(--theme-form-transition-duration) linear;
 
-  transition-behavior: allow-discrete;
+    transition-behavior: allow-discrete;
 
-  border-radius: 0;
-  border: var(--form-element-border-width) solid transparent;
-  outline: var(--form-element-outline-width) solid transparent;
+    border-radius: 0;
+    border: var(--form-element-border-width) solid transparent;
+    outline: var(--form-element-outline-width) solid transparent;
 
-  background-clip: padding-box;
+    background-clip: padding-box;
 
-  translate: 0 calc(-1 * calc(var(--form-element-border-width) + var(--form-input-border-radius)));
+    translate: 0 calc(-1 * calc(var(--form-element-border-width) + var(--form-input-border-radius)));
 
-  margin-block-start: var(--input-error-margin-block-start);
+    margin-block-start: var(--input-error-margin-block-start);
 
-  &.underlined {
-    outline-color: transparent;
-  }
+    &.underlined {
+      outline-color: transparent;
+    }
 
-  &.detached {
-    margin-block-start: 0rem;
+    &.detached {
+      margin-block-start: 0rem;
 
-    border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-    border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-    border-bottom: var(--form-element-border-width) solid var(--red-08);
-    border-left: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-top: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-right: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-bottom: var(--form-element-border-width) solid var(--red-08);
+      border-left: var(--form-element-border-width) solid var(--theme-error-surface);
 
-    border-radius: var(--form-input-border-radius);
+      border-radius: var(--form-input-border-radius);
 
-    &.underlined {
-      border-radius: 0;
+      &.underlined {
+        border-radius: 0;
+      }
     }
-  }
 
-  &.show {
-    grid-template-rows: 1fr;
-    display: grid;
-    opacity: 1;
+    &.show {
+      grid-template-rows: 1fr;
+      display: grid;
+      opacity: 1;
 
-    border: var(--form-element-border-width) solid var(--theme-error-border);
-    outline: var(--form-element-outline-width) solid var(--theme-error-outline);
+      border: var(--form-element-border-width) solid var(--theme-error-border);
+      outline: var(--form-element-outline-width) solid var(--theme-error-outline);
 
-    &:not(.underlined) {
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-    }
+      &:not(.underlined) {
+        border-bottom-left-radius: var(--form-input-border-radius);
+        border-bottom-right-radius: var(--form-input-border-radius);
+      }
 
-    &.detached {
-      margin-block-start: 2rem;
+      &.detached {
+        margin-block-start: 2rem;
+      }
     }
-  }
 
-  .inner {
-    align-items: center;
-    overflow: hidden;
-
-    .inner-content {
-      display: flex;
+    .inner {
       align-items: center;
+      overflow: hidden;
 
-      .inner-icon {
-        display: inline-block;
-        padding-left: 1.2rem;
+      .inner-content {
+        display: flex;
+        align-items: center;
 
-        .icon {
-          color: white;
-          transform: translateY(3px);
-        }
-      }
+        .inner-icon {
+          display: inline-block;
+          padding-left: 1.2rem;
 
-      .message {
-        display: inline-block;
-        flex-grow: 1;
-        font-family: var(--font-family);
-        font-size: 1.6rem;
-        font-weight: 500;
-        padding-block: 1rem 1rem;
-        padding-inline: 1.2rem;
-
-        .message-single {
-          color: var(--input-error-color);
+          .icon {
+            color: white;
+            transform: translateY(3px);
+          }
         }
 
-        .message-list {
-          list-style-type: none;
-          padding-inline-start: 0;
-          margin-block-start: 0;
-          margin-block-end: 0;
-
-          .message-list-item {
-            color: white;
+        .message {
+          display: inline-block;
+          flex-grow: 1;
+          font-family: var(--font-family);
+          font-size: 1.6rem;
+          font-weight: 500;
+          padding-block: 1rem 1rem;
+          padding-inline: 1.2rem;
+
+          .message-single {
+            color: var(--input-error-color);
           }
 
-          .message-list-item + .message-list-item {
-            margin-block-start: 0.6rem;
+          .message-list {
+            list-style-type: none;
+            padding-inline-start: 0;
+            margin-block-start: 0;
+            margin-block-end: 0;
+
+            .message-list-item {
+              color: white;
+            }
+
+            .message-list-item + .message-list-item {
+              margin-block-start: 0.6rem;
+            }
           }
         }
       }
     }
-  }
 
-  /* Modifiers for input variants: */
-  &:is(.detached) {
-    &.normal {
-      .inner {
-        .inner-content {
-          .message {
-            padding-block: 1.2rem 1rem;
+    /* Modifiers for input variants: */
+    &:is(.detached) {
+      &.normal {
+        .inner {
+          .inner-content {
+            .message {
+              padding-block: 1.2rem 1rem;
+            }
           }
         }
       }
     }
-  }
 
-  &:not(.detached) {
-    &.normal {
-      .inner {
-        padding-block-start: var(--form-input-border-radius);
+    &:not(.detached) {
+      &.normal {
+        .inner {
+          padding-block-start: var(--form-input-border-radius);
 
-        .inner-content {
-          .message {
-            padding-block: 1.2rem 1rem;
+          .inner-content {
+            .message {
+              padding-block: 1.2rem 1rem;
+            }
           }
         }
       }
-    }
-    &.underlined {
-      .inner {
-        .inner-content {
-          .message {
-            padding-block: 1rem 1rem;
+      &.underlined {
+        outline-color: transparent;
+        .inner {
+          .inner-content {
+            .message {
+              padding-block: 1rem 1rem;
+            }
           }
         }
       }
     }
   }
 }
-}
 </style>

package/app/components/forms/input-copy/InputCopyCore.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="input-copy-core"
+    data-testid="input-copy-core"
+    :class="[elementClasses, { copied: isCopied }]"
+  >
+    <input
+      :id
+      :value
+      type="text"
+      readonly
+      aria-readonly="true"
+      class="input-copy-field"
+    />
+    <InputButtonCore
+      type="button"
+      variant="inline"
+      class="input-copy-button"
+      :button-text="isCopied ? copiedLabel : copyLabel"
+      :aria-label="isCopied ? copiedLabel : copyLabel"
+      @click="handleCopy"
+    >
+      <template v-if="slots.icon" #left>
+        <slot name="icon"></slot>
+      </template>
+    </InputButtonCore>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  id: string;
+  value: string;
+  copyLabel?: string;
+  copiedLabel?: string;
+  feedbackDuration?: number;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  copyLabel: "Copy",
+  copiedLabel: "Copied!",
+  feedbackDuration: 2000,
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{
+  copy: [value: string];
+}>();
+
+const slots = useSlots();
+const isCopied = ref(false);
+
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.value);
+    isCopied.value = true;
+    emit("copy", props.value);
+    await useSleep(props.feedbackDuration);
+    isCopied.value = false;
+  } catch {
+    // Clipboard API unavailable — fail silently
+  }
+};
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-copy-core {
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    border-radius: var(--form-input-border-radius);
+    background-color: var(--theme-input-surface);
+    transition: all var(--theme-form-transition-duration) ease-in-out;
+
+    .input-copy-field {
+      all: unset;
+      flex-grow: 1;
+      padding-block: var(--input-padding-block);
+      padding-inline: var(--input-padding-inline);
+      font-family: var(--font-family);
+      font-size: var(--input-font-size);
+      color: var(--theme-input-text-color-normal);
+      cursor: default;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .input-copy-button.input-button-core {
+      border-radius: 0;
+      border-inline-start: var(--form-element-border-width) solid var(--theme-input-border);
+      padding-inline: var(--input-padding-inline);
+      min-width: var(--input-min-height);
+      background-color: var(--theme-button-secondary-surface);
+      color: var(--theme-button-secondary-text);
+
+      &:hover {
+        background-color: var(--theme-button-primary-surface);
+        color: var(--theme-button-primary-text);
+      }
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+        outline-offset: -4px;
+      }
+    }
+
+    &.copied {
+      --_copy-success-surface: light-dark(var(--green-01), var(--green-09));
+      --_copy-success-text: light-dark(var(--green-08), var(--green-01));
+
+      .input-copy-button.input-button-core {
+        background-color: var(--_copy-success-surface);
+        color: var(--_copy-success-text);
+      }
+    }
+  }
+}
+</style>

package/app/components/forms/input-copy/stories/InputCopyCore.stories.ts

@@ -0,0 +1,89 @@
+import InputCopyCore from "../InputCopyCore.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof InputCopyCore> = {
+  title: "Components/Forms/Input Copy/InputCopyCore",
+  component: InputCopyCore,
+  argTypes: {
+    id: {
+      control: "text",
+      description: "The id attribute for the input element",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "text",
+      description: "The text value to display and copy",
+      table: { category: "Content" },
+    },
+    copyLabel: {
+      control: "text",
+      description: "Button label before copying",
+      table: { category: "Behaviour" },
+    },
+    copiedLabel: {
+      control: "text",
+      description: "Button label shown after a successful copy",
+      table: { category: "Behaviour" },
+    },
+    feedbackDuration: {
+      control: { type: "number", min: 500, max: 5000, step: 500 },
+      description: "How long (ms) to show the copied state before resetting",
+      table: { category: "Behaviour" },
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    id: "copy-input",
+    value: "sk_live_abc123def456",
+    copyLabel: "Copy",
+    copiedLabel: "Copied!",
+    feedbackDuration: 2000,
+    styleClassPassthrough: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InputCopyCore>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { InputCopyCore },
+    setup() {
+      return { args };
+    },
+    template: `<div style="max-width: 420px; padding: 40px;"><InputCopyCore v-bind="args" /></div>`,
+  }),
+};
+
+export const LongValue: Story = {
+  name: "Long value",
+  args: {
+    value: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdXN0b21lcklkIjoiY3VzdF8wMDEiLCJkb21haW5zIjpbImV4YW1wbGUuY29tIl0sInBsYW4iOiJzaW5nbGUtc2l0ZSIsImlhdCI6MTcwMDAwMDAwMCwiZXhwIjoxNzMxNjI3MjAwfQ",
+  },
+  render: (args) => ({
+    components: { InputCopyCore },
+    setup() {
+      return { args };
+    },
+    template: `<div style="max-width: 420px; padding: 40px;"><InputCopyCore v-bind="args" /></div>`,
+  }),
+};
+
+export const CustomLabels: Story = {
+  name: "Custom labels",
+  args: {
+    copyLabel: "Copy key",
+    copiedLabel: "Key copied!",
+  },
+  render: (args) => ({
+    components: { InputCopyCore },
+    setup() {
+      return { args };
+    },
+    template: `<div style="max-width: 420px; padding: 40px;"><InputCopyCore v-bind="args" /></div>`,
+  }),
+};