@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

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

@@ -61,13 +61,13 @@ const MyComponent = () => (
 
 ## Props
 
-| 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.      |         |
+| 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
 

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

@@ -2,7 +2,7 @@ import type { ComponentType } from 'react';
 import type { ViewProps } from 'react-native';
 
 interface BadgeProps extends ViewProps {
-  variant?: 'solid' | 'outline';
+  variant?: 'subtle' | 'emphasis' | 'outline';
   colorScheme?:
     | 'info'
     | 'positive'
@@ -14,7 +14,8 @@ interface BadgeProps extends ViewProps {
     | 'mobile'
     | 'insurance'
     | 'cashback'
-    | 'pig';
+    | 'pig'
+    | 'highlight';
   size?: 'sm' | 'md';
   icon?: ComponentType;
   flatBase?: boolean;

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

@@ -5,6 +5,7 @@ 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 = {
@@ -18,7 +19,7 @@ const meta = {
   argTypes: {
     children: { control: 'text' },
     variant: {
-      options: ['solid', 'outline'],
+      options: ['subtle', 'emphasis', 'outline'],
       control: 'radio',
       description: 'Variant of the badge.',
     },
@@ -35,6 +36,7 @@ const meta = {
         'insurance',
         'cashback',
         'pig',
+        'highlight',
       ],
       control: 'select',
       description: 'Color scheme of the badge.',
@@ -53,7 +55,7 @@ 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',
+    variant: 'subtle',
     colorScheme: 'info',
     flatBase: false,
     size: 'sm',
@@ -71,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',
   },
 };
 
@@ -103,93 +114,71 @@ export const Icon: Story = {
 };
 
 export const KitchenSink: Story = {
-  render: () => (
-    <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>
+  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'];
 
-          <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>
-  ),
+          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>
+    );
+  },
 };

package/src/components/Badge/Badge.tsx

@@ -8,7 +8,7 @@ import BadgeText from './BadgeText';
 
 const Badge = ({ children, ...props }: BadgeProps) => {
   const {
-    variant = 'solid',
+    variant = 'subtle',
     icon,
     colorScheme = 'info',
     flatBase = false,
@@ -59,9 +59,11 @@ const styles = StyleSheet.create(theme => ({
         insurance: {},
         cashback: {},
         pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {},
+        subtle: {},
+        emphasis: {},
         outline: {
           borderWidth: theme.components.badge.outline.borderWidth,
           borderColor: theme.color.border.subtle,
@@ -86,84 +88,169 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     compoundVariants: [
-      // Solid
+      // Emphasis
       {
         colorScheme: 'info',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.feedback.info.surface.default,
         },
       },
       {
         colorScheme: 'danger',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.feedback.danger.surface.default,
         },
       },
       {
         colorScheme: 'positive',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.feedback.positive.surface.default,
         },
       },
       {
         colorScheme: 'warning',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.feedback.warning.surface.default,
         },
       },
       {
         colorScheme: 'functional',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.feedback.functional.surface.default,
         },
       },
       {
         colorScheme: 'energy',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.surface.energy.default,
         },
       },
       {
         colorScheme: 'broadband',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.surface.broadband.default,
         },
       },
       {
         colorScheme: 'mobile',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.surface.mobile.default,
         },
       },
       {
         colorScheme: 'insurance',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.surface.insurance.default,
         },
       },
       {
         colorScheme: 'cashback',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.surface.cashback.default,
         },
       },
       {
         colorScheme: 'pig',
-        variant: 'solid',
+        variant: 'emphasis',
         styles: {
           backgroundColor: theme.color.surface.pig.default,
         },
       },
+      // Subtle
+      {
+        colorScheme: 'info',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.info.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.danger.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.positive.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.warning.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.functional.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'energy',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.energy.subtle,
+        },
+      },
+      {
+        colorScheme: 'broadband',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.broadband.subtle,
+        },
+      },
+      {
+        colorScheme: 'mobile',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.mobile.subtle,
+        },
+      },
+      {
+        colorScheme: 'insurance',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.insurance.subtle,
+        },
+      },
+      {
+        colorScheme: 'cashback',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.cashback.subtle,
+        },
+      },
+      {
+        colorScheme: 'pig',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.pig.subtle,
+        },
+      },
+      {
+        colorScheme: 'highlight',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+        },
+      },
       // Outline
       {
         colorScheme: 'info',

package/src/components/Badge/BadgeIcon.tsx

@@ -30,93 +30,19 @@ const styles = StyleSheet.create(theme => ({
         insurance: {},
         cashback: {},
         pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {
+        emphasis: {
+          color: theme.color.text.primary,
+        },
+        subtle: {
           color: theme.color.text.primary,
         },
         outline: {},
       },
     },
     compoundVariants: [
-      // Solid
-      {
-        colorScheme: 'info',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.functional.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'energy',
-        variant: 'solid',
-        styles: {
-          color: theme.color.icon.primary,
-        },
-      },
-      {
-        colorScheme: 'broadband',
-        variant: 'solid',
-        styles: {
-          color: theme.color.icon.primary,
-        },
-      },
-      {
-        colorScheme: 'mobile',
-        variant: 'solid',
-        styles: {
-          color: theme.color.icon.primary,
-        },
-      },
-      {
-        colorScheme: 'insurance',
-        variant: 'solid',
-        styles: {
-          color: theme.color.icon.primary,
-        },
-      },
-      {
-        colorScheme: 'cashback',
-        variant: 'solid',
-        styles: {
-          color: theme.color.icon.primary,
-        },
-      },
-      {
-        colorScheme: 'pig',
-        variant: 'solid',
-        styles: {
-          color: theme.color.icon.primary,
-        },
-      },
       // Outline
       {
         colorScheme: 'info',

package/src/components/Badge/BadgeText.tsx

@@ -4,10 +4,10 @@ import { BodyText } from '../BodyText';
 import { useBadgeContext } from './Badge.context';
 
 const BadgeText = ({ children, style, ...props }: TextProps) => {
-  const { variant, colorScheme } = useBadgeContext();
+  const { variant, colorScheme, size } = useBadgeContext();
   styles.useVariants({ variant, colorScheme });
   return (
-    <BodyText {...props} size="md" weight="semibold" style={[styles.text, style]}>
+    <BodyText {...props} size={size} weight="semibold" style={[styles.text, style]}>
       {children}
     </BodyText>
   );
@@ -30,93 +30,19 @@ const styles = StyleSheet.create(theme => ({
         insurance: {},
         cashback: {},
         pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {
+        emphasis: {
+          color: theme.color.text.primary,
+        },
+        subtle: {
           color: theme.color.text.primary,
         },
         outline: {},
       },
     },
     compoundVariants: [
-      // Solid
-      {
-        colorScheme: 'info',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'solid',
-        styles: {
-          color: theme.color.feedback.functional.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'energy',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
-      {
-        colorScheme: 'broadband',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
-      {
-        colorScheme: 'mobile',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
-      {
-        colorScheme: 'insurance',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
-      {
-        colorScheme: 'cashback',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
-      {
-        colorScheme: 'pig',
-        variant: 'solid',
-        styles: {
-          color: theme.color.text.primary,
-        },
-      },
       // Outline
       {
         colorScheme: 'info',