@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/src/components/List/List.docs.mdx

@@ -4,18 +4,20 @@ import {
   ChevronRightSmallIcon,
   ElectricityMediumIcon,
   GasMediumIcon,
-  InfoMediumIcon as HomeMediumIcon,
-  // HomeMediumIcon,
+  HomeMediumIcon,
   PaymentMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import {
   Badge,
   BadgeText,
+  BodyText,
   Box,
   FlatList,
   Image,
+  Link,
   List,
+  ListAction,
   ListItem,
   ListItemContent,
   ListItemHelperText,
@@ -26,9 +28,6 @@ import {
   ListItemTrailingIcon,
   SectionHeader,
   Switch,
-  Link,
-  ListAction,
-  BodyText,
 } from '../../';
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
@@ -116,7 +115,7 @@ const MyComponent = () => (
 | variant         | `'subtle' \| 'emphasis'` |          | The variant style of the list item.                             |
 | disabled        | `boolean`                | `false`  | Whether to disable the list item.                               |
 | loading         | `boolean`                | `false`  | Whether to show the list item in loading state.                 |
-| badge           | `BadgeProps`             |          | Props to pass to the Badge component.                           |
+| badge           | `ReactNode`              |          | The badge component to display in the list item.                |
 | badgePosition   | `'top' \| 'bottom'`      | `bottom` | Position of the badge in the list item.                         |
 | numericValue    | `string \| number`       |          | A numeric value to display on the right side of the item.       |
 
@@ -197,7 +196,14 @@ parts like `ListItemLeadingContent`, `ListItemContent`, and `ListItemTrailingCon
 <Canvas of={Stories.WithBadge} />
 
 ```tsx
-import { List, ListItem, IconContainer, Flex, Box } from '@utilitywarehouse/hearth-react-native';
+import {
+  List,
+  ListItem,
+  IconContainer,
+  Flex,
+  Box,
+  Badge,
+} from '@utilitywarehouse/hearth-react-native';
 
 import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -211,7 +217,7 @@ const BadgeList = () => {
         leadingContent={
           <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Text' }}
+        badge={<Badge text="Text" />}
       />
       <ListItem
         heading="Gas"
@@ -220,7 +226,7 @@ const BadgeList = () => {
         leadingContent={
           <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Smart Meter' }}
+        badge={<Badge text="Smart Meter" />}
       />
     </List>
   );

package/src/components/List/List.figma.tsx

@@ -1,110 +1,31 @@
-// /* eslint-disable react/jsx-no-undef */
-//
-// import { List } from './';
-// import figma from '@figma/code-connect';
-// import { Card } from '../Card';
+import React from "react"
+import List from "./List"
+import figma from "@figma/code-connect"
 
-// const props = {
-//   heading: figma.nestedProps('List Heading', {
-//     text: figma.string('heading'),
-//     helperText: figma.string('Supporting text'),
-//   }),
-//   listItem: figma.children('List Item'),
-//   listItems: figma.children('List Items'),
-//   cardProps: figma.nestedProps('Card', {
-//     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',
-//     }),
-//   }),
-// };
+/**
+ * -- 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(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     example: ({ listItems }) => <List>{listItems}</List>,
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     variant: {
-//       'Heading?': true,
-//     },
-//     example: ({ heading, listItems }) => (
-//       <List headingText={heading.text} headingHelperText={heading.helperText}>
-//         {listItems}
-//       </List>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     variant: {
-//       container: 'tile',
-//       'Heading?': true,
-//     },
-//     example: ({ heading, listItems, cardProps }) => (
-//       <List
-//         container="card"
-//         headingText={heading.text}
-//         headingHelperText={heading.helperText}
-//       >
-//         <Card {...cardProps}>{listItems}</Card>
-//       </List>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     variant: {
-//       container: 'tile',
-//       'Heading?': false,
-//     },
-//     example: ({ listItems, cardProps }) => (
-//       <List container="card">
-//         <Card {...cardProps}>{listItems}</Card>
-//       </List>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4623-14698&m=dev',
-//   {
-//     props,
-//     imports: [],
-//     example: ({ listItem }) => <>{listItem}</>,
-//   }
-// );
+figma.connect(
+  List,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2437%3A621",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      container: figma.enum("Container", {
+        None: "none",
+        "Subtle White": "subtleWhite",
+        "Emphasis White": "emphasisWhite",
+        "Subtle Warm White": "subtleWarmWhite",
+        "Emphasis Warm White": "emphasisWarmWhite",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "sectionHeader": figma.boolean('Section header?'),
+      // "listAction": figma.boolean('List action?')
+    },
+    example: (props) => <List container={props.container} />,
+  },
+)

package/src/components/List/List.stories.tsx

@@ -126,7 +126,7 @@ export const WithBadge: Story = {
         leadingContent={
           <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Text' }}
+        badge={<Badge text="Text" />}
       />
       <ListItem
         heading="Gas"
@@ -135,7 +135,7 @@ export const WithBadge: Story = {
         leadingContent={
           <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
         }
-        badge={{ text: 'Smart Meter' }}
+        badge={<Badge text="Smart Meter" />}
       />
     </List>
   ),

package/src/components/List/ListAction/ListAction.figma.tsx

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import ListAction from './ListAction';
+
+/**
+ * -- 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(
+  ListAction,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9661%3A5128',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      heading: figma.string('Action heading'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      'aria-disabled': figma.enum('State', {
+        Disabled: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "actionHeading": figma.string('Action heading')
+    },
+    example: props => <ListAction heading={props.heading} disabled={props.disabled} />,
+  }
+);

package/src/components/List/ListItem/ListItem.figma.tsx

@@ -1,220 +1,40 @@
-// /* eslint-disable react/jsx-no-undef */
-//
-// import { ListItem } from './';
-// import figma from '@figma/code-connect';
-
-// const props = {
-//   divider: figma.boolean('Divider?'),
-//   disabled: figma.enum('state', {
-//     disabled: true,
-//   }),
-//   loading: figma.enum('state', {
-//     loading: true,
-//   }),
-//   trailingIcon: figma.instance('Trailing Icon'),
-//   leadingIcon: figma.instance('Leading Icon'),
-//   text: figma.nestedProps('.Parts/List Item Text', {
-//     text: figma.string('list item text'),
-//     helperText: figma.string('Supporting Text'),
-//   }),
-// };
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Trailing Icon': 'Chevron Right-01 - 24',
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         onPress={() => console.log('list item pressed')}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, trailingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         trailingContent={trailingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//       'Trailing Icon': 'Chevron Right-01 - 24',
-//     },
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         onPress={() => console.log('list item pressed')}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, trailingIcon, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={trailingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Leading Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Leading Icon?': true,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Leading Icon?': false,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
+import figma from '@figma/code-connect';
+import ListItem from './ListItem';
+
+/**
+ * -- 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(ListItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1628', {
+  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'),
+    // "customContent": figma.instance('Custom content'),
+    // "badge": figma.boolean('Badge?'),
+    // "leadingContent": figma.boolean('Leading content?'),
+    // "trailingContent": figma.boolean('Trailing Content?'),
+    // "numericalValue": figma.boolean('Numerical value?'),
+    // "numericalValue": figma.string('Numerical value'),
+    // "variant": figma.enum('Variant', {
+    //   "Default": "default",
+    //   "Custom": "custom"
+    // }),
+    // "paddingNone": figma.boolean('Padding None?')
+  },
+  example: props => <ListItem loading={props.loading} disabled={props.disabled} />,
+});

package/src/components/List/ListItem/ListItem.props.ts

@@ -1,5 +1,5 @@
+import { ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
-import BadgeProps from '../../Badge/Badge.props';
 
 interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
   loading?: boolean;
@@ -26,7 +26,7 @@ export interface ListItemWithoutChildren extends ListItemBaseProps {
   leadingContent?: ViewProps['children'];
   trailingContent?: ViewProps['children'];
   numericValue?: string | number;
-  badge?: BadgeProps;
+  badge?: ReactNode;
   badgePosition?: 'top' | 'bottom';
 }
 

package/src/components/List/ListItem/ListItemLeadingContent.figma.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import ListItemLeadingContent from "./ListItemLeadingContent"
+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(
+  ListItemLeadingContent,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6732%3A5792",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "icon24": figma.instance('Icon-24'),
+      // "variant": figma.enum('Variant', {
+      //   "Icon": "icon",
+      //   "Icon Container": "icon-container",
+      //   "Avatar": "avatar",
+      //   "Indicator": "indicator"
+      // })
+    },
+    example: (props) => <ListItemLeadingContent />,
+  },
+)

package/src/components/List/ListItem/ListItemRoot.tsx

@@ -2,7 +2,6 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../../Badge';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
 import { useListContext } from '../List.context';
@@ -106,10 +105,10 @@ const ListItemRoot = ({
               <ListItemLeadingContent>{leadingContent}</ListItemLeadingContent>
             ) : null}
             <ListItemContent>
-              {badgePosition === 'top' && badge ? <Badge {...badge} /> : null}
+              {badgePosition === 'top' && badge ? badge : null}
               <ListItemText>{heading}</ListItemText>
               {helperText ? <ListItemHelperText>{helperText}</ListItemHelperText> : null}
-              {badgePosition === 'bottom' && badge ? <Badge {...badge} /> : null}
+              {badgePosition === 'bottom' && badge ? badge : null}
             </ListItemContent>
             {!!numericValue && <DetailText size="lg">{numericValue}</DetailText>}
             {trailingContent ? (

package/src/components/List/ListItem/ListItemTrailingContent.figma.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import ListItemTrailingContent from "./ListItemTrailingContent"
+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(
+  ListItemTrailingContent,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9852%3A9858",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "icon20": figma.instance('Icon-20'),
+      // "variant": figma.enum('Variant', {
+      //   "Link": "link",
+      //   "Button": "button"
+      // })
+    },
+    example: (props) => <ListItemTrailingContent />,
+  },
+)

package/src/components/Menu/Menu.figma.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import Menu from "./Menu"
+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(
+  Menu,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      heading: figma.string("Heading"),
+      // No matching props could be found for these Figma properties:
+      // "heading": figma.string('Heading'),
+      // "heading": figma.boolean('Heading?'),
+      // "grabber": figma.boolean('Grabber?'),
+      // "deviceType": figma.enum('Device type', {
+      //   "Web": "web",
+      //   "App": "app"
+      // })
+    },
+    example: (props) => <Menu heading={props.heading} />,
+  },
+)