@utilitywarehouse/hearth-react-native 0.4.2 → 0.5.0

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

@@ -1,9 +1,23 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { List, ListItem, ListItemIcon, ListItemTrailingIcon } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  BillMediumIcon,
+  ChevronRightSmallIcon,
+  ElectricityMediumIcon,
+  GasMediumIcon,
+  HomeMediumIcon,
+  PaymentMediumIcon,
+  SettingsMediumIcon,
+  UserMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { FC, PropsWithChildren, useState } from 'react';
+import { List, ListAction, ListItem, ListItemIcon, ListItemTrailingIcon } from '.';
 import { VariantTitle } from '../../../docs/components';
-import { SettingsMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Badge } from '../Badge';
+import { BodyText } from '../BodyText';
 import { Flex } from '../Flex';
+import { IconContainer } from '../IconContainer';
+import { Link } from '../Link';
+import { Switch } from '../Switch';
 // import { Card } from '../Card';
 
 const Card: FC<PropsWithChildren> = ({ children }) => <div>{children}</div>;
@@ -27,11 +41,6 @@ const meta = {
       description:
         'The heading supporting text to be displayed on the list. \n _Note: This is a playground prop, use helperText on the SectionHeader component._',
     },
-    divider: {
-      control: 'boolean',
-      description: 'Whether to display a divider below the list item.',
-    },
-
     disabled: {
       control: 'boolean',
       description: 'Whether the list item is disabled.',
@@ -45,7 +54,6 @@ const meta = {
     container: 'none',
     heading: 'This is the list heading',
     helperText: 'Supporting text',
-    divider: true,
     disabled: false,
     loading: false,
   },
@@ -55,24 +63,275 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-  render: ({ container, divider, ...args }) => {
-    const listItems = Array.from({ length: 4 }).map((_, index) => (
+  render: ({ container, ...args }) => {
+    return (
+      <List {...args} container={container}>
+        {Array.from({ length: 4 }).map((_, index) => (
+          <ListItem key={index} heading="List item text" helperText="Supporting text" />
+        ))}
+      </List>
+    );
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    container: 'subtleWhite',
+  },
+  render: ({ container, ...args }) => (
+    <List {...args} container={container}>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <ListItem key={index} heading="List item text" helperText="Supporting text" />
+      ))}
+      <ListAction heading="List action" onPress={() => console.log('List Action Pressed')} />
+    </List>
+  ),
+};
+
+export const WithContainer: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWhite">
+      <ListItem
+        leadingContent={<BillMediumIcon />}
+        heading="Bills"
+        onPress={() => console.log('Bills pressed')}
+      />
+      <ListItem
+        leadingContent={<PaymentMediumIcon />}
+        heading="Payments"
+        onPress={() => console.log('Payments pressed')}
+      />
       <ListItem
-        key={index}
-        text="List item text"
-        helperText="Supporting text"
-        divider={container === 'none' ? divider : divider && index !== 3}
+        leadingContent={<HomeMediumIcon />}
+        heading="Moving Home"
+        onPress={() => console.log('Moving Home pressed')}
       />
-    ));
+    </List>
+  ),
+};
+
+export const WithBadge: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List>
+      <ListItem
+        heading="Electricity"
+        helperText="Last reading 23/03/24"
+        onPress={() => console.log('Electricity pressed')}
+        leadingContent={
+          <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
+        }
+        badge={{ text: 'Text' }}
+      />
+      <ListItem
+        heading="Gas"
+        helperText="Last reading 23/03/24"
+        onPress={() => console.log('Gas pressed')}
+        leadingContent={
+          <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
+        }
+        badge={{ text: 'Smart Meter' }}
+      />
+    </List>
+  ),
+};
+
+export const WithSwitch: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const [notifications, setNotifications] = useState(true);
+    const [darkMode, setDarkMode] = useState(false);
+
     return (
-      <List {...args} container={container}>
-        {container !== 'none' && <Card>{listItems}</Card>}
-        {container === 'none' && listItems}
+      <List container="subtleWhite">
+        <ListItem
+          heading="Enable notifications"
+          helperText="Receive updates and alerts"
+          onPress={() => console.log('Notifications pressed')}
+          trailingContent={
+            <Switch size="small" value={notifications} onValueChange={setNotifications} />
+          }
+        />
+        <ListItem
+          heading="Dark mode"
+          helperText="Use dark theme throughout the app"
+          onPress={() => console.log('Dark mode pressed')}
+          trailingContent={<Switch size="small" value={darkMode} onValueChange={setDarkMode} />}
+        />
       </List>
     );
   },
 };
 
+export const WithSectionHeader: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List
+      heading="Your account"
+      helperText="Tap the links below to view your account"
+      headerTrailingContent={<Link onPress={() => console.log('View all pressed')}>View all</Link>}
+    >
+      <ListItem
+        heading="Bills"
+        helperText="View your bills"
+        leadingContent={<ListItemIcon as={BillMediumIcon} />}
+        trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+        onPress={() => console.log('Bills pressed')}
+      />
+      <ListItem
+        heading="Payments"
+        helperText="Make a payment"
+        leadingContent={<ListItemIcon as={PaymentMediumIcon} />}
+        trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+        onPress={() => console.log('Payments pressed')}
+      />
+      <ListItem
+        heading="Moving home"
+        helperText="Tell us if you're moving"
+        leadingContent={<ListItemIcon as={HomeMediumIcon} />}
+        trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+        onPress={() => console.log('Moving home pressed')}
+      />
+      <ListItem
+        heading="Refer a friend"
+        helperText="Get rewarded with a friend"
+        leadingContent={<ListItemIcon as={UserMediumIcon} />}
+        trailingContent={<ListItemTrailingIcon as={ChevronRightSmallIcon} />}
+        onPress={() => console.log('Refer a friend pressed')}
+      />
+    </List>
+  ),
+};
+
+export const WithListAction: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWarmWhite">
+      <ListItem
+        heading="Upgrade your plan"
+        helperText="Get more features with a premium plan"
+        onPress={() => console.log('Upgrade pressed')}
+      />
+      <ListItem
+        heading="Manage payment methods"
+        helperText="Update your credit or debit cards"
+        onPress={() => console.log('Manage pressed')}
+      />
+      <ListAction heading="Contact support" onPress={() => console.log('Contact pressed')} />
+    </List>
+  ),
+};
+
+export const WithTransactions: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWhite">
+      <ListItem
+        heading="Coffee Shop"
+        helperText="Apr 5, 2024"
+        trailingContent={
+          <>
+            <BodyText>-£100.00</BodyText>
+            <BodyText color="textBrand">+£1.00 CB</BodyText>
+          </>
+        }
+        onPress={() => console.log('Transaction pressed')}
+      />
+      <ListItem
+        heading="Top up"
+        helperText="Apr 4, 2024"
+        trailingContent={
+          <>
+            <BodyText color="textAffirmative">+£100.00</BodyText>
+          </>
+        }
+        onPress={() => console.log('Transaction pressed')}
+      />
+    </List>
+  ),
+};
+
+export const WithNumericValue: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWhite">
+      <ListItem
+        heading="Steps today"
+        numericValue="8,542"
+        onPress={() => console.log('Steps pressed')}
+      />
+      <ListItem
+        heading="Calories burned"
+        numericValue="2,300 kcal"
+        onPress={() => console.log('Calories pressed')}
+      />
+    </List>
+  ),
+};
+
+export const WithLink: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List container="subtleWhite">
+      <ListItem
+        heading="Terms of Service"
+        onPress={() => console.log('Terms pressed')}
+        trailingContent={<Link onPress={() => console.log('View link pressed')}>View</Link>}
+      />
+      <ListItem
+        heading="Privacy Policy"
+        onPress={() => console.log('Privacy pressed')}
+        trailingContent={<Link onPress={() => console.log('View link pressed')}>View</Link>}
+      />
+    </List>
+  ),
+};
+
+export const Loading: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <List loading container="subtleWhite">
+      <ListItem
+        heading="Loading item 1"
+        helperText="Supporting text 1"
+        leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+        onPress={() => console.log('List Item Pressed')}
+      />
+      <ListItem
+        heading="Loading item 2"
+        helperText="Supporting text 2"
+        leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+        onPress={() => console.log('List Item Pressed')}
+      />
+      <ListItem
+        heading="Loading item 3"
+        helperText="Supporting text 3"
+        leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+        onPress={() => console.log('List Item Pressed')}
+      />
+    </List>
+  ),
+};
+
 export const KitchenSink: Story = {
   parameters: {
     controls: { include: [] },
@@ -88,7 +347,7 @@ export const KitchenSink: Story = {
         <VariantTitle title="List with title and supporting text">
           <List heading="List Heading" helperText="Supporting Text">
             {list.map((item, index) => (
-              <ListItem key={index} text={item.text} helperText={item.helperText} />
+              <ListItem key={index} heading={item.text} helperText={item.helperText} />
             ))}
           </List>
         </VariantTitle>
@@ -97,7 +356,7 @@ export const KitchenSink: Story = {
             {list.map((item, index) => (
               <ListItem
                 key={index}
-                text={item.text}
+                heading={item.text}
                 helperText={item.helperText}
                 leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
               />
@@ -109,7 +368,7 @@ export const KitchenSink: Story = {
             {list.map((item, index) => (
               <ListItem
                 key={index}
-                text={item.text}
+                heading={item.text}
                 helperText={item.helperText}
                 trailingContent={<ListItemTrailingIcon as={SettingsMediumIcon} />}
               />
@@ -121,18 +380,7 @@ export const KitchenSink: Story = {
             {list.map((item, index) => (
               <ListItem
                 key={index}
-                text={item.text}
-                onPress={() => console.log('List Item Pressed')}
-              />
-            ))}
-          </List>
-        </VariantTitle>
-        <VariantTitle title="List without divider">
-          <List divider={false}>
-            {list.map((item, index) => (
-              <ListItem
-                key={index}
-                text={item.text}
+                heading={item.text}
                 onPress={() => console.log('List Item Pressed')}
               />
             ))}
@@ -143,7 +391,7 @@ export const KitchenSink: Story = {
             {list.map((item, index) => (
               <ListItem
                 key={index}
-                text={item.text}
+                heading={item.text}
                 helperText={item.helperText}
                 leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
                 onPress={() => console.log('List Item Pressed')}
@@ -156,7 +404,7 @@ export const KitchenSink: Story = {
             {list.map((item, index) => (
               <ListItem
                 key={index}
-                text={item.text}
+                heading={item.text}
                 helperText={item.helperText}
                 leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
                 onPress={() => console.log('List Item Pressed')}
@@ -165,11 +413,14 @@ export const KitchenSink: Story = {
           </List>
         </VariantTitle>
         <VariantTitle title="List with heading link">
-          <List heading="Heading" linkText="View all" linkHref="http://uw.co.uk">
+          <List
+            heading="Heading"
+            headerTrailingContent={<Link href="http://uw.co.uk">View all</Link>}
+          >
             {list.map((item, index) => (
               <ListItem
                 key={index}
-                text={item.text}
+                heading={item.text}
                 helperText={item.helperText}
                 leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
                 onPress={() => console.log('List Item Pressed')}

package/src/components/List/List.tsx

@@ -2,9 +2,9 @@ import React, { ReactNode, useMemo } from 'react';
 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 type ListProps from './List.props';
-import { SectionHeader } from '../SectionHeader';
 import { ListItem, ListItemProps } from './ListItem';
 
 const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
@@ -41,20 +41,8 @@ const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
   return recursiveClone(children) as ViewProps['children'];
 };
 
-const List = ({
-  children,
-  heading,
-  helperText,
-  linkText,
-  linkHref,
-  linkIcon,
-  linkIconPosition,
-  linkOnPress,
-  linkTarget,
-  linkShowIcon,
-  ...props
-}: ListProps) => {
-  const { loading, disabled, divider = true, container = 'none' } = props;
+const List = ({ children, heading, helperText, headerTrailingContent, ...props }: ListProps) => {
+  const { loading, disabled, container = 'none' } = props;
   const containerToCard: {
     variant: 'subtle' | 'emphasis';
     colorScheme: 'neutralStrong' | 'neutralSubtle';
@@ -66,10 +54,7 @@ const List = ({
         : 'neutralSubtle',
   };
   const updatedChildren = markFirstListItem(children);
-  const value = useMemo(
-    () => ({ loading, disabled, divider, container }),
-    [loading, disabled, divider, container]
-  );
+  const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
@@ -78,13 +63,7 @@ const List = ({
           <SectionHeader
             heading={heading}
             helperText={helperText}
-            linkText={linkText}
-            linkHref={linkHref}
-            linkOnPress={linkOnPress}
-            linkTarget={linkTarget}
-            linkIcon={linkIcon}
-            linkIconPosition={linkIconPosition}
-            linkShowIcon={linkShowIcon}
+            trailingContent={headerTrailingContent}
           />
         ) : null}
         {container === 'none' ? (

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

@@ -0,0 +1,10 @@
+import type { PressableProps } from 'react-native';
+
+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

@@ -0,0 +1,133 @@
+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 type ListActionProps from './ListAction.props';
+import ListActionContent from './ListActionContent';
+import ListActionText from './ListActionText';
+import ListActionTrailingContent from './ListActionTrailingContent';
+import ListActionTrailingIcon from './ListActionTrailingIcon';
+
+const ListActionRoot = ({
+  heading,
+  disabled,
+  variant = 'subtle',
+  ...props
+}: ListActionProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const { onPress } = props;
+  const listContext = useListContext();
+
+  const { active } = props.states || { active: false };
+
+  const getListContainer = (): ListActionProps['variant'] => {
+    if (listContext?.container?.includes('subtle')) {
+      return 'subtle';
+    }
+    if (listContext?.container?.includes('emphasis')) {
+      return 'emphasis';
+    }
+    return undefined;
+  };
+
+  const isDisabled = disabled || listContext?.disabled || false;
+  const listItemVariant = getListContainer() || variant;
+
+  const testID = props.testID || 'list-action';
+
+  styles.useVariants({
+    variant: listItemVariant,
+    disabled: isDisabled,
+    active,
+    showDisabled: !listContext?.disabled && disabled,
+    isFirstChild: props.isFirst,
+    container: listContext?.container,
+  });
+
+  return (
+    <Pressable
+      {...props}
+      testID={testID}
+      style={[styles.container, props.style as ViewStyle]}
+      disabled={isDisabled || !onPress}
+    >
+      <ListActionContent>
+        <ListActionText>{heading}</ListActionText>
+      </ListActionContent>
+      <ListActionTrailingContent style={styles.centeredTrailingIcon}>
+        <ListActionTrailingIcon as={ChevronRightSmallIcon} />
+      </ListActionTrailingContent>
+    </Pressable>
+  );
+};
+
+const ListAction = createPressable({
+  Root: ListActionRoot,
+});
+
+ListAction.displayName = 'ListAction';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    paddingVertical: theme.components.list.item.functional.padding,
+    paddingHorizontal: theme.components.list.item.functional.padding,
+    flexDirection: 'row',
+    gap: theme.components.list.item.gap,
+    borderTopWidth: theme.borderWidth['1'],
+    borderStyle: 'solid',
+    variants: {
+      isFirstChild: {
+        true: {
+          borderTopWidth: 0,
+        },
+      },
+      variant: {
+        subtle: {
+          borderTopColor: theme.color.border.subtle,
+        },
+        emphasis: {
+          borderTopColor: theme.color.border.strong,
+        },
+      },
+      active: {
+        true: {
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        },
+      },
+      disabled: {
+        true: {
+          cursor: 'auto',
+        },
+        false: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            _active: {
+              backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+            },
+          },
+        },
+      },
+      showDisabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      container: {
+        none: {
+          paddingHorizontal: 0,
+        },
+        subtleWhite: {},
+        emphasisWhite: {},
+        subtleWarmWhite: {},
+        emphasisWarmWhite: {},
+      },
+    },
+  },
+  centeredTrailingIcon: {
+    justifyContent: 'center',
+  },
+}));
+
+export default ListAction;

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

@@ -0,0 +1,21 @@
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const ListActionContent = ({ children, ...props }: ViewProps) => {
+  return (
+    <View {...props} style={[styles.container, props.style]}>
+      {children}
+    </View>
+  );
+};
+
+ListActionContent.displayName = 'ListActionContent';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.components.list.item.contentGap,
+    flex: 1,
+  },
+}));
+
+export default ListActionContent;

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

@@ -0,0 +1,14 @@
+import { TextProps } from 'react-native';
+import { BodyText } from '../../BodyText';
+
+const ListActionText = ({ children, ...props }: TextProps) => {
+  return (
+    <BodyText size="md" weight="semibold" {...props}>
+      {children}
+    </BodyText>
+  );
+};
+
+ListActionText.displayName = 'ListActionText';
+
+export default ListActionText;

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

@@ -0,0 +1,9 @@
+import { View, type ViewProps } from 'react-native';
+
+const ListActionTrailingContent = ({ children, ...props }: ViewProps) => (
+  <View {...props}>{children}</View>
+);
+
+ListActionTrailingContent.displayName = 'ListActionTrailingContent';
+
+export default ListActionTrailingContent;

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

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { Icon, IconProps } from '../../Icon';
+
+const ListActionTrailingIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) => {
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
+      }
+    >
+      {children}
+    </Icon>
+  );
+};
+
+ListActionTrailingIcon.displayName = 'ListActionTrailingIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.color.icon.primary,
+    width: 24,
+    height: 24,
+  },
+}));
+
+export default ListActionTrailingIcon;