@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

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.docs.mdx

@@ -209,7 +209,7 @@ const MyComponent = () => (
 The badge can be positioned in three different locations:
 
 ```tsx
-import { Card, CardAction } from '@utilitywarehouse/hearth-react-native';
+import { Card, CardAction, Badge } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <>
@@ -218,7 +218,7 @@ const MyComponent = () => (
       <CardAction
         heading="Action"
         helperText="Helper text"
-        badge={{ text: 'New' }}
+        badge={<Badge text="New" />}
         badgePosition="bottom"
         onPress={() => console.log('pressed')}
       />
@@ -229,7 +229,7 @@ const MyComponent = () => (
       <CardAction
         heading="Action"
         helperText="Helper text"
-        badge={{ text: 'New' }}
+        badge={<Badge text="New" />}
         badgePosition="middle"
         onPress={() => console.log('pressed')}
       />
@@ -240,7 +240,7 @@ const MyComponent = () => (
       <CardAction
         heading="Action"
         helperText="Helper text"
-        badge={{ text: 'New' }}
+        badge={<Badge text="New" />}
         badgePosition="right"
         onPress={() => console.log('pressed')}
       />

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.props.ts

@@ -1,6 +1,5 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
-import BadgeProps from '../../Badge/Badge.props';
 import { IconContainerProps } from '../../IconContainer';
 
 interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
@@ -12,7 +11,7 @@ interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
 interface CardActionContentProps {
   heading: string;
   helperText?: string;
-  badge?: BadgeProps;
+  badge?: ReactNode;
   badgePosition?: 'bottom' | 'middle' | 'right' | 'top';
   iconContainer?: boolean;
   iconContainerVariant?: IconContainerProps['variant'];

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

@@ -1,7 +1,8 @@
-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';
+import { Badge } from '../../Badge';
 import { Flex } from '../../Flex';
 import Card from '../Card';
 import CardAction from './CardAction';
@@ -169,7 +170,7 @@ export const WithBadge: Story = {
           heading="Badge at bottom"
           helperText="Badge positioned below text"
           leadingIcon={ElectricityMediumIcon}
-          badge={{ text: 'New' }}
+          badge={<Badge text="New" />}
           badgePosition="bottom"
           onPress={() => console.log('pressed')}
         />
@@ -179,7 +180,7 @@ export const WithBadge: Story = {
           heading="Badge at middle"
           helperText="Badge positioned between heading and helper text"
           leadingIcon={ElectricityMediumIcon}
-          badge={{ text: 'New' }}
+          badge={<Badge text="New" />}
           badgePosition="middle"
           onPress={() => console.log('pressed')}
         />
@@ -189,7 +190,7 @@ export const WithBadge: Story = {
           heading="Badge at right"
           helperText="Badge positioned on the right side"
           leadingIcon={ElectricityMediumIcon}
-          badge={{ text: 'New' }}
+          badge={<Badge text="New" />}
           badgePosition="right"
           onPress={() => console.log('pressed')}
         />

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

@@ -2,7 +2,6 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable, View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../../Badge';
 import { IconContainer } from '../../IconContainer';
 import { Skeleton } from '../../Skeleton';
 import { useCardContext } from '../Card.context';
@@ -124,14 +123,14 @@ const CardActionRoot = ({
                 </CardActionLeadingContent>
               ) : null}
               <CardActionContent>
-                {badgePosition === 'top' && badge ? <Badge {...badge} /> : null}
+                {badgePosition === 'top' && badge ? badge : null}
                 <CardActionText>{heading}</CardActionText>
-                {badgePosition === 'middle' && badge ? <Badge {...badge} /> : null}
+                {badgePosition === 'middle' && badge ? badge : null}
                 {helperText ? <CardActionHelperText>{helperText}</CardActionHelperText> : null}
-                {badgePosition === 'bottom' && badge ? <Badge {...badge} /> : null}
+                {badgePosition === 'bottom' && badge ? badge : null}
               </CardActionContent>
               {badgePosition === 'right' && badge ? (
-                <Badge {...badge} style={[badge.style, styles.alignCenter]} />
+                <View style={styles.alignCenter}>{badge}</View>
               ) : null}
               {trailingContent ? (
                 <CardActionTrailingContent>{trailingContent}</CardActionTrailingContent>

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.docs.mdx

@@ -91,7 +91,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the checkbox.                                                                   |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the checkbox.                                                                                            |
-| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                                         |
+| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                                         |
 
 ## Components
 
@@ -210,6 +210,15 @@ const MyComponent = () => {
 
 ### `CheckboxImage`
 
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
 
 ## Variants
@@ -336,7 +345,7 @@ The `CheckboxImage` component is used to display an image next to the checkbox l
 <Canvas of={Stories.WithImage} />
 
 ```tsx
-import { Checkbox } from '@utilitywarehouse/native-ui';
+import { Checkbox, CheckboxImage } from '@utilitywarehouse/hearth-react-native';
 import visaLogo from '../../../assets/visa.png';
 import mastercardLogo from '../../../assets/mastercard.png';
 
@@ -347,13 +356,23 @@ const MyComponent = () => {
         value="visa"
         aria-label="Visa"
         label="Visa"
-        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+        image={
+          <CheckboxImage
+            source={visaLogo}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
       <Checkbox
         value="mastercard"
         aria-label="Mastercard"
         label="Mastercard"
-        image={{ source: mastercardLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+        image={
+          <CheckboxImage
+            source={mastercardLogo}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
     </CheckboxGroup>
   );