CopyButton: i18n & remove prop activeTitle (#3426)

Co-authored-by: Halvor Haugan <[email protected]>
navikt · Dec 5, 2024 · 89e069d · 89e069d
1 parent 4896bb1
commit 89e069d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 13 deletions.
diff --git a/.changeset/friendly-ladybugs-tap.md b/.changeset/friendly-ladybugs-tap.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+CopyButton: Removed prop `activeTitle`. Use `activeText` instead.
diff --git a/@navikt/core/react/src/copybutton/CopyButton.tsx b/@navikt/core/react/src/copybutton/CopyButton.tsx
@@ -10,6 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -32,7 +33,7 @@ export interface CopyButtonProps
   text?: string;
   /**
    * Text shown when button is clicked.
-   * Only set if used with `text`-prop.
+   * Will be used as accessible label (title) if `text`-prop is not set.
    * @default "Kopiert!"
    */
   activeText?: string;
@@ -62,11 +63,6 @@ export interface CopyButtonProps
    * @default "Kopier"
    */
   title?: string;
-  /**
-   * Accessible label for icon in active-state (ignored if text is set).
-   * @default "Kopiert"
-   */
-  activeTitle?: string;
   /**
    * Icon position in button.
    * @default "left"
@@ -91,15 +87,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       className,
       copyText,
       text,
-      activeText = "Kopiert!",
+      activeText,
       variant = "neutral",
       size = "medium",
       onActiveChange,
       icon,
       activeIcon,
       activeDuration = 2000,
-      title = "Kopier",
-      activeTitle = "Kopiert",
+      title,
       iconPosition = "left",
       onClick,
       ...rest
@@ -108,6 +103,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
   ) => {
     const [active, setActive] = useState(false);
     const timeoutRef = useRef<number>();
+    const translate = useI18n("CopyButton");
 
     useEffect(() => {
       return () => {
@@ -127,19 +123,21 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       }, activeDuration);
     };
 
+    const activeString = activeText || translate("activeText");
+
     const copyIcon = (
       <span className="navds-copybutton__icon">
         {active
           ? activeIcon ?? (
               <CheckmarkIcon
                 aria-hidden={!!text}
-                title={text ? undefined : activeTitle}
+                title={text ? undefined : activeString}
               />
             )
           : icon ?? (
               <FilesIcon
                 aria-hidden={!!text}
-                title={text ? undefined : title}
+                title={text ? undefined : title || translate("title")}
               />
             )}
       </span>
@@ -150,7 +148,6 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         ref={ref}
         type="button"
         {...rest}
-        aria-live="assertive"
         className={cl(
           "navds-copybutton",
           className,
@@ -168,7 +165,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           {iconPosition === "left" && copyIcon}
           {text && (
             <Label as="span" size={size === "medium" ? "medium" : "small"}>
-              {active ? activeText : text}
+              {active ? activeString : text}
             </Label>
           )}
           {iconPosition === "right" && copyIcon}

diff --git a/@navikt/core/react/src/copybutton/copy-button.stories.tsx b/@navikt/core/react/src/copybutton/copy-button.stories.tsx
@@ -27,13 +27,18 @@ export const Default: Story = {
       control: { type: "radio" },
       options: ["neutral", "action"],
     },
+    iconPosition: {
+      control: { type: "radio" },
+      options: ["left", "right"],
+    },
   },
   args: {
     size: "medium",
     activeDuration: 2000,
     copyText: "3.14",
     text: "",
     activeText: "",
+    title: "",
   },
 };
 

diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts
@@ -45,6 +45,10 @@ export default {
       labelSuffix: "delete",
     },
   },
+  CopyButton: {
+    title: "Copy",
+    activeText: "Copied!",
+  },
   ErrorSummary: {
     heading: "You must correct the following errors before you can continue:",
   },

diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts
@@ -49,6 +49,10 @@ export default {
       labelSuffix: "slett",
     },
   },
+  CopyButton: {
+    title: "Kopier",
+    activeText: "Kopiert!",
+  },
   ErrorSummary: {
     heading: "Du må rette disse feilene før du kan fortsette:",
   },

diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts
@@ -45,6 +45,10 @@ export default {
       labelSuffix: "slett",
     },
   },
+  CopyButton: {
+    title: "Kopier",
+    activeText: "Kopiert!",
+  },
   ErrorSummary: {
     heading: "Du må rette desse feila før du kan halde fram:",
   },