docs update for table primitive, use theme values, use exampleCode co… (

aws-amplify#1202) * docs update for table primitive, use theme values, use exampleCode component * remove old DemoBox component and replace it with the Demo component * remove demobox from TablePropControls, rename example files to PascalCase * remove field labeller in favor of the built in label prop * update file reference * update to file references Co-authored-by: Jacob Logan <[email protected]>
dpilch · Feb 24, 2022 · 8a3e919 · 8a3e919
1 parent 1f5e696
commit 8a3e919
Show file tree

Hide file tree

Showing 14 changed files with 395 additions and 283 deletions.
diff --git a/docs/src/data/links.ts b/docs/src/data/links.ts
@@ -152,7 +152,11 @@ export const layoutComponents = [
     body: `A layout container using Flexbox.`,
   },
   { href: '/components/grid', label: 'Grid', body: `` },
-  { href: '/components/table', label: 'Table', body: `` },
+  {
+    href: '/components/table',
+    label: 'Table',
+    body: `The Table primitive provides users with a styled and customizable table element.`,
+  },
   {
     href: '/components/expander',
     label: 'Expander',

diff --git a/docs/src/components/TablePropControls.tsx → ...es/components/table/TablePropControls.tsx b/docs/src/components/TablePropControls.tsx → ...es/components/table/TablePropControls.tsx
@@ -2,14 +2,12 @@ import * as React from 'react';
 
 import {
   CheckboxField,
+  Flex,
   SelectField,
   TableProps,
   TextField,
 } from '@aws-amplify/ui-react';
 
-import { DemoBox } from './DemoBox';
-import { FieldLabeler } from './FieldLabeler';
-
 export interface TablePropControlsProps extends TableProps {
   setCaption: (value: React.SetStateAction<TableProps['caption']>) => void;
   setHighlightOnHover: (
@@ -32,7 +30,7 @@ export const TablePropControls: TablePropControlsInterface = ({
   size,
   variation,
 }) => (
-  <DemoBox primitiveName="Table">
+  <Flex direction="column">
     <TextField
       id="caption-control"
       label="caption"
@@ -49,35 +47,27 @@ export const TablePropControls: TablePropControlsInterface = ({
       label="highlightOnHover"
       onChange={(e) => setHighlightOnHover(e.target.checked)}
     />
-    <FieldLabeler id="size">
-      <SelectField
-        id="size"
-        name="size"
-        label="size"
-        labelHidden
-        placeholder="(default)"
-        value={size}
-        onChange={(e) => setSize(e.target.value as TableProps['size'])}
-      >
-        <option value="small">small</option>
-        <option value="large">large</option>
-      </SelectField>
-    </FieldLabeler>
-    <FieldLabeler id="variation">
-      <SelectField
-        id="variation"
-        name="variation"
-        label="variation"
-        labelHidden
-        placeholder="(default)"
-        value={variation}
-        onChange={(e) =>
-          setVariation(e.target.value as TableProps['variation'])
-        }
-      >
-        <option value="bordered">bordered</option>
-        <option value="striped">striped</option>
-      </SelectField>
-    </FieldLabeler>
-  </DemoBox>
+    <SelectField
+      id="size"
+      name="size"
+      label="size"
+      placeholder="(default)"
+      value={size}
+      onChange={(e) => setSize(e.target.value as TableProps['size'])}
+    >
+      <option value="small">small</option>
+      <option value="large">large</option>
+    </SelectField>
+    <SelectField
+      id="variation"
+      name="variation"
+      label="variation"
+      placeholder="(default)"
+      value={variation}
+      onChange={(e) => setVariation(e.target.value as TableProps['variation'])}
+    >
+      <option value="bordered">bordered</option>
+      <option value="striped">striped</option>
+    </SelectField>
+  </Flex>
 );
diff --git a/docs/src/pages/components/table/demo.tsx b/docs/src/pages/components/table/demo.tsx
@@ -1,26 +1,67 @@
 import * as React from 'react';
 
-import { Flex } from '@aws-amplify/ui-react';
+import { Demo } from '@/components/Demo';
 
-import { Example } from '@/components/Example';
-import { TablePropControls } from '@/components/TablePropControls';
-import { useTableProps } from '@/components/useTableProps';
+import { TablePropControls } from './TablePropControls';
+import { useTableProps } from './useTableProps';
 import { BasicExample } from './examples';
 
+const propsToCode = (props) => {
+  const { caption, highlightOnHover, size, variation } = props;
+  return `
+<Table
+  caption={${caption}}
+  highlightOnHover={${highlightOnHover}}
+  size={${size}}
+  variation={${variation}}
+  >
+  <TableHead>
+    <TableRow>
+      <TableCell as="th">Citrus</TableCell>
+      <TableCell as="th">Stone Fruit</TableCell>
+      <TableCell as="th">Berry</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>Orange</TableCell>
+      <TableCell>Nectarine</TableCell>
+      <TableCell>Raspberry</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Grapefruit</TableCell>
+      <TableCell>Apricot</TableCell>
+      <TableCell>Blueberry</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>Lime</TableCell>
+      <TableCell>Peach</TableCell>
+      <TableCell>Strawberry</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+  `;
+};
+
+const initialValues = {
+  caption: '',
+  highlightOnHover: false,
+};
+
 export const TableDemo = () => {
-  const tableProps = useTableProps({});
+  const tableProps = useTableProps(initialValues);
 
   return (
-    <Flex direction="column" gap="0.5rem">
-      <TablePropControls {...tableProps} />
-      <Example>
-        <BasicExample
-          caption={tableProps.caption}
-          highlightOnHover={tableProps.highlightOnHover}
-          size={tableProps.size}
-          variation={tableProps.variation}
-        />
-      </Example>
-    </Flex>
+    <Demo
+      code={propsToCode(tableProps)}
+      propControls={<TablePropControls {...tableProps} />}
+    >
+      <BasicExample
+        caption={tableProps.caption}
+        highlightOnHover={tableProps.highlightOnHover}
+        size={tableProps.size}
+        variation={tableProps.variation}
+      />
+    </Demo>
   );
 };
diff --git a/...omponents/table/examples/basicExample.tsx → ...omponents/table/examples/BasicExample.tsx b/...omponents/table/examples/basicExample.tsx → ...omponents/table/examples/BasicExample.tsx
diff --git a/...nents/table/examples/highlightExample.tsx → ...nents/table/examples/HighlightExample.tsx b/...nents/table/examples/highlightExample.tsx → ...nents/table/examples/HighlightExample.tsx
diff --git a/...components/table/examples/sizeExample.tsx → ...components/table/examples/SizeExample.tsx b/...components/table/examples/sizeExample.tsx → ...components/table/examples/SizeExample.tsx
diff --git a/...components/table/examples/spanExample.tsx → ...components/table/examples/SpanExample.tsx b/...components/table/examples/spanExample.tsx → ...components/table/examples/SpanExample.tsx
diff --git a/docs/src/pages/components/table/examples/TableFontSizePropExample.tsx b/docs/src/pages/components/table/examples/TableFontSizePropExample.tsx
@@ -0,0 +1,25 @@
+import {
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  useTheme,
+} from '@aws-amplify/ui-react';
+
+export const TableFontSizePropExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell fontSize={`${tokens.fontSizes.xs}`}>
+            Smaller Text
+          </TableCell>
+          <TableCell fontSize={`${tokens.fontSizes.xs}`}>
+            Smaller Text
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/docs/src/pages/components/table/examples/TableStylePropExample.tsx b/docs/src/pages/components/table/examples/TableStylePropExample.tsx
@@ -0,0 +1,25 @@
+import {
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  useTheme,
+} from '@aws-amplify/ui-react';
+
+export const TableStylePropExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableCell style={{ fontSize: `${tokens.fontSizes.xs}` }}>
+            Smaller Text
+          </TableCell>
+          <TableCell style={{ fontSize: `${tokens.fontSizes.xs}` }}>
+            Smaller Text
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
diff --git a/...nents/table/examples/variationExample.tsx → ...nents/table/examples/VariationExample.tsx b/...nents/table/examples/variationExample.tsx → ...nents/table/examples/VariationExample.tsx
diff --git a/docs/src/pages/components/table/examples/index.ts b/docs/src/pages/components/table/examples/index.ts
@@ -1,5 +1,7 @@
-export { BasicExample } from './basicExample';
-export { HighlightExample } from './highlightExample';
-export { SizeExample } from './sizeExample';
-export { SpanExample } from './spanExample';
-export { VariationExample } from './variationExample';
+export { BasicExample } from './BasicExample';
+export { HighlightExample } from './HighlightExample';
+export { SizeExample } from './SizeExample';
+export { SpanExample } from './SpanExample';
+export { TableFontSizePropExample } from './TableFontSizePropExample';
+export { TableStylePropExample } from './TableStylePropExample';
+export { VariationExample } from './VariationExample';