@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -25,18 +25,18 @@
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@chromatic-com/storybook": "^4.1.3",
-    "@figma/code-connect": "^1.3.11",
+    "@figma/code-connect": "^1.3.12",
     "@gorhom/bottom-sheet": "5.2.6",
-    "@storybook/addon-a11y": "^10.1.4",
-    "@storybook/addon-docs": "^10.1.4",
-    "@storybook/addon-vitest": "^10.1.4",
-    "@storybook/react-native-web-vite": "^10.1.4",
+    "@storybook/addon-a11y": "^10.2.1",
+    "@storybook/addon-docs": "^10.2.1",
+    "@storybook/addon-vitest": "^10.2.1",
+    "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "10.1.4",
+    "eslint-plugin-storybook": "10.2.1",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -50,7 +50,7 @@
     "react-native-web": "^0.20.0",
     "react-native-worklets": "^0.6.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.1.4",
+    "storybook": "^10.2.1",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
@@ -76,8 +76,8 @@
     "clean": "rm -rf node_modules rm -rf build .turbo",
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
-    "lint:fix": "TIMING=1 eslint --fix --max-warnings 0",
-    "lint": "TIMING=1 eslint --max-warnings 0",
+    "lint:fix": "TIMING=1 eslint --fix .",
+    "lint": "TIMING=1 eslint .",
     "build": "tsc",
     "watch": "tsc --watch",
     "figma:create": "figma connect create",

package/src/components/Accordion/Accordion.figma.tsx

@@ -1,23 +1,21 @@
-import React from "react"
-import Accordion from "./Accordion"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { Accordion } from './';
 
 figma.connect(
   Accordion,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "sectionHeader": figma.boolean('Section header?')
+      sectionHeader: figma.nestedProps('Section Header', {
+        helperText: figma.string('Helper text'),
+        heading: figma.string('Heading'),
+      }),
+      items: figma.children('Accordion Item'),
     },
-    example: (props) => <Accordion />,
-  },
-)
+    example: props => (
+      <Accordion heading={props.sectionHeader.heading} helperText={props.sectionHeader.helperText}>
+        {props.items}
+      </Accordion>
+    ),
+  }
+);

package/src/components/Accordion/AccordionItem.figma.tsx

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { BodyText } from '../BodyText';
+import { AccordionItem } from './';
+
+figma.connect(
+  AccordionItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3390%3A6160',
+  {
+    props: {
+      title: figma.string('Title'),
+      expanded: figma.boolean('Expand?'),
+      triggerContent: figma.instance('Trigger custom content'),
+      description: figma.string('Description'),
+      content: figma.instance('Custom content'),
+    },
+    example: props => (
+      <AccordionItem
+        title={props.title}
+        expanded={props.expanded}
+        triggerContent={props.triggerContent}
+      >
+        <BodyText>{props.description}</BodyText>
+        {props.content}
+      </AccordionItem>
+    ),
+  }
+);

package/src/components/Avatar/Avatar.figma.tsx

@@ -1,33 +1,23 @@
-import React from "react"
-import Avatar from "./Avatar"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { Avatar } from '../';
 
 figma.connect(
   Avatar,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6790%3A14313",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6790-14313',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      size: figma.enum("Size", {
-        "SM-32": "sm",
-        "MD-48": "md",
+      size: figma.enum('Size', {
+        'SM-32': 'sm',
+        'MD-48': 'md',
       }),
-      // No matching props could be found for these Figma properties:
-      // "initials": figma.string('Initials'),
-      // "image": figma.instance('Image'),
+      initials: figma.string('Initials'),
+      image: figma.instance('Image'),
       // "variant": figma.enum('Variant', {
       //   "Image": "image",
       //   "Initials": "initials",
       //   "Icon": "icon"
       // })
     },
-    example: (props) => <Avatar size={props.size} />,
-  },
-)
+    example: props => <Avatar size={props.size} name={props.initials} image={props.image} />,
+  }
+);

package/src/components/Avatar/Avatar.tsx

@@ -2,7 +2,6 @@ import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-na
 import { useEffect, useState } from 'react';
 import { Image, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
 import { getInitials } from '../../utils';
 import BodyText from '../BodyText/BodyText';
 import AvatarProps, { AvatarLoadingStatus } from './Avatar.props';
@@ -18,7 +17,6 @@ const Avatar = ({
 }: AvatarProps) => {
   const [status, setStatus] = useState<AvatarLoadingStatus>('idle');
   const [isDelayed, setIsDelayed] = useState(delayMs > 0);
-  const { components } = useTheme();
 
   useEffect(() => {
     if (!src) {

package/src/components/Badge/Badge.figma.tsx

@@ -1,56 +1,47 @@
-import React from "react"
-import Badge from "./Badge"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { Badge } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Badge,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      variant: figma.enum("Variant", {
-        "Subtle - Default": "subtle",
-        Emphasis: "emphasis",
-        Outline: "outline",
-      }),
-      colorScheme: figma.enum("Color Scheme", {
-        Info: "info",
-        Positive: "positive",
-        Danger: "danger",
-        Warning: "warning",
-        Functional: "functional",
-        Energy: "energy",
-        Broadband: "broadband",
-        Mobile: "mobile",
-        Insurance: "insurance",
-        Cashback: "cashback",
-        Pig: "pig",
-        Highlight: "highlight",
-      }),
-      size: figma.enum("Size", {
-        "SM-24": "sm",
-        "MD-28": "md",
-      }),
-      flatBase: figma.boolean("Flat Base?"),
-      // No matching props could be found for these Figma properties:
-      // "icon": figma.boolean('Icon?'),
-      // "icon20": figma.instance('Icon-20'),
-      // "text": figma.string('Text')
-    },
-    example: (props) => (
-      <Badge
-        variant={props.variant}
-        colorScheme={props.colorScheme}
-        size={props.size}
-        flatBase={props.flatBase}
-      />
-    ),
+figma.connect(Badge, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652', {
+  props: {
+    variant: figma.enum('Variant', {
+      'Subtle - Default': 'subtle',
+      Emphasis: 'emphasis',
+      Outline: 'outline',
+    }),
+    colorScheme: figma.enum('Color Scheme', {
+      Info: 'info',
+      Positive: 'positive',
+      Danger: 'danger',
+      Warning: 'warning',
+      Functional: 'functional',
+      Energy: 'energy',
+      Broadband: 'broadband',
+      Mobile: 'mobile',
+      Insurance: 'insurance',
+      Cashback: 'cashback',
+      Pig: 'pig',
+      Highlight: 'highlight',
+    }),
+    size: figma.enum('Size', {
+      'SM-24': 'sm',
+      'MD-28': 'md',
+    }),
+    flatBase: figma.boolean('Flat Base?'),
+    icon: figma.boolean('Icon?', {
+      true: figma.instance('Icon-20'),
+      false: '',
+    }),
+    text: figma.string('Text'),
   },
-)
+  example: props => (
+    <Badge
+      variant={props.variant}
+      colorScheme={props.colorScheme}
+      size={props.size}
+      flatBase={props.flatBase}
+      icon={props.icon}
+    >
+      {props.text}
+    </Badge>
+  ),
+});

package/src/components/Banner/Banner.figma.tsx

@@ -1,15 +1,23 @@
 import figma from '@figma/code-connect';
-import Banner from './Banner';
+import { Banner } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(Banner, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8294%3A3905', {
-  props: {},
-  example: props => <Banner heading={null} description={null} />,
-});
+figma.connect(
+  Banner,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8294-3905&t=wLfy4ZMrZsHup0oB-4',
+  {
+    props: {
+      // irection: figma.enum('Direction', {
+      //   Horizontal: 'horizontal',
+      //   Vertical: 'vertical',
+      // }),d
+    },
+    example: props => {
+      return (
+        // Banner doesn't need to be wrapped in a Card
+        // it's a standalone component in code please see the Banner docs
+        // https://hearth.prod.uw.systems/react-native/?path=/docs/components-banner--docs
+        <Banner heading="The banner heading" description="The text in the banner" />
+      );
+    },
+  }
+);

package/src/components/Banner/Banner.stories.tsx

@@ -133,11 +133,11 @@ export const WithIllustration: Story = {
             illustration={
               <BannerIllustration
                 light={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingLight width={80} height={80} />
                 }
                 dark={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingDark width={80} height={80} />
                 }
               />
@@ -150,11 +150,11 @@ export const WithIllustration: Story = {
             illustration={
               <BannerIllustration
                 light={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingLight width={120} height={120} />
                 }
                 dark={
-                  // @ts-ignore
+                  // @ts-expect-error - Illustration SVG import
                   <SpotBillingDark width={120} height={120} />
                 }
               />

package/src/components/Banner/Banner.tsx

@@ -25,7 +25,8 @@ const Banner = ({
   onPress,
   onClose,
   variant = 'subtle',
-  colorScheme = 'pig',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  colorScheme: _,
   style,
   ...props
 }: BannerProps) => {

package/src/components/Button/Button.figma.tsx

@@ -1,60 +1,132 @@
 import figma from '@figma/code-connect';
-import Button from './Button';
+import { Button } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
-  props: {
-    // These props were automatically mapped based on your linked code:
-    focusable: figma.enum('State', {
-      Focus: true,
-    }),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
-    }),
-    disabled: figma.enum('State', {
-      Disabled: true,
-    }),
-    size: figma.enum('Size', {
-      'SM-32': 'sm',
-      'MD-48': 'md',
-    }),
-    paddingNone: figma.boolean('Padding None?'),
-    colorScheme: figma.enum('Color Scheme', {
-      Affirmative: 'affirmative',
-      Destructive: 'destructive',
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  size: figma.enum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+  }),
+  paddingNone: figma.boolean('Padding None?'),
+  colorScheme: figma.enum('Color Scheme', {
+    Affirmative: 'affirmative',
+    Destructive: 'destructive',
+    Functional: 'functional',
+    Highlight: 'highlight',
+  }),
+  loading: figma.enum('State', {
+    Loading: true,
+  }),
+  text: figma.string('Text'),
+  ghostText: figma.string('Ghost Text'),
+  iconPosition: figma.boolean('Show icon left?', {
+    true: undefined,
+    false: figma.boolean('Show icon right?', {
+      true: 'right',
+      false: undefined,
     }),
-    loading: figma.enum('State', {
-      Loading: true,
+  }),
+  icon: figma.boolean('Show icon left?', {
+    true: figma.instance('Icon left-20'),
+    false: figma.boolean('Show icon right?', {
+      true: figma.instance('Icon right-20'),
+      false: undefined,
     }),
-    // No matching props could be found for these Figma properties:
-    // "text": figma.string('Text'),
-    // "showIconLeft": figma.boolean('Show icon left?'),
-    // "showIconRight": figma.boolean('Show icon right?'),
-    // "iconLeft20": figma.instance('Icon left-20'),
-    // "iconRight20": figma.instance('Icon right-20'),
-    // "ghostText": figma.string('Ghost Text'),
-    // "variant": figma.enum('Variant', {
-    //   "Emphasis": "emphasis",
-    //   "Solid": "solid",
-    //   "Outline": "outline",
-    //   "Ghost": "ghost"
-    // }),
-    // "inverted": figma.boolean('Inverted?')
+  }),
+  variant: figma.enum('Variant', {
+    Emphasis: 'emphasis',
+    Solid: 'solid',
+    Outline: 'outline',
+    Ghost: 'ghost',
+  }),
+  inverted: figma.boolean('Inverted?'),
+};
+
+figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
+  props,
+  variant: {
+    Variant: 'Solid',
+  },
+  example: props => (
+    <Button
+      disabled={props.disabled}
+      size={props.size}
+      variant={props.variant}
+      inverted={props.inverted}
+      paddingNone={props.paddingNone}
+      colorScheme={props.colorScheme}
+      loading={props.loading}
+      icon={props.icon}
+      iconPosition={props.iconPosition}
+    >
+      {props.text}
+    </Button>
+  ),
+});
+figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
+  props,
+  variant: {
+    Variant: 'Emphasis',
+  },
+  example: props => (
+    <Button
+      disabled={props.disabled}
+      size={props.size}
+      variant={props.variant}
+      inverted={props.inverted}
+      paddingNone={props.paddingNone}
+      colorScheme={props.colorScheme}
+      loading={props.loading}
+      iconPosition={props.iconPosition}
+      icon={props.icon}
+    >
+      {props.text}
+    </Button>
+  ),
+});
+
+figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
+  variant: {
+    Variant: 'Outline',
+  },
+  props,
+  example: props => (
+    <Button
+      disabled={props.disabled}
+      size={props.size}
+      variant={props.variant}
+      inverted={props.inverted}
+      paddingNone={props.paddingNone}
+      colorScheme={props.colorScheme}
+      loading={props.loading}
+      icon={props.icon}
+      iconPosition={props.iconPosition}
+    >
+      {props.text}
+    </Button>
+  ),
+});
+
+figma.connect(Button, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A432', {
+  variant: {
+    Variant: 'Ghost',
   },
+  props,
   example: props => (
     <Button
-      focusable={props.focusable}
       disabled={props.disabled}
       size={props.size}
+      variant={props.variant}
+      inverted={props.inverted}
       paddingNone={props.paddingNone}
       colorScheme={props.colorScheme}
       loading={props.loading}
-    />
+      icon={props.icon}
+      iconPosition={props.iconPosition}
+    >
+      {props.ghostText}
+    </Button>
   ),
 });

package/src/components/Card/Card.figma.tsx

@@ -1,45 +1,29 @@
-import React from "react"
-import Card from "./Card"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import Card from './Card';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Card,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2160%3A11",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      variant: figma.enum("Variant", {
-        Emphasis: "emphasis",
-        Subtle: "subtle",
-      }),
-      colorScheme: figma.enum("Color Scheme", {
-        "Neutral Strong": "neutralStrong",
-        "Neutral Subtle": "neutralSubtle",
-        Brand: "brand",
-        Energy: "energy",
-        Broadband: "broadband",
-        Mobile: "mobile",
-        Insurance: "insurance",
-        Cashback: "cashback",
-        Pig: "pig",
-      }),
-      noPadding: figma.boolean("Padding None?"),
-      // No matching props could be found for these Figma properties:
-      // "content": figma.instance('Content')
-    },
-    example: (props) => (
-      <Card
-        variant={props.variant}
-        colorScheme={props.colorScheme}
-        noPadding={props.noPadding}
-      />
-    ),
+figma.connect(Card, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2160%3A11', {
+  props: {
+    variant: figma.enum('Variant', {
+      Emphasis: 'emphasis',
+      Subtle: 'subtle',
+    }),
+    colorScheme: figma.enum('Color Scheme', {
+      'Neutral Strong': 'neutralStrong',
+      'Neutral Subtle': 'neutralSubtle',
+      Brand: 'brand',
+      Energy: 'energy',
+      Broadband: 'broadband',
+      Mobile: 'mobile',
+      Insurance: 'insurance',
+      Cashback: 'cashback',
+      Pig: 'pig',
+    }),
+    noPadding: figma.boolean('Padding None?'),
+    content: figma.instance('Content'),
   },
-)
+  example: props => (
+    <Card variant={props.variant} colorScheme={props.colorScheme} noPadding={props.noPadding}>
+      {props.content}
+    </Card>
+  ),
+});

package/src/components/Card/Card.stories.tsx

@@ -106,7 +106,7 @@ export const WithOnlyAction: Story = {
   args: {
     variant: 'emphasis',
   },
-  render: ({ children, ...props }) => {
+  render: ({ ...props }) => {
     return (
       <Card {...props} flexDirection="column" alignItems="stretch" space="md">
         <CardAction