@utilitywarehouse/hearth-react-native 0.4.2 → 0.6.0

package/src/components/SectionHeader/SectionHeader.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { SettingsMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
+import { Link } from '../Link';
 import SectionHeader from './SectionHeader';
 
 const meta = {
@@ -16,15 +17,10 @@ const meta = {
       control: 'text',
       description: 'The heading supporting text to be displayed.',
     },
-    linkText: {
-      control: 'text',
-      description: 'Link text to display',
-    },
   },
   args: {
     heading: 'This is the section heading',
     helperText: 'Helper text',
-    linkText: 'See more',
   },
 } satisfies Meta<typeof SectionHeader>;
 
@@ -33,13 +29,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   render: () => {
-    return (
-      <SectionHeader
-        heading="This is the section heading"
-        helperText="Helper text"
-        linkText="See more"
-      />
-    );
+    return <SectionHeader heading="This is the section heading" helperText="Helper text" />;
   },
 };
 
@@ -51,23 +41,43 @@ export const KitchenSink: Story = {
     return (
       <Flex space="xl" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="Default SectionHeader with helper text and link">
-          <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            trailingContent={<Link>See more</Link>}
+          />
         </VariantTitle>
         <VariantTitle title="SectionHeader with icon on the left of the link ">
           <SectionHeader
             heading="Heading"
             helperText="Helper text"
-            linkText="Settings"
-            linkIcon={SettingsMediumIcon}
-            linkIconPosition="left"
+            trailingContent={
+              <Link icon={SettingsMediumIcon} iconPosition="left">
+                Settings
+              </Link>
+            }
           />
         </VariantTitle>
         <VariantTitle title="SectionHeader with no icon">
           <SectionHeader
             heading="Heading"
             helperText="Helper text"
-            linkText="Call to action"
-            linkShowIcon={false}
+            trailingContent={<Link showIcon={false}>Call to action</Link>}
+          />
+        </VariantTitle>
+        <VariantTitle title="SectionHeader with badge">
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            badge={{ text: "I'm a badge" }}
+          />
+        </VariantTitle>
+        <VariantTitle title="SectionHeader with badge and link">
+          <SectionHeader
+            heading="Heading"
+            helperText="Helper text"
+            trailingContent={<Link>Show more</Link>}
+            badge={{ text: 'New' }}
           />
         </VariantTitle>
       </Flex>

package/src/components/SectionHeader/SectionHeader.tsx

@@ -1,23 +1,22 @@
+import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Link } from '../Link';
+import { Badge } from '../Badge';
+import { Helper } from '../Helper';
 import SectionHeaderProps from './SectionHeader.props';
 import SectionHeaderTitle from './SectionHeaderHeading';
 import SectionHeaderHelperText from './SectionHeaderHelperText';
 import SectionHeaderTextContent from './SectionHeaderTextContent';
+import SectionHeaderTrailingContent from './SectionHeaderTrailingContent';
 
 const SectionHeader = ({
   heading,
   helperText,
   children,
   style,
-  linkHref,
-  linkIcon,
-  linkIconPosition,
-  linkOnPress,
-  linkShowIcon,
-  linkTarget,
-  linkText,
+  trailingContent,
+  badge,
+  invalidText,
   ...props
 }: SectionHeaderProps) => {
   return (
@@ -29,18 +28,18 @@ const SectionHeader = ({
           <SectionHeaderTextContent>
             <SectionHeaderTitle>{heading}</SectionHeaderTitle>
             {!!helperText && <SectionHeaderHelperText>{helperText}</SectionHeaderHelperText>}
+            {!!invalidText && (
+              <Helper
+                validationStatus="invalid"
+                showIcon
+                icon={ErrorCircleSmallIcon}
+                text={invalidText || ''}
+              />
+            )}
           </SectionHeaderTextContent>
-          {!!linkText && (
-            <Link
-              href={linkHref}
-              onPress={linkOnPress}
-              icon={linkIcon}
-              showIcon={linkShowIcon}
-              iconPosition={linkIconPosition}
-              target={linkTarget}
-            >
-              {linkText}
-            </Link>
+          {!!badge && <Badge {...badge} />}
+          {!!trailingContent && (
+            <SectionHeaderTrailingContent>{trailingContent}</SectionHeaderTrailingContent>
           )}
         </>
       )}

package/src/components/SectionHeader/SectionHeaderTrailingContent.tsx

@@ -0,0 +1,20 @@
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const SectionHeaderTrailingContent = ({ children, ...props }: ViewProps) => {
+  return (
+    <View {...props} style={[styles.container, props.style]}>
+      {children}
+    </View>
+  );
+};
+
+SectionHeaderTrailingContent.displayName = 'SectionHeaderTrailingContent';
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+  },
+});
+
+export default SectionHeaderTrailingContent;

package/src/components/SectionHeader/Sectionheader.docs.mdx

@@ -26,7 +26,7 @@ Use the `Section Header` component to help define and separate content within a
 
 ## Anatomy
 
-Section Header consists of: Heading, Helper Text and Link
+Section Header consists of: Heading, Helper Text, a Badge (optional) and a trailing content (optional, usually a Link or Button).
 
 ### Heading
 
@@ -42,41 +42,26 @@ A helper text property is included in the component to be able to add helper tex
 
 Use helper text when users need extra clarity or explanation before engaging with the section.
 
-### Link
-
-The Section Header component includes an optional Link that provides users with a related navigation option.
-
-Use the Link to provide a shortcut to additional details or a more comprehensive view.
-
-Use when users may need to navigate away or view extended content (e.g. view all)
-
 ## Usage
 
 <UsageWrap>
-  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
+  <SectionHeader heading="Heading" helperText="Helper text" />
 </UsageWrap>
 
 ```tsx
 import { SectionHeader } from '@utilitywarehouse/hearth-react-native';
 
-const MyComponent = () => (
-  <SectionHeader heading="Heading" helperText="Helper text" linkText="See more" />
-);
+const MyComponent = () => <SectionHeader heading="Heading" helperText="Helper text" />;
 ```
 
 ## Props
 
-| Name             | Type                                         | Default    | Description                                            |
-| ---------------- | -------------------------------------------- | ---------- | ------------------------------------------------------ |
-| heading          | `string`                                     |            | The text to display in the heading of the list.        |
-| helperText       | `string`                                     |            | The helper text to display in the heading of the list. |
-| linkText         | `string`                                     |            | The text for the link in the heading.                  |
-| linkHref         | `string`                                     |            | The href for the link in the heading.                  |
-| linkOnPress      | `() => void`                                 |            | Callback function when the link is pressed.            |
-| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'` | `'_blank'` | Target for the link in the heading.                    |
-| linkIcon         | `ComponentType`                              |            | Icon for the link.                                     |
-| linkIconPosition | `'left' \| 'right'`                          | `'right'`  | Position of the icon in the link.                      |
-| linkShowIcon     | `boolean`                                    | `true`     | Whether to show the icon in the link.                  |
+| Name            | Type              | Default | Description                                            |
+| --------------- | ----------------- | ------- | ------------------------------------------------------ |
+| heading         | `string`          |         | The text to display in the heading of the list.        |
+| helperText      | `string`          |         | The helper text to display in the heading of the list. |
+| trailingContent | `React.ReactNode` |         | Optional content to display on the right side.         |
+| badge           | `BadgeProps`      |         | Optional badge to display next to the heading.         |
 
 ## Variants
 

package/src/components/SectionHeader/index.ts

@@ -2,3 +2,4 @@ export { default as SectionHeader } from './SectionHeader';
 export { default as SectionHeaderHeading } from './SectionHeaderHeading';
 export { default as SectionHeaderHelperText } from './SectionHeaderHelperText';
 export { default as SectionHeaderTextContent } from './SectionHeaderTextContent';
+export { default as SectionHeaderTrailingContent } from './SectionHeaderTrailingContent';

package/src/components/Switch/Switch.docs.mdx

@@ -137,7 +137,6 @@ const SwitchList = () => {
       <ListItem
         text="Notifications"
         helperText="Allow notifications"
-        divider
         leadingContent={<ListItemIcon as={BellMediumIcon} />}
         trailingContent={
           <Switch value={notifications} onValueChange={setNotifications} size="small" />
@@ -147,7 +146,6 @@ const SwitchList = () => {
       <ListItem
         text="Secure ID"
         helperText="Use secure ID"
-        divider
         leadingContent={<ListItemIcon as={LockMediumIcon} />}
         trailingContent={<Switch value={secureId} onValueChange={setSecureId} size="small" />}
         onPress={() => setSecureId(!secureId)}
@@ -155,7 +153,6 @@ const SwitchList = () => {
       <ListItem
         text="Location"
         helperText="Allow location"
-        divider
         leadingContent={<ListItemIcon as={LocationMediumIcon} />}
         trailingContent={<Switch value={location} onValueChange={setLocation} size="small" />}
         onPress={() => setLocation(!location)}
@@ -163,7 +160,6 @@ const SwitchList = () => {
       <ListItem
         text="Dark mode"
         helperText="Enable dark mode"
-        divider
         leadingContent={<ListItemIcon as={EyeMediumIcon} />}
         trailingContent={<Switch value={darkMode} onValueChange={setDarkMode} size="small" />}
         onPress={() => setDarkMode(!darkMode)}

package/src/components/Tabs/Tab.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useRef } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
 import { Icon } from '../Icon';
 import type TabProps from './Tab.props';
 import { useTabsContext } from './Tabs.context';
 
 import { createPressable } from '@gluestack-ui/pressable';
+import { BodyText } from '../BodyText';
 
 const Tab = ({
   value,
@@ -54,7 +54,9 @@ const Tab = ({
     >
       <View style={styles.content}>
         {icon ? <Icon as={icon} /> : null}
-        <DetailText size={size}>{children}</DetailText>
+        <BodyText size={size} weight="semibold">
+          {children}
+        </BodyText>
       </View>
     </Pressable>
   );

package/src/components/ThemedImage/ThemedImage.docs.mdx

@@ -0,0 +1,208 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ThemedImageStories from './ThemedImage.stories';
+
+<Meta title="Utility Components / Themed Image" />
+
+# Themed Image
+
+The `ThemedImage` component automatically switches between light and dark mode images or SVG components based on the current theme. It's perfect for illustrations, logos, or any visual assets that need different appearances for light and dark modes.
+
+- [Features](#features)
+- [Basic Usage](#basic-usage)
+- [Props](#props)
+- [Examples](#examples)
+
+## Features
+
+- **Automatic theme switching** - Responds to color mode changes
+- **Flexible sources** - Accepts both regular image sources and React components (like SVGs)
+- **Accessible** - Supports all standard Image accessibility props
+- **Works with svg-assets** - Seamlessly integrates with the `@utilitywarehouse/hearth-svg-assets` package
+
+## Basic Usage
+
+<Canvas of={ThemedImageStories.Playground} />
+
+## Props
+
+| Prop    | Type                                  | Required | Description                                        |
+| ------- | ------------------------------------- | -------- | -------------------------------------------------- |
+| `light` | `ImageSourcePropType \| ReactElement` | Yes      | Image source or component to display in light mode |
+| `dark`  | `ImageSourcePropType \| ReactElement` | Yes      | Image source or component to display in dark mode  |
+| ...rest | `ImageProps`                          | No       | All other standard React Native Image props        |
+
+### Additional Props
+
+`ThemedImage` extends React Native's `Image` component, so it accepts all standard `ImageProps` including:
+
+- `style` - Custom styling for the image container
+- `resizeMode` - How to resize the image when the frame doesn't match the raw image dimensions
+- `accessible` - Whether the element is an accessibility element
+- `accessibilityLabel` - Text to be announced by screen readers
+- `testID` - Used to locate this view in end-to-end tests
+
+## Examples
+
+### With SVG Assets
+
+The most common use case is with SVG components from the `@utilitywarehouse/hearth-svg-assets` package:
+
+```tsx
+import { View } from 'react-native';
+import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
+
+function MyComponent() {
+  return <ThemedImage light={SpotBillingLight} dark={SpotBillingDark} width={200} height={200} />;
+}
+```
+
+<Canvas of={ThemedImageStories.WithSpotIllustrations} />
+
+### With Regular Images
+
+You can also use regular image sources (not just SVG components):
+
+```tsx
+import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
+import logoLight from './assets/logo-light.png';
+import logoDark from './assets/logo-dark.png';
+
+function MyComponent() {
+  return <ThemedImage light={logoLight} dark={logoDark} />;
+}
+```
+
+<Canvas of={ThemedImageStories.WithRegularImages} />
+
+### With Custom Sizes
+
+When using SVG components, control the size by passing a `style` prop with `width` and `height` to the component:
+
+<Canvas of={ThemedImageStories.WithCustomSize} />
+
+### With Accessibility
+
+Support screen readers and assistive technologies:
+
+```tsx
+import { View } from 'react-native';
+import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
+import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
+import MascotEnergyLight from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-light.svg';
+
+function MyComponent() {
+  return (
+    <ThemedImage
+      light={MascotEnergyLight}
+      dark={MascotEnergyDark}
+      width={150}
+      height={150}
+      accessible={true}
+      accessibilityLabel="Energy service mascot illustration"
+    />
+  );
+}
+```
+
+<Canvas of={ThemedImageStories.WithAccessibility} />
+
+## Usage with svg-assets Package
+
+The `@utilitywarehouse/hearth-svg-assets` package provides themed illustrations in three categories:
+
+### Spot Illustrations
+
+Small, focused illustrations for specific concepts:
+
+- `spot-billing` - Billing and payments
+- `spot-celebratory` - Success and celebration
+- `spot-error` - Error states
+- `spot-help` - Help and support
+- `spot-innovation` - New features
+- `spot-savings` - Cost savings
+- And more...
+
+### Mascots
+
+Service-specific character illustrations:
+
+- `mascot-energy` - Energy service
+- `mascot-broadband` - Broadband service
+- `mascot-mobile` - Mobile service
+- `mascot-insurance` - Insurance service
+- `mascot-cashback` - Cashback rewards
+
+### Scene Illustrations
+
+Large, detailed illustrations for landing pages:
+
+- `scene-energy` - Energy service scenes
+- `scene-broadband` - Broadband service scenes
+- `scene-mobile` - Mobile service scenes
+- `scene-insurance` - Insurance service scenes
+- `scene-bundle` - Service bundle scenes
+
+All assets come in both `-light.svg` and `-dark.svg` variants.
+
+## Integration with react-native-svg-transformer
+
+To use SVG files as React components in React Native, you'll need `react-native-svg-transformer`:
+
+```bash
+# Install dependencies
+npm install react-native-svg react-native-svg-transformer --save-dev
+```
+
+Configure your `metro.config.js`:
+
+```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const config = {
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+  },
+  resolver: {
+    assetExts: getDefaultConfig(__dirname).resolver.assetExts.filter(ext => ext !== 'svg'),
+    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'svg'],
+  },
+};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+```
+
+Add TypeScript declarations (optional):
+
+```typescript
+// svg.d.ts
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+```
+
+## Best Practices
+
+1. **Always provide both variants** - Ensure you have both light and dark versions of your assets
+2. **Use appropriate sizes** - Match illustration sizes to your design specifications
+3. **Add accessibility labels** - Make your images accessible to screen readers
+4. **Consider performance** - Large SVG files may impact performance on older devices
+5. **Test in both modes** - Always test your themed images in both light and dark modes
+
+## Troubleshooting
+
+### SVG not displaying
+
+Make sure you have configured `react-native-svg-transformer` correctly and that your SVG files are valid.
+
+### Theme not switching
+
+The component uses `useColorMode` hook which relies on the Unistyles theme system. Ensure your app is properly configured with Unistyles.
+
+### TypeScript errors with SVG imports
+
+Add the TypeScript declaration file for `.svg` modules as shown in the integration section above.

package/src/components/ThemedImage/ThemedImage.props.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+
+interface ThemedImageProps extends Omit<ImageProps, 'source'> {
+  /**
+   * Image source or component to display in light mode
+   */
+  light: ImageSourcePropType | ReactElement | ComponentType<any>;
+  /**
+   * Image source or component to display in dark mode
+   */
+  dark: ImageSourcePropType | ReactElement | ComponentType<any>;
+}
+
+export default ThemedImageProps;