Added CSS text to copy button

digdir · Sep 7, 2023 · abe170f · abe170f
1 parent f0358e7
commit abe170f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
diff --git a/storefront/components/ClipboardBtn/ClipboardBtn.module.css b/storefront/components/ClipboardBtn/ClipboardBtn.module.css
@@ -1,14 +1,14 @@
 .btn {
-  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 32px;
-  width: 32px;
-  border-radius: 50%;
+  border-radius: 32px;
+  padding: 0 8px;
   transition: 0.1s all;
+  border: none;
   cursor: pointer;
   background-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .btn:hover {
@@ -22,3 +22,7 @@
 .tippy {
   font-family: 'Inter', sans-serif;
 }
+
+.text {
+  margin-left: 2px;
+}
diff --git a/storefront/components/ClipboardBtn/ClipboardBtn.tsx b/storefront/components/ClipboardBtn/ClipboardBtn.tsx
@@ -5,14 +5,15 @@ import Tippy from '@tippyjs/react';
 import classes from './ClipboardBtn.module.css';
 
 interface ClipboardBtnProps {
-  text: string;
-  value?: string;
+  title: string;
+  value: string;
+  text?: string;
 }
 
-const ClipboardBtn = ({ text, value = 'Kopier' }: ClipboardBtnProps) => {
+const ClipboardBtn = ({ title, value, text = '' }: ClipboardBtnProps) => {
   const [toolTipText, setToolTipText] = useState('Kopier');
 
-  const onClick = (text: string) => {
+  const onBtnClick = (text: string) => {
     setToolTipText('Kopiert!');
     navigator.clipboard.writeText(text).catch((reason) => {
       throw Error(String(reason));
@@ -27,15 +28,16 @@ const ClipboardBtn = ({ text, value = 'Kopier' }: ClipboardBtnProps) => {
         className={classes.tippy}
       >
         <button
-          onMouseEnter={() => setToolTipText(text)}
-          onClick={() => onClick(value)}
+          onMouseEnter={() => setToolTipText(title)}
+          onClick={() => onBtnClick(value)}
           className={classes.btn}
-          title={text}
+          title={title}
         >
           <ClipboardIcon
             fontSize={20}
             color='#585858'
           />
+          {text && <span className={classes.text}>{text}</span>}
         </button>
       </Tippy>
     </>

diff --git a/storefront/components/Tokens/TokenList.module.css b/storefront/components/Tokens/TokenList.module.css
@@ -85,7 +85,7 @@
 }
 
 .title button {
-  margin-left: 1px;
+  margin-left: 3px;
 }
 
 .value {

diff --git a/storefront/components/Tokens/TokenList.tsx b/storefront/components/Tokens/TokenList.tsx
@@ -69,7 +69,8 @@ const TokenCard = ({ item, key, type, hideValue }: TokenCardProps) => {
         <h4 className={classes.title}>
           {capitalizeString(item.lastName)}
           <ClipboardBtn
-            text='Kopier CSS variabel'
+            title='Kopier CSS variabel'
+            text='CSS'
             value={item.name}
           />
         </h4>