docs(ColorPage): shadow page WIP

packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx

@@ -6,6 +6,8 @@ import { ShadowExamples } from '../../components/Shadow/ShadowExamples';
 
 # Shadow
 
+Shadows tokens in a design system add depth for a polished look and establishing hierarchy and predictability in user interface.
+
 <Canvas
   style={{
     color: 'var(--content-default)',

packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { handleCopyText } from '../../helpers';
+
+import { ShadowShape } from './types';
+
+import '../../components/Table/Table.css';
+
+interface IColorTableProps {
+  data: ShadowShape[];
+}
+
+export const ShadowTable: React.FC<IColorTableProps> = ({ data }) => {
+  return (
+    <table className="sb-unstyled">
+      <thead>
+        <tr>
+          <th>Enum</th>
+          <th>Token</th>
+          <th>Usage</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((shadow) => (
+          <tr>
+            <td onClick={() => handleCopyText(shadow.enum)}>
+              <div
+                className="color-example"
+                style={{ backgroundColor: `var(${shadow.value})` }}
+              />
+              {shadow.enum}
+            </td>
+            <td>{shadow.value}</td>
+            <td>{shadow.desc}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

packages/react-components/src/docs/foundations/Shadow/constants.ts

@@ -1 +1,31 @@
-export const ShadowTokens = {};
+import { ShadowToken, ShadowTokenKey } from '../../../foundations/shadow-token';
+
+import { ShadowShape } from './types';
+
+export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map(
+  ([key, value]) => ({
+    enum: key,
+    value,
+    desc: ShadowDescription[key as ShadowTokenKey],
+  })
+);
+
+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',
+};