@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/BottomSheet/BottomSheetScrollView.tsx

@@ -1,6 +1,6 @@
 import { BottomSheetScrollView as ScrollView } from '@gorhom/bottom-sheet';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
 
 const StyledBottomSheetScrollView = withUnistyles(
@@ -32,7 +32,9 @@ const BottomSheetScrollView = ({
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
-  container: {},
+  container: {
+    backgroundColor: theme.color.surface.neutral.strong,
+  },
   contentContainer: {
     paddingHorizontal: theme.components.bottomSheet.padding,
     paddingBottom: theme.components.bottomSheet.padding,

package/src/components/BottomSheet/BottomSheetView.tsx

@@ -29,7 +29,7 @@ const styles = StyleSheet.create((theme, rt) => ({
   contentContainer: {
     borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
     borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-    backgroundColor: theme.components.bottomSheet.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     paddingHorizontal: theme.components.bottomSheet.padding,
     paddingBottom: theme.components.bottomSheet.padding,
     variants: {

package/src/components/Box/Box.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Box } from '.';
-import { BodyText } from '../BodyText';
-import { coloursAsArray } from '../../utils';
 import { primitive } from '@utilitywarehouse/hearth-tokens/js';
 import { InputType } from 'storybook/internal/types';
+import { Box } from '.';
+import { coloursAsArray } from '../../utils';
+import { BodyText } from '../BodyText';
 
 const backgroundColor: InputType = {
   options: coloursAsArray(),

package/src/components/Button/Button.docs.mdx

@@ -1,8 +1,8 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Button.stories';
-import { ButtonGroup, Button, ButtonIcon, ButtonSpinner, ButtonText, Box, Center } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Box, Button, ButtonGroup, ButtonIcon, ButtonSpinner, ButtonText, Center } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Button.stories';
 
 <Meta title="Components / Button" />
 
@@ -37,7 +37,7 @@ The `Button` component is used to trigger an action or event, such as submitting
 
 <UsageWrap>
   <Center>
-    <Button colorScheme="green" variant="solid" children="Button" />
+    <Button colorScheme="affirmative" variant="solid" children="Button" />
   </Center>
 </UsageWrap>
 
@@ -49,7 +49,7 @@ const MyComponent = () => {
     console.log('Button pressed');
   };
   return (
-    <Button onPress={handlePress} colorScheme="green">
+    <Button onPress={handlePress} colorScheme="affirmative">
       Button
     </Button>
   );
@@ -58,19 +58,19 @@ const MyComponent = () => {
 
 ## Props
 
-| Property       | Type                                      | Description                                                                                         | Default  |
-| -------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- |
-| `onPress`      | `() => void`                              | Callback function to be called when the button is pressed.                                          | -        |
-| `variant`      | `'solid' \| 'outline' \| 'ghost'`         | The variant of the button.                                                                          | 'solid'  |
-| `size`         | `'sm' \| 'md'`                            | The size of the button.                                                                             | 'medium' |
-| `colorScheme`  | `'yellow' \| 'green' \| 'red' \| 'grey' ` | The colour scheme of the button.                                                                    | 'yellow' |
-| `icon`         | `ReactNode`                               | The icon to be displayed in the button. _Note: Can't use with advanced usage._                      | -        |
-| `iconPosition` | `'left' \| 'right'`                       | The position of the icon in the button. _Note: Can't use with advanced usage._                      | 'left'   |
-| `inverted`     | `boolean`                                 | Changes the button to an inverted state. (To only be used on `midnight` or `purple` backgrounds).   | `false`  |
-| `loading`      | `boolean`                                 | Shows a loading spinner in the button. _Note: Can't use with advanced usage._                       | `false`  |
-| `disabled`     | `boolean`                                 | Disables the button.                                                                                | `false`  |
-| `paddingNone`  | `boolean`                                 | Removes the horizontal padding from the button (only applies to `sm` size `ghost` variant buttons). | `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`      | `'solid' \| 'outline' \| 'ghost'`                                | The variant of the button.                                                                          | 'solid'     |
+| `size`         | `'sm' \| 'md'`                                                   | The size of the button.                                                                             | 'medium'    |
+| `colorScheme`  | `'highlight' \| 'affirmative' \| 'destructive' \| 'functional' ` | The colour scheme of the button.                                                                    | 'highlight' |
+| `icon`         | `ReactNode`                                                      | The icon to be displayed in the button. _Note: Can't use with advanced usage._                      | -           |
+| `iconPosition` | `'left' \| 'right'`                                              | The position of the icon in the button. _Note: Can't use with advanced usage._                      | 'left'      |
+| `inverted`     | `boolean`                                                        | Changes the button to an inverted state. (To only be used on `midnight` or `purple` backgrounds).   | `false`     |
+| `loading`      | `boolean`                                                        | Shows a loading spinner in the button. _Note: Can't use with advanced usage._                       | `false`     |
+| `disabled`     | `boolean`                                                        | Disables the button.                                                                                | `false`     |
+| `paddingNone`  | `boolean`                                                        | Removes the horizontal padding from the button (only applies to `sm` size `ghost` variant buttons). | `false`     |
+| `pressed`      | `boolean`                                                        | Changes the button to a pressed state.                                                              | `false`     |
 
 ## Variants
 
@@ -82,7 +82,7 @@ For more advanced usage, you can use the `ButtonText`, `ButtonIcon` and `ButtonS
 
 <UsageWrap>
   <Center>
-    <Button colorScheme="yellow">
+    <Button colorScheme="highlight">
       <ButtonIcon as={AddSmallIcon} />
       <ButtonText>Button</ButtonText>
     </Button>
@@ -105,7 +105,7 @@ const MyComponent = ({ doSomething }) => {
     doSomething();
   };
   return (
-    <Button colorScheme="yellow" disabled={loading}>
+    <Button colorScheme="highlight" disabled={loading}>
       {loading ? <ButtonSpinner /> : <ButtonIcon as={AddSmallIcon} />}
       <ButtonText onPress={handleClick}>Button</ButtonText>
     </Button>
@@ -129,13 +129,13 @@ The `ButtonGroup` component is used to group multiple buttons together.
 <UsageWrap>
   <Center>
     <ButtonGroup flexDirection="column">
-      <Button colorScheme="yellow">
+      <Button colorScheme="highlight">
         <ButtonText>Button 1</ButtonText>
       </Button>
-      <Button colorScheme="grey" variant="outline">
+      <Button colorScheme="functional" variant="outline">
         <ButtonText>Button 2</ButtonText>
       </Button>
-      <Button colorScheme="red" variant="ghost">
+      <Button colorScheme="destructive" variant="ghost">
         <ButtonText>Button 3</ButtonText>
       </Button>
     </ButtonGroup>
@@ -148,11 +148,11 @@ import { ButtonGroup, Button } from '@utilitywarehouse/hearth-react-native';
 const MyComponent = () => {
   return (
     <ButtonGroup flexDirection="column">
-      <Button colorScheme="yellow">Button 1</Button>
-      <Button colorScheme="grey" variant="outline">
+      <Button colorScheme="highlight">Button 1</Button>
+      <Button colorScheme="functional" variant="outline">
         Button 2
       </Button>
-      <Button colorScheme="red" variant="ghost">
+      <Button colorScheme="destructive" variant="ghost">
         Button 3
       </Button>
     </ButtonGroup>
@@ -180,7 +180,7 @@ We recommend using the `icon` prop on the `Button` component for simpler usage.
 
 <UsageWrap>
   <Center>
-    <Button colorScheme="yellow">
+    <Button colorScheme="highlight">
       <ButtonIcon as={AddSmallIcon} />
       <ButtonText>Button</ButtonText>
     </Button>
@@ -193,7 +193,7 @@ import { AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => {
   return (
-    <Button colorScheme="yellow">
+    <Button colorScheme="highlight">
       <ButtonIcon as={AddSmallIcon} />
       <ButtonText>Button</ButtonText>
     </Button>
@@ -210,7 +210,7 @@ We recommend using the children prop on the `Button` component for simpler usage
 
 <UsageWrap>
   <Center>
-    <Button colorScheme="yellow">
+    <Button colorScheme="highlight">
       <ButtonText>Button</ButtonText>
     </Button>
   </Center>
@@ -221,7 +221,7 @@ import { Button, ButtonText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   return (
-    <Button colorScheme="yellow">
+    <Button colorScheme="highlight">
       <ButtonText>Button</ButtonText>
     </Button>
   );
@@ -240,7 +240,7 @@ should inlude the `disabled` prop. We recommend using the `loading` prop on the
 
 <UsageWrap>
   <Center>
-    <Button colorScheme="yellow" disabled>
+    <Button colorScheme="highlight" disabled>
       <ButtonSpinner />
       <ButtonText>Button</ButtonText>
     </Button>
@@ -252,7 +252,7 @@ import { Button, ButtonSpinner, ButtonText } from '@utilitywarehouse/hearth-reac
 
 const MyComponent = ({ loading }) => {
   return (
-    <Button colorScheme="yellow" disabled>
+    <Button colorScheme="highlight" disabled>
       {loading ? <ButtonSpinner /> : null}
       <ButtonText>Button</ButtonText>
     </Button>
@@ -269,7 +269,7 @@ This is useful when you want to create a button that looks like a link or a text
 
 <UsageWrap>
   <Center>
-    <Button variant="ghost" colorScheme="grey" size="sm" paddingNone>
+    <Button variant="ghost" colorScheme="functional" size="sm" paddingNone>
       {`No Padding`}
     </Button>
   </Center>
@@ -280,7 +280,7 @@ import { Button } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   return (
-    <Button variant="ghost" colorScheme="grey" size="sm" paddingNone>
+    <Button variant="ghost" colorScheme="functional" size="sm" paddingNone>
       No Padding
     </Button>
   );

package/src/components/Button/Button.props.tsx

@@ -2,13 +2,13 @@ import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 
 export type ButtonVariants =
-  | { variant?: 'solid'; colorScheme?: 'green' | 'red'; inverted?: never }
-  | { variant?: 'outline'; colorScheme: 'green' | 'red'; inverted?: never }
-  | { variant?: 'ghost'; colorScheme: 'green' | 'red'; inverted?: never }
-  | { variant?: 'emphasis'; colorScheme?: 'yellow'; inverted?: boolean }
-  | { variant?: 'solid'; colorScheme?: 'yellow'; inverted?: boolean }
-  | { variant?: 'outline'; colorScheme: 'grey'; inverted?: boolean }
-  | { variant?: 'ghost'; colorScheme: 'grey'; inverted?: boolean };
+  | { variant?: 'solid'; colorScheme?: 'affirmative' | 'destructive'; inverted?: never }
+  | { variant?: 'outline'; colorScheme: 'affirmative' | 'destructive'; inverted?: never }
+  | { variant?: 'ghost'; colorScheme: 'affirmative' | 'destructive'; inverted?: never }
+  | { variant?: 'emphasis'; colorScheme?: 'highlight'; inverted?: boolean }
+  | { variant?: 'solid'; colorScheme?: 'highlight'; inverted?: boolean }
+  | { variant?: 'outline'; colorScheme: 'functional'; inverted?: boolean }
+  | { variant?: 'ghost'; colorScheme: 'functional'; inverted?: boolean };
 
 export type BaseButtonProps = Omit<PressableProps, 'children'> & {
   /*

package/src/components/Button/Button.stories.tsx

@@ -1,13 +1,13 @@
-import { Button, ButtonGroup } from '.';
-import type { ButtonProps } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
 import { AddSmallIcon, ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { DetailText } from '../DetailText';
 import { Platform } from 'react-native';
+import type { ButtonProps } from '.';
+import { Button, ButtonGroup } from '.';
+import { VariantTitle } from '../../../docs/components';
+import { Box } from '../Box';
+import { DetailText } from '../DetailText';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Button',
@@ -32,7 +32,7 @@ const meta = {
       description: 'The variant of the button.',
     },
     colorScheme: {
-      options: ['yellow', 'red', 'green', 'grey'],
+      options: ['highlight', 'destructive', 'affirmative', 'functional'],
       control: Platform.OS === 'android' ? 'radio' : 'select',
       description: 'The color scheme of the button.',
     },
@@ -76,7 +76,7 @@ const meta = {
     text: 'Press me',
     size: 'md',
     variant: 'solid',
-    colorScheme: 'yellow',
+    colorScheme: 'highlight',
     disabled: false,
     inverted: false,
     loading: false,
@@ -110,17 +110,17 @@ export const Variants: Story = {
     return (
       <ButtonGroup flexDirection="column" space="md">
         <>
-          {args.colorScheme === 'yellow' && (
+          {args.colorScheme === 'highlight' && (
             <VariantTitle title="Emphasis" invert={args.inverted}>
               <Button {...args} variant="emphasis" icon={icon} />
             </VariantTitle>
           )}
-          {args.colorScheme !== 'grey' && (
+          {args.colorScheme !== 'functional' && (
             <VariantTitle title="Solid" invert={args.inverted}>
               <Button {...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 */}
@@ -146,7 +146,7 @@ export const KitchenSink: Story = {
     controls: { include: ['text', 'size', 'inverted'] },
   },
   render: ({ text, inverted, size }) => {
-    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">
@@ -155,17 +155,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/Button/ButtonGroupRoot.tsx

@@ -1,5 +1,6 @@
-import { type StyleProp, type ViewStyle, type ViewProps, View } from 'react-native';
+import { type StyleProp, type ViewProps, type ViewStyle, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { SpacingValues } from '../../types';
 
 const ButtonGroupRoot = ({
   children,
@@ -12,7 +13,7 @@ const ButtonGroupRoot = ({
   flexDirection?: ViewStyle['flexDirection'];
   reversed?: boolean;
   attached?: boolean;
-  space?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  space?: SpacingValues;
 }) => {
   let direction = flexDirection;
   if (reversed) {
@@ -41,6 +42,12 @@ const styles = StyleSheet.create(theme => ({
   text: {
     variants: {
       space: {
+        none: {
+          gap: theme.layout.mobile.spacing.none,
+        },
+        '2xs': {
+          gap: theme.layout.mobile.spacing['2xs'],
+        },
         xs: {
           gap: theme.layout.mobile.spacing.xs,
         },
@@ -56,6 +63,9 @@ const styles = StyleSheet.create(theme => ({
         xl: {
           gap: theme.layout.mobile.spacing.xl,
         },
+        '2xl': {
+          gap: theme.layout.mobile.spacing['2xl'],
+        },
       },
       attached: {
         true: {

package/src/components/Button/ButtonIcon.tsx

@@ -1,8 +1,8 @@
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
-import { useButtonContext } from './Button.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
+import { useButtonContext } from './Button.context';
 
 const ButtonIcon = ({ children, ...props }: IconProps) => {
   const { colorScheme, variant, inverted, disabled } = useButtonContext();
@@ -34,10 +34,10 @@ const styles = StyleSheet.create(theme => ({
         ghost: {},
       },
       colorScheme: {
-        yellow: {},
-        red: {},
-        green: {},
-        grey: {},
+        highlight: {},
+        destructive: {},
+        affirmative: {},
+        functional: {},
       },
       inverted: {
         true: {},
@@ -49,88 +49,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,
         },
       },
     ],