nicer copy flag in CopyTable

src/docs/docs-components/CopyTable/Table.jsx

@@ -1,22 +1,37 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
 import { Unstyled } from '@storybook/blocks';
 // @ts-ignore
 import classes from './styles.module.scss';
 
-const handleClick = async(props) => {
-  const copyText = typeof props.copyable[props.column] === 'function' ?
-    props.copyable[props.column](`${props.children}`) : `${props.children}`;
-  await navigator.clipboard.writeText(copyText);
-}
-
 const MultiLine = (props) => props.children.split('\n').map(t => (<div>{t}</div>))
 
-const Copyable = (props) => props.copyable && props.copyable[props.column] ?
-  <button onClick={() => handleClick(props)}>
+const Copyable = (props) => {
+  const handleClick = async(props) => {
+    const copyText = typeof props.copyable[props.column] === 'function' ?
+      props.copyable[props.column](`${props.children}`) : `${props.children}`;
+    await navigator.clipboard.writeText(copyText);
+    setCopied(true);
+  }
+
+  const [copied, setCopied] = useState(false);
+
+  let timeout;
+
+  useEffect(() => {
+    if(timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => { setCopied(false); }, 1000);
+  }, [copied]);
+
+  return props.copyable && props.copyable[props.column] ?
+  <button className="copy-btn" onClick={() => handleClick(props)}>
     <span className="material-symbols-outlined">content_copy</span>{props.children}
+    {copied && <div className="copy-tag">Copied</div>}
   </button> :
   <MultiLine>{props.children}</MultiLine>;
-const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>
+}
+
+  const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>
 const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
 const TH = (props) => <th>{props.children}</th>;
 

src/docs/docs-components/CopyTable/styles.module.scss

@@ -19,7 +19,7 @@ $header: #5e81ac;
   }
 }
 
-.table {
+.table :global {
   min-height: 100px;
   margin: 0 0 3rem;
   width: 100%;
@@ -77,6 +77,7 @@ $header: #5e81ac;
       border-right: 1px solid #eee;
       vertical-align: text-top;
       color: #2e3438;
+      position: relative;
       button {
         text-align: left;
         padding: 0;
@@ -84,12 +85,25 @@ $header: #5e81ac;
         background-color: transparent;
         cursor: pointer;
         color: $copyable;
+
         span {
           font-size: 1rem;
           color: inherit;
           margin-right: 5px;
           vertical-align: bottom;
         }
+        div.copy-tag {
+          position: absolute;
+          right: 4px;
+          top: 50%;
+          transform: translate(0, -50%);
+          background-color: #333;
+          pointer-events: none;
+          color: white;
+          padding: 4px 6px;
+          border-radius: 4px;
+          font-size: 12px;
+        }
         &:active {
           transform: translate(1px, 1px);
         }