@utilitywarehouse/hearth-react-native 0.8.2 → 0.9.0

package/build/tokens/components/light/timeline.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly bar: {
+        readonly width: 2;
+    };
+    readonly content: {
+        readonly gap: 8;
+        readonly paddingBottom: 24;
+        readonly paddingTop: 2;
+    };
+    readonly gap: 12;
+    readonly progress: {
+        readonly circle: {
+            readonly height: 28;
+            readonly width: 28;
+        };
+    };
+    readonly static: {
+        readonly circle: {
+            readonly height: 12;
+            readonly width: 12;
+        };
+    };
+};
+export default _default;

package/build/tokens/components/light/timeline.js

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    bar: {
+        width: 2,
+    },
+    content: {
+        gap: 8,
+        paddingBottom: 24,
+        paddingTop: 2,
+    },
+    gap: 12,
+    progress: {
+        circle: {
+            height: 28,
+            width: 28,
+        },
+    },
+    static: {
+        circle: {
+            height: 12,
+            width: 12,
+        },
+    },
+};

package/docs/components/AllComponents.web.tsx

@@ -6,9 +6,12 @@ import {
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
   ChevronRightMediumIcon,
+  EditSmallIcon,
   ElectricityMediumIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
+  ShareSmallIcon,
+  TrashSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 // @ts-ignore
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
@@ -60,6 +63,9 @@ import {
   Link,
   List,
   ListItem,
+  Menu,
+  MenuItem,
+  MenuTrigger,
   Modal,
   OL,
   ProgressStep,
@@ -159,6 +165,10 @@ const AllComponents: React.FC = () => {
   }, [datePickerRef]);
   const [switchEnabled, setSwitchEnabled] = React.useState(false);
   const toggleSwitch = () => setSwitchEnabled(!switchEnabled);
+  const menuRef = useRef<any>(null);
+  const handleMenuOpenPress = useCallback(() => {
+    menuRef.current?.present();
+  }, []);
 
   const [colorMode] = useColorMode();
   const isDark = colorMode === 'dark';
@@ -564,6 +574,29 @@ const AllComponents: React.FC = () => {
               </List>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Menu" link="/?path=/docs/components-menu--docs">
+            <Center flex={1}>
+              <BottomSheetModalProvider>
+                <MenuTrigger onPress={handleMenuOpenPress}>
+                  <Button>Open Menu</Button>
+                </MenuTrigger>
+                <Menu ref={menuRef} heading="Actions">
+                  <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit')} />
+                  <MenuItem
+                    icon={ShareSmallIcon}
+                    text="Share"
+                    onPress={() => console.log('Share')}
+                  />
+                  <MenuItem
+                    icon={TrashSmallIcon}
+                    text="Delete"
+                    colorScheme="destructive"
+                    onPress={() => console.log('Delete')}
+                  />
+                </Menu>
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Modal" link="/?path=/docs/components-modal--docs">
             <Center flex={1}>
               <Button onPress={handleModalOpenPress}>Open Modal</Button>

package/docs/components/BackToTopButton.tsx

@@ -29,7 +29,7 @@ const ScrollButton = () => {
       <Button
         onPress={scrollToTop}
         variant="ghost"
-        colorScheme="grey"
+        colorScheme="functional"
         size="sm"
         // @ts-expect-error - This is a playground
         style={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -60,7 +60,7 @@
     "@utilitywarehouse/hearth-react-icons": "^0.7.3",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
-    "@utilitywarehouse/hearth-tokens": "^0.1.3"
+    "@utilitywarehouse/hearth-tokens": "^0.2.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Banner/Banner.docs.mdx

@@ -69,8 +69,8 @@ const MyComponent = () => (
 | iconContainerVariant | `'subtle' \| 'emphasis'`                                                                           | Icon container visual style                                            | `'subtle'`     |
 | iconContainerSize    | `'sm' \| 'md' \| 'lg'`                                                                             | Icon container size                                                    | `'md'`         |
 | iconContainerColor   | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Icon container color scheme                                            | `'pig'`        |
-| illustration         | `{ light: ImageSource, dark: ImageSource }`                                                        | Themed illustration object (mutually exclusive with icon/image)        | `-`            |
-| image                | `{ light: ImageSource, dark: ImageSource }`                                                        | Themed image object (mutually exclusive with icon/illustration)        | `-`            |
+| illustration         | `ThemedImageProps \| ImageProps`                                                                   | Themed illustration object (mutually exclusive with icon/image)        | `-`            |
+| image                | `ThemedImageProps \| ImageProps`                                                                   | Themed image object (mutually exclusive with icon/illustration)        | `-`            |
 | heading              | `string`                                                                                           | Heading text                                                           | `-` (required) |
 | description          | `string`                                                                                           | Description text                                                       | `-` (required) |
 | direction            | `'horizontal' \| 'vertical'`                                                                       | Layout direction for icon/image and content                            | `'horizontal'` |
@@ -156,14 +156,23 @@ Display a themed image that automatically switches between light and dark modes:
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Banner
-    image={{
-      light: { uri: 'https://example.com/light-image.jpg' },
-      dark: { uri: 'https://example.com/dark-image.jpg' },
-    }}
-    heading="Featured Content"
-    description="Discover amazing content curated just for you."
-  />
+  <>
+    <Banner
+      image={{
+        source: { uri: 'https://example.com/image.jpg' },
+      }}
+      heading="Featured Content"
+      description="Discover amazing content curated just for you."
+    />
+    <Banner
+      image={{
+        light: { uri: 'https://example.com/light-image.jpg' },
+        dark: { uri: 'https://example.com/dark-image.jpg' },
+      }}
+      heading="Featured Content"
+      description="Discover amazing content curated just for you."
+    />
+  </>
 );
 ```
 

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

@@ -51,12 +51,12 @@ export interface BannerProps
    * Illustration to display in the banner
    * Mutually exclusive with icon and image
    */
-  illustration?: ThemedImageProps & ImageProps;
+  illustration?: ThemedImageProps | ImageProps;
   /**
    * Image to display in the banner
    * Mutually exclusive with icon and illustration
    */
-  image?: ThemedImageProps & ImageProps;
+  image?: ThemedImageProps | ImageProps;
   /**
    * Heading text
    */

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

@@ -326,10 +326,7 @@ export const VerticalLayout: Story = {
           <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',
               },
             }}

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,8 +48,17 @@ const Banner = ({
       );
     }
     if (illustration) {
+      if (isThemedImageProps(illustration)) {
+        return (
+          <ThemedImage
+            {...illustration}
+            resizeMode="cover"
+            style={[styles.media, styles.imageWrapper, illustration.style]}
+          />
+        );
+      }
       return (
-        <ThemedImage
+        <Image
           {...illustration}
           resizeMode="cover"
           style={[styles.media, styles.imageWrapper, illustration.style]}
@@ -53,9 +66,16 @@ const Banner = ({
       );
     }
     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 {...image} style={[styles.image, image.style]} />
+          <Image {...image} style={[styles.image, image.style]} />
         </View>
       );
     }
@@ -74,7 +94,17 @@ 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.contentTextContainer}>
           <View style={styles.textContainer}>
@@ -104,7 +134,7 @@ const Banner = ({
             style={styles.chevron}
           />
         )}
-        {onClose && (
+        {onClose && direction === 'horizontal' && (
           <UnstyledIconButton
             icon={CloseSmallIcon}
             size="sm"
@@ -137,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',
@@ -273,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/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/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;
+};

package/src/components/Menu/Menu.docs.mdx

@@ -0,0 +1,158 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Menu.stories';
+
+<Meta title="Components / Menu" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens" />
+
+<BackToTopButton />
+
+# Menu
+
+The `Menu` component provides a bottom sheet modal with a list of actions. It's perfect for contextual menus, action sheets, and option lists. The component uses `BottomSheetModal` under the hood and includes `MenuItem` components that can display icons, text, and support different color schemes.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Features](#features)
+- [Examples](#examples)
+  - [Basic Menu](#basic-menu)
+  - [With Destructive Action](#with-destructive-action)
+  - [Icon on Right](#icon-on-right)
+  - [Without Icons](#without-icons)
+  - [With Disabled Items](#with-disabled-items)
+  - [Without Heading](#without-heading)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { useRef } from 'react';
+import { Menu, MenuItem, MenuTrigger } from '@utilitywarehouse/hearth-react-native';
+import { EditSmallIcon, TrashSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  const menuRef = useRef(null);
+
+  return (
+    <>
+      <MenuTrigger onPress={() => menuRef.current?.present()}>
+        <Button>Open Menu</Button>
+      </MenuTrigger>
+
+      <Menu ref={menuRef} heading="Actions">
+        <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit')} />
+        <MenuItem
+          icon={TrashSmallIcon}
+          text="Delete"
+          colorScheme="destructive"
+          onPress={() => console.log('Delete')}
+        />
+      </Menu>
+    </>
+  );
+};
+```
+
+## Props
+
+### Menu
+
+| Prop               | Type                             | Default | Description                                         |
+| ------------------ | -------------------------------- | ------- | --------------------------------------------------- |
+| `heading`          | `string`                         | -       | Heading text displayed at the top of the menu       |
+| `children`         | `ReactNode`                      | -       | Menu items to display                               |
+| `bottomSheetProps` | `Partial<BottomSheetModalProps>` | -       | Optional bottom sheet modal props for customization |
+
+### MenuItem
+
+| Prop           | Type                                     | Default        | Description                        |
+| -------------- | ---------------------------------------- | -------------- | ---------------------------------- |
+| `icon`         | `ComponentType`                          | -              | Icon component to display          |
+| `iconPosition` | `'left' \| 'right'`                      | `'left'`       | Position of the icon               |
+| `text`         | `string`                                 | -              | Text to display in the menu item   |
+| `colorScheme`  | `'functional' \| 'destructive'`          | `'functional'` | Color scheme for the menu item     |
+| `disabled`     | `boolean`                                | `false`        | Whether the menu item is disabled  |
+| `onPress`      | `(event: GestureResponderEvent) => void` | -              | Callback when menu item is pressed |
+
+### MenuTrigger
+
+| Prop       | Type           | Description                                                         |
+| ---------- | -------------- | ------------------------------------------------------------------- |
+| `children` | `ReactElement` | The child element that triggers the menu (must be a single element) |
+| `onPress`  | `() => void`   | Function that opens the menu                                        |
+
+## Features
+
+### Icon Positioning
+
+Icons can be positioned on either the left or right side of the menu item text using the `iconPosition` prop.
+
+### Color Schemes
+
+Menu items support two color schemes:
+
+- `functional` (default): Uses primary text and icon colors
+- `destructive`: Uses danger/destructive colors for actions like delete
+
+### Disabled State
+
+Menu items can be disabled using the `disabled` prop, which applies reduced opacity and prevents interaction.
+
+### Auto-closing
+
+Menu items automatically close the menu when pressed, making it easy to handle actions without manual menu dismissal.
+
+## Examples
+
+### Basic Menu
+
+A simple menu with icon-based actions:
+
+<Canvas of={Stories.BasicMenu} />
+
+### With Destructive Action
+
+Menu with a destructive action styled differently:
+
+<Canvas of={Stories.WithDestructiveAction} />
+
+### Icon on Right
+
+Menu items with icons positioned on the right side:
+
+<Canvas of={Stories.IconOnRight} />
+
+### Without Icons
+
+Simple text-only menu items:
+
+<Canvas of={Stories.WithoutIcons} />
+
+### With Disabled Items
+
+Menu with some items disabled:
+
+<Canvas of={Stories.WithDisabledItems} />
+
+### Without Heading
+
+Menu without a heading section:
+
+<Canvas of={Stories.WithoutHeading} />
+
+## Accessibility
+
+- Menu items have `accessibilityRole="button"` for proper screen reader support
+- Disabled state is communicated via `accessibilityState`
+- Keyboard navigation is supported on web platforms
+- All interactive elements are properly focusable

package/src/components/Menu/Menu.props.ts

@@ -0,0 +1,24 @@
+import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
+import type { ReactNode } from 'react';
+
+export interface MenuMethods {
+  present: () => void;
+  dismiss: () => void;
+}
+
+export interface MenuProps {
+  /**
+   * Heading text displayed at the top of the menu
+   */
+  heading?: string;
+  /**
+   * Menu items to display
+   */
+  children: ReactNode;
+  /**
+   * Optional bottom sheet modal props to customise the menu behavior
+   */
+  bottomSheetProps?: Partial<BottomSheetModalProps>;
+}
+
+export default MenuProps;