feat: add new Toolbar component (#236)

* feat: add initial Toolbar and subcomponent declarations

* feat: add initial Toolbar styles structure

* feat: add getContrastColor util fn to simplify setting colours

* feat: add Toolbar container styles

* fix: correct fontSizes of Buttons at various sizes

* feat: add ToolbarButton component and styles

* feat: add ToolbarGroup component and styles

* feat: pass colorScheme in context instead of theme

* feat: map ToolbarIcon size depending on size prop passed into Toolbar

* feat: add ToolbarIconButton component

* feat: update Toolbar stories

* fix: add Button stories for sizing

react/src/Button/Button.stories.tsx

@@ -191,3 +191,60 @@ LinkPrimary.args = {
   variant: 'link',
   colorScheme: 'brand.primary',
 }
+
+export const Sizes = () => (
+  <SimpleGrid columns={4} gap="1rem" textAlign="center">
+    <Text>Solid</Text>
+    <Text>Outline</Text>
+    <Text>Clear</Text>
+    <Text>Reverse</Text>
+    <Button size="xs" variant="solid">
+      extra small
+    </Button>
+    <Button size="xs" variant="outline">
+      extra small
+    </Button>
+    <Button size="xs" variant="clear" colorScheme="neutral">
+      extra small
+    </Button>
+    <Button size="xs" variant="reverse">
+      extra small
+    </Button>
+    <Button size="sm" variant="solid">
+      small
+    </Button>
+    <Button size="sm" variant="outline">
+      small
+    </Button>
+    <Button size="sm" variant="clear" colorScheme="neutral">
+      small
+    </Button>
+    <Button size="sm" variant="reverse">
+      small
+    </Button>
+    <Button size="md" variant="solid">
+      medium
+    </Button>
+    <Button size="md" variant="outline">
+      medium
+    </Button>
+    <Button size="md" variant="clear" colorScheme="neutral">
+      medium
+    </Button>
+    <Button size="md" variant="reverse">
+      medium
+    </Button>
+    <Button size="lg" variant="solid">
+      large
+    </Button>
+    <Button size="lg" variant="outline">
+      large
+    </Button>
+    <Button size="lg" variant="clear" colorScheme="neutral">
+      large
+    </Button>
+    <Button size="lg" variant="reverse">
+      large
+    </Button>
+  </SimpleGrid>
+)

react/src/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,50 @@
+import { Spacer, Text } from '@chakra-ui/react'
+import { Meta, StoryFn } from '@storybook/react'
+
+import { BxsTimeFive, BxUpload } from '~/icons'
+
+import { Toolbar, ToolbarProps } from './Toolbar'
+import { ToolbarButton } from './ToolbarButton'
+import { ToolbarDivider } from './ToolbarDivider'
+import { ToolbarGroup } from './ToolbarGroup'
+import { ToolbarIconButton } from './ToolbarIconButton'
+
+export default {
+  title: 'Components/Toolbar',
+  component: Toolbar,
+  decorators: [],
+  tags: ['autodocs'],
+} as Meta<ToolbarProps>
+
+const Template: StoryFn<ToolbarProps> = ({ children, ...args }) => {
+  return (
+    <Toolbar {...args}>
+      <Text>1 item selected</Text>
+      <Spacer />
+      {children}
+      <ToolbarGroup>
+        <ToolbarButton leftIcon={<BxUpload fontSize="1.25rem" />}>
+          Download
+        </ToolbarButton>
+        <ToolbarButton leftIcon={<BxsTimeFive fontSize="1.25rem" />}>
+          Move
+        </ToolbarButton>
+        <ToolbarDivider />
+        <ToolbarIconButton icon={<BxUpload />} aria-label="Upload" />
+        <ToolbarDivider />
+        <ToolbarButton>Cancel</ToolbarButton>
+      </ToolbarGroup>
+    </Toolbar>
+  )
+}
+export const TemplateExample = Template.bind({})
+
+export const NeutralColorScheme = Template.bind({})
+NeutralColorScheme.args = {
+  colorScheme: 'neutral',
+}
+
+export const SizeXs = Template.bind({})
+SizeXs.args = {
+  size: 'xs',
+}

react/src/Toolbar/Toolbar.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react'
+import {
+  createStylesContext,
+  Flex,
+  FlexProps,
+  ThemingProps,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
+
+import { ToolbarProvider } from './ToolbarContext'
+
+const [ToolbarStylesProvider, useToolbarStyles] = createStylesContext('Toolbar')
+
+export { useToolbarStyles }
+
+export interface ToolbarProps extends PropsWithChildren, FlexProps {
+  colorScheme?: 'main' | 'neutral' | 'sub'
+  size?: ThemingProps<'Toolbar'>['size']
+}
+
+/**
+ * Container for the toolbar.
+ */
+export const Toolbar = ({ children, ...props }: ToolbarProps): JSX.Element => {
+  const styles = useMultiStyleConfig('Toolbar', props)
+  return (
+    <ToolbarProvider {...props}>
+      <ToolbarStylesProvider value={styles}>
+        <Flex __css={styles.container} {...props}>
+          {children}
+        </Flex>
+      </ToolbarStylesProvider>
+    </ToolbarProvider>
+  )
+}

react/src/Toolbar/ToolbarButton.tsx

@@ -0,0 +1,11 @@
+import { Button, ButtonProps } from '~/Button'
+
+import { useToolbarButtonProps } from './utils/useToolbarButtonProps'
+
+export type ToolbarButtonProps = ButtonProps
+
+export const ToolbarButton = (props: ToolbarButtonProps): JSX.Element => {
+  const toolbarButtonProps = useToolbarButtonProps()
+
+  return <Button variant="clear" {...toolbarButtonProps} {...props} />
+}

react/src/Toolbar/ToolbarContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, FC, PropsWithChildren, useContext } from 'react'
+import { ThemingProps } from '@chakra-ui/react'
+
+export interface ToolbarContextProps {
+  colorScheme?: 'main' | 'neutral' | 'sub'
+  size?: ThemingProps<'Toolbar'>['size']
+}
+
+export type ToolbarContextReturn = Required<ToolbarContextProps>
+
+const ToolbarContext = createContext<ToolbarContextReturn | undefined>(
+  undefined,
+)
+
+export const ToolbarProvider: FC<PropsWithChildren<ToolbarContextProps>> = ({
+  children,
+  colorScheme = 'sub',
+  size = 'md',
+}) => {
+  return (
+    <ToolbarContext.Provider value={{ colorScheme, size }}>
+      {children}
+    </ToolbarContext.Provider>
+  )
+}
+
+export const useToolbarContext = () => {
+  const context = useContext(ToolbarContext)
+  if (!context) {
+    throw new Error('useToolbar must be used within a ToolbarProvider')
+  }
+  return context
+}

react/src/Toolbar/ToolbarDivider.tsx

@@ -0,0 +1,11 @@
+import { Divider, DividerProps } from '@chakra-ui/react'
+
+import { useToolbarStyles } from './Toolbar'
+
+export type ToolbarDividerProps = DividerProps
+
+export const ToolbarDivider = (props: ToolbarDividerProps): JSX.Element => {
+  const styles = useToolbarStyles()
+
+  return <Divider orientation="vertical" __css={styles.divider} {...props} />
+}

react/src/Toolbar/ToolbarGroup.tsx

@@ -0,0 +1,19 @@
+import { Wrap, WrapProps } from '@chakra-ui/react'
+
+import { useToolbarStyles } from './Toolbar'
+
+export type ToolbarGroupProps = WrapProps
+
+export const ToolbarGroup = (props: ToolbarGroupProps): JSX.Element => {
+  const styles = useToolbarStyles()
+  return (
+    <Wrap
+      shouldWrapChildren
+      overflow="initial"
+      flexDir="row"
+      __css={styles.group}
+      spacing="0.5rem"
+      {...props}
+    />
+  )
+}

react/src/Toolbar/ToolbarIconButton.tsx

@@ -0,0 +1,13 @@
+import { IconButton, IconButtonProps } from '~/IconButton'
+
+import { useToolbarButtonProps } from './utils/useToolbarButtonProps'
+
+export type ToolbarIconButtonProps = IconButtonProps
+
+export const ToolbarIconButton = (
+  props: ToolbarIconButtonProps,
+): JSX.Element => {
+  const toolbarButtonProps = useToolbarButtonProps()
+
+  return <IconButton variant="clear" {...toolbarButtonProps} {...props} />
+}

react/src/Toolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './Toolbar'
+export * from './ToolbarButton'
+export * from './ToolbarDivider'
+export * from './ToolbarGroup'
+export * from './ToolbarIconButton'

react/src/Toolbar/utils/useToolbarButtonProps.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react'
+import { useBreakpointValue } from '@chakra-ui/react'
+
+import { ButtonProps } from '~/Button'
+import { layerStyles } from '~/theme/layerStyles'
+
+import { useToolbarContext } from '../ToolbarContext'
+
+export const useToolbarButtonProps = (): ButtonProps => {
+  const { colorScheme, size } = useToolbarContext()
+
+  const toolbarBreakpointSize = useBreakpointValue(
+    typeof size === 'string' ? { base: size } : size,
+  )
+
+  const toolbarSize = useMemo(() => {
+    switch (toolbarBreakpointSize) {
+      case 'xs':
+        return 'xs'
+      default:
+        return 'sm'
+    }
+  }, [toolbarBreakpointSize])
+
+  const toolbarButtonStyleProps: Partial<ButtonProps> = useMemo(() => {
+    switch (colorScheme) {
+      case 'main':
+      case 'sub':
+        return {
+          colorScheme: 'inverse',
+          _focusVisible: layerStyles.focusRing.inverse._focusVisible,
+        }
+      default:
+        return { colorScheme }
+    }
+  }, [colorScheme])
+
+  return {
+    ...toolbarButtonStyleProps,
+    size: toolbarSize,
+  }
+}

react/src/index.ts

@@ -37,4 +37,5 @@ export * from './theme'
 export * from './Tile'
 export * from './Toast'
 export * from './Toggle'
+export * from './Toolbar'
 export * from './Tooltip'

react/src/theme/components/Badge.ts

@@ -1,7 +1,7 @@
 import { defineStyle } from '@chakra-ui/react'
 import { getColor, SystemStyleObject } from '@chakra-ui/theme-tools'
 
-import { meetsWcagAaRatio } from '~/theme/utils/contrast'
+import { getContrastColor } from '~/theme/utils/contrast'
 
 import { textStyles } from '../textStyles'
 
@@ -27,10 +27,7 @@ const variantSolid = defineStyle((props) => {
   const bgColor = getColor(theme, solidBgTokenMap[c] ?? `${c}.500`)
   let textColor = getColor(theme, 'base.content.inverse')
 
-  const hasSufficientContrast = meetsWcagAaRatio(textColor, bgColor)
-  if (!hasSufficientContrast) {
-    textColor = 'base.content.default'
-  }
+  textColor = getContrastColor(textColor, bgColor, 'base.content.default')
 
   return {
     bg: bgColor,

react/src/theme/components/Button.ts

@@ -4,7 +4,7 @@ import { merge } from 'lodash'
 
 import { layerStyles } from '../layerStyles'
 import { textStyles } from '../textStyles'
-import { meetsWcagAaRatio } from '../utils'
+import { getContrastColor } from '../utils'
 import { hexToRgba } from '../utils/hexToRgba'
 
 import { Link } from './Link'
@@ -53,14 +53,13 @@ const genVariantSolidColours = ({
       }
     }
   }
-  const hasSufficientContrast = meetsWcagAaRatio(
+  // Note that using the fallback content colour for the button text could still result in bad contrast.
+  color = getContrastColor(
     getColor(theme, color),
     getColor(theme, solidVariantProps.bg),
+    'base.content.default',
   )
-  // Note that using the default content colour for the button text could still result in bad contrast.
-  if (!hasSufficientContrast) {
-    color = 'base.content.default'
-  }
+
   return { ...solidVariantProps, color }
 }
 
@@ -296,18 +295,22 @@ const baseStyle = defineStyle({
 
 const sizes = {
   xs: defineStyle({
+    ...textStyles['subhead-2'],
     minH: '2.25rem',
     minW: '2.25rem',
   }),
   sm: defineStyle({
+    ...textStyles['subhead-1'],
     minH: '2.5rem',
     minW: '2.5rem',
   }),
   md: defineStyle({
+    ...textStyles['subhead-1'],
     minH: '2.75rem',
     minW: '2.75rem',
   }),
   lg: defineStyle({
+    ...textStyles['subhead-1'],
     minH: '3rem',
     minW: '3rem',
   }),