@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

package/src/components/BodyText/index.ts

@@ -1 +1,2 @@
 export { default as BodyText } from './BodyText';
+export type { default as BodyTextProps } from './BodyText.props';

package/src/components/BottomSheet/BottomSheetModal.figma.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import BottomSheetModal from "./BottomSheetModal"
+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(
+  BottomSheetModal,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4084%3A33378",
+  {
+    props: {},
+    example: (props) => <BottomSheetModal />,
+  },
+)

package/src/components/Button/Button.figma.tsx

@@ -1,229 +1,60 @@
-//
-// import { Button, ButtonIcon, ButtonText } from './';
-// import figma from '@figma/code-connect';
-
-// const props = {
-//   iconPosition: figma.boolean('Icon Left?', {
-//     true: 'left',
-//     false: figma.boolean('Icon Right?', {
-//       true: 'right',
-//       false: undefined,
-//     }),
-//   }),
-//   icon: figma.boolean('Icon Right?', {
-//     true: figma.instance('Icon Right'),
-//     false: figma.boolean('Icon Left?', {
-//       true: figma.instance('Icon Left'),
-//       false: undefined,
-//     }),
-//   }),
-//   iconRight: figma.instance('Icon Right'),
-//   iconLeft: figma.instance('Icon Left'),
-//   text: figma.string('Text'),
-//   colorScheme: figma.enum('colorScheme', {
-//     cyan: 'cyan',
-//     green: 'green',
-//     red: 'red',
-//   }),
-//   size: figma.enum('size', {
-//     'medium - 48 (default)': 'medium',
-//     'large - 56': 'large',
-//     'small - 32': 'small',
-//   }),
-//   disabled: figma.enum('state', {
-//     disabled: true,
-//   }),
-//   loading: figma.enum('state', {
-//     loading: true,
-//   }),
-//   inverted: figma.boolean('inverted'),
-// };
-
-// // Solid Button
-
-// figma.connect(
-//   Button,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
-//   {
-//     props,
-//     links: [
-//       {
-//         name: 'Documentation',
-//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
-//       },
-//     ],
-//     example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
-//       <Button
-//         variant="solid"
-//         onPress={() => console.log('button pressed')}
-//         colorScheme={colorScheme}
-//         size={size}
-//         inverted={inverted}
-//         disabled={disabled}
-//         loading={loading}
-//         iconPosition={iconPosition}
-//         icon={icon}
-//       >
-//         {text}
-//       </Button>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   Button,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
-//   {
-//     props,
-//     links: [
-//       {
-//         name: 'Documentation',
-//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
-//       },
-//     ],
-//     variant: {
-//       'Icon Right?': true,
-//       'Icon Left?': true,
-//     },
-//     example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
-//       <Button
-//         variant="solid"
-//         onPress={() => console.log('button pressed')}
-//         colorScheme={colorScheme}
-//         size={size}
-//         inverted={inverted}
-//         disabled={disabled}
-//       >
-//         <ButtonIcon as={iconLeft} />
-//         <ButtonText>{text}</ButtonText>
-//         <ButtonIcon as={iconRight} />
-//       </Button>
-//     ),
-//   }
-// );
-
-// // Outline Button
-
-// figma.connect(
-//   Button,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-1321&m=dev',
-//   {
-//     props,
-//     links: [
-//       {
-//         name: 'Documentation',
-//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
-//       },
-//     ],
-//     example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
-//       <Button
-//         variant="outline"
-//         onPress={() => console.log('button pressed')}
-//         colorScheme={colorScheme}
-//         size={size}
-//         inverted={inverted}
-//         disabled={disabled}
-//         loading={loading}
-//         iconPosition={iconPosition}
-//         icon={icon}
-//       >
-//         {text}
-//       </Button>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   Button,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
-//   {
-//     props,
-//     links: [
-//       {
-//         name: 'Documentation',
-//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
-//       },
-//     ],
-//     variant: {
-//       'Icon Right?': true,
-//       'Icon Left?': true,
-//     },
-//     example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
-//       <Button
-//         variant="outline"
-//         onPress={() => console.log('button pressed')}
-//         colorScheme={colorScheme}
-//         size={size}
-//         inverted={inverted}
-//         disabled={disabled}
-//       >
-//         <ButtonIcon as={iconLeft} />
-//         <ButtonText>{text}</ButtonText>
-//         <ButtonIcon as={iconRight} />
-//       </Button>
-//     ),
-//   }
-// );
-
-// // Ghost button
-
-// figma.connect(
-//   Button,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7250-2103&m=dev',
-//   {
-//     props,
-//     links: [
-//       {
-//         name: 'Documentation',
-//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
-//       },
-//     ],
-//     example: ({ text, inverted, disabled, loading, colorScheme, size, icon, iconPosition }) => (
-//       <Button
-//         variant="ghost"
-//         onPress={() => console.log('button pressed')}
-//         colorScheme={colorScheme}
-//         size={size}
-//         inverted={inverted}
-//         disabled={disabled}
-//         loading={loading}
-//         iconPosition={iconPosition}
-//         icon={icon}
-//       >
-//         {text}
-//       </Button>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   Button,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7249-3682&m=dev',
-//   {
-//     props,
-//     links: [
-//       {
-//         name: 'Documentation',
-//         url: 'https://uw-native-ui.vercel.app/?path=/docs/native-ui-components-button--docs',
-//       },
-//     ],
-//     variant: {
-//       'Icon Right?': true,
-//       'Icon Left?': true,
-//     },
-//     example: ({ text, inverted, disabled, colorScheme, size, iconLeft, iconRight }) => (
-//       <Button
-//         variant="ghost"
-//         onPress={() => console.log('button pressed')}
-//         colorScheme={colorScheme}
-//         size={size}
-//         inverted={inverted}
-//         disabled={disabled}
-//       >
-//         <ButtonIcon as={iconLeft} />
-//         <ButtonText>{text}</ButtonText>
-//         <ButtonIcon as={iconRight} />
-//       </Button>
-//     ),
-//   }
-// );
+import figma from '@figma/code-connect';
+import Button from './Button';
+
+/**
+ * -- 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',
+    }),
+    loading: figma.enum('State', {
+      Loading: true,
+    }),
+    // 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?')
+  },
+  example: props => (
+    <Button
+      focusable={props.focusable}
+      disabled={props.disabled}
+      size={props.size}
+      paddingNone={props.paddingNone}
+      colorScheme={props.colorScheme}
+      loading={props.loading}
+    />
+  ),
+});

package/src/components/Card/Card.figma.tsx

@@ -1,73 +1,45 @@
-//
-// import { Card } from './';
-// import figma from '@figma/code-connect';
+import React from "react"
+import Card from "./Card"
+import figma from "@figma/code-connect"
 
-// figma.connect(
-//   Card,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=9344-2255&t=mJTJZaLNKo4fj5Wm-4',
-//   {
-//     props: {
-//       variant: figma.enum('variant', {
-//         dashed: 'dashed',
-//         elevated: 'elevated',
-//         outline: 'outline',
-//         filled: 'filled',
-//       }),
-//       padding: figma.enum('padding', {
-//         large: 'large',
-//         medium: 'medium',
-//         small: 'small',
-//         none: 'none',
-//       }),
-//       colorScheme: figma.enum('colorScheme', {
-//         base: 'base',
-//         grey: 'grey',
-//         purple: 'purple',
-//       }),
-//       surface: figma.enum('surface', {
-//         base: 'base',
-//         purple: 'purple',
-//       }),
-//       children: figma.instance('content'),
-//     },
-//     example: ({ children, ...props }) => <Card {...props}>{children}</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
+ */
 
-// // Nested Card
-
-// figma.connect(
-//   Card,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=9444-8408&t=mJTJZaLNKo4fj5Wm-4',
-//   {
-//     props: {
-//       variant: figma.enum('variant', {
-//         dashed: 'dashed',
-//         elevated: 'elevated',
-//         outline: 'outline',
-//         filled: 'filled',
-//       }),
-//       padding: figma.enum('padding', {
-//         large: 'large',
-//         medium: 'medium',
-//         small: 'small',
-//         none: 'none',
-//       }),
-//       colorScheme: figma.enum('colorScheme', {
-//         base: 'base',
-//         grey: 'grey',
-//         purple: 'purple',
-//       }),
-//       surface: figma.enum('surface', {
-//         base: 'base',
-//         purple: 'purple',
-//       }),
-//       children: figma.instance('content'),
-//     },
-//     example: ({ children, ...props }) => (
-//       <Card {...props} nested>
-//         {children}
-//       </Card>
-//     ),
-//   }
-// );
+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}
+      />
+    ),
+  },
+)

package/src/components/Card/CardAction/CardAction.figma.tsx

@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import CardAction from './CardAction';
+
+/**
+ * -- 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(
+  CardAction,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8154%3A4346',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      loading: figma.enum('State', {
+        Loading: true,
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      'aria-disabled': figma.enum('State', {
+        Disabled: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "listHeading": figma.string('List heading'),
+      // "helperText": figma.boolean('Helper text?'),
+      // "helperText": figma.string('Helper text'),
+      // "iconContainer": figma.boolean('Icon container?'),
+      // "trailingIcon20": figma.instance('Trailing icon-20'),
+      // "leadingIcon": figma.boolean('Leading Icon?'),
+      // "leadingIcon24": figma.instance('Leading icon-24'),
+      // "badgeRight": figma.boolean('Badge right?'),
+      // "badgeBottom": figma.boolean('Badge bottom?'),
+      // "badgeMiddle": figma.boolean('Badge middle?'),
+      // "size": figma.enum('Size', {
+      //   "Default": "default",
+      //   "Large": "large"
+      // })
+    },
+    example: props => <CardAction loading={props.loading} disabled={props.disabled} />,
+  }
+);

package/src/components/Card/CardAction/CardAction.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';

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

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import Carousel from './Carousel';
+
+/**
+ * -- 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} />,
+});

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

@@ -1,44 +1,29 @@
-import { Checkbox } from './';
 import figma from '@figma/code-connect';
+import { Checkbox } from './Checkbox';
 
-const props = {
-  isDisabled: figma.boolean('isDisabled'),
-  invalid: figma.boolean('invalid'),
-  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,
-    },
-  }),
-};
-
-figma.connect(
-  Checkbox,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5623-561&m=dev',
-  {
-    props,
-    example: ({ isDisabled, label, helperText, invalidText }) => (
-      <Checkbox
-        value="some-value"
-        onChange={(isChecked: boolean) => console.log(isChecked)}
-        disabled={isDisabled}
-        label={label.text}
-        helperText={helperText.text}
-        invalidText={invalidText.text}
-        showValidationIcon={invalidText.showIcon}
-      />
-    ),
-  }
-);
+/**
+ * -- 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
+ */
 
-// TODO: Add variants with helperText when it's implemented
+figma.connect(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087%3A7316', {
+  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,
+    }),
+    // 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?')
+  },
+  example: props => <Checkbox disabled={props.disabled} checked={props.checked} />,
+});

package/src/components/Checkbox/CheckboxGroup.context.ts

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

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

@@ -0,0 +1,20 @@
+import React from "react"
+import CheckboxGroup from "./CheckboxGroup"
+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(
+  CheckboxGroup,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3141%3A4275",
+  {
+    props: {},
+    example: (props) => <CheckboxGroup />,
+  },
+)

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,13 +1,12 @@
- 
 import React, { useMemo } from 'react';
-import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
-import CheckboxGroupProps from './CheckboxGroup.props';
-import { CheckboxGroupContext } from './CheckboxGroup.context';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import CheckboxGroupTextContent from './CheckboxGroupTextContent';
-import { Label } from '../Label';
 import { Helper } from '../Helper';
+import { Label } from '../Label';
+import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
+import { CheckboxGroupContext } from './CheckboxGroup.context';
+import CheckboxGroupProps from './CheckboxGroup.props';
+import CheckboxGroupTextContent from './CheckboxGroupTextContent';
 
 const CheckboxGroup = ({
   children,
@@ -26,8 +25,8 @@ const CheckboxGroup = ({
   ...props
 }: CheckboxGroupProps) => {
   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);