@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.2

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

package/src/components/Carousel/Carousel.figma.tsx

@@ -1,19 +1,22 @@
 import figma from '@figma/code-connect';
-import Carousel from './Carousel';
+import { Carousel, CarouselItem } 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(Carousel, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=5191%3A3220', {
-  props: {
-    // These props were automatically mapped based on your linked code:
-    inverted: figma.boolean('Inverted?'),
-    // No matching props could be found for these Figma properties:
-    // "arrows": figma.boolean('Arrows?')
-  },
-  example: props => <Carousel width={null} inverted={props.inverted} />,
-});
+figma.connect(
+  Carousel,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=5191-3220&m=dev',
+  {
+    props: {
+      inverted: figma.boolean('Inverted?'),
+      showNavigation: figma.boolean('Arrows?'),
+    },
+    example: props => (
+      // Example usage of the Carousel component
+      // See https://hearth.prod.uw.systems/react-native/?path=/docs/components-carousel--docs
+      <Carousel width={300} inverted={props.inverted} showNavigation={props.showNavigation}>
+        <CarouselItem>Item 1</CarouselItem>
+        <CarouselItem>Item 2</CarouselItem>
+        <CarouselItem>Item 3</CarouselItem>
+      </Carousel>
+    ),
+  }
+);

package/src/components/Carousel/Carousel.tsx

@@ -49,7 +49,7 @@ const Carousel = ({
   ...props
 }: CarouselProps) => {
   const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
-  const [numItems, setNumItems] = useState(0);
+  const [, setNumItems] = useState(0);
 
   const scrollViewRef = useRef<ScrollView>(null);
   const flatListRef = useRef<FlatList>(null);

package/src/components/Checkbox/Checkbox.figma.tsx

@@ -1,29 +1,26 @@
 import figma from '@figma/code-connect';
 import { Checkbox } from './Checkbox';
 
-/**
- * -- 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(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087%3A7316', {
+figma.connect(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087-7316', {
   props: {
-    // These props were automatically mapped based on your linked code:
     disabled: figma.enum('State', {
       Disabled: true,
     }),
     checked: figma.boolean('Checked?'),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    label: figma.string('Label'),
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+      false: undefined,
     }),
-    // No matching props could be found for these Figma properties:
-    // "label": figma.string('Label'),
-    // "helperText": figma.string('Helper text'),
-    // "helperText": figma.boolean('Helper text?'),
-    // "validationText": figma.string('Validation text'),
-    // "image": figma.boolean('Image?')
+    validationText: figma.string('Validation text'),
   },
-  example: props => <Checkbox disabled={props.disabled} checked={props.checked} />,
+  example: props => (
+    <Checkbox
+      disabled={props.disabled}
+      checked={props.checked}
+      label={props.label}
+      helperText={props.helperText}
+      invalidText={props.validationText}
+    />
+  ),
 });

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -76,7 +76,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ checked: checkedArg = false, value, children, onChange, ...args }) => {
+  render: ({ checked: checkedArg = false, value, onChange, ...args }) => {
     const [checked, setChecked] = React.useState(checkedArg);
     useEffect(() => {
       setChecked(checkedArg);
@@ -95,7 +95,7 @@ export const Playground: Story = {
 };
 
 export const WithImage: Story = {
-  render: ({ children, ...args }) => (
+  render: ({ ...args }) => (
     <CheckboxGroup aria-label="Checkbox Group" nativeID="checkbox-group">
       <Checkbox
         aria-label="Visa"

package/src/components/Checkbox/CheckboxGroup.figma.tsx

@@ -1,20 +1,53 @@
-import React from "react"
-import CheckboxGroup from "./CheckboxGroup"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { CheckboxGroup } 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
- */
+const props = {
+  label: figma.string('Group label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  direction: figma.enum('Direction', {
+    Column: undefined,
+    Row: 'row',
+  }),
+  tiles: figma.children('Checkbox Tile'),
+  checkboxes: figma.children('Checkbox'),
+};
 
 figma.connect(
   CheckboxGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3141%3A4275",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev',
   {
-    props: {},
-    example: (props) => <CheckboxGroup />,
-  },
-)
+    variant: {
+      Content: 'Checkbox Tile',
+    },
+    props,
+    example: props => (
+      <CheckboxGroup
+        type="tile"
+        label={props.label}
+        helperText={props.helperText}
+        direction={props.direction}
+      >
+        {props.tiles}
+      </CheckboxGroup>
+    ),
+  }
+);
+
+figma.connect(
+  CheckboxGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev',
+  {
+    variant: {
+      Content: 'Checkbox',
+    },
+    props,
+    example: props => (
+      <CheckboxGroup label={props.label} helperText={props.helperText} direction={props.direction}>
+        {props.checkboxes}
+      </CheckboxGroup>
+    ),
+  }
+);

package/src/components/Checkbox/CheckboxTileRoot.figma.tsx

@@ -1,32 +1,29 @@
-import React from "react"
-import CheckboxTileRoot from "./CheckboxTileRoot"
-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 { Checkbox } from './Checkbox';
 
 figma.connect(
-  CheckboxTileRoot,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4961%3A23797",
+  Checkbox,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4961-23797&m=dev',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "label": figma.string('Label'),
-      // "image": figma.boolean('Image?'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid",
-      //   "Focus": "focus"
-      // }),
-      // "checked": figma.boolean('Checked?')
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      checked: figma.boolean('Checked?'),
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+        false: undefined,
+      }),
     },
-    example: (props) => <CheckboxTileRoot />,
-  },
-)
+    example: props => (
+      <Checkbox
+        type="tile"
+        disabled={props.disabled}
+        checked={props.checked}
+        label={props.label}
+        helperText={props.helperText}
+      />
+    ),
+  }
+);

package/src/components/CurrencyInput/CurrencyInput.figma.tsx

@@ -1,56 +1,72 @@
-import React from "react"
-import CurrencyInput from "./CurrencyInput"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { CurrencyInput, FormField } 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
- */
+const props = {
+  placeholder: figma.string('Value'),
+  value: figma.string('Value'),
+  label: figma.string('Label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  invalidText: figma.enum('State', {
+    Default: undefined,
+    Invalid: figma.string('Validation'),
+  }),
+  validationStatus: figma.enum('State', {
+    Default: undefined,
+    Invalid: 'invalid',
+  }),
+  // "labelVariant": figma.enum('Label variant', {
+  //   "Body": "body",
+  //   "Heading": "heading"
+  // })
+};
+
+const onChangeHandler = () => {
+  // Placeholder for onChange handler
+};
+
+const value = 'some value';
+
+figma.connect(
+  CurrencyInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
+  {
+    props,
+    variant: {
+      'Value type': 'Filled',
+    },
+    example: props => (
+      <FormField
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
+      >
+        <CurrencyInput value={props.value} onChange={onChangeHandler} />
+      </FormField>
+    ),
+  }
+);
 
 figma.connect(
   CurrencyInput,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
   {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      focused: figma.boolean("Focus?"),
-      placeholder: figma.string("Label"),
-      autoFocus: figma.boolean("Focus?"),
-      defaultValue: figma.string("Value"),
-      value: figma.string("Value"),
-      focusable: figma.boolean("Focus?"),
-      hasTVPreferredFocus: figma.boolean("Focus?"),
-      // No matching props could be found for these Figma properties:
-      // "validation": figma.string('Validation'),
-      // "helperText": figma.string('Helper text'),
-      // "label": figma.string('Label'),
-      // "value": figma.string('Value'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid"
-      // }),
-      // "valueType": figma.enum('Value type', {
-      //   "Placeholder": "placeholder",
-      //   "Filled": "filled"
-      // }),
-      // "labelVariant": figma.enum('Label variant', {
-      //   "Body": "body",
-      //   "Heading": "heading"
-      // })
+    props,
+    variant: {
+      'Value type': 'Placeholder',
     },
-    example: (props) => (
-      <CurrencyInput
-        focused={props.focused}
-        placeholder={props.placeholder}
-        autoFocus={props.autoFocus}
-        defaultValue={props.defaultValue}
-        value={props.value}
-        focusable={props.focusable}
-        hasTVPreferredFocus={props.hasTVPreferredFocus}
-      />
+    example: props => (
+      <FormField
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
+      >
+        <CurrencyInput placeholder={props.placeholder} value={value} onChange={onChangeHandler} />
+      </FormField>
     ),
-  },
-)
+  }
+);