@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/Alert/Alert.props.ts

@@ -31,10 +31,10 @@ interface AlertWithoutChildrenProps extends PressableProps {
 
   /**
    * The color scheme of the alert.
-   * Possible values: 'blue', 'green', 'orange', 'red'.
-   * @default 'blue'
+   * Possible values: 'info', 'positive', 'warning', 'danger'.
+   * @default 'info'
    */
-  colorScheme?: 'blue' | 'green' | 'orange' | 'red';
+  colorScheme?: 'info' | 'positive' | 'warning' | 'danger';
 
   /**
    * Callback function for when the icon button is pressed.

package/src/components/Alert/Alert.stories.tsx

@@ -1,7 +1,7 @@
-import { Alert } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Flex } from '../Flex';
+import { Alert } from '.';
 import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Alert',
@@ -12,9 +12,9 @@ const meta = {
   argTypes: {
     colorScheme: {
       control: 'select',
-      options: ['blue', 'green', 'orange', 'red'],
+      options: ['info', 'positive', 'warning', 'danger'],
       description: 'Use this value to change the alert type and colour scheme.',
-      defaultValue: 'blue',
+      defaultValue: 'info',
     },
     title: {
       control: 'text',
@@ -39,7 +39,7 @@ const meta = {
     },
   },
   args: {
-    colorScheme: 'blue',
+    colorScheme: 'info',
     title: 'Information',
     text: 'Unlock the power of knowledge with the following information.',
     link: 'Learn more',
@@ -59,26 +59,26 @@ export const Variants: Story = {
     <Flex space="sm">
       <VariantTitle title="Info - Blue">
         <Alert
-          colorScheme="blue"
+          colorScheme="info"
           text="Unlock the power of knowledge with the following information."
         />
       </VariantTitle>
-      <VariantTitle title="Success - Green">
+      <VariantTitle title="Success - positive">
         <Alert
-          colorScheme="green"
+          colorScheme="positive"
           text="Boom! You did it! Please take a moment to pat yourself on the back. You've earned it!"
         />
       </VariantTitle>
       <VariantTitle title="Error - Red">
         <Alert
-          colorScheme="red"
+          colorScheme="danger"
           text="Uh-oh! It looks like the matrix has glitched. Our team of tech ninjas are already on the
           case. Please hold tight while we fix the issue"
         />
       </VariantTitle>
-      <VariantTitle title="Warning - Orange">
+      <VariantTitle title="Warning - warning">
         <Alert
-          colorScheme="orange"
+          colorScheme="warning"
           text="Warning: Reading the following content may cause spontaneous outbursts of 'aha!' moments"
         />
       </VariantTitle>

package/src/components/Alert/Alert.tsx

@@ -1,22 +1,22 @@
 import { useEffect, useMemo } from 'react';
-import AlertTitle from './AlertTitle';
-import AlertLink from './AlertLink';
-import AlertIconButton from './AlertIconButton';
-import AlertCloseButton from './AlertCloseButton';
-import type { AlertProps } from './Alert.props';
-import { AlertContext } from './Alert.context';
-import { StyleSheet } from 'react-native-unistyles';
 import { Pressable, ViewProps } from 'react-native';
-import AlertText from './AlertText';
-import AlertIcon from './AlertIcon';
+import { StyleSheet } from 'react-native-unistyles';
+import { AlertContext } from './Alert.context';
+import type { AlertProps } from './Alert.props';
+import AlertCloseButton from './AlertCloseButton';
 import AlertContent from './AlertContent';
+import AlertIcon from './AlertIcon';
+import AlertIconButton from './AlertIconButton';
+import AlertLink from './AlertLink';
+import AlertText from './AlertText';
+import AlertTitle from './AlertTitle';
 
 const Alert = ({
   text,
   title,
   link,
   onPressLink,
-  colorScheme = 'blue',
+  colorScheme = 'info',
   onPressIconButton,
   onClose,
   children,
@@ -85,21 +85,21 @@ const styles = StyleSheet.create(theme => ({
     borderWidth: theme.components.alert.borderWidth,
     variants: {
       colorScheme: {
-        blue: {
-          borderColor: theme.components.alert.blue.borderColor,
-          backgroundColor: theme.components.alert.blue.backgroundColor,
+        info: {
+          borderColor: theme.color.feedback.info.border,
+          backgroundColor: theme.color.feedback.info.surface.subtle,
         },
-        green: {
-          borderColor: theme.components.alert.green.borderColor,
-          backgroundColor: theme.components.alert.green.backgroundColor,
+        positive: {
+          borderColor: theme.color.feedback.positive.border,
+          backgroundColor: theme.color.feedback.positive.surface.subtle,
         },
-        orange: {
-          borderColor: theme.components.alert.orange.borderColor,
-          backgroundColor: theme.components.alert.orange.backgroundColor,
+        warning: {
+          borderColor: theme.color.feedback.warning.border,
+          backgroundColor: theme.color.feedback.warning.surface.subtle,
         },
-        red: {
-          borderColor: theme.components.alert.red.borderColor,
-          backgroundColor: theme.components.alert.red.backgroundColor,
+        danger: {
+          borderColor: theme.color.feedback.danger.border,
+          backgroundColor: theme.color.feedback.danger.surface.subtle,
         },
       },
     },

package/src/components/Alert/AlertCloseButton.tsx

@@ -1,8 +1,8 @@
+import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
-import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
 import { StyleSheet } from 'react-native-unistyles';
+import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
 
 const AlertCloseButton = ({
   style,
@@ -15,7 +15,7 @@ const AlertCloseButton = ({
 const styles = StyleSheet.create(theme => ({
   icon: {
     alignSelf: 'flex-start',
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
     minWidth: 20,
     minHeight: 20,
   },

package/src/components/Alert/AlertIcon.tsx

@@ -1,20 +1,20 @@
-import { StyleSheet } from 'react-native-unistyles';
 import {
-  WarningMediumIcon,
-  TickCircleMediumIcon,
   InfoMediumIcon,
+  TickCircleMediumIcon,
+  WarningMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { useAlertContext } from './Alert.context';
+import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import type IconProps from '../Icon/Icon.props';
+import { useAlertContext } from './Alert.context';
 
 const AlertIcon = (props: IconProps) => {
   const { colorScheme } = useAlertContext();
   const asProp = (() => {
-    if (colorScheme === 'red' || colorScheme === 'orange') {
+    if (colorScheme === 'danger' || colorScheme === 'warning') {
       return WarningMediumIcon;
     }
-    if (colorScheme === 'green') {
+    if (colorScheme === 'positive') {
       return TickCircleMediumIcon;
     }
     return InfoMediumIcon;
@@ -31,7 +31,7 @@ const styles = StyleSheet.create(theme => ({
     minWidth: 24,
     minHeight: 24,
     alignSelf: 'flex-start',
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
   },
 }));
 

package/src/components/Badge/Badge.context.ts

@@ -4,6 +4,8 @@ import type BadgeProps from './Badge.props';
 export const BadgeContext = React.createContext<{
   colorScheme?: BadgeProps['colorScheme'];
   variant?: BadgeProps['variant'];
+  flatBase?: BadgeProps['flatBase'];
+  size?: BadgeProps['size'];
 }>({});
 
 export const useBadgeContext = () => useContext(BadgeContext);

package/src/components/Badge/Badge.docs.mdx

@@ -1,9 +1,9 @@
-import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as Stories from './Badge.stories';
-import { Center, Pressable, Badge, BadgeText, BadgeIcon, Box } from '../..';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { AddSmallIcon, TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { color } from '@utilitywarehouse/hearth-tokens/js';
-import { TickSmallIcon, AddSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Badge, BadgeIcon, BadgeText, Box, Center, Pressable } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Badge.stories';
 
 <Meta title="Components / Badge" />
 
@@ -38,7 +38,7 @@ Badge is a stateless component, e.g. it has no Pressed, Disabled, Active states.
 <UsageWrap>
   <Center>
     <Box>
-      <Badge colorScheme="red" icon={TickSmallIcon}>
+      <Badge colorScheme="danger" icon={TickSmallIcon}>
         {"I'm a badge"}
       </Badge>
     </Box>
@@ -52,7 +52,7 @@ import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
   <Center>
-    <Badge colorScheme="red" icon={TickSmallIcon}>
+    <Badge colorScheme="danger" icon={TickSmallIcon}>
       I'm a badge
     </Badge>
   </Center>
@@ -61,12 +61,13 @@ const MyComponent = () => (
 
 ## Props
 
-| Property      | Type                                               | Description                            | Default |
-| ------------- | -------------------------------------------------- | -------------------------------------- | ------- |
-| `variant`     | `'solid' \| 'outline'`                             | The variant of the badge.              | `solid` |
-| `colorScheme` | `'blue' \| 'green' \| 'red' \| 'orange' \| 'grey'` | The color scheme to use for the badge. | `cyan`  |
-| `flatBase`    | `boolean`                                          | Whether the badge has a flat base.     | `false` |
-| `icon`        | `ReactNode`                                        | The icon to display in the badge.      |         |
+| Property      | Type                                                                                                                                                                      | Description                            | Default  |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------- |
+| `variant`     | `'subtle' \| 'emphasis' \| 'outline'`                                                                                                                                     | The variant of the badge.              | `subtle` |
+| `colorScheme` | `'info' \| 'positive' \| 'danger' \| 'warning' \| 'functional' \|`<br />`'energy' \| 'broadband' \| 'mobile' \| 'insurance' \|`<br />`'cashback' \| 'pig' \| 'highlight'` | The color scheme to use for the badge. | `info`   |
+| `size`        | `'sm' \| 'md'`                                                                                                                                                            | The size of the badge.                 | `sm`     |
+| `flatBase`    | `boolean`                                                                                                                                                                 | Whether the badge has a flat base.     | `false`  |
+| `icon`        | `ReactNode`                                                                                                                                                               | The icon to display in the badge.      |          |
 
 ## Color Schemes
 
@@ -81,7 +82,7 @@ Although not recommended, the `Badge` component can be used to create more compl
 <UsageWrap>
   <Center>
     <Box>
-      <Badge colorScheme="green" variant="outline">
+      <Badge colorScheme="positive" variant="outline">
         <BadgeIcon as={AddSmallIcon} />
         <BadgeText>Plus</BadgeText>
       </Badge>
@@ -93,7 +94,7 @@ Although not recommended, the `Badge` component can be used to create more compl
 import { Badge, BadgeText, BadgeIcon } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Badge colorScheme="green" variant="outline">
+  <Badge colorScheme="positive" variant="outline">
     <BadgeIcon as={AddSmallIcon} />
     <BadgeText>Plus</BadgeText>
   </Badge>

package/src/components/Badge/Badge.props.ts

@@ -2,8 +2,21 @@ import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 
 interface BadgeProps extends ViewProps {
-  variant?: 'solid' | 'outline';
-  colorScheme?: 'blue' | 'green' | 'red' | 'orange' | 'grey';
+  variant?: 'subtle' | 'emphasis' | 'outline';
+  colorScheme?:
+    | 'info'
+    | 'positive'
+    | 'danger'
+    | 'warning'
+    | 'functional'
+    | 'energy'
+    | 'broadband'
+    | 'mobile'
+    | 'insurance'
+    | 'cashback'
+    | 'pig'
+    | 'highlight';
+  size?: 'sm' | 'md';
   icon?: ComponentType;
   flatBase?: boolean;
 }

package/src/components/Badge/Badge.stories.tsx

@@ -1,9 +1,11 @@
-import { Badge } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { VariantTitle } from '../../../docs/components';
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Badge } from '.';
+import { VariantTitle } from '../../../docs/components';
 import { Box } from '../Box';
+import { Flex } from '../Flex';
+import type BadgeProps from './Badge.props';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -17,12 +19,25 @@ const meta = {
   argTypes: {
     children: { control: 'text' },
     variant: {
-      options: ['solid', 'outline'],
+      options: ['subtle', 'emphasis', 'outline'],
       control: 'radio',
       description: 'Variant of the badge.',
     },
     colorScheme: {
-      options: ['blue', 'green', 'red', 'orange', 'grey'],
+      options: [
+        'info',
+        'positive',
+        'danger',
+        'warning',
+        'functional',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+        'highlight',
+      ],
       control: 'select',
       description: 'Color scheme of the badge.',
     },
@@ -40,9 +55,10 @@ const meta = {
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: {
     children: 'Badge',
-    variant: 'solid',
-    colorScheme: 'blue',
+    variant: 'subtle',
+    colorScheme: 'info',
     flatBase: false,
+    size: 'sm',
   },
 } satisfies Meta<typeof Badge>;
 
@@ -50,7 +66,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-   
   render: ({ icon: _icon, ...args }) => {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
@@ -58,12 +73,21 @@ export const Playground: Story = {
   },
 };
 
-export const Solid: Story = {
+export const Subtle: Story = {
   parameters: {
     controls: { exclude: ['variant'] },
   },
   args: {
-    variant: 'solid',
+    variant: 'subtle',
+  },
+};
+
+export const Emphasis: Story = {
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  args: {
+    variant: 'emphasis',
   },
 };
 
@@ -90,48 +114,71 @@ export const Icon: Story = {
 };
 
 export const KitchenSink: Story = {
-  render: () => (
-    <Box gap="200">
-      <VariantTitle title="Blue - Solid">
-        <Badge colorScheme="blue">Blue badge</Badge>
-      </VariantTitle>
-      <VariantTitle title="Green - Solid">
-        <Badge colorScheme="green">Green badge</Badge>
-      </VariantTitle>
-      <VariantTitle title="Red - Solid">
-        <Badge colorScheme="red">Red badge</Badge>
-      </VariantTitle>
-      <VariantTitle title="Orange - Solid">
-        <Badge colorScheme="orange">Orange badge</Badge>
-      </VariantTitle>
-      <VariantTitle title="Grey - Solid">
-        <Badge colorScheme="grey">Grey badge</Badge>
-      </VariantTitle>
-      <VariantTitle title="Blue - Outline">
-        <Badge colorScheme="blue" variant="outline">
-          Blue badge
-        </Badge>
-      </VariantTitle>
-      <VariantTitle title="Green - Outline">
-        <Badge colorScheme="green" variant="outline">
-          Green badge
-        </Badge>
-      </VariantTitle>
-      <VariantTitle title="Red - Outline">
-        <Badge colorScheme="red" variant="outline">
-          Red badge
-        </Badge>
-      </VariantTitle>
-      <VariantTitle title="Orange - Outline">
-        <Badge colorScheme="orange" variant="outline">
-          Orange badge
-        </Badge>
-      </VariantTitle>
-      <VariantTitle title="Grey - Outline">
-        <Badge colorScheme="grey" variant="outline">
-          Grey badge
-        </Badge>
-      </VariantTitle>
-    </Box>
-  ),
+  render: () => {
+    const colorSchemes: NonNullable<BadgeProps['colorScheme']>[] = [
+      'info',
+      'positive',
+      'danger',
+      'warning',
+      'functional',
+      'energy',
+      'broadband',
+      'mobile',
+      'insurance',
+      'cashback',
+      'pig',
+      'highlight',
+    ];
+    const sizes: Array<BadgeProps['size']> = ['sm', 'md'];
+
+    return (
+      <Flex direction="column" space="lg" style={{ width: '100%' }}>
+        {colorSchemes.map(cs => {
+          // Determine allowed variants per color scheme based on design constraints:
+          // - Remove 'outline' for energy, broadband, mobile, insurance, cashback, pig, highlight
+          // - For highlight only show 'subtle'
+          const noOutlineSchemes: Array<BadgeProps['colorScheme']> = [
+            'energy',
+            'broadband',
+            'mobile',
+            'insurance',
+            'cashback',
+            'pig',
+            'highlight',
+          ];
+          let variantsForScheme: Array<BadgeProps['variant']> = ['subtle', 'emphasis', 'outline'];
+
+          if (noOutlineSchemes.includes(cs)) {
+            variantsForScheme = ['subtle', 'emphasis'];
+          }
+          if (cs === 'highlight') {
+            variantsForScheme = ['subtle'];
+          }
+
+          return (
+            <Box key={cs} gap="200">
+              <VariantTitle title={cs.charAt(0).toUpperCase() + cs.slice(1)}>
+                <Flex direction="column" space="sm">
+                  {sizes.map(sz => (
+                    <Flex key={sz} direction="row" align="center" space="md">
+                      {variantsForScheme.map(variant => (
+                        <Badge
+                          key={`${cs}-${sz}-${variant}`}
+                          colorScheme={cs}
+                          size={sz}
+                          variant={variant}
+                        >
+                          {`${variant} ${sz}`}
+                        </Badge>
+                      ))}
+                    </Flex>
+                  ))}
+                </Flex>
+              </VariantTitle>
+            </Box>
+          );
+        })}
+      </Flex>
+    );
+  },
 };