@utilitywarehouse/hearth-react-native 0.19.1 → 0.21.0

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

@@ -2,6 +2,7 @@ import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/bl
 import { BodyText, Box, Center, Grid } from '../..';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Grid.stories';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 <Meta title="Primitives / Grid" />
 
@@ -26,17 +27,17 @@ The Grid component helps you create responsive grid layouts with configurable co
 <UsageWrap>
   <Center>
     <Grid columns={2} spacing="md" width={300}>
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
@@ -44,20 +45,21 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 ```jsx
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid columns={2} spacing="md" width={300}>
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );
@@ -79,17 +81,17 @@ The Grid component supports responsive column layouts based on screen size break
       spacing="md"
       width="100%"
     >
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
@@ -97,6 +99,7 @@ The Grid component supports responsive column layouts based on screen size break
 
 ```jsx
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid
@@ -109,17 +112,17 @@ const MyComponent = () => (
     spacing="md"
     width="100%"
   >
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );
@@ -132,38 +135,39 @@ You can specify different horizontal and vertical spacing:
 <UsageWrap>
   <Center>
     <Grid columns={2} columnGap={24} rowGap={16}>
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
 </UsageWrap>
 
 ```jsx
-import { Grid, Box } from '@utilitywarehouse/hearth-react-native';
+import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid columns={2} columnGap={24} rowGap={8}>
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );

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

@@ -1,22 +1,8 @@
-import type { Ref } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { CommonTextProps } from '../../types';
 
-interface HeadingProps extends TextProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  strikeThrough?: boolean;
-  underline?: boolean;
-  truncated?: boolean;
-  color?: ColorValue;
-  textTransform?: TextStyle['textTransform'];
-  textAlign?: TextStyle['textAlign'];
-  textAlignVertical?: TextStyle['textAlignVertical'];
-  textDecorationLine?: TextStyle['textDecorationLine'];
-  textDecorationStyle?: TextStyle['textDecorationStyle'];
-  textDecorationColor?: ColorValue;
-  userSelect?: TextStyle['userSelect'];
-  inverted?: boolean;
-  ref?: Ref<Text>;
+interface HeadingProps extends CommonTextProps {
+  /** Heading size variant. */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 export default HeadingProps;

package/src/components/Heading/Heading.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { Heading } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { coloursAsArray } from '../../utils';
+import { textColorKeys } from '../../utils/coloursAsArray';
 import { Box } from '../Box';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -35,7 +36,7 @@ const meta = {
       description: 'Strike through the text.',
     },
     color: {
-      options: coloursAsArray(),
+      options: textColorKeys,
       control: 'select',
       description: 'Color of the text. Use the color name from the theme.',
     },

package/src/components/Heading/Heading.tsx

@@ -1,9 +1,7 @@
-import { useMemo } from 'react';
 import { Text, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import type { ColorValue } from '../../types';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 import type HeadingProps from './Heading.props';
 
 const Heading = ({
@@ -23,26 +21,19 @@ const Heading = ({
   inverted,
   ...props
 }: HeadingProps) => {
+  // Extract margin utility props from remaining props
+  const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
+
   styles.useVariants({
     size,
     underline,
     strikeThrough,
     inverted,
   });
-  const { color: themeColor, colorMode } = useTheme();
-  const colorValue: ColorValue = useMemo(
-    () => getFlattenedColorValue(color, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]
-  );
-  const decorationColor = useMemo(
-    () => getFlattenedColorValue(textDecorationColor, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]
-  );
+
   return (
     <Text
-      {...props}
+      {...remainingProps}
       {...(truncated
         ? {
             numberOfLines: 1,
@@ -51,16 +42,16 @@ const Heading = ({
         : {})}
       style={[
         styles.text,
+        utilityStyles,
         {
-          ...(colorValue ? { color: colorValue } : {}),
           ...(textTransform ? { textTransform } : {}),
           ...(textAlign ? { textAlign } : {}),
           ...(textAlignVertical ? { textAlignVertical } : {}),
-          ...(decorationColor && { textDecorationColor: decorationColor }),
           ...(textDecorationLine && { textDecorationLine }),
           ...(textDecorationStyle && { textDecorationStyle }),
           ...(userSelect && { userSelect }),
         },
+        styles.getColours(color, textDecorationColor),
         props.style,
       ]}
     >
@@ -147,6 +138,23 @@ const styles = StyleSheet.create(theme => ({
             lg: theme.typography.desktop.heading.xl.lineHeight,
           },
         },
+        '2xl': {
+          fontSize: {
+            base: theme.typography.mobile.heading['2xl'].fontSize,
+            md: theme.typography.tablet.heading['2xl'].fontSize,
+            lg: theme.typography.desktop.heading['2xl'].fontSize,
+          },
+          fontWeight: {
+            base: theme.typography.mobile.heading['2xl'].fontWeight,
+            md: theme.typography.tablet.heading['2xl'].fontWeight,
+            lg: theme.typography.desktop.heading['2xl'].fontWeight,
+          },
+          lineHeight: {
+            base: theme.typography.mobile.heading['2xl'].lineHeight,
+            md: theme.typography.tablet.heading['2xl'].lineHeight,
+            lg: theme.typography.desktop.heading['2xl'].lineHeight,
+          },
+        },
       },
       underline: {
         true: {
@@ -165,6 +173,20 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
+  getColours: (color?: string, textDecorationColor?: string) => ({
+    ...(color
+      ? {
+          color: resolveThemeValueWithFallback(
+            color,
+            theme.helpers.semanticColor.text,
+            theme.color
+          ),
+        }
+      : {}),
+    ...(textDecorationColor
+      ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+      : {}),
+  }),
 }));
 
 export default Heading;

package/src/components/PillGroup/Pill.figma.tsx

@@ -1,25 +1,12 @@
 import figma from '@figma/code-connect';
-import { Pill } from './Pill';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { Pill } from '../';
 
 figma.connect(Pill, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15595', {
   props: {
-    // These props were automatically mapped based on your linked code:
     label: figma.string('Label'),
-    focusable: figma.enum('State', {
-      Focus: true,
+    icon: figma.boolean('Icon?', {
+      true: figma.instance('Icon-20'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "label": figma.string('Label'),
-    // "icon": figma.boolean('Icon?'),
-    // "icon20": figma.instance('Icon-20'),
-    // "selected": figma.boolean('Selected?')
   },
-  example: props => <Pill value={null} label={props.label} focusable={props.focusable} />,
+  example: props => <Pill value={props.label} label={props.label} />,
 });

package/src/components/PillGroup/PillGroup.figma.tsx

@@ -1,21 +1,20 @@
 import figma from '@figma/code-connect';
-import { PillGroup } from './PillGroup';
+import { PillGroup } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const value = '';
 
 figma.connect(
   PillGroup,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15988',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       wrap: figma.boolean('Wrap?'),
+      pills: figma.children('Pill'),
     },
-    example: props => <PillGroup value={null} wrap={props.wrap} />,
+    example: props => (
+      <PillGroup value={value} wrap={props.wrap}>
+        {props.pills}
+      </PillGroup>
+    ),
   }
 );

package/src/components/ProgressStepper/ProgressStep.figma.tsx

@@ -1,30 +1,19 @@
 import figma from '@figma/code-connect';
-import ProgressStep from './ProgressStep';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { ProgressStep } from '../';
 
 figma.connect(
   ProgressStep,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A1987',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       status: figma.enum('State', {
         Complete: 'complete',
         Active: 'active',
         Incomplete: 'incomplete',
       }),
-      // No matching props could be found for these Figma properties:
-      // "label": figma.string('Label'),
-      // "label": figma.boolean('Label?'),
-      // "stepNumber": figma.string('Step number'),
-      // "interactive": figma.boolean('Interactive?')
+      label: figma.string('Label'),
+      id: figma.string('Step number'),
     },
-    example: props => <ProgressStep id={null} status={props.status} />,
+    example: props => <ProgressStep id={props.id} status={props.status} />,
   }
 );

package/src/components/ProgressStepper/ProgressStepper.figma.tsx

@@ -1,20 +1,13 @@
-import React from "react"
-import ProgressStepper from "./ProgressStepper"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { ProgressStepper } from '../';
 
 figma.connect(
   ProgressStepper,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000',
   {
-    props: {},
-    example: (props) => <ProgressStepper />,
-  },
-)
+    props: {
+      steps: figma.children('Step'),
+    },
+    example: props => <ProgressStepper>{props.steps}</ProgressStepper>,
+  }
+);

package/src/components/Radio/Radio.figma.tsx

@@ -1,25 +1,38 @@
 import figma from '@figma/code-connect';
 import Radio from './Radio';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(Radio, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A12685', {
-  props: {
-    // No matching props could be found for these Figma properties:
-    // "helperText": figma.boolean('Helper text?'),
-    // "helperText": figma.string('Helper text'),
-    // "label": figma.string('Label'),
-    // "image": figma.boolean('Image?'),
-    // "state": figma.enum('State', {
-    //   "Default": "default"
-    // }),
-    // "checked": figma.boolean('Checked?')
-  },
-  example: props => <Radio value={null} />,
-});
+figma.connect(
+  Radio,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7428-12685&m=dev',
+  {
+    props: {
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      label: figma.string('Label'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Radio Image'),
+      }),
+      state: figma.enum('State', {
+        Default: 'default',
+      }),
+      checked: figma.boolean('Checked?'),
+      indicator: figma.nestedProps('Radio Item', {
+        disabled: figma.enum('State', {
+          Disabled: true,
+        }),
+      }),
+    },
+    example: props => (
+      <Radio
+        label={props.label}
+        helperText={props.helperText}
+        image={props.image}
+        state={props.state}
+        checked={props.checked}
+        disabled={props.indicator.disabled}
+        value="someValue"
+      />
+    ),
+  }
+);

package/src/components/Radio/RadioGroup.figma.tsx

@@ -1,54 +1,82 @@
-import React from "react"
-import RadioGroup from "./RadioGroup"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { RadioGroup } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const props = {
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+  }),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  direction: figma.enum('Direction', {
+    Row: 'row',
+  }),
+  label: figma.string('Group label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation text'),
+  }),
+};
+
+const value = '';
+const setValue = (value: string) => {};
 
 figma.connect(
   RadioGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13254",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
   {
+    variant: {
+      Content: 'Radio',
+    },
     props: {
-      // These props were automatically mapped based on your linked code:
-      label: figma.string("Group label"),
-      helperText: figma.string("Helper text"),
-      invalidText: figma.string("Helper text"),
-      validText: figma.string("Validation text"),
-      direction: figma.enum("Direction", {
-        Row: "row",
-        Column: "column",
-      }),
-      // No matching props could be found for these Figma properties:
-      // "groupLabel": figma.string('Group label'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "validationText": figma.string('Validation text'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid"
-      // }),
-      // "labelVariant": figma.enum('Label variant', {
-      //   "Body": "body",
-      //   "Heading": "heading"
-      // }),
-      // "content": figma.enum('Content', {
-      //   "Radio": "radio",
-      //   "Radio Tile": "radio-tile"
-      // })
+      ...props,
+      items: figma.children('Radio'),
     },
-    example: (props) => (
+    example: props => (
       <RadioGroup
         label={props.label}
         helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        labelVariant={props.labelVariant}
+        direction={props.direction}
         invalidText={props.invalidText}
-        validText={props.validText}
+        value={value}
+        onChange={value => setValue(value)}
+      >
+        {props.items}
+      </RadioGroup>
+    ),
+  }
+);
+
+figma.connect(
+  RadioGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Content: 'Radio Tile',
+    },
+    props: {
+      ...props,
+      items: figma.children('Radio Tile'),
+    },
+    example: props => (
+      <RadioGroup
+        label={props.label}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        labelVariant={props.labelVariant}
         direction={props.direction}
-      />
+        invalidText={props.invalidText}
+        type="tile"
+        value={value}
+        onChange={value => setValue(value)}
+      >
+        {props.items}
+      </RadioGroup>
     ),
-  },
-)
+  }
+);