@utilitywarehouse/hearth-react-native 0.11.0 → 0.12.0

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

@@ -13,6 +13,8 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Link } from '../Link';
 import Banner from './Banner';
+import BannerIllustration from './BannerIllustration';
+import BannerImage from './BannerImage';
 
 const meta = {
   title: 'Stories / Banner',
@@ -128,23 +130,35 @@ export const WithIllustration: Story = {
       <View style={{ width: 400 }}>
         <Flex space="lg" direction="column">
           <Banner
-            illustration={{
-              // @ts-ignore
-              light: <SpotBillingLight width={80} height={80} />,
-              // @ts-ignore
-              dark: <SpotBillingDark width={80} height={80} />,
-            }}
+            illustration={
+              <BannerIllustration
+                light={
+                  // @ts-ignore
+                  <SpotBillingLight width={80} height={80} />
+                }
+                dark={
+                  // @ts-ignore
+                  <SpotBillingDark width={80} height={80} />
+                }
+              />
+            }
             heading="Featured Content"
             description="Discover amazing content curated just for you."
           />
           <Banner
             direction="vertical"
-            illustration={{
-              // @ts-ignore
-              light: <SpotBillingLight width={120} height={120} />,
-              // @ts-ignore
-              dark: <SpotBillingDark width={120} height={120} />,
-            }}
+            illustration={
+              <BannerIllustration
+                light={
+                  // @ts-ignore
+                  <SpotBillingLight width={120} height={120} />
+                }
+                dark={
+                  // @ts-ignore
+                  <SpotBillingDark width={120} height={120} />
+                }
+              />
+            }
             heading="Special Offer"
             description="Limited time offer on selected services."
           />
@@ -160,27 +174,31 @@ export const WithImage: Story = {
       <View style={{ width: 400 }}>
         <Flex space="lg" direction="column">
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
             heading="Featured Content"
             description="Discover amazing content curated just for you."
           />
           <Banner
             direction="vertical"
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+              />
+            }
             heading="Special Offer"
             description="Limited time offer on selected services."
           />
@@ -262,14 +280,16 @@ export const Pressable: Story = {
             onPress={() => console.log('Banner pressed')}
           />
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
             heading="Account Settings"
             description="Manage your account preferences."
             onPress={() => console.log('Banner pressed')}
@@ -325,11 +345,16 @@ export const VerticalLayout: Story = {
           />
           <Banner
             variant="emphasis"
-            image={{
-              source: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  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"
@@ -443,14 +468,16 @@ export const EmphasisVariant: Story = {
             variant="emphasis"
           />
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+                }}
+              />
+            }
             heading="Featured Offer"
             description="Limited time deal on premium services."
             variant="emphasis"
@@ -486,14 +513,16 @@ export const ComplexExample: Story = {
             onPress={() => console.log('Banner pressed')}
           />
           <Banner
-            image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
-              },
-              dark: {
-                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
-              },
-            }}
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
+                }}
+              />
+            }
             heading="Exclusive Member Benefit"
             description="As a valued member, you now have access to premium features at no extra cost."
             variant="emphasis"

package/src/components/Banner/Banner.tsx

@@ -1,18 +1,15 @@
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Image, ImageProps, Pressable, View } from 'react-native';
+import { useMemo } from 'react';
+import { 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, ThemedImageProps } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
+import BannerContext from './Banner.context';
 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',
@@ -35,6 +32,13 @@ const Banner = ({
   const hasIllustration = Boolean(illustration);
   styles.useVariants({ direction, hasIllustration });
 
+  const context = useMemo(
+    () => ({
+      direction,
+    }),
+    [direction]
+  );
+
   const renderIconOrImage = () => {
     if (icon) {
       return (
@@ -48,36 +52,10 @@ const Banner = ({
       );
     }
     if (illustration) {
-      if (isThemedImageProps(illustration)) {
-        return (
-          <ThemedImage
-            {...illustration}
-            resizeMode="cover"
-            style={[styles.media, styles.imageWrapper, illustration.style]}
-          />
-        );
-      }
-      return (
-        <Image
-          {...illustration}
-          resizeMode="cover"
-          style={[styles.media, styles.imageWrapper, illustration.style]}
-        />
-      );
+      return illustration;
     }
     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]}>
-          <Image {...image} style={[styles.image, image.style]} />
-        </View>
-      );
+      return image;
     }
     return null;
   };
@@ -149,18 +127,22 @@ const Banner = ({
 
   if (onPress) {
     return (
-      <Card variant={variant} style={[styles.card, style]} {...props}>
-        <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
-          {content}
-        </Pressable>
-      </Card>
+      <BannerContext.Provider value={context}>
+        <Card variant={variant} style={[styles.card, style]} {...props}>
+          <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
+            {content}
+          </Pressable>
+        </Card>
+      </BannerContext.Provider>
     );
   }
 
   return (
-    <Card variant={variant} style={[styles.card, style]} {...props}>
-      {content}
-    </Card>
+    <BannerContext.Provider value={context}>
+      <Card variant={variant} style={[styles.card, style]} {...props}>
+        {content}
+      </Card>
+    </BannerContext.Provider>
   );
 };
 
@@ -218,31 +200,6 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
-  imageWrapper: {
-    flexDirection: 'row',
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          width: '100%',
-        },
-      },
-    },
-  },
-  image: {
-    borderRadius: theme.borderRadius.md,
-    borderColor: theme.color.border.strong,
-    borderWidth: theme.borderWidth[1],
-    variants: {
-      direction: {
-        horizontal: { width: 160, height: 95 },
-        vertical: {
-          width: '100%',
-          height: 160,
-        },
-      },
-    },
-  },
   contentContainer: {
     alignItems: 'flex-start',
     justifyContent: 'space-between',

package/src/components/Banner/BannerIllustration.tsx

@@ -0,0 +1,63 @@
+import { Image, ImageProps, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+import { useBannerContext } from './Banner.context';
+
+const BannerIllustration = (props: ImageProps | ThemedImageProps) => {
+  const { direction } = useBannerContext();
+  styles.useVariants({ direction });
+  if (isThemedImageProps(props)) {
+    return (
+      <View style={[styles.media, styles.imageWrapper]}>
+        <ThemedImage {...props} style={[styles.image, props.style]} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.media, styles.imageWrapper]}>
+      <Image {...props} style={[styles.image, props.style]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  media: {
+    flexShrink: 0,
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          alignSelf: 'flex-start',
+        },
+      },
+    },
+  },
+  imageWrapper: {
+    flexDirection: 'row',
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          width: '100%',
+        },
+      },
+    },
+  },
+  image: {
+    borderRadius: theme.borderRadius.md,
+    borderColor: theme.color.border.strong,
+    borderWidth: theme.borderWidth[1],
+    variants: {
+      direction: {
+        horizontal: { width: 160, height: 95 },
+        vertical: {
+          width: '100%',
+          height: 160,
+        },
+      },
+    },
+  },
+}));
+
+export default BannerIllustration;

package/src/components/Banner/BannerImage.tsx

@@ -0,0 +1,63 @@
+import { Image, ImageProps, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+import { useBannerContext } from './Banner.context';
+
+const BannerImage = (props: ImageProps | ThemedImageProps) => {
+  const { direction } = useBannerContext();
+  styles.useVariants({ direction });
+  if (isThemedImageProps(props)) {
+    return (
+      <View style={[styles.media, styles.imageWrapper]}>
+        <ThemedImage {...props} style={[styles.image, props.style]} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.media, styles.imageWrapper]}>
+      <Image {...props} style={[styles.image, props.style]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  media: {
+    flexShrink: 0,
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          alignSelf: 'flex-start',
+        },
+      },
+    },
+  },
+  imageWrapper: {
+    flexDirection: 'row',
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          width: '100%',
+        },
+      },
+    },
+  },
+  image: {
+    borderRadius: theme.borderRadius.md,
+    borderColor: theme.color.border.strong,
+    borderWidth: theme.borderWidth[1],
+    variants: {
+      direction: {
+        horizontal: { width: 160, height: 95 },
+        vertical: {
+          width: '100%',
+          height: 160,
+        },
+      },
+    },
+  },
+}));
+
+export default BannerImage;

package/src/components/Banner/index.ts

@@ -1,2 +1,4 @@
 export { default as Banner } from './Banner';
 export type { default as BannerProps } from './Banner.props';
+export { default as BannerIllustration } from './BannerIllustration';
+export { default as BannerImage } from './BannerImage';

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

@@ -209,7 +209,7 @@ const MyComponent = () => (
 The badge can be positioned in three different locations:
 
 ```tsx
-import { Card, CardAction } from '@utilitywarehouse/hearth-react-native';
+import { Card, CardAction, Badge } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <>
@@ -218,7 +218,7 @@ const MyComponent = () => (
       <CardAction
         heading="Action"
         helperText="Helper text"
-        badge={{ text: 'New' }}
+        badge={<Badge text="New" />}
         badgePosition="bottom"
         onPress={() => console.log('pressed')}
       />
@@ -229,7 +229,7 @@ const MyComponent = () => (
       <CardAction
         heading="Action"
         helperText="Helper text"
-        badge={{ text: 'New' }}
+        badge={<Badge text="New" />}
         badgePosition="middle"
         onPress={() => console.log('pressed')}
       />
@@ -240,7 +240,7 @@ const MyComponent = () => (
       <CardAction
         heading="Action"
         helperText="Helper text"
-        badge={{ text: 'New' }}
+        badge={<Badge text="New" />}
         badgePosition="right"
         onPress={() => console.log('pressed')}
       />

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

@@ -1,6 +1,5 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
-import BadgeProps from '../../Badge/Badge.props';
 import { IconContainerProps } from '../../IconContainer';
 
 interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
@@ -12,7 +11,7 @@ interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
 interface CardActionContentProps {
   heading: string;
   helperText?: string;
-  badge?: BadgeProps;
+  badge?: ReactNode;
   badgePosition?: 'bottom' | 'middle' | 'right' | 'top';
   iconContainer?: boolean;
   iconContainerVariant?: IconContainerProps['variant'];

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

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
+import { Badge } from '../../Badge';
 import { Flex } from '../../Flex';
 import Card from '../Card';
 import CardAction from './CardAction';
@@ -169,7 +170,7 @@ export const WithBadge: Story = {
           heading="Badge at bottom"
           helperText="Badge positioned below text"
           leadingIcon={ElectricityMediumIcon}
-          badge={{ text: 'New' }}
+          badge={<Badge text="New" />}
           badgePosition="bottom"
           onPress={() => console.log('pressed')}
         />
@@ -179,7 +180,7 @@ export const WithBadge: Story = {
           heading="Badge at middle"
           helperText="Badge positioned between heading and helper text"
           leadingIcon={ElectricityMediumIcon}
-          badge={{ text: 'New' }}
+          badge={<Badge text="New" />}
           badgePosition="middle"
           onPress={() => console.log('pressed')}
         />
@@ -189,7 +190,7 @@ export const WithBadge: Story = {
           heading="Badge at right"
           helperText="Badge positioned on the right side"
           leadingIcon={ElectricityMediumIcon}
-          badge={{ text: 'New' }}
+          badge={<Badge text="New" />}
           badgePosition="right"
           onPress={() => console.log('pressed')}
         />

package/src/components/Card/CardAction/CardActionRoot.tsx

@@ -2,7 +2,6 @@ import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-ico
 import { useMemo } from 'react';
 import { Pressable, View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Badge } from '../../Badge';
 import { IconContainer } from '../../IconContainer';
 import { Skeleton } from '../../Skeleton';
 import { useCardContext } from '../Card.context';
@@ -124,14 +123,14 @@ const CardActionRoot = ({
                 </CardActionLeadingContent>
               ) : null}
               <CardActionContent>
-                {badgePosition === 'top' && badge ? <Badge {...badge} /> : null}
+                {badgePosition === 'top' && badge ? badge : null}
                 <CardActionText>{heading}</CardActionText>
-                {badgePosition === 'middle' && badge ? <Badge {...badge} /> : null}
+                {badgePosition === 'middle' && badge ? badge : null}
                 {helperText ? <CardActionHelperText>{helperText}</CardActionHelperText> : null}
-                {badgePosition === 'bottom' && badge ? <Badge {...badge} /> : null}
+                {badgePosition === 'bottom' && badge ? badge : null}
               </CardActionContent>
               {badgePosition === 'right' && badge ? (
-                <Badge {...badge} style={[badge.style, styles.alignCenter]} />
+                <View style={styles.alignCenter}>{badge}</View>
               ) : null}
               {trailingContent ? (
                 <CardActionTrailingContent>{trailingContent}</CardActionTrailingContent>

package/src/components/Checkbox/Checkbox.docs.mdx

@@ -91,7 +91,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the checkbox.                                                                   |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the checkbox.                                                                                            |
-| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                                         |
+| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                                         |
 
 ## Components
 
@@ -210,6 +210,15 @@ const MyComponent = () => {
 
 ### `CheckboxImage`
 
+| 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).
+
 The `CheckboxImage` component is used to display an image next to the checkbox label. It inherits all the properties of React Native's `Image` component.
 
 ## Variants
@@ -336,7 +345,7 @@ The `CheckboxImage` component is used to display an image next to the checkbox l
 <Canvas of={Stories.WithImage} />
 
 ```tsx
-import { Checkbox } from '@utilitywarehouse/native-ui';
+import { Checkbox, CheckboxImage } from '@utilitywarehouse/hearth-react-native';
 import visaLogo from '../../../assets/visa.png';
 import mastercardLogo from '../../../assets/mastercard.png';
 
@@ -347,13 +356,23 @@ const MyComponent = () => {
         value="visa"
         aria-label="Visa"
         label="Visa"
-        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+        image={
+          <CheckboxImage
+            source={visaLogo}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
       <Checkbox
         value="mastercard"
         aria-label="Mastercard"
         label="Mastercard"
-        image={{ source: mastercardLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+        image={
+          <CheckboxImage
+            source={mastercardLogo}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
     </CheckboxGroup>
   );

package/src/components/Checkbox/Checkbox.props.ts

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
-import type { ImageProps, PressableProps, ViewProps } from 'react-native';
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 
 type CheckboxBaseProps = {
   onChange?: (isSelected: boolean) => void;
@@ -37,7 +37,7 @@ type CheckboxWithoutChildrenProps = {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
-  image?: ImageProps;
+  image?: ReactNode;
 } & CheckboxBaseProps;
 
 type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;