docs(Foundations): shadow desc; copy css tokens on click

livechat · Jan 29, 2024 · 896f8d4 · 896f8d4
1 parent 5c477ba
commit 896f8d4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/packages/react-components/src/docs/components/Table/Table.scss b/packages/react-components/src/docs/components/Table/Table.scss
@@ -30,14 +30,16 @@ table {
       display: flex;
       column-gap: var(--spacing-3);
       align-items: center;
-
-      &:hover {
-        cursor: pointer;
-      }
     }
   }
 }
 
 .no-wrap {
   white-space: nowrap;
 }
+
+.copy-text {
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/packages/react-components/src/docs/components/Table/Table.tsx b/packages/react-components/src/docs/components/Table/Table.tsx
@@ -35,8 +35,11 @@ export const Table: React.FC<ITable> = ({
             {Object.entries(row).map(([key, value], cellIndex) => {
               if (key === 'enum') {
                 return (
-                  <td onClick={() => handleCopyText(value as string)}>
-                    <div className="example-field">
+                  <td
+                    key={cellIndex}
+                    onClick={() => handleCopyText(value as string)}
+                  >
+                    <div className="example-field copy-text">
                       {renderExample && renderExample(row['value'])}
                       {row['enum']}
                       {row['deprecated'] && <i> (deprecated)</i>}
@@ -45,16 +48,21 @@ export const Table: React.FC<ITable> = ({
                 );
               }
 
-              if (typeof value === 'string') {
+              if (key === 'value') {
                 return (
                   <td
                     key={cellIndex}
-                    className={key === 'value' ? 'no-wrap' : undefined}
+                    className="no-wrap copy-text"
+                    onClick={() => handleCopyText(value as string)}
                   >
                     {value}
                   </td>
                 );
               }
+
+              if (typeof value === 'string') {
+                return <td key={cellIndex}>{value}</td>;
+              }
             })}
           </tr>
         ))}

diff --git a/packages/react-components/src/docs/foundations/Shadow/constants.ts b/packages/react-components/src/docs/foundations/Shadow/constants.ts
@@ -3,23 +3,25 @@ import { ShadowToken, ShadowTokenKey } from '../../../foundations/shadow-token';
 import { ShadowShape } from './types';
 
 const ShadowDescription: Record<ShadowTokenKey, string> = {
-  Float: 'Float sample description',
-  PopOver: 'PopOver sample description',
-  Modal: 'Modal sample description',
-  Tooltip: 'Tooltip sample description',
-  TooltipArrowBottom: 'TooltipArrowBottom sample description',
-  TooltipArrowTop: 'TooltipArrowTop sample description',
-  TooltipArrowRight: 'TooltipArrowRight sample description',
-  TooltipArrowLeft: 'TooltipArrowLeft sample description',
-  TooltipArrow: 'TooltipArrow sample description',
-  Focus: 'Focus sample description',
-  DividerBottom: 'DividerBottom sample description',
-  DividerTop: 'DividerTop sample description',
-  DividerBottomLeft: 'DividerBottomLeft sample description',
-  DividerTopLeft: 'DividerTopLeft sample description',
-  DividerTopRight: 'DividerTopRight sample description',
-  DividerBottomRight: 'DividerBottomRight sample description',
-  MessageBox: 'MessageBox sample description',
+  Float: 'Cards, buttons, other elevated elements',
+  PopOver: 'Popovers',
+  Modal: 'Modals',
+  Tooltip: 'Tooltips',
+  TooltipArrowBottom: 'Specifically for tooltips with arrow on bottom',
+  TooltipArrowTop: 'Specifically for tooltips with arrow on top',
+  TooltipArrowRight: 'Specifically for tooltips with arrow on right',
+  TooltipArrowLeft: 'Specifically for tooltips with arrow on left',
+  TooltipArrow: 'Specifically for tooltips with arrow',
+  Focus: 'Focus state on elements',
+  DividerBottom: 'Separator on bottom of the element',
+  DividerTop: 'Separator on top of the element',
+  DividerBottomLeft:
+    'Suited for subtle exits, like fading out elements or collapsing menus/details panel',
+  DividerTopLeft: 'Separator on top left of the element',
+  DividerTopRight: 'Separator on top right of the element',
+  DividerBottomRight:
+    'Suited for subtle exits, like fading out elements or collapsing menus/details panel',
+  MessageBox: 'MessageBox on Chats',
 };
 
 export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map(