@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

package/src/components/IconButton/IconButton.figma.tsx

@@ -1,161 +1,55 @@
-//
-// import { IconButton } from './';
-// import figma from '@figma/code-connect';
-
-// const props = {
-//   iconxsmall: figma.instance('icon x-small'),
-//   icon: figma.instance('icon'),
-//   colorScheme: figma.enum('colorScheme', {
-//     cyan: 'cyan',
-//     red: 'red',
-//     green: 'green',
-//     gold: 'gold',
-//     grey: 'functional',
-//   }),
-//   size: figma.enum('size', {
-//     'medium - 48': 'medium',
-//     'small - 32': 'small',
-//     'x-small - 24': 'x-small',
-//   }),
-//   disabled: figma.enum('state', {
-//     disabled: true,
-//   }),
-//   loading: figma.enum('state', {
-//     loading: true,
-//   }),
-//   inverted: figma.boolean('inverted'),
-// };
-
-// // Solid Button
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6678-6454&m=dev',
-//   {
-//     props,
-
-//     example: ({ inverted, icon, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="solid"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={icon}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6678-6454&m=dev',
-//   {
-//     props,
-//     variant: {
-//       size: 'x-small - 24',
-//     },
-//     example: ({ inverted, iconxsmall, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="solid"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={iconxsmall}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// // Outline Button
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6679-7713&m=dev',
-//   {
-//     props,
-//     example: ({ inverted, icon, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="outline"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={icon}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6679-7713&m=dev',
-//   {
-//     props,
-//     variant: {
-//       size: 'x-small - 24',
-//     },
-//     example: ({ inverted, iconxsmall, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="outline"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={iconxsmall}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// // Ghost Button
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6682-8623&m=dev',
-//   {
-//     props,
-//     example: ({ inverted, icon, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="ghost"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={icon}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   IconButton,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6682-8623&m=dev',
-//   {
-//     props,
-//     variant: {
-//       size: 'x-small - 24',
-//     },
-//     example: ({ inverted, iconxsmall, colorScheme, size, disabled, loading }) => (
-//       <IconButton
-//         variant="ghost"
-//         colorScheme={colorScheme}
-//         size={size}
-//         onPress={() => console.log('buttonPressed')}
-//         disabled={disabled}
-//         icon={iconxsmall}
-//         loading={loading}
-//         inverted={inverted}
-//       />
-//     ),
-//   }
-// );
+import figma from '@figma/code-connect';
+import IconButton from './IconButton';
+
+/**
+ * -- 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(IconButton, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A1455', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    size: figma.enum('Size', {
+      'SM-32': 'sm',
+      'MD-48': 'md',
+    }),
+    loading: figma.enum('State', {
+      Loading: true,
+    }),
+    focusable: figma.enum('State', {
+      Focus: true,
+    }),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    colorScheme: figma.enum('Color Scheme', {
+      Affirmative: 'affirmative',
+      Destructive: 'destructive',
+    }),
+    // No matching props could be found for these Figma properties:
+    // "icon24": figma.instance('Icon-24'),
+    // "icon20": figma.instance('Icon-20'),
+    // "variant": figma.enum('Variant', {
+    //   "Emphasis": "emphasis",
+    //   "Solid": "solid",
+    //   "Outline": "outline",
+    //   "Ghost": "ghost"
+    // }),
+    // "inverted": figma.boolean('Inverted?')
+  },
+  example: props => (
+    <IconButton
+      disabled={props.disabled}
+      size={props.size}
+      icon={null}
+      loading={props.loading}
+      focusable={props.focusable}
+      colorScheme={props.colorScheme}
+    />
+  ),
+});

package/src/components/IconContainer/IconContainer.figma.tsx

@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import IconContainer from './IconContainer';
+
+/**
+ * -- 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(
+  IconContainer,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=5462%3A9728',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum('Size', {
+        'SM-32': 'sm',
+        'MD-48': 'md',
+        'LG-64': 'lg',
+      }),
+      radiusNone: figma.boolean('Radius None?'),
+      variant: figma.enum('Variant', {
+        Subtle: 'subtle',
+        Emphasis: 'emphasis',
+      }),
+      color: figma.enum('Color', {
+        Pig: 'pig',
+        Energy: 'energy',
+        Broadband: 'broadband',
+        Mobile: 'mobile',
+        Insurance: 'insurance',
+        Cashback: 'cashback',
+        Highlight: 'highlight',
+      }),
+      // No matching props could be found for these Figma properties:
+      // "icon20": figma.instance('Icon-20'),
+      // "icon24": figma.instance('Icon-24')
+    },
+    example: props => (
+      <IconContainer
+        icon={null}
+        size={props.size}
+        radiusNone={props.radiusNone}
+        variant={props.variant}
+        color={props.color}
+      />
+    ),
+  }
+);

package/src/components/InlineLink/InlineLink.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import InlineLink from "./InlineLink"
+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(
+  InlineLink,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7051%3A25641",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      inverted: figma.boolean("Inverted?"),
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "iconLeft": figma.boolean('Icon left?'),
+      // "iconRight": figma.boolean('Icon right?'),
+      // "iconRight": figma.instance('Icon Right'),
+      // "iconLeft": figma.instance('Icon Left'),
+      // "text": figma.string('Text')
+    },
+    example: (props) => (
+      <InlineLink inverted={props.inverted} disabled={props.disabled} />
+    ),
+  },
+)

package/src/components/Input/Input.figma.tsx

@@ -1,115 +1,57 @@
-// import { Input } from './';
-// import figma from '@figma/code-connect';
-// import { EyeMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import figma from '@figma/code-connect';
+import Input from './Input';
 
 /**
  * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from Figma properties and variants to
- * suggested values. You should update this to match the props of your
- * code component, and update the `example` function to return the
- * code example you'd like to see in Figma
+ * `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(
-//   Input,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6990-3022&m=dev',
-//   {
-//     props: {
-//       state: figma.enum('state', {
-//         initial: 'initial',
-//         focus: 'focus',
-//         filled: 'filled',
-//       }),
-//       placeholder: figma.boolean('placeholder', {
-//         true: figma.nestedProps('.Parts/Input value', {
-//           text: figma.string('Text'),
-//         }),
-//         false: { text: undefined },
-//       }),
-//       validationStatus: figma.enum('validationStatus', {
-//         initial: undefined,
-//         invalid: 'invalid',
-//         valid: 'valid',
-//       }),
-//       disabled: figma.boolean('disabled'),
-//       readOnly: figma.boolean('readOnly'),
-//       iconLeft: figma.boolean('Icon Left?', {
-//         true: figma.nestedProps('.Parts/Content Left', {
-//           icon: figma.instance('Icon'),
-//         }),
-//         false: {
-//           icon: undefined,
-//         },
-//       }),
-//       value: figma.nestedProps('.Parts/Input value', {
-//         text: figma.boolean('placeholder', {
-//           true: undefined,
-//           false: figma.string('Text'),
-//         }),
-//       }),
-//     },
-//     example: props => (
-//       <Input
-//         validationStatus={props.validationStatus}
-//         placeholder={props.placeholder.text}
-//         readonly={props.readOnly}
-//         value={props.value.text}
-//         disabled={props.disabled}
-//         leadingIcon={props.iconLeft.icon}
-//       />
-//     ),
-//   }
-// );
-
-// // Password Input
-// figma.connect(
-//   Input,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7928-5958&m=dev',
-//   {
-//     props: {
-//       state: figma.enum('state', {
-//         initial: 'initial',
-//         focus: 'focus',
-//         filled: 'filled',
-//       }),
-//       placeholder: figma.boolean('placeholder', {
-//         true: figma.nestedProps('.Parts/Input value', {
-//           text: figma.string('Text'),
-//         }),
-//         false: { text: undefined },
-//       }),
-//       validationStatus: figma.enum('validationStatus', {
-//         initial: undefined,
-//         invalid: 'invalid',
-//         valid: 'valid',
-//       }),
-//       disabled: figma.boolean('disabled'),
-//       readOnly: figma.boolean('readOnly'),
-//       iconLeft: figma.boolean('Icon Left?', {
-//         true: figma.nestedProps('.Parts/Content Left', {
-//           icon: figma.instance('Icon'),
-//         }),
-//         false: {
-//           icon: undefined,
-//         },
-//       }),
-//       value: figma.nestedProps('.Parts/Input value', {
-//         text: figma.boolean('placeholder', {
-//           true: undefined,
-//           false: figma.string('Text'),
-//         }),
-//       }),
-//     },
-//     example: props => (
-//       <Input
-//         validationStatus={props.validationStatus}
-//         placeholder={props.placeholder.text}
-//         readonly={props.readOnly}
-//         value={props.value.text}
-//         disabled={props.disabled}
-//         leadingIcon={props.iconLeft.icon}
-//         trailingIcon={EyeMediumIcon}
-//       />
-//     ),
-//   }
-// );
+figma.connect(Input, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2685%3A7021', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    readonly: figma.enum('State', {
+      'Read-only': true,
+    }),
+    focused: figma.boolean('Focus?'),
+    placeholder: figma.string('Suffix'),
+    focusable: figma.boolean('Focus?'),
+    hasTVPreferredFocus: figma.boolean('Focus?'),
+    'aria-disabled': figma.enum('State', {
+      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'),
+    // "suffix": figma.boolean('Suffix?'),
+    // "prefix": figma.boolean('Prefix?'),
+    // "prefix": figma.string('Prefix'),
+    // "suffix": figma.string('Suffix'),
+    // "optional": figma.boolean('Optional?'),
+    // "valueType": figma.enum('Value type', {
+    //   "Empty": "empty",
+    //   "Placeholder": "placeholder",
+    //   "Filled": "filled"
+    // }),
+    // "labelVariant": figma.enum('Label variant', {
+    //   "Body": "body",
+    //   "Heading": "heading"
+    // })
+  },
+  example: props => (
+    <Input
+      disabled={props.disabled}
+      readonly={props.readonly}
+      focused={props.focused}
+      placeholder={props.placeholder}
+      focusable={props.focusable}
+    />
+  ),
+});

package/src/components/Label/Label.figma.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import Label from "./Label"
+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(
+  Label,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8145%3A617",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "label": figma.string('Label'),
+      // "optional": figma.boolean('Optional?')
+    },
+    example: (props) => <Label />,
+  },
+)

package/src/components/Link/Link.figma.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import Link from "./Link"
+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(
+  Link,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      inverted: figma.boolean("Inverted?"),
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      showIcon: figma.boolean("Icon right?"),
+      focusable: figma.enum("State", {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "iconLeft": figma.boolean('Icon left?'),
+      // "iconRight": figma.boolean('Icon right?'),
+      // "iconRight20": figma.instance('Icon right-20'),
+      // "iconLeft20": figma.instance('Icon left-20'),
+      // "text": figma.string('Text')
+    },
+    example: (props) => (
+      <Link
+        inverted={props.inverted}
+        disabled={props.disabled}
+        showIcon={props.showIcon}
+        focusable={props.focusable}
+      />
+    ),
+  },
+)

package/src/components/List/List.context.ts

@@ -12,3 +12,7 @@ export const useListContext = () => {
 
   return context;
 };
+
+export const ListFirstItemContext = createContext<boolean>(false);
+
+export const useListFirstItemContext = () => useContext(ListFirstItemContext);