@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

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`     | `'solid' \| 'outline'`                                                                                                                                     | The variant of the badge.              | `solid` |
+| `colorScheme` | `'info' \| 'positive' \| 'danger' \| 'warning' \| 'functional' \|`<br />`'energy' \| 'broadband' \| 'mobile' \| 'insurance' \|`<br />`'cashback' \| 'pig'` | 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

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

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

@@ -1,9 +1,10 @@
-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';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -22,7 +23,19 @@ const meta = {
       description: 'Variant of the badge.',
     },
     colorScheme: {
-      options: ['blue', 'green', 'red', 'orange', 'grey'],
+      options: [
+        'info',
+        'positive',
+        'danger',
+        'warning',
+        'functional',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
       control: 'select',
       description: 'Color scheme of the badge.',
     },
@@ -41,8 +54,9 @@ const meta = {
   args: {
     children: 'Badge',
     variant: 'solid',
-    colorScheme: 'blue',
+    colorScheme: 'info',
     flatBase: false,
+    size: 'sm',
   },
 } satisfies Meta<typeof Badge>;
 
@@ -50,7 +64,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];
@@ -91,47 +104,92 @@ 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>
+    <Flex direction="row" wrap="wrap" space="md">
+      {['sm', 'md'].map(size => (
+        <Box gap="200">
+          <VariantTitle title={`Info - Solid - ${size}`}>
+            <Badge colorScheme="info" size={size as 'sm' | 'md'}>
+              Info badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Positive - Solid - ${size}`}>
+            <Badge colorScheme="positive" size={size as 'sm' | 'md'}>
+              Positive badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Danger - Solid - ${size}`}>
+            <Badge colorScheme="danger" size={size as 'sm' | 'md'}>
+              Danger badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Warning - Solid - ${size}`}>
+            <Badge colorScheme="warning" size={size as 'sm' | 'md'}>
+              Warning badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Functional - Solid - ${size}`}>
+            <Badge colorScheme="functional" size={size as 'sm' | 'md'}>
+              Functional badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Energy - Solid - ${size}`}>
+            <Badge colorScheme="energy" size={size as 'sm' | 'md'}>
+              Energy badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Broadband - Solid - ${size}`}>
+            <Badge colorScheme="broadband" size={size as 'sm' | 'md'}>
+              Broadband badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Mobile - Solid - ${size}`}>
+            <Badge colorScheme="mobile" size={size as 'sm' | 'md'}>
+              Mobile badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Insurance - Solid - ${size}`}>
+            <Badge colorScheme="insurance" size={size as 'sm' | 'md'}>
+              Insurance badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Cashback - Solid - ${size}`}>
+            <Badge colorScheme="cashback" size={size as 'sm' | 'md'}>
+              Cashback badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Pig - Solid - ${size}`}>
+            <Badge colorScheme="pig" size={size as 'sm' | 'md'}>
+              Pig badge
+            </Badge>
+          </VariantTitle>
+
+          <VariantTitle title={`Info - Outline - ${size}`}>
+            <Badge colorScheme="info" size={size as 'sm' | 'md'} variant="outline">
+              Info badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Positive - Outline - ${size}`}>
+            <Badge colorScheme="positive" size={size as 'sm' | 'md'} variant="outline">
+              Positive badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Danger - Outline - ${size}`}>
+            <Badge colorScheme="danger" size={size as 'sm' | 'md'} variant="outline">
+              Danger badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Warning - Outline - ${size}`}>
+            <Badge colorScheme="warning" size={size as 'sm' | 'md'} variant="outline">
+              Warning badge
+            </Badge>
+          </VariantTitle>
+          <VariantTitle title={`Functional - Outline - ${size}`}>
+            <Badge colorScheme="functional" size={size as 'sm' | 'md'} variant="outline">
+              Functional badge
+            </Badge>
+          </VariantTitle>
+        </Box>
+      ))}
+    </Flex>
   ),
 };