@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

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',

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentType } from 'react';
-import { IconButton, IconButtonProps } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType } from 'react';
+import { IconButton, IconButtonProps } from '.';
+import { VariantTitle } from '../../../docs/components';
 import { Box } from '../Box';
 import { ButtonGroup } from '../Button';
-import { Flex } from '../Flex';
 import { DetailText } from '../DetailText';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / IconButton',
@@ -26,7 +26,7 @@ const meta = {
       description: 'The variant of the button.',
     },
     colorScheme: {
-      options: ['yellow', 'red', 'green', 'grey'],
+      options: ['highlight', 'destructive', 'affirmative', 'functional'],
       control: 'select',
       description: 'The color scheme of the button.',
     },
@@ -59,7 +59,7 @@ const meta = {
   args: {
     size: 'md',
     variant: 'solid',
-    colorScheme: 'yellow',
+    colorScheme: 'highlight',
     icon: 'AddMediumIcon' as unknown as ComponentType,
     loading: false,
     disabled: false,
@@ -89,17 +89,17 @@ export const Variants: Story = {
     return (
       <ButtonGroup flexDirection="column" space="md">
         <>
-          {args.colorScheme === 'yellow' && (
+          {args.colorScheme === 'highlight' && (
             <VariantTitle title="Emphasis" invert={args.inverted}>
               <IconButton {...args} variant="emphasis" icon={icon} />
             </VariantTitle>
           )}
-          {args.colorScheme !== 'grey' && (
+          {args.colorScheme !== 'functional' && (
             <VariantTitle title="Solid" invert={args.inverted}>
               <IconButton {...args} variant="solid" icon={icon} />
             </VariantTitle>
           )}
-          {args.colorScheme !== 'yellow' && (
+          {args.colorScheme !== 'highlight' && (
             <>
               <VariantTitle title="Outline" invert={args.inverted}>
                 {/* @ts-expect-error - story loop types don't match */}
@@ -127,7 +127,7 @@ export const KitchenSink: Story = {
   render: ({ icon: _icon, inverted, size }) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
-    const schemes: Array<ColorScheme> = ['yellow', 'red', 'green', 'grey'];
+    const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
       <Flex direction="row" space="lg" wrap="wrap">
@@ -136,17 +136,17 @@ export const KitchenSink: Story = {
             {variants
               .filter(variant => {
                 if (inverted) {
-                  if (scheme === 'yellow') {
+                  if (scheme === 'highlight') {
                     return variant === 'emphasis' || variant === 'solid';
                   }
-                  if (scheme === 'grey') {
+                  if (scheme === 'functional') {
                     return variant === 'outline' || variant === 'ghost';
                   } else return false;
                 }
-                if (scheme === 'yellow') {
+                if (scheme === 'highlight') {
                   return variant === 'emphasis' || variant === 'solid';
                 }
-                if (scheme === 'grey') {
+                if (scheme === 'functional') {
                   return variant === 'outline' || variant === 'ghost';
                 } else {
                   return variant === 'solid' || variant === 'ghost' || variant === 'outline';

package/src/components/IconButton/IconButtonIcon.tsx

@@ -1,8 +1,8 @@
 import { Platform, StyleProp, ViewStyle } from 'react-native';
-import { useIconButtonContext } from './IconButton.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
+import { useIconButtonContext } from './IconButton.context';
 
 const IconButtonIcon = (props: IconProps) => {
   const { colorScheme, variant, inverted, disabled, size } = useIconButtonContext();
@@ -39,10 +39,10 @@ const styles = StyleSheet.create(theme => ({
         ghost: {},
       },
       colorScheme: {
-        yellow: {},
-        red: {},
-        green: {},
-        grey: {},
+        highlight: {},
+        destructive: {},
+        affirmative: {},
+        functional: {},
       },
       inverted: {
         true: {},
@@ -64,88 +64,88 @@ const styles = StyleSheet.create(theme => ({
     compoundVariants: [
       {
         variant: 'emphasis',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         styles: {
-          color: theme.components.button.emphasis.yellow.foregroundColor,
+          color: theme.color.interactive.highlight.foreground.strong,
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'yellow',
+        colorScheme: 'highlight',
         styles: {
-          color: theme.components.button.solid.yellow.foregroundColor,
+          color: theme.color.interactive.highlight.foreground.strong,
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          color: theme.components.button.solid.red.foregroundColor,
+          color: theme.color.interactive.destructive.foreground.strong,
         },
       },
       {
         variant: 'solid',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          color: theme.components.button.solid.green.foregroundColor,
+          color: theme.color.interactive.affirmative.foreground.strong,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          color: theme.components.button.outline.red.foregroundColor,
+          color: theme.color.interactive.destructive.foreground.subtle,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          color: theme.components.button.outline.green.foregroundColor,
+          color: theme.color.interactive.affirmative.foreground.subtle,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         styles: {
-          color: theme.components.button.outline.grey.foregroundColor,
+          color: theme.color.interactive.functional.foreground.subtle,
         },
       },
       {
         variant: 'outline',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         styles: {
-          color: theme.components.button.outline.grey.inverted.foregroundColor,
+          color: theme.color.interactive.functional.foreground.strong,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'red',
+        colorScheme: 'destructive',
         styles: {
-          color: theme.components.button.ghost.red.foregroundColor,
+          color: theme.color.interactive.destructive.foreground.subtle,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'green',
+        colorScheme: 'affirmative',
         styles: {
-          color: theme.components.button.ghost.green.foregroundColor,
+          color: theme.color.interactive.affirmative.foreground.subtle,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         styles: {
-          color: theme.components.button.outline.grey.foregroundColor,
+          color: theme.color.interactive.functional.foreground.subtle,
         },
       },
       {
         variant: 'ghost',
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         inverted: true,
         styles: {
-          color: theme.components.button.outline.grey.inverted.foregroundColor,
+          color: theme.color.interactive.functional.foreground.strong,
         },
       },
     ],