Basic Table Primitive, styling, and docs

.changeset/polite-rings-roll.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react': patch
+---
+
+Adds React Table primitive

docs/src/components/TablePropControls.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import {
+  CheckboxField,
+  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: (
+    value: React.SetStateAction<TableProps['highlightOnHover']>
+  ) => void;
+  setSize: (value: React.SetStateAction<TableProps['size']>) => void;
+  setSummary: (value: React.SetStateAction<TableProps['summary']>) => void;
+  setVariation: (value: React.SetStateAction<TableProps['variation']>) => void;
+}
+
+interface TablePropControlsInterface {
+  (props: TablePropControlsProps): JSX.Element;
+}
+
+export const TablePropControls: TablePropControlsInterface = ({
+  highlightOnHover,
+  setCaption,
+  setHighlightOnHover,
+  setSize,
+  setSummary,
+  setVariation,
+  size,
+  variation,
+}) => (
+  <DemoBox primitiveName="Table">
+    <TextField
+      id="caption-control"
+      label="caption"
+      name="caption-control"
+      placeholder="Table Caption"
+      onChange={(event) =>
+        setCaption(event.target.value as TableProps['caption'])
+      }
+    />
+    <TextField
+      id="summary-control"
+      label="summary"
+      name="summary-control"
+      placeholder="Table Summary"
+      onChange={(event) =>
+        setSummary(event.target.value as TableProps['summary'])
+      }
+    />
+    <CheckboxField
+      name="highlightonhover"
+      value="false"
+      checked={highlightOnHover}
+      onChange={(e) => setHighlightOnHover(e.target.checked)}
+    >
+      highlightOnHover
+    </CheckboxField>
+    <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>
+);

docs/src/components/useTableProps.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { TableProps } from '@aws-amplify/ui-react';
+
+import { TablePropControlsProps } from './TablePropControls';
+
+interface UseTableProps {
+  (initialValues?: TableProps): TablePropControlsProps;
+}
+
+export const useTableProps: UseTableProps = (initialValues) => {
+  const [caption, setCaption] = useState<TableProps['caption']>(
+    initialValues.caption
+  );
+
+  const [highlightOnHover, setHighlightOnHover] = useState<
+    TableProps['highlightOnHover']
+  >(initialValues.highlightOnHover);
+
+  const [size, setSize] = useState<TableProps['size']>(initialValues.size);
+
+  const [summary, setSummary] = useState<TableProps['summary']>(
+    initialValues.summary
+  );
+
+  const [variation, setVariation] = useState<TableProps['variation']>(
+    initialValues.variation
+  );
+
+  return {
+    caption,
+    highlightOnHover,
+    setCaption,
+    setHighlightOnHover,
+    setSize,
+    setSummary,
+    setVariation,
+    size,
+    summary,
+    variation,
+  };
+};

docs/src/pages/ui/primitives/table/demo.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import {
+  Flex,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@aws-amplify/ui-react';
+
+import { Example } from '@/components/Example';
+import { TablePropControls } from '@/components/TablePropControls';
+import { useTableProps } from '@/components/useTableProps';
+
+export const TableDemo = () => {
+  const tableProps = useTableProps({
+    caption: '',
+    highlightOnHover: false,
+    size: '',
+    summary: '',
+    variation: '',
+  });
+
+  return (
+    <Flex direction="column" gap="0.5rem">
+      <TablePropControls {...tableProps} />
+      <Example>
+        <Table
+          caption={tableProps.caption}
+          highlightOnHover={tableProps.highlightOnHover}
+          size={tableProps.size}
+          summary={tableProps.summary}
+          variation={tableProps.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>
+      </Example>
+    </Flex>
+  );
+};

docs/src/pages/ui/primitives/table/index.page.mdx

@@ -0,0 +1,7 @@
+---
+title: Table
+---
+
+import { Fragment } from '@/components/Fragment';
+
+<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>