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,
+})