feat: add Table component and styling

react/.storybook/foundations/Colours/ColourTable.tsx

@@ -3,12 +3,12 @@ import {
   TableCaption,
   Tbody,
   Td,
-  Th,
   Thead,
   Tr,
   useTheme,
 } from '@chakra-ui/react'
 import { get } from 'lodash'
+import { Th } from '~/Table'
 
 interface ColourTableProps {
   label: string
@@ -25,7 +25,7 @@ export const ColourTable = ({
   const theme = useTheme()
 
   return (
-    <Table variant="simple">
+    <Table colorScheme='neutral'>
       <TableCaption>{label}</TableCaption>
       <Thead>
         <Tr>

react/.storybook/foundations/Utilities/Utilities.tsx

@@ -11,11 +11,11 @@ import {
   Tbody,
   Td,
   Text,
-  Th,
   Thead,
   Tr,
   useTheme,
 } from '@chakra-ui/react'
+import { Th } from '~/Table'
 
 export const Utilities = (): JSX.Element => {
   const theme = useTheme()
@@ -88,7 +88,7 @@ export const Utilities = (): JSX.Element => {
           <Text as="h2" textStyle="h2" color="brand.primary.500" mb="1.5rem">
             Spacing
           </Text>
-          <Table variant="simple">
+          <Table colorScheme='neutral'>
             <TableCaption>Spacing</TableCaption>
             <Thead>
               <Tr>

react/src/Menu/Menu.stories.tsx

@@ -143,12 +143,12 @@ export const Playground: StoryFn = () => {
           </>
         )}
       </Menu>
-      <Table variant="simple" width="80%" mt="20px">
-        <Thead bgColor="#444">
+      <Table width="80%" mt="20px">
+        <Thead>
           <Tr>
-            <Th textColor="white">#</Th>
-            <Th textColor="white">Response ID</Th>
-            <Th textColor="white">Time</Th>
+            <Th>#</Th>
+            <Th>Response ID</Th>
+            <Th>Time</Th>
           </Tr>
         </Thead>
         <Tbody>

react/src/Table/Table.stories.tsx

@@ -0,0 +1,97 @@
+import {
+  Table,
+  TableCaption,
+  TableContainer,
+  TableProps,
+  Tbody,
+  Td,
+  Tfoot,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+import { Meta, StoryFn } from '@storybook/react'
+
+import { Th } from './Th'
+
+export default {
+  title: 'Components/Table',
+  component: Table,
+  decorators: [],
+  tags: ['autodocs'],
+} as Meta<TableProps>
+
+const Template: StoryFn<TableProps> = (args) => {
+  return (
+    <TableContainer>
+      <Table {...args}>
+        <TableCaption>Imperial to metric conversion factors</TableCaption>
+        <Thead>
+          <Tr>
+            <Th>To convert</Th>
+            <Th>into</Th>
+            <Th isNumeric>multiply by</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>inches</Td>
+            <Td>millimetres (mm)</Td>
+            <Td isNumeric>25.4</Td>
+          </Tr>
+          <Tr>
+            <Td>feet</Td>
+            <Td>centimetres (cm)</Td>
+            <Td isNumeric>30.48</Td>
+          </Tr>
+          <Tr>
+            <Td>yards</Td>
+            <Td>metres (m)</Td>
+            <Td isNumeric>0.91444</Td>
+          </Tr>
+        </Tbody>
+        <Tfoot>
+          <Tr>
+            <Th>To convert</Th>
+            <Th>into</Th>
+            <Th isNumeric>multiply by</Th>
+          </Tr>
+        </Tfoot>
+      </Table>
+    </TableContainer>
+  )
+}
+export const Default = Template.bind({})
+
+export const NeutralColorScheme = Template.bind({})
+NeutralColorScheme.args = {
+  colorScheme: 'neutral',
+}
+
+export const InteractableHeaders: StoryFn<TableProps> = (args) => {
+  return (
+    <TableContainer>
+      <Table {...args}>
+        <Thead>
+          <Tr>
+            <Th onClick={() => alert('Column 1 clicked')}>Interactable</Th>
+            <Th>Not interactable</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>inches</Td>
+            <Td>millimetres (mm)</Td>
+          </Tr>
+          <Tr>
+            <Td>feet</Td>
+            <Td>centimetres (cm)</Td>
+          </Tr>
+          <Tr>
+            <Td>yards</Td>
+            <Td>metres (m)</Td>
+          </Tr>
+        </Tbody>
+      </Table>
+    </TableContainer>
+  )
+}

react/src/Table/Th.tsx

@@ -0,0 +1,19 @@
+import { TableColumnHeaderProps, useTableStyles } from '@chakra-ui/react'
+import { chakra, forwardRef } from '@chakra-ui/system'
+
+import { omitInteractivePseudos } from './utils/omitInteractivePseudos'
+
+export const Th = forwardRef<TableColumnHeaderProps, 'th'>(
+  ({ isNumeric, ...props }, ref) => {
+    const styles = useTableStyles()
+    const thStyles = omitInteractivePseudos(props, styles.th)
+    return (
+      <chakra.th
+        {...props}
+        ref={ref}
+        __css={thStyles}
+        data-is-numeric={isNumeric}
+      />
+    )
+  },
+)

react/src/Table/index.ts

@@ -0,0 +1,14 @@
+import {
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Tfoot,
+  Thead,
+  Tr,
+} from '@chakra-ui/react'
+
+export * from './Th'
+
+export { Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Thead, Tr }

react/src/Table/utils/omitInteractivePseudos.ts

@@ -0,0 +1,54 @@
+import { DOMAttributes } from 'react'
+import { SystemStyleObject } from '@chakra-ui/react'
+import { omit } from 'lodash'
+
+type InteractableProps = Pick<
+  DOMAttributes<unknown>,
+  | 'onClick'
+  | 'onKeyDown'
+  | 'onKeyUp'
+  | 'onKeyPress'
+  | 'onMouseDown'
+  | 'onMouseUp'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseMove'
+  | 'onMouseOver'
+  | 'onMouseOut'
+  | 'onFocus'
+  | 'onBlur'
+>
+
+const isInteractive = (props: InteractableProps) => {
+  return (
+    !!props.onClick ||
+    !!props.onKeyDown ||
+    !!props.onKeyUp ||
+    !!props.onKeyPress ||
+    !!props.onMouseDown ||
+    !!props.onMouseUp ||
+    !!props.onMouseEnter ||
+    !!props.onMouseLeave ||
+    !!props.onMouseMove ||
+    !!props.onMouseOver ||
+    !!props.onMouseOut ||
+    !!props.onFocus ||
+    !!props.onBlur
+  )
+}
+
+const INTERACTIVE_PSEUDO_PROPS = ['_active', '_hover', '_pressed', '_selected']
+
+/**
+ * Function to omit interactive pseudos from a style object if the object is not
+ *  interactive (i.e. if it does not have an `onClick`, `onKeyDown` props, etc)
+ */
+export function omitInteractivePseudos(
+  props: InteractableProps,
+  styles: SystemStyleObject,
+): SystemStyleObject {
+  if (!isInteractive(props)) {
+    return omit(styles, INTERACTIVE_PSEUDO_PROPS)
+  }
+  return styles
+}

react/src/index.ts

@@ -29,6 +29,7 @@ export * from './Searchbar'
 export * from './SingleSelect'
 export * from './Spinner'
 export * from './Switch'
+export * from './Table'
 export * from './Tabs'
 export * from './Tag'
 export * from './TagInput'

react/src/theme/components/Table.ts

@@ -0,0 +1,140 @@
+import { tableAnatomy as parts } from '@chakra-ui/anatomy'
+import {
+  createMultiStyleConfigHelpers,
+  SystemStyleObject,
+} from '@chakra-ui/react'
+
+import { layerStyles } from '../layerStyles'
+import { textStyles } from '../textStyles'
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyle = definePartsStyle({
+  tr: {
+    pos: 'relative',
+  },
+})
+
+const sizes = {
+  xs: definePartsStyle({
+    th: {
+      py: '0.875rem',
+    },
+    td: {
+      py: '0.875rem',
+      px: '1rem',
+      textStyle: 'caption-2',
+    },
+  }),
+  sm: definePartsStyle({
+    th: {
+      ...textStyles['subhead-2'],
+      py: '0.875rem',
+    },
+    td: {
+      py: '0.875rem',
+      px: '1rem',
+      textStyle: 'caption-2',
+    },
+  }),
+  md: {
+    th: {
+      py: '1rem',
+    },
+    td: {
+      textStyle: 'body-2',
+      p: '1rem',
+    },
+  },
+  lg: {
+    th: {
+      py: '1.125rem',
+    },
+    td: {
+      textStyle: 'body-2',
+      px: '1rem',
+      py: '1.125rem',
+    },
+  },
+}
+
+const getSubtleVariantThStyles = (c: string): SystemStyleObject => {
+  const baseStyles: SystemStyleObject = {
+    textTransform: 'initial',
+    _focusVisible: {
+      ...layerStyles.focusRing.tightDefault._focusVisible,
+      outlineOffset: '-2px',
+    },
+  }
+
+  switch (c) {
+    case 'main':
+    case 'sub':
+    case 'critical':
+    case 'warning':
+    case 'success': {
+      return {
+        bg: `interaction.${c}-subtle.default`,
+        color: `interaction.${c}.default`,
+        _hover: {
+          bg: `interaction.${c}-subtle.hover`,
+          cursor: 'pointer',
+        },
+        _active: {
+          bg: `interaction.${c}-subtle.active`,
+        },
+        ...baseStyles,
+      }
+    }
+    case 'neutral': {
+      return {
+        bg: `interaction.${c}-subtle.default`,
+        color: 'base.content.medium',
+        _hover: {
+          bg: `interaction.${c}-subtle.hover`,
+          cursor: 'pointer',
+        },
+        _active: {
+          bg: `interaction.${c}-subtle.active`,
+        },
+        ...baseStyles,
+      }
+    }
+    default: {
+      return {
+        bg: `interaction.main-subtle.default`,
+        ...baseStyles,
+      }
+    }
+  }
+}
+
+const variantSubtle = definePartsStyle(({ colorScheme: c }) => {
+  return {
+    thead: {
+      bg: `interaction.${c}-subtle.default`,
+      opacity: 1,
+      zIndex: 1,
+    },
+    th: getSubtleVariantThStyles(c),
+    td: {
+      color: 'base.content.default',
+    },
+  }
+})
+
+const variants = {
+  subtle: variantSubtle,
+}
+
+export const Table = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'subtle',
+    size: 'md',
+    colorScheme: 'main',
+  },
+  sizes,
+})