@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/DescriptionList/DescriptionList.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { SectionHeader } from '../SectionHeader';
+import { DescriptionListContext } from './DescriptionList.context';
+import type DescriptionListProps from './DescriptionList.props';
+
+const DescriptionList = ({
+  direction = 'column',
+  itemHeadingWidth,
+  heading,
+  helperText,
+  linkText,
+  linkHref,
+  linkIcon,
+  linkIconPosition,
+  linkOnPress,
+  linkTarget,
+  linkShowIcon,
+  children,
+  style,
+  ...props
+}: DescriptionListProps) => {
+  styles.useVariants({ direction });
+  const value = useMemo(() => ({ direction, itemHeadingWidth }), [direction, itemHeadingWidth]);
+
+  return (
+    <DescriptionListContext.Provider value={value}>
+      <View accessibilityRole="list" {...props} style={[styles.container, style]}>
+        {heading ? (
+          <SectionHeader
+            heading={heading}
+            helperText={helperText}
+            linkText={linkText}
+            linkHref={linkHref}
+            linkIcon={linkIcon}
+            linkIconPosition={linkIconPosition}
+            linkOnPress={linkOnPress}
+            linkTarget={linkTarget}
+            linkShowIcon={linkShowIcon}
+          />
+        ) : null}
+        {children}
+      </View>
+    </DescriptionListContext.Provider>
+  );
+};
+
+DescriptionList.displayName = 'DescriptionList';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    width: theme.space.full,
+    gap: theme.components.descriptionList.gap,
+    variants: {
+      direction: {
+        row: {},
+        column: {},
+      },
+    },
+  },
+}));
+
+export default DescriptionList;

package/src/components/DescriptionList/DescriptionListItem.props.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export interface DescriptionListItemProps extends ViewProps {
+  /** Heading / label part */
+  heading: ReactNode;
+  /** Description / value part */
+  description: ReactNode;
+  headingWidth?: number;
+  linkText?: string;
+  linkHref?: string;
+  linkIcon?: ComponentType;
+  linkIconPosition?: 'left' | 'right';
+  linkOnPress?: () => void;
+  linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+  linkShowIcon?: boolean;
+}
+
+export default DescriptionListItemProps;

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -0,0 +1,101 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { Link } from '../Link';
+import { useDescriptionListContext } from './DescriptionList.context';
+import type DescriptionListItemProps from './DescriptionListItem.props';
+
+const DescriptionListItem = ({
+  heading,
+  description,
+  headingWidth,
+  linkText,
+  linkHref,
+  linkIcon,
+  linkIconPosition,
+  linkOnPress,
+  linkTarget,
+  linkShowIcon,
+  style,
+  ...props
+}: DescriptionListItemProps) => {
+  const { components } = useTheme();
+  const { direction, itemHeadingWidth = components.descriptionList.item.row.headingWidth } =
+    useDescriptionListContext();
+  styles.useVariants({ direction });
+  const headingIsText = typeof heading === 'string' || typeof heading === 'number';
+  const descIsText = typeof description === 'string' || typeof description === 'number';
+  const combinedLabel = headingIsText && descIsText ? `${heading}: ${description}` : undefined;
+  const hideDescendants = !!combinedLabel;
+  return (
+    <View
+      accessibilityRole="text"
+      accessible={!!combinedLabel}
+      accessibilityLabel={combinedLabel}
+      {...props}
+      style={[styles.item, style]}
+    >
+      <View
+        style={styles.textWrap}
+        importantForAccessibility={hideDescendants ? 'no-hide-descendants' : undefined}
+        accessibilityElementsHidden={hideDescendants || undefined}
+      >
+        <View style={[direction === 'row' && { width: headingWidth || itemHeadingWidth }]}>
+          {headingIsText ? <BodyText style={styles.headingText}>{heading}</BodyText> : heading}
+        </View>
+        <View style={styles.descriptionWrapper}>
+          {descIsText ? <BodyText>{description}</BodyText> : description}
+        </View>
+      </View>
+      {linkText ? (
+        <Link
+          href={linkHref}
+          onPress={linkOnPress}
+          target={linkTarget}
+          showIcon={linkShowIcon}
+          icon={linkIcon}
+          iconPosition={linkIconPosition}
+          accessibilityRole="link"
+        >
+          {linkText}
+        </Link>
+      ) : null}
+    </View>
+  );
+};
+
+DescriptionListItem.displayName = 'DescriptionListItem';
+
+const styles = StyleSheet.create(theme => ({
+  item: {
+    width: theme.space.full,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.components.descriptionList.item.gap,
+  },
+  textWrap: {
+    flex: 1,
+    variants: {
+      direction: {
+        row: {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: theme.components.descriptionList.item.row.gap,
+        },
+        column: {
+          flexDirection: 'column',
+          gap: theme.components.descriptionList.item.column.gap,
+        },
+      },
+    },
+  },
+  headingText: {
+    color: theme.color.text.secondary,
+  },
+  descriptionWrapper: {
+    flex: 1,
+  },
+}));
+
+export default DescriptionListItem;

package/src/components/DescriptionList/index.ts

@@ -0,0 +1,4 @@
+export { default as DescriptionList } from './DescriptionList';
+export type { default as DescriptionListProps } from './DescriptionList.props';
+export { default as DescriptionListItem } from './DescriptionListItem';
+export type { default as DescriptionListItemProps } from './DescriptionListItem.props';

package/src/components/DetailText/DetailText.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { Text } from 'react-native';
-import type DetailTextProps from './DetailText.props';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+import type DetailTextProps from './DetailText.props';
 
 const DetailText = ({
   children,
@@ -74,7 +74,7 @@ DetailText.displayName = 'DetailText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontWeight: theme.fontWeight.regular,
     fontFamily: theme.typography.mobile.detailText.fontFamily,
     fontStyle: 'normal',
@@ -138,7 +138,7 @@ const styles = StyleSheet.create(theme => ({
       },
       inverted: {
         true: {
-          color: theme.components.text.colorInverted,
+          color: theme.color.text.inverted,
         },
       },
     },

package/src/components/Divider/Divider.props.ts

@@ -1,9 +1,9 @@
 import type { DimensionValue, ViewProps } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { ColorValue, SpacingValues } from '../../types';
 
 interface DividerProps extends Omit<ViewProps, 'children'> {
   color?: ColorValue;
-  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  space?: SpacingValues;
   orientation?: 'horizontal' | 'vertical';
   height?: DimensionValue;
   width?: DimensionValue;

package/src/components/Divider/Divider.stories.tsx

@@ -1,7 +1,7 @@
-import { Divider } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Box } from '../Box';
+import { Divider } from '.';
 import { coloursAsArray } from '../../utils';
+import { Box } from '../Box';
 
 const meta = {
   title: 'Stories / Divider',
@@ -21,7 +21,7 @@ const meta = {
       description: 'Color of the divider',
     },
     space: {
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'select',
       description: 'Space between the divider',
     },

package/src/components/Divider/Divider.tsx

@@ -30,7 +30,7 @@ Divider.displayName = 'Divider';
 
 const styles = StyleSheet.create(theme => ({
   divider: {
-    backgroundColor: theme.components.divider.color,
+    backgroundColor: theme.color.border.subtle,
     variants: {
       orientation: {
         horizontal: {
@@ -44,11 +44,13 @@ const styles = StyleSheet.create(theme => ({
       },
       space: {
         none: {},
+        '2xs': {},
         xs: {},
         sm: {},
         md: {},
         lg: {},
         xl: {},
+        '2xl': {},
       },
       flexItem: {
         true: {
@@ -64,6 +66,17 @@ const styles = StyleSheet.create(theme => ({
           marginVertical: 0,
         },
       },
+      {
+        orientation: 'horizontal',
+        space: '2xs',
+        styles: {
+          marginVertical: {
+            base: theme.layout.mobile.spacing['2xs'],
+            md: theme.layout.tablet.spacing['2xs'],
+            lg: theme.layout.desktop.spacing['2xs'],
+          },
+        },
+      },
       {
         orientation: 'horizontal',
         space: 'xs',
@@ -119,6 +132,17 @@ const styles = StyleSheet.create(theme => ({
           },
         },
       },
+      {
+        orientation: 'horizontal',
+        space: '2xl',
+        styles: {
+          marginVertical: {
+            base: theme.layout.mobile.spacing['2xl'],
+            md: theme.layout.tablet.spacing['2xl'],
+            lg: theme.layout.desktop.spacing['2xl'],
+          },
+        },
+      },
       {
         orientation: 'vertical',
         space: 'none',
@@ -126,6 +150,17 @@ const styles = StyleSheet.create(theme => ({
           marginHorizontal: 0,
         },
       },
+      {
+        orientation: 'vertical',
+        space: '2xs',
+        styles: {
+          marginHorizontal: {
+            base: theme.layout.mobile.spacing['2xs'],
+            md: theme.layout.tablet.spacing['2xs'],
+            lg: theme.layout.desktop.spacing['2xs'],
+          },
+        },
+      },
       {
         orientation: 'vertical',
         space: 'xs',
@@ -181,6 +216,17 @@ const styles = StyleSheet.create(theme => ({
           },
         },
       },
+      {
+        orientation: 'vertical',
+        space: '2xl',
+        styles: {
+          marginHorizontal: {
+            base: theme.layout.mobile.spacing['2xl'],
+            md: theme.layout.tablet.spacing['2xl'],
+            lg: theme.layout.desktop.spacing['2xl'],
+          },
+        },
+      },
     ],
   },
   extraStyles: (color, width, height) => ({

package/src/components/Flex/Flex.docs.mdx

@@ -1,7 +1,7 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Center, Flex, Pressable } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Flex.stories';
-import { Center, Pressable, Flex, BodyText } from '../..';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
 
 <Meta title="Primitives / Flex" />
 
@@ -57,4 +57,4 @@ const MyComponent = () => (
 | `wrap`      | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | `nowrap`     | The wrap of the flex container.            |
 | `justify`   | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'space-between' \| 'space-around' \| 'space-evenly'` | `flex-start` | The justify content of the flex container. |
 | `align`     | `'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'`                                     | `flex-start` | The align items of the flex container.     |
-| `space`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                                                        | `md`         | The space between the content.             |
+| `space`     | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |

package/src/components/Flex/Flex.props.ts

@@ -1,11 +1,12 @@
-import type { ViewProps, ViewStyle, FlexAlignType } from 'react-native';
+import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
+import { SpacingValues } from '../../types';
 
 interface FlexProps extends ViewProps {
   direction?: ViewStyle['flexDirection'];
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];
   wrap?: ViewStyle['flexWrap'];
-  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  space?: SpacingValues;
 }
 
 export default FlexProps;

package/src/components/Flex/Flex.stories.tsx

@@ -40,7 +40,7 @@ const meta = {
       description: 'The justify of the flex container.',
     },
     space: {
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'The space of the flex container.',
     },

package/src/components/Grid/Grid.docs.mdx

@@ -1,7 +1,7 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Box, Center, Grid } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Grid.stories';
-import { Center, Grid, Box, BodyText } from '../..';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
 
 <Meta title="Primitives / Grid" />
 
@@ -173,15 +173,15 @@ const MyComponent = () => (
 
 The Grid component extends all the props from the [View component](https://reactnative.dev/docs/view), and adds the following:
 
-| Name             | Type                                             | Default | Description                                                   |
-| ---------------- | ------------------------------------------------ | ------- | ------------------------------------------------------------- |
-| `columns`        | `number` or `GridColumns`                        | 2       | Number of columns or responsive object with breakpoint values |
-| `space`          | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | -       | Spacing between grid items (both rows and columns)            |
-| `columnGap`      | `number`                                         | -       | Gap between columns (overrides spacing if provided)           |
-| `rowGap`         | `number`                                         | -       | Gap between rows (overrides spacing if provided)              |
-| `containerStyle` | `StyleProp\<ViewStyle\>`                         | -       | Style for the grid container                                  |
-| `itemStyle`      | `StyleProp\<ViewStyle\>`                         | -       | Style applied to each grid item                               |
-| `rowStyle`       | `StyleProp\<ViewStyle\>`                         | -       | Style applied to each row                                     |
+| Name             | Type                                                               | Default | Description                                                   |
+| ---------------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------- |
+| `columns`        | `number` or `GridColumns`                                          | 2       | Number of columns or responsive object with breakpoint values |
+| `space`          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
+| `columnGap`      | `number`                                                           | -       | Gap between columns (overrides spacing if provided)           |
+| `rowGap`         | `number`                                                           | -       | Gap between rows (overrides spacing if provided)              |
+| `containerStyle` | `StyleProp\<ViewStyle\>`                                           | -       | Style for the grid container                                  |
+| `itemStyle`      | `StyleProp\<ViewStyle\>`                                           | -       | Style applied to each grid item                               |
+| `rowStyle`       | `StyleProp\<ViewStyle\>`                                           | -       | Style applied to each row                                     |
 
 Where `GridColumns` is defined as:
 

package/src/components/Grid/Grid.props.ts

@@ -1,6 +1,6 @@
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { UnistylesBreakpoints } from 'react-native-unistyles';
-import { SpaceValue } from '../../types';
+import { SpaceValue, SpacingValues } from '../../types';
 
 // Create a type that uses the keys from our breakpoints object
 export type GridColumns = {
@@ -17,7 +17,7 @@ export interface GridProps extends ViewProps {
   /**
    * Spacing between grid items (applies to both rows and columns)
    */
-  space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  space?: SpacingValues;
 
   /**
    * Gap between items (overrides spacing if provided)

package/src/components/Grid/Grid.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { View, Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { Grid } from '.';
 
 const meta = {
@@ -14,7 +14,7 @@ const meta = {
       description: 'Number of columns or responsive object with breakpoints',
     },
     space: {
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'Responsive spacing between grid items (applied to both rows and columns).',
     },

package/src/components/Heading/Heading.props.ts

@@ -1,4 +1,5 @@
-import type { TextProps, TextStyle } from 'react-native';
+import type { Ref } from 'react';
+import type { Text, TextProps, TextStyle } from 'react-native';
 import type { ColorValue } from '../../types';
 
 interface HeadingProps extends TextProps {
@@ -15,6 +16,7 @@ interface HeadingProps extends TextProps {
   textDecorationColor?: ColorValue;
   userSelect?: TextStyle['userSelect'];
   inverted?: boolean;
+  ref?: Ref<Text>;
 }
 
 export default HeadingProps;

package/src/components/Heading/Heading.tsx

@@ -73,7 +73,7 @@ Heading.displayName = 'Heading';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontFamily: theme.typography.mobile.heading.fontFamily,
     marginVertical: 0,
     fontStyle: 'normal',
@@ -160,7 +160,7 @@ const styles = StyleSheet.create(theme => ({
       },
       inverted: {
         true: {
-          color: theme.components.text.colorInverted,
+          color: theme.color.text.inverted,
         },
       },
     },

package/src/components/Helper/HelperIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
 import { useHelperContext } from './HelperContext';
-import { Platform, StyleProp, ViewStyle } from 'react-native';
 
 const HelperIcon = (props: IconProps) => {
   const { validationStatus } = useHelperContext();
@@ -29,10 +29,10 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       validationStatus: {
         valid: {
-          color: theme.components.text.colorValid,
+          color: theme.color.feedback.positive.foreground.subtle,
         },
         invalid: {
-          color: theme.components.text.colorInvalid,
+          color: theme.color.feedback.danger.foreground.subtle,
         },
         initial: {},
       },

package/src/components/Helper/HelperText.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
 import TextProps from '../BodyText/BodyText.props';
 import { useHelperContext } from './HelperContext';
-import { BodyText } from '../BodyText';
 
 const HelperText = (props: TextProps) => {
   const { validationStatus, disabled } = useHelperContext();
@@ -22,14 +22,14 @@ HelperText.displayName = 'HelperText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.colorSecondary,
+    color: theme.color.text.secondary,
     variants: {
       validationStatus: {
         valid: {
-          color: theme.components.text.colorValid,
+          color: theme.color.feedback.positive.foreground.subtle,
         },
         invalid: {
-          color: theme.components.text.colorInvalid,
+          color: theme.color.feedback.danger.foreground.subtle,
         },
         initial: {},
       },

package/src/components/Icon/Icon.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { colors } from '@utilitywarehouse/colour-system';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { Icon } from '.';
 import { ColorValue } from '../../types';
+import { coloursAsArray } from '../../utils';
 
 const meta = {
   title: 'Stories / Icon',
@@ -19,7 +19,7 @@ const meta = {
       defaultValue: 'Helper text icon',
     },
     color: {
-      options: [...Object.keys(colors)],
+      options: coloursAsArray(),
       control: 'select',
       description: 'Background color of the Icon. Use the color name from the theme.',
     },

package/src/components/IconButton/IconButton.docs.mdx

@@ -1,12 +1,12 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './IconButton.stories';
-import { Button, ButtonText, ButtonIcon, IconButton, Center, Box } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import {
   AddSmallIcon,
-  ChevronRightSmallIcon,
   ChevronRightMediumIcon,
+  ChevronRightSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Box, Button, ButtonIcon, ButtonText, Center, IconButton } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './IconButton.stories';
 
 <Meta title="Components / Icon Button" />
 
@@ -37,7 +37,7 @@ The `IconButton` component is used to trigger an action or event, such as openin
       icon={ChevronRightMediumIcon}
       size="sm"
       onPress={() => console.log('Button pressed')}
-      colorScheme="green"
+      colorScheme="affirmative"
     />
   </Center>
 </UsageWrap>
@@ -51,22 +51,27 @@ const MyComponent = () => {
     console.log('Button pressed');
   };
   return (
-    <IconButton icon={ChevronRightMediumIcon} size="sm" onPress={handlePress} colorScheme="green" />
+    <IconButton
+      icon={ChevronRightMediumIcon}
+      size="sm"
+      onPress={handlePress}
+      colorScheme="affirmative"
+    />
   );
 };
 ```
 
 ## Props
 
-| Property      | Type                                              | Description                                                | Default  |
-| ------------- | ------------------------------------------------- | ---------------------------------------------------------- | -------- |
-| `onPress`     | `() => void`                                      | Callback function to be called when the button is pressed. | -        |
-| `variant`     | `'emphasis' \| 'solid' \| 'outline' \| 'ghost'`   | The variant of the button.                                 | 'solid'  |
-| `size`        | `'xs' \| 'md' `                                   | The size of the button.                                    | 'md'     |
-| `colorScheme` | `'yellow' \| 'green \| 'red' \| 'grey' \| 'gold'` | The colour scheme of the button.                           | 'yellow' |
-| `loading`     | `boolean`                                         | Changes the button to a loading state.                     | `false`  |
-| `disabled`    | `boolean`                                         | Disables the button.                                       | `false`  |
-| `pressed`     | `boolean`                                         | Changes the button to a pressed state.                     | `false`  |
+| Property      | Type                                                                     | Description                                                | Default     |
+| ------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
+| `onPress`     | `() => void`                                                             | Callback function to be called when the button is pressed. | -           |
+| `variant`     | `'emphasis' \| 'solid' \| 'outline' \| 'ghost'`                          | The variant of the button.                                 | 'solid'     |
+| `size`        | `'xs' \| 'md' `                                                          | The size of the button.                                    | 'md'        |
+| `colorScheme` | `'highlight' \| 'affirmative \| 'destructive' \| 'functional' \| 'gold'` | The colour scheme of the button.                           | 'highlight' |
+| `loading`     | `boolean`                                                                | Changes the button to a loading state.                     | `false`     |
+| `disabled`    | `boolean`                                                                | Disables the button.                                       | `false`     |
+| `pressed`     | `boolean`                                                                | Changes the button to a pressed state.                     | `false`     |
 
 ## Variants
 

package/src/components/IconButton/IconButton.figma.tsx

@@ -10,7 +10,7 @@
 //     red: 'red',
 //     green: 'green',
 //     gold: 'gold',
-//     grey: 'grey',
+//     grey: 'functional',
 //   }),
 //   size: figma.enum('size', {
 //     'medium - 48': 'medium',