@utilitywarehouse/hearth-react-native 0.8.1 → 0.9.0

package/src/components/Banner/Banner.props.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { ImageSourcePropType } from 'react-native';
+import { ImageProps } from 'react-native';
 import type CardProps from '../Card/Card.props';
+import { ThemedImageProps } from '../ThemedImage';
 
 export type BannerDirection = 'horizontal' | 'vertical';
 
@@ -50,18 +51,12 @@ export interface BannerProps
    * Illustration to display in the banner
    * Mutually exclusive with icon and image
    */
-  illustration?: {
-    light: ImageSourcePropType | ReactElement | ComponentType;
-    dark: ImageSourcePropType | ReactElement | ComponentType;
-  };
+  illustration?: ThemedImageProps | ImageProps;
   /**
    * Image to display in the banner
    * Mutually exclusive with icon and illustration
    */
-  image?: {
-    light: ImageSourcePropType | ReactElement | ComponentType;
-    dark: ImageSourcePropType | ReactElement | ComponentType;
-  };
+  image?: ThemedImageProps | ImageProps;
   /**
    * Heading text
    */

package/src/components/Banner/Banner.stories.tsx

@@ -54,6 +54,20 @@ const meta = {
       description: 'Icon container size',
       options: ['sm', 'md', 'lg'],
     },
+    shadowColor: {
+      control: 'select',
+      description: 'The shadow color of the banner',
+      options: [
+        'functional',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
+    },
   },
   args: {
     heading: 'Welcome to Banner',
@@ -310,16 +324,15 @@ export const VerticalLayout: Story = {
             direction="vertical"
           />
           <Banner
+            variant="emphasis"
             image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-              dark: {
+              source: {
                 uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
               },
             }}
             heading="Featured Content"
             description="Discover amazing content curated just for you."
+            shadowColor="brand"
             direction="vertical"
             button={
               <Button size="sm" onPress={() => console.log('Learn More pressed')}>

package/src/components/Banner/Banner.tsx

@@ -1,14 +1,18 @@
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, View } from 'react-native';
+import { Image, ImageProps, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
 import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
-import { ThemedImage } from '../ThemedImage';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import type BannerProps from './Banner.props';
 
+const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
+  return 'light' in props && 'dark' in props;
+};
+
 const Banner = ({
   icon,
   iconContainerVariant = 'subtle',
@@ -44,26 +48,34 @@ const Banner = ({
       );
     }
     if (illustration) {
+      if (isThemedImageProps(illustration)) {
+        return (
+          <ThemedImage
+            {...illustration}
+            resizeMode="cover"
+            style={[styles.media, styles.imageWrapper, illustration.style]}
+          />
+        );
+      }
       return (
-        <ThemedImage
-          light={illustration.light}
-          dark={illustration.dark}
-          style={styles.image}
-          accessible
-          accessibilityLabel={heading}
+        <Image
+          {...illustration}
+          resizeMode="cover"
+          style={[styles.media, styles.imageWrapper, illustration.style]}
         />
       );
     }
     if (image) {
+      if (isThemedImageProps(image)) {
+        return (
+          <View style={[styles.media, styles.imageWrapper]}>
+            <ThemedImage {...image} style={[styles.image, image.style]} />
+          </View>
+        );
+      }
       return (
         <View style={[styles.media, styles.imageWrapper]}>
-          <ThemedImage
-            light={image.light}
-            dark={image.dark}
-            style={styles.image}
-            accessible
-            accessibilityLabel={heading}
-          />
+          <Image {...image} style={[styles.image, image.style]} />
         </View>
       );
     }
@@ -82,23 +94,36 @@ const Banner = ({
 
   const content = (
     <View style={styles.container}>
+      {onClose && direction === 'vertical' && (
+        <UnstyledIconButton
+          icon={CloseSmallIcon}
+          size="sm"
+          onPress={onClose}
+          style={styles.closeButton}
+          accessibilityLabel="Close banner"
+        />
+      )}
       {renderIconOrImage()}
+
       <View style={styles.contentContainer}>
-        <View style={styles.textContainer}>
-          <Heading
-            size="sm"
-            style={styles.heading}
-            textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
-          >
-            {heading}
-          </Heading>
-          <BodyText
-            size="md"
-            style={styles.description}
-            textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
-          >
-            {description}
-          </BodyText>
+        <View style={styles.contentTextContainer}>
+          <View style={styles.textContainer}>
+            <Heading
+              size="sm"
+              style={styles.heading}
+              textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
+            >
+              {heading}
+            </Heading>
+            <BodyText
+              size="md"
+              style={styles.description}
+              textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
+            >
+              {description}
+            </BodyText>
+          </View>
+
           {renderAction()}
         </View>
         {onPress && (
@@ -109,7 +134,7 @@ const Banner = ({
             style={styles.chevron}
           />
         )}
-        {onClose && (
+        {onClose && direction === 'horizontal' && (
           <UnstyledIconButton
             icon={CloseSmallIcon}
             size="sm"
@@ -142,9 +167,9 @@ const Banner = ({
 Banner.displayName = 'Banner';
 
 const styles = StyleSheet.create(theme => ({
-  card: {},
+  card: { flexDirection: 'row', _web: { flexDirection: 'column' } },
   pressable: {
-    width: '100%',
+    flex: 1,
   },
   container: {
     flexDirection: 'row',
@@ -194,6 +219,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   imageWrapper: {
+    flexDirection: 'row',
     variants: {
       direction: {
         horizontal: {},
@@ -205,8 +231,8 @@ const styles = StyleSheet.create(theme => ({
   },
   image: {
     borderRadius: theme.borderRadius.md,
-    borderWidth: theme.borderWidth[1],
     borderColor: theme.color.border.strong,
+    borderWidth: theme.borderWidth[1],
     variants: {
       direction: {
         horizontal: { width: 160, height: 95 },
@@ -218,15 +244,34 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   contentContainer: {
-    flex: 1,
-    flexDirection: 'row',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
     gap: theme.space.lg,
+    variants: {
+      direction: {
+        horizontal: {
+          flex: 1,
+          flexDirection: 'row',
+        },
+        vertical: {
+          flexDirection: 'column',
+        },
+      },
+    },
   },
   textContainer: {
-    flex: 1,
+    gap: theme.space.sm,
+  },
+  contentTextContainer: {
     gap: theme.space.lg,
+    variants: {
+      direction: {
+        horizontal: {
+          flex: 1,
+        },
+        vertical: {},
+      },
+    },
   },
   heading: {
     compoundVariants: [
@@ -258,6 +303,16 @@ const styles = StyleSheet.create(theme => ({
   },
   closeButton: {
     alignSelf: 'flex-start',
+    variants: {
+      direction: {
+        vertical: {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+        },
+        horizontal: {},
+      },
+    },
   },
 }));
 

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -1,10 +1,18 @@
 import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
 import { BottomSheetDefaultHandleProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetHandle/types';
+import { Platform, View } from 'react-native';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 
 const StyledBottomSheetHandle = withUnistyles(Handle);
 
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
+  if (Platform.OS === 'web') {
+    return (
+      <View style={[styles.handle, style]}>
+        <View style={[styles.indicator, indicatorStyle]} />
+      </View>
+    );
+  }
   return (
     <StyledBottomSheetHandle
       style={[styles.handle, style]}
@@ -22,6 +30,10 @@ const styles = StyleSheet.create(theme => ({
     paddingTop: theme.components.bottomSheet.padding,
     paddingHorizontal: theme.components.bottomSheet.padding,
     paddingBottom: theme.components.bottomSheet.gap,
+    _web: {
+      alignItems: 'center',
+      cursor: 'grab',
+    },
   },
   indicator: {
     width: theme.components.bottomSheet.handle.width,

package/src/components/Card/Card.docs.mdx

@@ -22,6 +22,7 @@ A Card component serves as a visual container that groups related content and ac
 - [Variants](#variants)
 - [Examples](#examples)
   - [Interactive](#interactive)
+  - [With Shadow](#with-shadow)
   - [With `CardAction`](#with-cardaction)
     - [`CardAction` Playground](#cardaction-playground)
     - [`CardAction` With Badge](#cardaction-with-badge)
@@ -64,7 +65,8 @@ const MyComponent = () => (
 | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
 | variant        | `'subtle' \| 'emphasis' `                                                                                                                    | The variant of the card.                   | `'subtle'`        |
 | colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'purple' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'pig'` | The color scheme of the card.              | `'neutralStrong'` |
-| noPadding      | `boolean`                                                                                                                                    | Wether or not the card has padding.        | `false`           |
+| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                 | The shadow color of the card.              | `-`               |
+| noPadding      | `boolean`                                                                                                                                    | Whether or not the card has padding.       | `false`           |
 | selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
 | onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | `-`               |
 | disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
@@ -146,6 +148,23 @@ const MyComponent = () => (
 );
 ```
 
+### With Shadow
+
+You can add shadow to the `Card` component by using the `shadowColor` prop. This prop accepts various semantic color options to match your design needs.
+
+<Canvas of={Stories.WithShadow} />
+
+```jsx
+import { Card, BodyText, Heading } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Card shadowColor="functional" variant="emphasis">
+    <Heading size="lg">Card with Shadow</Heading>
+    <BodyText>This card has a shadow applied using the shadowColor prop.</BodyText>
+  </Card>
+);
+```
+
 ### With `CardAction`
 
 You can use the `CardAction` component within a `Card` to create actionable items with consistent styling.

package/src/components/Card/Card.props.ts

@@ -13,6 +13,15 @@ interface CardProps extends PressableProps {
     | 'insurance'
     | 'cashback'
     | 'pig';
+  shadowColor?:
+    | 'functional'
+    | 'brand'
+    | 'energy'
+    | 'broadband'
+    | 'mobile'
+    | 'insurance'
+    | 'cashback'
+    | 'pig';
   noPadding?: boolean;
   disabled?: boolean;
   space?: SpacingValues;

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

@@ -38,6 +38,20 @@ const meta = {
       ],
       description: 'Use this value to set the Card color scheme.',
     },
+    shadowColor: {
+      control: 'select',
+      options: [
+        'functional',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
+      description: 'Use this value to set the Card shadow color.',
+    },
   },
   args: {
     children: 'This is a card',
@@ -208,6 +222,31 @@ export const Variants: Story = {
   },
 };
 
+export const WithShadow: Story = {
+  args: {
+    shadowColor: 'functional',
+  },
+  parameters: {
+    controls: { exclude: ['variant'] },
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <Flex space="lg">
+        <VariantTitle title="Subtle - White - Shadow">
+          <Card {...props} variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Emphasis - White - Shadow">
+          <Card {...props} variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};
+
 export const Interactive: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },

package/src/components/Card/CardRoot.tsx

@@ -104,12 +104,14 @@ const Card = ({
   children,
   variant = 'subtle',
   colorScheme = 'neutralStrong',
+  shadowColor,
   noPadding = false,
   style,
   states,
   space,
   disabled = false,
   onPress,
+
   ...rest
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
@@ -165,6 +167,7 @@ const Card = ({
     showPressed,
     disabled,
     space: hasActions || hasContent ? 'none' : space,
+    shadowColor,
   });
 
   const renderChildren = () => {
@@ -257,6 +260,32 @@ const styles = StyleSheet.create(theme => ({
           borderWidth: theme.components.card.brand.borderWidth,
         },
       },
+      shadowColor: {
+        functional: {
+          boxShadow: theme.helpers.shadow.functional,
+        },
+        brand: {
+          boxShadow: theme.helpers.shadow.brand,
+        },
+        energy: {
+          boxShadow: theme.helpers.shadow.energy,
+        },
+        broadband: {
+          boxShadow: theme.helpers.shadow.broadband,
+        },
+        mobile: {
+          boxShadow: theme.helpers.shadow.mobile,
+        },
+        insurance: {
+          boxShadow: theme.helpers.shadow.insurance,
+        },
+        cashback: {
+          boxShadow: theme.helpers.shadow.cashback,
+        },
+        pig: {
+          boxShadow: theme.helpers.shadow.pig,
+        },
+      },
       noPadding: {
         true: {
           padding: theme.components.card.mobile.paddingNone,

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,5 +1,5 @@
-import { Checkbox, CheckboxGroup } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox, CheckboxGroup } from '.';
 
 const meta = {
   title: 'Stories / CheckboxGroup',
@@ -80,3 +80,21 @@ export const Playground: Story = {
     </CheckboxGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    type: 'tile',
+  },
+  render: args => (
+    <CheckboxGroup {...args}>
+      <Checkbox aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Checkbox-1" />
+      <Checkbox
+        aria-label="Label 2"
+        label="Option 2 with a very long content that should wrap into multiple lines to test the layout of the checkbox component in such scenarios."
+        value="Option 2"
+        nativeID="Checkbox-2"
+      />
+      <Checkbox aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Checkbox-3" />
+    </CheckboxGroup>
+  ),
+};

package/src/components/DatePickerInput/DatePickerInput.docs.mdx

@@ -232,6 +232,6 @@ Selection through the calendar always returns a JavaScript `Date` that is reform
 ### Best practices
 
 - Always pair with `FormField` for proper label, helper text, and error message announcements.
-- Use `openButtonLabel` to customize the calendar button announcement if the default doesn't fit your use case.
+- Use `openButtonLabel` to customise the calendar button announcement if the default doesn't fit your use case.
 - Provide clear validation feedback through `FormField` when manual date entry doesn't match the expected format.
 - Test with VoiceOver and TalkBack to ensure the date entry flow works smoothly in your specific context.

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -79,7 +79,7 @@ const MyComponent = () => (
 | button               | `ReactElement`                                                                                     | Optional Button component displayed below description         | `-`          |
 | variant              | `'emphasis' \| 'subtle'`                                                                           | Visual style variant with strong or subtle borders            | `'emphasis'` |
 
-The component also accepts all standard Card props except `noPadding`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
+The component also accepts all standard Card props except `noPadding`, `colorScheme`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
 ## Variants
 

package/src/components/HighlightBanner/HighlightBanner.props.ts

@@ -15,6 +15,7 @@ interface HighlightBannerProps
     | 'flexWrap'
     | 'alignItems'
     | 'justifyContent'
+    | 'colorScheme'
   > {
   heading?: string;
   headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 import { Button } from '../Button';
 import { Flex } from '../Flex';
@@ -30,6 +30,20 @@ const meta = {
       description: 'The variant style of the HighlightBanner',
       options: ['emphasis', 'subtle'],
     },
+    shadowColor: {
+      control: 'select',
+      description: 'The shadow color of the card',
+      options: [
+        'functional',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
+    },
   },
   args: {
     heading: 'Featured Content',

package/src/components/List/List.tsx

@@ -69,9 +69,11 @@ const List = ({ children, heading, helperText, headerTrailingContent, ...props }
         {container === 'none' ? (
           <View>{updatedChildren}</View>
         ) : (
-          <Card {...containerToCard} noPadding style={styles.card}>
-            <>{updatedChildren}</>
-          </Card>
+          React.Children.count(updatedChildren) > 0 && (
+            <Card {...containerToCard} noPadding style={styles.card}>
+              <>{updatedChildren}</>
+            </Card>
+          )
         )}
       </View>
     </ListContext.Provider>

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

@@ -25,8 +25,8 @@ ListActionTrailingIcon.displayName = 'ListActionTrailingIcon';
 const styles = StyleSheet.create(theme => ({
   icon: {
     color: theme.color.icon.primary,
-    width: 24,
-    height: 24,
+    minWidth: 20,
+    minHeight: 20,
   },
 }));
 

package/src/components/Menu/Menu.context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export interface IMenuContext {
+  close: () => void;
+}
+
+export const MenuContext = createContext<IMenuContext | undefined>(undefined);
+
+export const useMenuContext = () => {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error('useMenuContext must be used within a Menu component');
+  }
+  return context;
+};