@utilitywarehouse/hearth-react-native 0.8.0 → 0.8.2

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,6 +324,7 @@ export const VerticalLayout: Story = {
             direction="vertical"
           />
           <Banner
+            variant="emphasis"
             image={{
               light: {
                 uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
@@ -320,6 +335,7 @@ export const VerticalLayout: Story = {
             }}
             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

@@ -46,24 +46,16 @@ const Banner = ({
     if (illustration) {
       return (
         <ThemedImage
-          light={illustration.light}
-          dark={illustration.dark}
-          style={styles.image}
-          accessible
-          accessibilityLabel={heading}
+          {...illustration}
+          resizeMode="cover"
+          style={[styles.media, styles.imageWrapper, illustration.style]}
         />
       );
     }
     if (image) {
       return (
         <View style={[styles.media, styles.imageWrapper]}>
-          <ThemedImage
-            light={image.light}
-            dark={image.dark}
-            style={styles.image}
-            accessible
-            accessibilityLabel={heading}
-          />
+          <ThemedImage {...image} style={[styles.image, image.style]} />
         </View>
       );
     }
@@ -84,21 +76,24 @@ const Banner = ({
     <View style={styles.container}>
       {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 && (
@@ -194,6 +189,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   imageWrapper: {
+    flexDirection: 'row',
     variants: {
       direction: {
         horizontal: {},
@@ -205,8 +201,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 +214,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: [

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

@@ -11,7 +11,7 @@ import * as Stories from './HighlightBanner.stories';
 
 # Highlight Banner
 
-A `HighlightBanner` component is a specialised card layout designed for highlighting featured content with an image. It combines a colored heading banner, an image, and descriptive text with optional action buttons or links. Perfect for promotional content, featured articles, or important announcements.
+A `HighlightBanner` component is a specialised card layout designed for highlighting featured content with an image. It combines a colored heading banner, an optional image, and descriptive text with optional action buttons or links. Perfect for promotional content, featured articles, or important announcements.
 
 - [Playground](#playground)
 - [Usage](#usage)
@@ -20,6 +20,7 @@ A `HighlightBanner` component is a specialised card layout designed for highligh
 - [Examples](#examples)
   - [With Button](#with-button)
   - [With Link](#with-link)
+  - [Without Image](#without-image)
   - [Color Variants](#color-variants)
   - [Subtle Variant](#subtle-variant)
   - [Different Images](#different-images)
@@ -78,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
 
@@ -137,6 +138,24 @@ const MyComponent = () => (
 );
 ```
 
+### Without Image
+
+Display the HighlightBanner without an image by omitting the `image` prop:
+
+<Canvas of={Stories.WithoutImage} />
+
+```jsx
+import { HighlightBanner, Button } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <HighlightBanner
+    heading="Content Without Image"
+    description="This HighlightBanner does not have an image, focusing solely on the text content."
+    button={<Button onPress={() => console.log('pressed')}>Discover More</Button>}
+  />
+);
+```
+
 ### Color Variants
 
 The component supports seven semantic color schemes that automatically apply the appropriate subtle background colors:

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',
@@ -174,6 +188,22 @@ export const ColorVariants: Story = {
   },
 };
 
+export const WithoutImage: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          image={undefined}
+          heading="Content Without Image"
+          description="This HighlightBanner does not have an image, focusing solely on the text content."
+          button={<Button onPress={() => console.log('pressed')}>Discover More</Button>}
+        />
+      </View>
+    );
+  },
+};
+
 export const SubtleCard: Story = {
   args: {
     variant: 'subtle',

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -16,7 +16,7 @@ const HighlightBanner = ({
   style,
   ...props
 }: HighlightBannerProps) => {
-  styles.useVariants({ headingColor, variant });
+  styles.useVariants({ headingColor, variant, hasImage: Boolean(image) });
 
   return (
     <Card variant={variant} noPadding style={style} {...props}>
@@ -26,9 +26,11 @@ const HighlightBanner = ({
             {heading}
           </BodyText>
         </View>
-        <View style={styles.imageContainer(imageContainerHeight)}>
-          <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
-        </View>
+        {!!image && (
+          <View style={styles.imageContainer(imageContainerHeight)}>
+            <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
+          </View>
+        )}
         <View style={styles.footer}>
           <BodyText size="md" textAlign="center">
             {description}
@@ -86,6 +88,11 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.subtle,
         },
       },
+      hasImage: {
+        false: {
+          borderBottomWidth: 0,
+        },
+      },
     },
   },
   imageContainer: (height: number = 200) => ({
@@ -109,6 +116,11 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.subtle,
         },
       },
+      hasImage: {
+        true: {
+          flex: 1,
+        },
+      },
     },
   },
   linkContainer: {

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/Radio/RadioGroup.stories.tsx

@@ -105,3 +105,21 @@ export const WithGrid: Story = {
     </RadioGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    type: 'tile',
+  },
+  render: args => (
+    <RadioGroup {...args}>
+      <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
+      <Radio
+        aria-label="Label 2"
+        label="Option 2 with a very long content that spans multiple lines to test text wrapping"
+        value="Option 2"
+        nativeID="Radio-2"
+      />
+      <Radio aria-label="Label 3" label="Option 3" value="Option 3" nativeID="Radio-3" />
+    </RadioGroup>
+  ),
+};

package/src/components/RadioCard/RadioCardGroup.context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+export const RadioCardGroupContext = createContext<{
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+}>({});
+
+export const useRadioCardGroupContext = () => useContext(RadioCardGroupContext);

package/src/components/RadioCard/RadioCardGroup.stories.tsx

@@ -68,3 +68,27 @@ export const Playground: Story = {
     </RadioCardGroup>
   ),
 };
+
+export const LongContent: Story = {
+  args: {
+    flexDirection: 'column',
+  },
+  render: args => (
+    <RadioCardGroup {...args}>
+      <RadioCard aria-label="Label 1" label="Option 1" value="Option 1" nativeID="RadioCard-1">
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+      <RadioCard
+        aria-label="Label 2"
+        label="Option 2 with a very long content that should wrap into multiple lines to test the layout of the RadioCard component in such scenarios."
+        value="Option 2"
+        nativeID="RadioCard-2"
+      >
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+      <RadioCard aria-label="Label 3" label="Option 3" value="Option 3" nativeID="RadioCard-3">
+        <BodyText>Additional content</BodyText>
+      </RadioCard>
+    </RadioCardGroup>
+  ),
+};

package/src/components/RadioCard/RadioCardGroup.tsx

@@ -1,7 +1,9 @@
-import RadioCardGroupProps from './RadioCardGroup.props';
+import { useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Grid } from '../Grid';
+import { RadioCardGroupContext } from './RadioCardGroup.context';
+import RadioCardGroupProps from './RadioCardGroup.props';
 
 const RadioCardGroup = ({
   children,
@@ -14,26 +16,33 @@ const RadioCardGroup = ({
   columns,
   ...props
 }: RadioCardGroupProps) => {
+  const context = useMemo(() => {
+    return { flexDirection, flexWrap, justifyContent, alignItems };
+  }, [flexDirection, flexWrap, justifyContent, alignItems]);
   return columns ? (
-    <Grid {...props} gap={gap} columns={columns} style={style}>
-      {children as any}
-    </Grid>
+    <RadioCardGroupContext.Provider value={context}>
+      <Grid {...props} gap={gap} columns={columns} style={style}>
+        {children as any}
+      </Grid>
+    </RadioCardGroupContext.Provider>
   ) : (
-    <View
-      {...props}
-      style={[
-        styles.containerGap(gap),
-        {
-          flexDirection,
-          flexWrap,
-          justifyContent,
-          alignItems,
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
+    <RadioCardGroupContext.Provider value={context}>
+      <View
+        {...props}
+        style={[
+          styles.containerGap(gap),
+          {
+            flexDirection,
+            flexWrap,
+            justifyContent,
+            alignItems,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </RadioCardGroupContext.Provider>
   );
 };