@utilitywarehouse/hearth-react-native 0.19.0 → 0.20.0

package/src/components/ProgressStepper/ProgressStep.figma.tsx

@@ -1,30 +1,19 @@
 import figma from '@figma/code-connect';
-import ProgressStep from './ProgressStep';
-
-/**
- * -- 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 { ProgressStep } from '../';
 
 figma.connect(
   ProgressStep,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A1987',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       status: figma.enum('State', {
         Complete: 'complete',
         Active: 'active',
         Incomplete: 'incomplete',
       }),
-      // No matching props could be found for these Figma properties:
-      // "label": figma.string('Label'),
-      // "label": figma.boolean('Label?'),
-      // "stepNumber": figma.string('Step number'),
-      // "interactive": figma.boolean('Interactive?')
+      label: figma.string('Label'),
+      id: figma.string('Step number'),
     },
-    example: props => <ProgressStep id={null} status={props.status} />,
+    example: props => <ProgressStep id={props.id} status={props.status} />,
   }
 );

package/src/components/ProgressStepper/ProgressStepper.figma.tsx

@@ -1,20 +1,13 @@
-import React from "react"
-import ProgressStepper from "./ProgressStepper"
-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 { ProgressStepper } from '../';
 
 figma.connect(
   ProgressStepper,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000',
   {
-    props: {},
-    example: (props) => <ProgressStepper />,
-  },
-)
+    props: {
+      steps: figma.children('Step'),
+    },
+    example: props => <ProgressStepper>{props.steps}</ProgressStepper>,
+  }
+);

package/src/components/Radio/Radio.figma.tsx

@@ -1,25 +1,38 @@
 import figma from '@figma/code-connect';
 import Radio from './Radio';
 
-/**
- * -- 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(Radio, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A12685', {
-  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"
-    // }),
-    // "checked": figma.boolean('Checked?')
-  },
-  example: props => <Radio value={null} />,
-});
+figma.connect(
+  Radio,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7428-12685&m=dev',
+  {
+    props: {
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      label: figma.string('Label'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Radio Image'),
+      }),
+      state: figma.enum('State', {
+        Default: 'default',
+      }),
+      checked: figma.boolean('Checked?'),
+      indicator: figma.nestedProps('Radio Item', {
+        disabled: figma.enum('State', {
+          Disabled: true,
+        }),
+      }),
+    },
+    example: props => (
+      <Radio
+        label={props.label}
+        helperText={props.helperText}
+        image={props.image}
+        state={props.state}
+        checked={props.checked}
+        disabled={props.indicator.disabled}
+        value="someValue"
+      />
+    ),
+  }
+);

package/src/components/Radio/RadioGroup.figma.tsx

@@ -1,54 +1,82 @@
-import React from "react"
-import RadioGroup from "./RadioGroup"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { RadioGroup } 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 = {
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+  }),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  direction: figma.enum('Direction', {
+    Row: 'row',
+  }),
+  label: figma.string('Group label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation text'),
+  }),
+};
+
+const value = '';
+const setValue = (value: string) => {};
 
 figma.connect(
   RadioGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13254",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
   {
+    variant: {
+      Content: 'Radio',
+    },
     props: {
-      // These props were automatically mapped based on your linked code:
-      label: figma.string("Group label"),
-      helperText: figma.string("Helper text"),
-      invalidText: figma.string("Helper text"),
-      validText: figma.string("Validation text"),
-      direction: figma.enum("Direction", {
-        Row: "row",
-        Column: "column",
-      }),
-      // No matching props could be found for these Figma properties:
-      // "groupLabel": figma.string('Group label'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "validationText": figma.string('Validation text'),
-      // "state": figma.enum('State', {
-      //   "Default": "default",
-      //   "Invalid": "invalid"
-      // }),
-      // "labelVariant": figma.enum('Label variant', {
-      //   "Body": "body",
-      //   "Heading": "heading"
-      // }),
-      // "content": figma.enum('Content', {
-      //   "Radio": "radio",
-      //   "Radio Tile": "radio-tile"
-      // })
+      ...props,
+      items: figma.children('Radio'),
     },
-    example: (props) => (
+    example: props => (
       <RadioGroup
         label={props.label}
         helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        labelVariant={props.labelVariant}
+        direction={props.direction}
         invalidText={props.invalidText}
-        validText={props.validText}
+        value={value}
+        onChange={value => setValue(value)}
+      >
+        {props.items}
+      </RadioGroup>
+    ),
+  }
+);
+
+figma.connect(
+  RadioGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13254&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Content: 'Radio Tile',
+    },
+    props: {
+      ...props,
+      items: figma.children('Radio Tile'),
+    },
+    example: props => (
+      <RadioGroup
+        label={props.label}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        labelVariant={props.labelVariant}
         direction={props.direction}
-      />
+        invalidText={props.invalidText}
+        type="tile"
+        value={value}
+        onChange={value => setValue(value)}
+      >
+        {props.items}
+      </RadioGroup>
     ),
-  },
-)
+  }
+);

package/src/components/Radio/RadioTile.figma.tsx

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+import { RadioTile } from '../';
+
+figma.connect(
+  RadioTile,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3138-13222&t=Uq6QfQcygdNGv5lM-4',
+  {
+    props: {
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      label: figma.string('Label'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Radio Image'),
+      }),
+      checked: figma.boolean('Checked?'),
+      indicator: figma.nestedProps('Radio Item', {
+        disabled: figma.enum('State', {
+          Disabled: true,
+        }),
+      }),
+    },
+    example: props => (
+      <RadioTile
+        label={props.label}
+        helperText={props.helperText}
+        image={props.image}
+        checked={props.checked}
+        disabled={props.indicator.disabled}
+        value="someValue"
+      />
+    ),
+  }
+);

package/src/components/RadioCard/RadioCard.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { RadioCard } from '../';
+
+figma.connect(
+  RadioCard,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2164-727&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Variant: 'Radio',
+    },
+    props: {
+      radio: figma.nestedProps('Radio', {
+        label: figma.string('Label'),
+      }),
+      content: figma.instance('Content'),
+    },
+    example: props => (
+      // This should be wrapped in a RadioCardGroup, see docs
+      <RadioCard label={props.radio.label} value="someValue">
+        {props.content}
+      </RadioCard>
+    ),
+  }
+);

package/src/components/SectionHeader/SectionHeader.figma.tsx

@@ -1,31 +1,37 @@
-import React from "react"
-import SectionHeader from "./SectionHeader"
-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 { SectionHeader } from '../';
 
 figma.connect(
   SectionHeader,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9092%3A3352",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9092%3A3352',
   {
     props: {
-      // No matching props could be found for these Figma properties:
-      // "trailingContent": figma.boolean('Trailing content?'),
-      // "helperText": figma.boolean('Helper text?'),
-      // "helperText": figma.string('Helper text'),
-      // "heading": figma.string('Heading'),
-      // "badge": figma.boolean('Badge?'),
-      // "state": figma.enum('State', {
-      //   "Invalid": "invalid",
-      //   "Default": "default"
-      // })
+      trailingContent: figma.boolean('Trailing content?', {
+        true: figma.nestedProps('Trailing content', {
+          content: figma.children('Link'),
+        }),
+      }),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      heading: figma.string('Heading'),
+      badge: figma.boolean('Badge?', {
+        true: figma.children('Badge'),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.nestedProps('Validation Text', {
+          text: figma.string('Text'),
+        }),
+      }),
     },
-    example: (props) => <SectionHeader />,
-  },
-)
+    example: props => (
+      <SectionHeader
+        heading={props.heading}
+        helperText={props.helperText}
+        badge={props.badge}
+        trailingContent={props.trailingContent?.content}
+        invalidText={props.invalidText?.text}
+      />
+    ),
+  }
+);

package/src/components/Select/Select.docs.mdx

@@ -20,6 +20,7 @@ The `Select` component creates a dropdown menu that allows users to choose from
   - [`Select`](#select)
   - [`SelectOption`](#selectoption)
 - [Examples](#examples)
+  - [With label and helper text](#with-label-and-helper-text)
   - [With `FormField`](#with-formfield)
   - [Searchable `Select`](#searchable-select)
   - [Inline `SelectOption`](#inline-selectoption)
@@ -77,42 +78,89 @@ const MyComponent = () => {
 
 The `Select` component inherits all of the React Native [`View` props](https://reactnative.dev/docs/view).
 
-| Prop              | Type                                | Default                  | Description                                                |
-| ----------------- | ----------------------------------- | ------------------------ | ---------------------------------------------------------- |
-| options           | SelectOptionProps[]                 | `[]`                     | Array of options to display in the select.                 |
-| value             | string \| null                      | `-`                      | Currently selected value.                                  |
-| onValueChange     | (value: string) => void             | `-`                      | Callback when value changes.                               |
-| label             | string                              | `-`                      | Label for the select.                                      |
-| placeholder       | string                              | `'Select an option'`     | Placeholder text to show when no value is selected.        |
-| disabled          | boolean                             | `false`                  | Whether the select is disabled.                            |
-| readonly          | boolean                             | `false`                  | Whether the select is readonly.                            |
-| leadingIcon       | React.ComponentType                 | `-`                      | Icon to display before the select text.                    |
-| validationStatus  | `'initial' \| 'valid' \| 'invalid'` | `'initial'`              | The validation status of the select.                       |
-| required          | boolean                             | `true`                   | Indicates that the select is required.                     |
-| menuHeading       | string                              | `-`                      | Heading to display at the top of the menu.                 |
-| children          | ReactNode                           | `-`                      | Children to render inside the select (for custom options). |
-| bottomSheetProps  | `BottomSheetProps`                  | `-`                      | Props passed to the BottomSheetModal.                      |
-| emptyText         | string                              | `'No options available'` | Text to display when no options are available.             |
-| listProps         | object                              | `-`                      | Props to be passed to the bottom sheet flat list.          |
-| searchable        | boolean                             | `false`                  | Optional search functionality for the select.              |
-| searchPlaceholder | string                              | `'Search'`               | Search placeholder.                                        |
+| Prop              | Type                                | Default                  | Description                                                                |
+| ----------------- | ----------------------------------- | ------------------------ | -------------------------------------------------------------------------- |
+| options           | `SelectOptionProps[]`               | `[]`                     | Array of options to display in the select.                                 |
+| value             | `string \| null`                    | `-`                      | Currently selected value.                                                  |
+| onValueChange     | `(value: string) => void`           | `-`                      | Callback when value changes.                                               |
+| label             | `string`                            | `-`                      | Label for the select.                                                      |
+| labelVariant      | `'body' \| 'heading'`               | `'body'`                 | Variant for the label. 'inline' will display the label next to the select. |
+| helperText        | `string`                            | `-`                      | Helper text to display below the select.                                   |
+| helperIcon        | `React.ComponentType`               | `-`                      | Optional icon to display next to the helper text.                          |
+| placeholder       | `string`                            | `'Select an option'`     | Placeholder text to show when no value is selected.                        |
+| disabled          | `boolean`                           | `false`                  | Whether the select is disabled.                                            |
+| readonly          | `boolean`                           | `false`                  | Whether the select is readonly.                                            |
+| leadingIcon       | `React.ComponentType`               | `-`                      | Icon to display before the select text.                                    |
+| validationStatus  | `'initial' \| 'valid' \| 'invalid'` | `'initial'`              | The validation status of the select.                                       |
+| invalidText       | `string`                            | `-`                      | Text to display when validationStatus is 'invalid'.                        |
+| validText         | `string`                            | `-`                      | Text to display when validationStatus is 'valid'.                          |
+| required          | `boolean`                           | `true`                   | Indicates that the select is required.                                     |
+| menuHeading       | `string`                            | `-`                      | Heading to display at the top of the menu.                                 |
+| children          | `ReactNode`                         | `-`                      | Children to render inside the select (for custom options).                 |
+| bottomSheetProps  | `BottomSheetProps`                  | `-`                      | Props passed to the BottomSheetModal.                                      |
+| emptyText         | `string`                            | `'No options available'` | Text to display when no options are available.                             |
+| listProps         | `object`                            | `-`                      | Props to be passed to the bottom sheet flat list.                          |
+| searchable        | `boolean`                           | `false`                  | Optional search functionality for the select.                              |
+| searchPlaceholder | `string`                            | `'Search'`               | Search placeholder.                                                        |
 
 ### `SelectOption`
 
 The `SelectOption` component is used to create individual options within the `Select` component. It can be used inline or as part of the `options` prop.
 
-| Prop         | Type                    | Default | Description                            |
-| ------------ | ----------------------- | ------- | -------------------------------------- |
-| label        | string                  | `-`     | Label to display for this option.      |
-| value        | string                  | `-`     | Value for this option.                 |
-| leadingIcon  | React.ComponentType     | `-`     | Optional left icon for this option.    |
-| trailingIcon | React.ComponentType     | `-`     | Optional right icon for this option.   |
-| selected     | boolean                 | `-`     | Whether this option is selected.       |
-| disabled     | boolean                 | `false` | Whether this option is disabled.       |
-| onPress      | (value: string) => void | `-`     | Callback when this option is selected. |
+| Prop         | Type                      | Default | Description                            |
+| ------------ | ------------------------- | ------- | -------------------------------------- |
+| label        | `string`                  | `-`     | Label to display for this option.      |
+| value        | `string`                  | `-`     | Value for this option.                 |
+| leadingIcon  | `React.ComponentType`     | `-`     | Optional left icon for this option.    |
+| trailingIcon | `React.ComponentType`     | `-`     | Optional right icon for this option.   |
+| selected     | `boolean`                 | `-`     | Whether this option is selected.       |
+| disabled     | `boolean`                 | `false` | Whether this option is disabled.       |
+| onPress      | `(value: string) => void` | `-`     | Callback when this option is selected. |
 
 ## Examples
 
+## With label and helper text
+
+<UsageWrap>
+  <Center>
+    <Select
+      label="Select an option"
+      helperText="This is some helper text for the select component."
+      placeholder="Select an option"
+      options={[
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+      ]}
+      value="1"
+      onValueChange={value => console.log('Selected:', value)}
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Select } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Select
+      label="Select an option"
+      helperText="This is some helper text for the select component."
+      placeholder="Select an option"
+      options={[
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+      ]}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `Select` component can be used with the `FormField` component for additional functionality like validation messages and helper text.

package/src/components/Select/Select.figma.tsx

@@ -1,55 +1,56 @@
 import figma from '@figma/code-connect';
-import Select from './Select';
-
-/**
- * -- 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 { useState } from 'react';
+import { Select } from '../';
 
 figma.connect(Select, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3224%3A995', {
   props: {
-    // These props were automatically mapped based on your linked code:
     label: figma.string('Label'),
-    placeholder: figma.string('Label'),
+    placeholder: figma.enum('Value type', {
+      Placeholder: figma.string('Value'),
+    }),
     disabled: figma.enum('Variant', {
       Disabled: true,
     }),
-    emptyText: figma.string('Helper text'),
-    readonly: figma.enum('Variant', {
-      'Read-only': true,
+    validationStatus: figma.enum('Variant', {
+      Invalid: 'invalid',
+      Valid: 'valid',
     }),
-    collapsable: figma.boolean('Dropdown?'),
-    focusable: figma.boolean('Focus?'),
-    hasTVPreferredFocus: figma.boolean('Focus?'),
-    'aria-disabled': figma.enum('Variant', {
-      Disabled: true,
+    invalidText: figma.enum('Variant', {
+      Invalid: figma.string('Validation'),
+    }),
+    validText: figma.enum('Variant', {
+      Valid: figma.string('Validation'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "helperText": figma.boolean('Helper text?'),
-    // "label": figma.string('Label'),
-    // "validation": figma.string('Validation'),
-    // "helperText": figma.string('Helper text'),
-    // "value": figma.string('Value'),
-    // "dropdown": figma.boolean('Dropdown?'),
-    // "optional": figma.boolean('Optional?'),
-    // "valueType": figma.enum('Value type', {
-    //   "Empty": "empty",
-    //   "Placeholder": "placeholder",
-    //   "Selected": "selected"
-    // })
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+    }),
+    required: figma.boolean('Optional?', {
+      true: false,
+    }),
+    value: figma.enum('Value type', {
+      Selected: figma.string('Value'),
+    }),
+  },
+  example: props => {
+    const [value, setValue] = useState(null);
+    return (
+      <Select
+        label={props.label}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+        helperText={props.helperText}
+        required={props.required}
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+          { label: 'Option 3', value: '3' },
+        ]}
+        value={value}
+        onValueChange={value => setValue(value)}
+      />
+    );
   },
-  example: props => (
-    <Select
-      label={props.label}
-      placeholder={props.placeholder}
-      disabled={props.disabled}
-      emptyText={props.emptyText}
-      readonly={props.readonly}
-      collapsable={props.collapsable}
-      focusable={props.focusable}
-      hasTVPreferredFocus={props.hasTVPreferredFocus}
-    />
-  ),
 });

package/src/components/Select/Select.props.ts

@@ -53,6 +53,22 @@ interface SelectProps extends ViewProps {
    * @default 'body'.
    */
   labelVariant?: 'heading' | 'body';
+  /**
+   * Helper text to show below the select
+   */
+  helperText?: string;
+  /**
+   * Optional icon to display alongside the helper text
+   */
+  helperIcon?: React.ComponentType;
+  /**
+   *  Text to display when validationStatus is 'invalid'
+   */
+  invalidText?: string;
+  /**
+   * Text to display when validationStatus is 'valid'
+   */
+  validText?: string;
   /**
    * Placeholder text to show when no value is selected
    */