@utilitywarehouse/hearth-react-native 0.11.0 → 0.12.0

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import React, { useEffect } from 'react';
 import { ImageSourcePropType } from 'react-native';
-import { Checkbox, CheckboxGroup } from '.';
+import { Checkbox, CheckboxGroup, CheckboxImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
@@ -106,7 +106,12 @@ export const WithImage: Story = {
         {...args}
         value="visa"
         label="Visa"
-        image={{ source: bankLogo1 as ImageSourcePropType, style: { width: 40, height: 24 } }}
+        image={
+          <CheckboxImage
+            source={bankLogo1 as ImageSourcePropType}
+            style={{ width: 40, height: 24 }}
+          />
+        }
       />
       <Checkbox
         aria-label="Mastercard"
@@ -117,11 +122,12 @@ export const WithImage: Story = {
         {...args}
         value="mastercard"
         label="Mastercard"
-        image={{
-          source: bankLogo as ImageSourcePropType,
-          style: { width: 40, height: 24 },
-          resizeMode: 'contain',
-        }}
+        image={
+          <CheckboxImage
+            source={bankLogo as ImageSourcePropType}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
     </CheckboxGroup>
   ),

package/src/components/Checkbox/Checkbox.tsx

@@ -5,7 +5,6 @@ import CheckboxProps from './Checkbox.props';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
 import StyledCheckboxGroup from './CheckboxGroupRoot';
 import StyledCheckboxIcon from './CheckboxIcon';
-import CheckboxImage from './CheckboxImage';
 import StyledCheckboxIndicator from './CheckboxIndicator';
 import StyledCheckboxLabel from './CheckboxLabel';
 import StyledCheckbox from './CheckboxRoot';
@@ -57,7 +56,7 @@ const Checkbox = ({
       <CheckboxIndicator>
         <CheckboxIcon />
       </CheckboxIndicator>
-      {image ? <CheckboxImage {...image} /> : null}
+      {image ? image : null}
       <CheckboxTextContent>
         {!!label && <CheckboxLabel>{label}</CheckboxLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}

package/src/components/Checkbox/CheckboxImage.tsx

@@ -1,8 +1,13 @@
 import { Image, ImageProps } from 'react-native';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
 
-const CheckboxImage = ({ source, style, ...props }: ImageProps) => (
-  <Image source={source} style={style} {...props} />
-);
+const CheckboxImage = ({ ...props }: ImageProps | ThemedImageProps) => {
+  if (isThemedImageProps(props)) {
+    return <ThemedImage {...props} />;
+  }
+  return <Image {...props} />;
+};
 
 CheckboxImage.displayName = 'CheckboxImage';
 

package/src/components/ExpandableCard/ExpandableCard.docs.mdx

@@ -64,7 +64,7 @@ const MyComponent = () => (
 | `helperText`       | `string`                      | -                   | Optional helper text displayed below the heading |
 | `leadingIcon`      | `ComponentType`               | -                   | Leading icon component (automatically wrapped)   |
 | `leadingContent`   | `ReactNode`                   | -                   | Leading content (icon or custom element)         |
-| `badge`            | `BadgeProps`                  | -                   | Badge to display                                 |
+| `badge`            | `ReactNode`                   | -                   | Badge to display                                 |
 | `badgePosition`    | `'top' \| 'bottom'`           | `'bottom'`          | Badge position                                   |
 | `numericValue`     | `string \| number`            | -                   | Numeric value to display on the right            |
 | `expandedContent`  | `ReactNode`                   | -                   | The content to show when expanded                |
@@ -152,7 +152,7 @@ const MyComponent = () => (
 <ExpandableCard
   heading="New Feature"
   helperText="Check out what's new"
-  badge={{ text: 'New', colorScheme: 'cyan' }}
+  badge={<Badge text="New" colorScheme="cyan" />}
   expandedContent={<BodyText>We've added new features to improve your experience.</BodyText>}
 />
 ```

package/src/components/ExpandableCard/ExpandableCard.props.ts

@@ -1,5 +1,4 @@
 import type { ComponentType, ReactNode } from 'react';
-import type BadgeProps from '../Badge/Badge.props';
 import type CardProps from '../Card/Card.props';
 
 export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
@@ -36,7 +35,7 @@ export interface ExpandableCardProps extends Omit<CardProps, 'children'> {
   /**
    * Badge to display
    */
-  badge?: BadgeProps;
+  badge?: ReactNode;
 
   /**
    * Badge position

package/src/components/ExpandableCard/ExpandableCard.stories.tsx

@@ -7,7 +7,7 @@ import {
   SettingsMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import React from 'react';
-import { BodyText, IconContainer, Link } from '../../components';
+import { Badge, BodyText, IconContainer, Link } from '../../components';
 import ExpandableCard from './ExpandableCard';
 import ExpandableCardExpandedContent from './ExpandableCardExpandedContent';
 import ExpandableCardGroup from './ExpandableCardGroup';
@@ -135,7 +135,7 @@ export const WithBadge: Story = {
     <ExpandableCard
       heading="New Feature"
       helperText="Check out what's new"
-      badge={{ text: 'New', colorScheme: 'info' }}
+      badge={<Badge text="New" colorScheme="info" />}
       expandedContent={
         <BodyText>We've added new features to improve your experience. Explore them now!</BodyText>
       }
@@ -264,7 +264,7 @@ export const GroupWithMixedContent: Story = {
       <ExpandableCard
         heading="Settings"
         leadingContent={<ExpandableCardIcon as={SettingsMediumIcon} />}
-        badge={{ text: 'Updated', colorScheme: 'info', size: 'sm' }}
+        badge={<Badge text="Updated" colorScheme="info" size="sm" />}
         expandedContent={
           <>
             <BodyText>• Notification preferences</BodyText>

package/src/components/ExpandableCard/ExpandableCardTrigger.props.ts

@@ -1,6 +1,5 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps } from 'react-native';
-import type BadgeProps from '../Badge/Badge.props';
 
 export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'children'> {
   /**
@@ -18,11 +17,11 @@ export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'childr
   /**
    * Content to display on the left side (e.g., icon, avatar)
    */
-  leadingContent?: React.ReactNode;
+  leadingContent?: ReactNode;
   /**
    * Optional badge to display
    */
-  badge?: BadgeProps;
+  badge?: ReactNode;
   /**
    * Position of the badge relative to the heading
    * @default 'bottom'
@@ -41,7 +40,7 @@ export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'childr
    */
   disabled?: boolean;
   /* Optional children */
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export default ExpandableCardTriggerProps;

package/src/components/ExpandableCard/ExpandableCardTriggerRoot.tsx

@@ -4,7 +4,6 @@ import {
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../Badge';
 import { DetailText } from '../DetailText';
 import ExpandableCardContent from './ExpandableCardContent';
 import ExpandableCardHelperText from './ExpandableCardHelperText';
@@ -54,28 +53,14 @@ const ExpandableCardTriggerRoot = ({
     return null;
   };
 
-  const renderTopBadge = () => {
-    if (badgePosition === 'top' && badge) {
-      return <Badge {...badge} />;
-    }
-    return null;
-  };
-
-  const renderBottomBadge = () => {
-    if (badgePosition === 'bottom' && badge) {
-      return <Badge {...badge} />;
-    }
-    return null;
-  };
-
   const renderDefaultContent = () => (
     <>
       {renderLeadingContent()}
       <ExpandableCardContent>
-        {renderTopBadge()}
+        {badgePosition === 'top' ? badge : null}
         <ExpandableCardText>{heading}</ExpandableCardText>
         {helperText && <ExpandableCardHelperText>{helperText}</ExpandableCardHelperText>}
-        {renderBottomBadge()}
+        {badgePosition === 'bottom' ? badge : null}
       </ExpandableCardContent>
       {numericValue && (
         <DetailText size="lg" style={styles.numericValue}>

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

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Button, Center, HighlightBanner, Link } from '../../';
+import { Button, Center, HighlightBanner, HighlightBannerImage, Link } from '../../';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './HighlightBanner.stories';
 
@@ -39,11 +39,13 @@ A `HighlightBanner` component is a specialised card layout designed for highligh
     <HighlightBanner
       heading="Featured Content"
       headingColor="energy"
-      image={{
-        source: {
-          uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
-        },
-      }}
+      image={
+        <HighlightBannerImage
+          source={{
+            uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+          }}
+        />
+      }
       description="This is a description of the featured content that appears below the image."
     />
   </Center>
@@ -56,11 +58,13 @@ const MyComponent = () => (
   <HighlightBanner
     heading="Featured Content"
     headingColor="energy"
-    image={{
-      source: {
-        uri: 'https://example.com/image.jpg',
-      },
-    }}
+    image={
+      <HighlightBannerImage
+        source={{
+          uri: 'https://example.com/image.jpg',
+        }}
+      />
+    }
     description="This is a description of the featured content."
   />
 );
@@ -72,7 +76,7 @@ const MyComponent = () => (
 | -------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------ |
 | heading              | `string`                                                                                           | The heading text displayed at the top with colored background | `-`          |
 | headingColor         | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | The semantic color scheme for the heading background          | `-`          |
-| image                | `ImageProps`                                                                                       | React Native Image props for the featured image               | `-`          |
+| image                | `ReactNode`                                                                                        | The image component to be displayed in the banner             | `-`          |
 | imageContainerHeight | `number`                                                                                           | Height of the image container in pixels                       | `200`        |
 | description          | `string`                                                                                           | Description text displayed below the image                    | `-`          |
 | link                 | `ReactElement`                                                                                     | Optional Link component displayed below description           | `-`          |
@@ -81,6 +85,19 @@ const MyComponent = () => (
 
 The component also accepts all standard Card props except `noPadding`, `colorScheme`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
+### `HighlightBannerImage` Props
+
+The `HighlightBannerImage` component can be used to display an image within the HighlightBanner. It accepts the following props:
+
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 ## Variants
 
 The HighlightBanner supports two visual variants:
@@ -97,17 +114,23 @@ Add a Button component to provide a clear call-to-action:
 <Canvas of={Stories.WithButton} />
 
 ```jsx
-import { HighlightBanner, Button } from '@utilitywarehouse/hearth-react-native';
+import {
+  HighlightBanner,
+  Button,
+  HighlightBannerImage,
+} from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <HighlightBanner
     heading="New Feature"
     headingColor="energy"
-    image={{
-      source: {
-        uri: 'https://example.com/feature.jpg',
-      },
-    }}
+    image={
+      <HighlightBannerImage
+        source={{
+          uri: 'https://example.com/feature.jpg',
+        }}
+      />
+    }
     description="Check out our latest feature"
     button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
   />
@@ -121,17 +144,19 @@ Use a Link component for a lighter-weight action:
 <Canvas of={Stories.WithLink} />
 
 ```jsx
-import { HighlightBanner, Link } from '@utilitywarehouse/hearth-react-native';
+import { HighlightBanner, Link, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <HighlightBanner
     heading="Learn More"
     headingColor="broadband"
-    image={{
-      source: {
-        uri: 'https://example.com/info.jpg',
-      },
-    }}
+    image={
+      <HighlightBannerImage
+        source={{
+          uri: 'https://example.com/info.jpg',
+        }}
+      />
+    }
     description="Explore our documentation"
     link={<Link onPress={() => console.log('pressed')}>Read more</Link>}
   />
@@ -145,7 +170,11 @@ Display the HighlightBanner without an image by omitting the `image` prop:
 <Canvas of={Stories.WithoutImage} />
 
 ```jsx
-import { HighlightBanner, Button } from '@utilitywarehouse/hearth-react-native';
+import {
+  HighlightBanner,
+  Button,
+  HighlightBannerImage,
+} from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <HighlightBanner
@@ -163,7 +192,7 @@ The component supports seven semantic color schemes that automatically apply the
 <Canvas of={Stories.ColorVariants} />
 
 ```jsx
-import { HighlightBanner } from '@utilitywarehouse/hearth-react-native';
+import { HighlightBanner, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <>
@@ -171,7 +200,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Energy Services"
       headingColor="energy"
-      image={{ source: { uri: 'https://example.com/energy.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/energy.jpg' }} />}
       description="Discover our energy solutions"
     />
 
@@ -179,7 +208,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Broadband Deals"
       headingColor="broadband"
-      image={{ source: { uri: 'https://example.com/broadband.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/broadband.jpg' }} />}
       description="Fast and reliable broadband"
     />
 
@@ -187,7 +216,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Insurance Coverage"
       headingColor="insurance"
-      image={{ source: { uri: 'https://example.com/insurance.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/insurance.jpg' }} />}
       description="Protect what matters most"
     />
 
@@ -195,7 +224,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Mobile Plans"
       headingColor="mobile"
-      image={{ source: { uri: 'https://example.com/mobile.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/mobile.jpg' }} />}
       description="Stay connected anywhere"
     />
 
@@ -203,7 +232,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Cashback Rewards"
       headingColor="cashback"
-      image={{ source: { uri: 'https://example.com/cashback.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/cashback.jpg' }} />}
       description="Earn rewards on your bills"
     />
 
@@ -211,7 +240,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Savings Account"
       headingColor="pig"
-      image={{ source: { uri: 'https://example.com/savings.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/savings.jpg' }} />}
       description="Save for your future"
     />
 
@@ -219,7 +248,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Special Offer"
       headingColor="highlight"
-      image={{ source: { uri: 'https://example.com/offer.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/offer.jpg' }} />}
       description="Limited time promotion"
     />
   </>
@@ -233,18 +262,20 @@ Use the subtle variant for a softer, less prominent appearance:
 <Canvas of={Stories.SubtleCard} />
 
 ```jsx
-import { HighlightBanner } from '@utilitywarehouse/hearth-react-native';
+import { HighlightBanner, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <HighlightBanner
     variant="subtle"
     heading="Featured Content"
     headingColor="energy"
-    image={{
-      source: {
-        uri: 'https://example.com/image.jpg',
-      },
-    }}
+    image={
+      <HighlightBannerImage
+        source={{
+          uri: 'https://example.com/image.jpg',
+        }}
+      />
+    }
     description="This banner has a subtle appearance"
   />
 );
@@ -261,7 +292,7 @@ The component works well with various types of imagery:
 Control the image container height to suit your content needs:
 
 ```jsx
-import { HighlightBanner } from '@utilitywarehouse/hearth-react-native';
+import { HighlightBanner, HighlightBannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <>
@@ -269,7 +300,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Standard Image"
       headingColor="energy"
-      image={{ source: { uri: 'https://example.com/image.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/image.jpg' }} />}
       description="Using default height"
     />
 
@@ -277,7 +308,7 @@ const MyComponent = () => (
     <HighlightBanner
       heading="Tall Image"
       headingColor="broadband"
-      image={{ source: { uri: 'https://example.com/image.jpg' } }}
+      image={<HighlightBannerImage source={{ uri: 'https://example.com/tall-image.jpg' }} />}
       imageContainerHeight={300}
       description="Using custom height of 300px"
     />

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

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { ImageProps } from 'react-native';
+import { ReactElement, ReactNode } from 'react';
 import CardProps from '../Card/Card.props';
 
 interface HighlightBannerProps
@@ -20,7 +19,7 @@ interface HighlightBannerProps
   heading?: string;
   headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
   variant?: 'emphasis' | 'subtle';
-  image?: ImageProps;
+  image?: ReactNode;
   imageContainerHeight?: number;
   description?: string;
   link?: ReactElement;