@utilitywarehouse/hearth-react-native 0.12.0 → 0.13.0

package/src/components/Alert/Alert.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { Alert } from './';
+
+figma.connect(Alert, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3288%3A4656', {
+  links: [
+    {
+      name: 'Engineering Docs',
+      url: 'https://hearth.prod.uw.systems/react-native/?path=/docs/components-alert--docs',
+    },
+  ],
+  props: {
+    colorScheme: figma.enum('Color Scheme', {
+      Info: 'info',
+      Positive: 'positive',
+      Warning: 'warning',
+      Danger: 'danger',
+    }),
+    iconButton: figma.boolean('Icon button?', {
+      true: () => console.log('icon button pressed'),
+      false: undefined,
+    }),
+    text: figma.string('Text'),
+    close: figma.boolean('Close?', {
+      true: () => console.log('close'),
+      false: undefined,
+    }),
+    title: figma.string('Title'),
+    showLink: figma.boolean('Link?', {
+      true: () => console.log('link pressed'),
+      false: undefined,
+    }),
+    link: figma.nestedProps('Link', {
+      text: figma.string('Text'),
+    }),
+  },
+  example: props => (
+    <Alert
+      colorScheme={props.colorScheme}
+      title={props.title}
+      text={props.text}
+      onClose={props.close}
+      onPressIconButton={props.iconButton}
+      link={props.link.text}
+      onPressLink={props.showLink}
+    />
+  ),
+});

package/src/components/Avatar/Avatar.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import Avatar from "./Avatar"
+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(
+  Avatar,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6790%3A14313",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("Size", {
+        "SM-32": "sm",
+        "MD-48": "md",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "initials": figma.string('Initials'),
+      // "image": figma.instance('Image'),
+      // "variant": figma.enum('Variant', {
+      //   "Image": "image",
+      //   "Initials": "initials",
+      //   "Icon": "icon"
+      // })
+    },
+    example: (props) => <Avatar size={props.size} />,
+  },
+)

package/src/components/Badge/Badge.figma.tsx

@@ -1,32 +1,56 @@
-import { Badge } from './';
-import figma from '@figma/code-connect';
+import React from "react"
+import Badge from "./Badge"
+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(
   Badge,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=61-652&t=8rlYQ45xy8j75vwM-4',
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652",
   {
-    links: [
-      {
-        name: 'Storybook - Docs',
-        url: 'https://uw-hearth-react-native.vercel.app/?path=/docs/components-badge--docs',
-      },
-    ],
     props: {
-      text: figma.string('Text'),
-      colorScheme: figma.enum('Color Scheme', {
-        Blue: 'blue',
-        Orange: 'orange',
-        Green: 'green',
-        Grey: 'grey',
-        Red: 'red',
+      // These props were automatically mapped based on your linked code:
+      variant: figma.enum("Variant", {
+        "Subtle - Default": "subtle",
+        Emphasis: "emphasis",
+        Outline: "outline",
+      }),
+      colorScheme: figma.enum("Color Scheme", {
+        Info: "info",
+        Positive: "positive",
+        Danger: "danger",
+        Warning: "warning",
+        Functional: "functional",
+        Energy: "energy",
+        Broadband: "broadband",
+        Mobile: "mobile",
+        Insurance: "insurance",
+        Cashback: "cashback",
+        Pig: "pig",
+        Highlight: "highlight",
       }),
-      variant: figma.enum('Variant', {
-        Solid: 'solid',
-        Outline: 'outline',
+      size: figma.enum("Size", {
+        "SM-24": "sm",
+        "MD-28": "md",
       }),
-      flatBase: figma.boolean('Flat Base?'),
-      icon: figma.instance('Icon'),
+      flatBase: figma.boolean("Flat Base?"),
+      // No matching props could be found for these Figma properties:
+      // "icon": figma.boolean('Icon?'),
+      // "icon20": figma.instance('Icon-20'),
+      // "text": figma.string('Text')
     },
-    example: ({ text, ...props }) => <Badge {...props}>{text}</Badge>,
-  }
-);
+    example: (props) => (
+      <Badge
+        variant={props.variant}
+        colorScheme={props.colorScheme}
+        size={props.size}
+        flatBase={props.flatBase}
+      />
+    ),
+  },
+)

package/src/components/Banner/Banner.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import Banner from './Banner';
+
+/**
+ * -- 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(Banner, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8294%3A3905', {
+  props: {},
+  example: props => <Banner heading={null} description={null} />,
+});

package/src/components/Banner/BannerIllustration.figma.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import BannerIllustration from "./BannerIllustration"
+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(
+  BannerIllustration,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=10145%3A4877",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "illustration": figma.instance('Illustration'),
+      // "size": figma.enum('Size', {
+      //   "XL-120": "xl-120",
+      //   "LG-100": "lg-100",
+      //   "MD-80": "md-80",
+      //   "SM-60": "sm-60",
+      //   "XS-40": "xs-40"
+      // })
+    },
+    example: (props) => <BannerIllustration />,
+  },
+)

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}
+      />
+    ),
+  },
+)