From abe170f043ada7b891d8453a917c7f272021c599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Thu, 7 Sep 2023 12:02:27 +0200
Subject: [PATCH] Added CSS text to copy button

---
 .../ClipboardBtn/ClipboardBtn.module.css         | 16 ++++++++++------
 .../components/ClipboardBtn/ClipboardBtn.tsx     | 16 +++++++++-------
 .../components/Tokens/TokenList.module.css       |  2 +-
 storefront/components/Tokens/TokenList.tsx       |  3 ++-
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/storefront/components/ClipboardBtn/ClipboardBtn.module.css b/storefront/components/ClipboardBtn/ClipboardBtn.module.css
index 1bbe13bdb7..6ce087c87d 100644
--- 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
index b8a8d7971f..150c38efda 100644
--- 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
index b6442da10d..f112e8d825 100644
--- 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
index 53bf7f30f9..1e9a1619f2 100644
--- 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>