@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

package/src/components/PillGroup/Pill.tsx

@@ -1,10 +1,10 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
-import { usePillGroupContext } from './PillGroup.context';
+import { Icon } from '../Icon';
 import type { PillProps } from './Pill.props';
+import { usePillGroupContext } from './PillGroup.context';
 
 const PillRoot = ({
   value,
@@ -61,7 +61,7 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
     },
     variants: {
       active: {

package/src/components/PillGroup/PillGroup.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { PillGroup } from './PillGroup';
+
+/**
+ * -- 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(
+  PillGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15988',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      wrap: figma.boolean('Wrap?'),
+    },
+    example: props => <PillGroup value={null} wrap={props.wrap} />,
+  }
+);

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

@@ -0,0 +1,30 @@
+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
+ */
+
+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?')
+    },
+    example: props => <ProgressStep id={null} status={props.status} />,
+  }
+);

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

@@ -0,0 +1,20 @@
+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
+ */
+
+figma.connect(
+  ProgressStepper,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000",
+  {
+    props: {},
+    example: (props) => <ProgressStepper />,
+  },
+)

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

@@ -1,45 +1,25 @@
 import figma from '@figma/code-connect';
-import { Radio, RadioGroup } from './';
+import Radio from './Radio';
 
-const value = 'some-value';
-const setValue = (value: string) => console.log(value);
+/**
+ * -- 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/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5626-1463&m=dev',
-  {
-    props: {
-      disabled: figma.boolean('disabled'),
-      label: figma.nestedProps('Label', {
-        text: figma.string('Label Text'),
-      }),
-      helperText: figma.nestedProps('Helper Text', {
-        text: figma.string('Text'),
-      }),
-      invalidText: figma.boolean('invalid', {
-        true: figma.nestedProps('Helper Text', {
-          text: figma.string('Text'),
-          showIcon: figma.boolean('showIcon?'),
-        }),
-        false: {
-          text: undefined,
-          showIcon: undefined,
-        },
-      }),
-    },
-    example: ({ disabled, label, helperText, invalidText }) => (
-      <RadioGroup value={value} onChange={setValue}>
-        <Radio
-          value="someValue"
-          disabled={disabled}
-          label={label.text}
-          helperText={helperText.text}
-          invalidText={invalidText.text}
-          showValidationIcon={invalidText.showIcon}
-        />
-      </RadioGroup>
-    ),
-  }
-);
-
-// TODO: Add variants with helperText when it's implemented
+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} />,
+});

package/src/components/Radio/Radio.stories.tsx

@@ -6,6 +6,7 @@ import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
+import { FormField } from '../FormField';
 
 const meta = {
   title: 'Stories / Radio',
@@ -206,3 +207,26 @@ export const Variants: Story = {
     );
   },
 };
+
+export const WithFormFieldExample: Story = () => (
+  <>
+    <FormField
+      label="Account type"
+      helperText="Is this account used for personal or business purposes?"
+    >
+      <RadioGroup type="tile">
+        <Radio label="Personal" value="Personal" />
+        <Radio label="Business" value="Business" />
+      </RadioGroup>
+    </FormField>
+    <RadioGroup
+      direction="row"
+      label="Account type"
+      helperText="Is this account used for personal or business purposes?"
+      type="tile"
+    >
+      <Radio label="Personal" value="Personal" />
+      <Radio label="Business" value="Business" />
+    </RadioGroup>
+  </>
+);

package/src/components/Radio/RadioGroup.context.ts

@@ -4,6 +4,7 @@ export const RadioGroupContext = createContext<{
   disabled?: boolean;
   validationStatus?: 'valid' | 'invalid' | 'initial';
   type?: 'default' | 'tile';
+  direction?: 'column' | 'row';
 }>({});
 
 export const useRadioGroupContext = () => useContext(RadioGroupContext);

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

@@ -0,0 +1,54 @@
+import React from "react"
+import RadioGroup from "./RadioGroup"
+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
+ */
+
+figma.connect(
+  RadioGroup,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13254",
+  {
+    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"
+      // })
+    },
+    example: (props) => (
+      <RadioGroup
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validText={props.validText}
+        direction={props.direction}
+      />
+    ),
+  },
+)

package/src/components/Radio/RadioGroup.tsx

@@ -25,8 +25,8 @@ const RadioGroup = ({
   ...props
 }: RadioGroupProps) => {
   const value = useMemo(
-    () => ({ disabled, validationStatus, type }),
-    [disabled, validationStatus, type]
+    () => ({ disabled, validationStatus, type, direction }),
+    [disabled, validationStatus, type, direction]
   );
   const showHeader = !!label || !!helperText || !!invalidText || !!validText;
   const childrenArray = React.Children.toArray(children as any);

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

@@ -0,0 +1,27 @@
+import React from "react"
+import RadioImage from "./RadioImage"
+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
+ */
+
+figma.connect(
+  RadioImage,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A8535",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "customContent": figma.instance('Custom content'),
+      // "variant": figma.enum('Variant', {
+      //   "Bank logo": "bank-logo",
+      //   "Custom": "custom"
+      // })
+    },
+    example: (props) => <RadioImage />,
+  },
+)

package/src/components/Radio/RadioIndicator.tsx

@@ -35,9 +35,9 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         outlineColor: theme.components.radio.outlineColorHover,
       },
-      '_focus-within': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-within': {
+      //   ...theme.helpers.focusVisible,
+      // },
       _active: {
         outlineColor: theme.components.radio.outlineColorActive,
       },

package/src/components/Radio/RadioTextContent.tsx

@@ -12,7 +12,6 @@ const RadioTextContent = ({ children, style, ...props }: FlexProps) => {
 
 const styles = StyleSheet.create({
   content: {
-    flex: 1,
     flexShrink: 1,
   },
 });

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

@@ -0,0 +1,31 @@
+import React from "react"
+import RadioTileRoot from "./RadioTileRoot"
+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
+ */
+
+figma.connect(
+  RadioTileRoot,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13222",
+  {
+    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",
+      //   "Focus": "focus"
+      // }),
+      // "checked": figma.boolean('Checked?')
+    },
+    example: (props) => <RadioTileRoot />,
+  },
+)

package/src/components/Radio/RadioTileRoot.tsx

@@ -1,11 +1,14 @@
 import { View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useRadioContext } from './Radio.context';
+import { useRadioGroupContext } from './RadioGroup.context';
 
 const RadioTileRoot = ({ children }: { children: ViewProps['children'] }) => {
+  const { direction } = useRadioGroupContext();
   const { checked } = useRadioContext();
   styles.useVariants({
     checked,
+    direction,
   });
   return <View style={styles.container}>{children}</View>;
 };
@@ -14,7 +17,6 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    flex: 1,
     alignSelf: 'stretch',
     gap: theme.components.radio.gap,
     padding: theme.components.radio.tile.padding,
@@ -30,6 +32,12 @@ const styles = StyleSheet.create(theme => ({
           margin: -theme.components.radio.tile.borderWidthSelected / 2,
         },
       },
+      direction: {
+        row: {},
+        column: {
+          flex: 1,
+        },
+      },
     },
   },
 }));

package/src/components/RadioCard/RadioCardIndicator.tsx

@@ -35,9 +35,9 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         outlineColor: theme.components.radio.outlineColorHover,
       },
-      '_focus-within': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-within': {
+      //   ...theme.helpers.focusVisible,
+      // },
       _active: {
         outlineColor: theme.components.radio.outlineColorActive,
       },

package/src/components/RadioCard/RadioCardRoot.tsx

@@ -75,9 +75,9 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     _web: {
-      '_focus-visible': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-visible': {
+      //   ...theme.helpers.focusVisible,
+      // },
     },
   },
 }));

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

@@ -1,17 +1,31 @@
-//
-// import { SectionHeader } from './';
-// import figma from '@figma/code-connect';
+import React from "react"
+import SectionHeader from "./SectionHeader"
+import figma from "@figma/code-connect"
 
-// figma.connect(
-//   SectionHeader,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4763-8266&t=q4qCzh74a2av1MqM-4',
-//   {
-//     props: {
-//       helperText: figma.string('Supporting text'),
-//       text: figma.string('heading'),
-//     },
-//     example: ({ helperText, text }) => (
-//       <SectionHeader text={text} helperText={helperText} />
-//     ),
-//   }
-// );
+/**
+ * -- 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(
+  SectionHeader,
+  "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"
+      // })
+    },
+    example: (props) => <SectionHeader />,
+  },
+)

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

@@ -0,0 +1,55 @@
+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
+ */
+
+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'),
+    disabled: figma.enum('Variant', {
+      Disabled: true,
+    }),
+    emptyText: figma.string('Helper text'),
+    readonly: figma.enum('Variant', {
+      'Read-only': true,
+    }),
+    collapsable: figma.boolean('Dropdown?'),
+    focusable: figma.boolean('Focus?'),
+    hasTVPreferredFocus: figma.boolean('Focus?'),
+    'aria-disabled': figma.enum('Variant', {
+      Disabled: true,
+    }),
+    // 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"
+    // })
+  },
+  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/SelectOption.figma.tsx

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import SelectOption from './SelectOption';
+
+/**
+ * -- 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(
+  SelectOption,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4340%3A1252',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      label: figma.string('Label'),
+      selected: figma.boolean('Selected?'),
+      disabled: figma.enum('State', {
+        Active: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "label": figma.string('Label'),
+      // "icon": figma.boolean('Icon?'),
+      // "icon20": figma.instance('Icon-20')
+    },
+    example: props => (
+      <SelectOption
+        label={props.label}
+        value={null}
+        selected={props.selected}
+        disabled={props.disabled}
+      />
+    ),
+  }
+);

package/src/components/Spinner/Spinner.figma.tsx

@@ -1,19 +1,27 @@
-import figma from '@figma/code-connect';
-import { color } from '@utilitywarehouse/hearth-tokens/js';
-import { Spinner } from './';
+import React from "react"
+import Spinner from "./Spinner"
+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
+ */
 
 figma.connect(
   Spinner,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=61-195&t=j6vWFfxRVLbnAYhY-4',
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A195",
   {
     props: {
-      size: figma.enum('Size', {
-        'XS-20': 'xs',
-        'SM-24': 'sm',
-        'MD-32': 'md',
-        'LG-44': 'lg',
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("Size", {
+        "XS-20": "xs",
+        "SM-24": "sm",
+        "MD-32": "md",
+        "LG-44": "lg",
       }),
     },
-    example: ({ size }) => <Spinner size={size} color={color.purple['700']} />,
-  }
-);
+    example: (props) => <Spinner size={props.size} />,
+  },
+)