CopyButton prop for iconPosition (#2173)

navikt · Aug 17, 2023 · 107d6f3 · 107d6f3
1 parent 09d41e9
commit 107d6f3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 19 deletions.
diff --git a/.changeset/olive-steaks-hear.md b/.changeset/olive-steaks-hear.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon
diff --git a/@navikt/core/css/copybutton.css b/@navikt/core/css/copybutton.css
@@ -52,9 +52,16 @@
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
+}
+
+.navds-copybutton__icon:first-of-type {
   margin-left: -0.25rem;
 }
 
+.navds-copybutton__icon:last-of-type {
+  margin-right: -0.25rem;
+}
+
 .navds-copybutton__icon:only-child {
   margin: 0;
 }

diff --git a/@navikt/core/react/src/copybutton/CopyButton.tsx b/@navikt/core/react/src/copybutton/CopyButton.tsx
@@ -63,6 +63,11 @@ export interface CopyButtonProps
    * @default 'Kopiert'
    */
   activeTitle?: string;
+  /**
+   * Icon position in Button
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 /**
@@ -91,6 +96,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       activeDuration = 2000,
       title = "Kopier",
       activeTitle = "Kopiert",
+      iconPosition = "left",
       ...rest
     },
     ref
@@ -119,6 +125,25 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       }, activeDuration);
     };
 
+    const CopyIcon = () => {
+      return active ? (
+        <span className="navds-copybutton__icon">
+          {activeIcon ?? (
+            <CheckmarkIcon
+              aria-hidden={!!text}
+              title={text ? undefined : activeTitle}
+            />
+          )}
+        </span>
+      ) : (
+        <span className="navds-copybutton__icon">
+          {icon ?? (
+            <FilesIcon aria-hidden={!!text} title={text ? undefined : title} />
+          )}
+        </span>
+      );
+    };
+
     return (
       <button
         ref={ref}
@@ -138,25 +163,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         onClick={handleClick}
       >
         <span className="navds-copybutton__content">
-          {active ? (
-            <span className="navds-copybutton__icon">
-              {activeIcon ?? (
-                <CheckmarkIcon
-                  aria-hidden={!!text}
-                  title={text ? undefined : activeTitle}
-                />
-              )}
-            </span>
-          ) : (
-            <span className="navds-copybutton__icon">
-              {icon ?? (
-                <FilesIcon
-                  aria-hidden={!!text}
-                  title={text ? undefined : title}
-                />
-              )}
-            </span>
-          )}
+          {iconPosition === "left" && <CopyIcon />}
 
           {text &&
             (active ? (
@@ -176,6 +183,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
                 {text}
               </Label>
             ))}
+          {iconPosition === "right" && <CopyIcon />}
         </span>
       </button>
     );

diff --git a/@navikt/core/react/src/copybutton/copy-button.stories.tsx b/@navikt/core/react/src/copybutton/copy-button.stories.tsx
@@ -60,6 +60,16 @@ export const Variants = {
   ),
 };
 
+export const IconPosition = {
+  render: () => (
+    <div className="colgap">
+      <CopyButton copyText="3.14" iconPosition="left" text="Kopier" />
+
+      <CopyButton copyText="3.14" iconPosition="right" text="Kopier" />
+    </div>
+  ),
+};
+
 export const Sizes = {
   render: () => (
     <div className="colgap">