@utilitywarehouse/hearth-react-native 0.19.0 → 0.20.0

package/src/components/Select/Select.tsx

@@ -10,10 +10,9 @@ import {
   BottomSheetView,
 } from '../BottomSheet';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
+import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
-import { Label } from '../Label';
 import { SelectContext } from './Select.context';
 import SelectProps, { SelectOptionItemProps } from './Select.props';
 import SelectOption from './SelectOption';
@@ -28,6 +27,10 @@ const Select = ({
   disabled = false,
   leadingIcon: LeadingIcon,
   validationStatus = 'initial',
+  helperText,
+  helperIcon,
+  invalidText,
+  validText,
   required = true,
   children,
   bottomSheetProps,
@@ -122,42 +125,46 @@ const Select = ({
 
   return (
     <View {...rest} style={[styles.container, rest.style]}>
-      {!!label && (
-        <View>
-          <Label variant={labelVariant}>
-            {label}
-            {!isRequired && <Label variant={labelVariant}> (Optional)</Label>}
-          </Label>
-        </View>
-      )}
-      <Pressable
-        onPress={openBottomSheet}
-        disabled={isDisabled || isReadonly}
-        style={({ pressed }) => [
-          styles.selectContainer,
-          styles.pressedContainer(pressed || isOpen),
-        ]}
+      <FormField
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validationStatus={validationStatusFromContext}
+        required={isRequired}
+        disabled={isDisabled}
+        readonly={isReadonly}
+        invalidText={invalidText}
+        validText={validText}
       >
-        {!!LeadingIcon && (
-          <View>
-            {(() => {
-              const IconAny = Icon as any;
-              return <IconAny as={LeadingIcon} style={styles.icon as any} />;
-            })()}
-          </View>
-        )}
-
-        <View style={styles.optionContainer}>
-          <BodyText numberOfLines={1} style={styles.placeholderText}>
-            {selectedOption?.label || selectedLabel || placeholder}
-          </BodyText>
-        </View>
+        <Pressable
+          onPress={openBottomSheet}
+          disabled={isDisabled || isReadonly}
+          style={({ pressed }) => [
+            styles.selectContainer,
+            styles.pressedContainer(pressed || isOpen),
+          ]}
+        >
+          {!!LeadingIcon && (
+            <View>
+              {(() => {
+                const IconAny = Icon as any;
+                return <IconAny as={LeadingIcon} style={styles.icon as any} />;
+              })()}
+            </View>
+          )}
 
-        <View>
-          <Icon as={ExpandSmallIcon} style={styles.icon} />
-        </View>
-      </Pressable>
+          <View style={styles.optionContainer}>
+            <BodyText numberOfLines={1} style={styles.placeholderText}>
+              {selectedOption?.label || selectedLabel || placeholder}
+            </BodyText>
+          </View>
 
+          <View>
+            <Icon as={ExpandSmallIcon} style={styles.icon} />
+          </View>
+        </Pressable>
+      </FormField>
       <BottomSheetModal
         ref={bottomSheetModalRef}
         snapPoints={['25%', '40%', '80%']}

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

@@ -1,36 +1,18 @@
 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
- */
+import { SelectOption } from '../';
 
 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,
+        Disabled: 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}
-      />
+      <SelectOption label={props.label} value="some value" disabled={props.disabled} />
     ),
   }
 );

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

@@ -1,27 +1,14 @@
-import React from "react"
-import Spinner from "./Spinner"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { Spinner } 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(
-  Spinner,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A195",
-  {
-    props: {
-      // 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: (props) => <Spinner size={props.size} />,
+figma.connect(Spinner, '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',
+    }),
   },
-)
+  example: props => <Spinner size={props.size} />,
+});

package/src/components/Switch/Switch.figma.tsx

@@ -1,37 +1,16 @@
 import figma from '@figma/code-connect';
-import Switch from './Switch';
-
-/**
- * -- 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 { Switch } from '../';
 
 figma.connect(Switch, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3044%3A243', {
   props: {
-    // These props were automatically mapped based on your linked code:
     disabled: figma.enum('State', {
       Disabled: true,
     }),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
-    }),
-    focusable: figma.enum('State', {
-      Focus: true,
-    }),
     checked: figma.boolean('Checked?'),
     size: figma.enum('Size', {
       'MD-32': 'medium',
       'SM-24': 'small',
     }),
   },
-  example: props => (
-    <Switch
-      value={props.checked}
-      disabled={props.disabled}
-      focusable={props.focusable}
-      size={props.size}
-    />
-  ),
+  example: props => <Switch value={props.checked} disabled={props.disabled} size={props.size} />,
 });

package/src/components/Tabs/Tab.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { Tab } from '..';
+
+figma.connect(
+  Tab,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6464-2288&m=dev',
+  {
+    props: {
+      label: figma.string('Label'),
+      icon: figma.boolean('Icon?', {
+        true: figma.instance('Icon-20'),
+      }),
+      tabs: figma.children('Tab item'),
+    },
+    example: props => (
+      <Tab value={props.label} icon={props.icon}>
+        {props.label}
+      </Tab>
+    ),
+  }
+);

package/src/components/Tabs/Tabs.figma.tsx

@@ -1,29 +1,20 @@
-import React from "react"
-import Tabs from "./Tabs"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { TabPanel, Tabs, TabsList } 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(
-  Tabs,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      size: figma.enum("Size", {
-        "MD-56": "md",
-        "LG-64": "lg",
-      }),
-      // No matching props could be found for these Figma properties:
-      // "arrowLeft": figma.boolean('Arrow left?'),
-      // "arrowRight": figma.boolean('Arrow right?'),
-      // "condensed": figma.boolean('Condensed?')
-    },
-    example: (props) => <Tabs size={props.size} />,
+figma.connect(Tabs, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744', {
+  props: {
+    size: figma.enum('Size', {
+      'LG-64': 'lg',
+    }),
+    tabs: figma.children('Tab item'),
   },
-)
+  example: props => (
+    <Tabs size={props.size}>
+      <TabsList>{props.tabs}</TabsList>
+      {/* Example TabPanel content, make sure they match the value of your Tab items */}
+      <TabPanel value="account">Account content</TabPanel>
+      <TabPanel value="billing">Billing content</TabPanel>
+      <TabPanel value="usage">Usage content</TabPanel>
+    </Tabs>
+  ),
+});

package/src/components/Textarea/Textarea.figma.tsx

@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect';
+import { Textarea } from '..';
+
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  readonly: figma.enum('State', {
+    'Read-only': true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2356-5180&m=dev',
+  {
+    props: {
+      ...props,
+      required: figma.boolean('Optional?', {
+        true: false,
+        false: true,
+      }),
+    },
+    example: props => (
+      <Textarea
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        required={props.required}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);

package/src/components/Toast/ToastItem.tsx

@@ -181,7 +181,8 @@ const styles = StyleSheet.create(theme => ({
     width: 24,
     height: 24,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignSelf: 'flex-start',
+    alignItems: 'flex-start',
     flexShrink: 0,
   },
   icon: {
@@ -197,6 +198,7 @@ const styles = StyleSheet.create(theme => ({
   text: { flexShrink: 1 },
   actions: {
     flexShrink: 0,
+    alignSelf: 'flex-start',
   },
 }));
 

package/src/components/ToggleButtonCard/ToggleButtonCard.figma.tsx

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

package/src/components/VerificationInput/VerificationInput.figma.tsx

@@ -0,0 +1,53 @@
+import figma from '@figma/code-connect';
+import { VerificationInput } from '..';
+
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value 1'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
+
+figma.connect(
+  VerificationInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615&m=dev',
+  {
+    props,
+    example: props => (
+      <VerificationInput
+        disabled={props.disabled}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);

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

@@ -1,31 +0,0 @@
-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 />,
-  },
-)