@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

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

@@ -20,10 +20,10 @@ import {
   ListAction,
   ListItem,
   ListItemContent,
+  ListItemHeading,
   ListItemHelperText,
   ListItemIcon,
   ListItemLeadingContent,
-  ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
   SectionHeader,
@@ -105,19 +105,21 @@ const MyComponent = () => (
 
 ### `ListItem`
 
-| Name            | Type                     | Default  | Description                                                     |
-| --------------- | ------------------------ | -------- | --------------------------------------------------------------- |
-| heading         | `string`                 |          | The text to display in the list item.                           |
-| onPress         | `() => void`             |          | A callback function to be called when the list item is pressed. |
-| helperText      | `string`                 |          | The supporting text to display in the list item.                |
-| leadingContent  | `ReactNode`              |          | The leading content to display in the list item.                |
-| trailingContent | `ReactNode`              |          | The trailing content to display in the list item.               |
-| 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           | `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.       |
+| Name               | Type                     | Default  | Description                                                     |
+| ------------------ | ------------------------ | -------- | --------------------------------------------------------------- |
+| heading            | `string`                 |          | The text to display in the list item.                           |
+| onPress            | `() => void`             |          | A callback function to be called when the list item is pressed. |
+| helperText         | `string`                 |          | The supporting text to display in the list item.                |
+| leadingContent     | `ReactNode`              |          | The leading content to display in the list item.                |
+| trailingContent    | `ReactNode`              |          | The trailing content to display in the list item.               |
+| 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              | `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.       |
+| truncateHeading    | `boolean`                | `false`  | Whether to truncate the heading text if it overflows.           |
+| truncateHelperText | `boolean`                | `false`  | Whether to truncate the helper text if it overflows.            |
 
 ### `ListAction`
 
@@ -137,10 +139,14 @@ const MyComponent = () => (
 
 #### - `ListItemContent`
 
-#### - `ListItemText`
+#### - `ListItemHeading`
+
+Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
 
 #### - `ListItemHelperText`
 
+Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+
 #### - `ListItemTrailingContent`
 
 #### - `ListItemTrailingIcon`
@@ -478,7 +484,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={BillMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Bills</ListItemText>
+        <ListItemHeading>Bills</ListItemHeading>
         <ListItemHelperText>View your bills</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -490,7 +496,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={PaymentMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Payments</ListItemText>
+        <ListItemHeading>Payments</ListItemHeading>
         <ListItemHelperText>Make a payment</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -502,7 +508,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Moving home</ListItemText>
+        <ListItemHeading>Moving home</ListItemHeading>
         <ListItemHelperText>Tell us if your moving</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -514,7 +520,7 @@ If you need to use the `<List>` component in a more advanced way, you can use th
         <ListItemIcon as={UserMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Refer a friend</ListItemText>
+        <ListItemHeading>Refer a friend</ListItemHeading>
         <ListItemHelperText>Get rewarded with a friend</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -532,7 +538,7 @@ import {
   ListItemIcon,
   ListItemLeadingContent,
   ListItemHelperText,
-  ListItemText,
+  ListItemHeading,
   ListItemTrailingContent,
   ListItemTrailingIcon,
   ListItemContent,
@@ -553,7 +559,7 @@ const MyComponent = () => (
         <ListItemIcon as={BillMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Bills</ListItemText>
+        <ListItemHeading>Bills</ListItemHeading>
         <ListItemHelperText>View your bills</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -565,7 +571,7 @@ const MyComponent = () => (
         <ListItemIcon as={PaymentMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Payments</ListItemText>
+        <ListItemHeading>Payments</ListItemHeading>
         <ListItemHelperText>Make a payment</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -577,7 +583,7 @@ const MyComponent = () => (
         <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Moving home</ListItemText>
+        <ListItemHeading>Moving home</ListItemHeading>
         <ListItemHelperText>Tell us if your moving</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>
@@ -589,7 +595,7 @@ const MyComponent = () => (
         <ListItemIcon as={UserMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
-        <ListItemText>Refer a friend</ListItemText>
+        <ListItemHeading>Refer a friend</ListItemHeading>
         <ListItemHelperText>Get rewarded with a friend</ListItemHelperText>
       </ListItemContent>
       <ListItemTrailingContent>

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

@@ -212,6 +212,30 @@ export const WithSectionHeader: Story = {
   ),
 };
 
+const CustomListItem = () => (
+  <ListItem
+    heading="Custom List Item"
+    helperText="This is a custom list item component"
+    leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+    trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+    onPress={() => console.log('Custom List Item pressed')}
+  />
+);
+
+export const WithCustomListItemComponent: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWarmWhite">
+      <CustomListItem />
+      <CustomListItem />
+      <CustomListItem />
+      <ListAction heading="Contact support" onPress={() => console.log('Contact pressed')} />
+    </List>
+  ),
+};
+
 export const WithListAction: Story = {
   parameters: {
     controls: { include: [] },
@@ -219,7 +243,8 @@ export const WithListAction: Story = {
   render: () => (
     <List container="subtleWarmWhite">
       <ListItem
-        heading="Upgrade your plan"
+        heading="Upgrade your plan this is really long text to test wrapping"
+        truncateHeading={true}
         helperText="Get more features with a premium plan"
         onPress={() => console.log('Upgrade pressed')}
       />

package/src/components/List/List.tsx

@@ -3,9 +3,10 @@ import { View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
-import { ListContext } from './List.context';
+import { ListContext, ListFirstItemContext } from './List.context';
 import type ListProps from './List.props';
-import { ListItem, ListItemProps } from './ListItem';
+import { ListAction } from './ListAction';
+import { ListItem } from './ListItem';
 
 const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
   let found = false;
@@ -14,24 +15,30 @@ const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
     return React.Children.map(children, (child: ReactNode): ReactNode => {
       if (!React.isValidElement(child)) return child;
 
-      // Check if the current element is the ListItem and hasn't been marked yet
-      if (!found && child.type === ListItem) {
-        found = true;
-        // Cast the additional prop to match ListItemProps
-        return React.cloneElement(child, { isFirst: true } as Partial<ListItemProps>);
-      }
+      // Check if the current element is the ListItem or ListAction and hasn't been marked yet
+      if (!found) {
+        if (child.type === ListItem || child.type === ListAction) {
+          found = true;
+          return (
+            <ListFirstItemContext.Provider value={true}>{child}</ListFirstItemContext.Provider>
+          );
+        }
 
-      // If the child has nested children, process them recursively
-      if (
-        React.isValidElement(child) &&
-        child.props &&
-        typeof child.props === 'object' &&
-        child.props !== null &&
-        'children' in child.props &&
-        child.props.children
-      ) {
-        const clonedChildren = recursiveClone((child.props as any).children);
-        return React.cloneElement(child, { children: clonedChildren } as any);
+        // If the child has nested children, process them recursively
+        if (
+          React.isValidElement(child) &&
+          child.props &&
+          typeof child.props === 'object' &&
+          child.props !== null &&
+          'children' in child.props &&
+          child.props.children
+        ) {
+          const clonedChildren = recursiveClone((child.props as any).children);
+          return React.cloneElement(child, { children: clonedChildren } as any);
+        }
+
+        found = true;
+        return <ListFirstItemContext.Provider value={true}>{child}</ListFirstItemContext.Provider>;
       }
 
       return child;

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

@@ -4,7 +4,6 @@ interface ListActionProps extends Omit<PressableProps, 'children'> {
   heading: string;
   disabled?: boolean;
   variant?: 'subtle' | 'emphasis';
-  isFirst?: boolean;
 }
 
 export default ListActionProps;

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

@@ -2,7 +2,7 @@ import { createPressable } from '@gluestack-ui/pressable';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useListContext } from '../List.context';
+import { useListContext, useListFirstItemContext } from '../List.context';
 import type ListActionProps from './ListAction.props';
 import ListActionContent from './ListActionContent';
 import ListActionText from './ListActionText';
@@ -17,6 +17,7 @@ const ListActionRoot = ({
 }: ListActionProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
+  const isFirstContext = useListFirstItemContext();
 
   const { active } = props.states || { active: false };
 
@@ -40,7 +41,7 @@ const ListActionRoot = ({
     disabled: isDisabled,
     active,
     showDisabled: !listContext?.disabled && disabled,
-    isFirstChild: props.isFirst,
+    isFirstChild: isFirstContext,
     container: listContext?.container,
   });