@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,264 @@
+import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+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 } from '../ThemedImage';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type BannerProps from './Banner.props';
+
+const Banner = ({
+  icon,
+  iconContainerVariant = 'subtle',
+  iconContainerSize = 'md',
+  iconContainerColor = 'pig',
+  illustration,
+  image,
+  heading,
+  description,
+  direction = 'horizontal',
+  link,
+  button,
+  onPress,
+  onClose,
+  variant = 'subtle',
+  colorScheme = 'pig',
+  style,
+  ...props
+}: BannerProps) => {
+  const hasIllustration = Boolean(illustration);
+  styles.useVariants({ direction, hasIllustration });
+
+  const renderIconOrImage = () => {
+    if (icon) {
+      return (
+        <IconContainer
+          icon={icon}
+          variant={iconContainerVariant}
+          size={iconContainerSize}
+          color={iconContainerColor}
+          style={styles.media}
+        />
+      );
+    }
+    if (illustration) {
+      return (
+        <ThemedImage
+          light={illustration.light}
+          dark={illustration.dark}
+          style={styles.image}
+          accessible
+          accessibilityLabel={heading}
+        />
+      );
+    }
+    if (image) {
+      return (
+        <View style={[styles.media, styles.imageWrapper]}>
+          <ThemedImage
+            light={image.light}
+            dark={image.dark}
+            style={styles.image}
+            accessible
+            accessibilityLabel={heading}
+          />
+        </View>
+      );
+    }
+    return null;
+  };
+
+  const renderAction = () => {
+    if (link) {
+      return <View style={styles.action}>{link}</View>;
+    }
+    if (button) {
+      return <View style={styles.action}>{button}</View>;
+    }
+    return null;
+  };
+
+  const content = (
+    <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>
+          {renderAction()}
+        </View>
+        {onPress && (
+          <UnstyledIconButton
+            icon={ChevronRightSmallIcon}
+            size="sm"
+            onPress={onPress}
+            style={styles.chevron}
+          />
+        )}
+        {onClose && (
+          <UnstyledIconButton
+            icon={CloseSmallIcon}
+            size="sm"
+            onPress={onClose}
+            style={styles.closeButton}
+            accessibilityLabel="Close banner"
+          />
+        )}
+      </View>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Card variant={variant} style={[styles.card, style]} {...props}>
+        <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
+          {content}
+        </Pressable>
+      </Card>
+    );
+  }
+
+  return (
+    <Card variant={variant} style={[styles.card, style]} {...props}>
+      {content}
+    </Card>
+  );
+};
+
+Banner.displayName = 'Banner';
+
+const styles = StyleSheet.create(theme => ({
+  card: {},
+  pressable: {
+    width: '100%',
+  },
+  container: {
+    flexDirection: 'row',
+    gap: theme.space.lg,
+    variants: {
+      direction: {
+        horizontal: {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+        },
+        vertical: {
+          flexDirection: 'column',
+          alignItems: 'stretch',
+        },
+      },
+      hasIllustration: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        direction: 'vertical',
+        hasIllustration: false,
+        styles: {
+          alignItems: 'flex-start',
+        },
+      },
+      {
+        direction: 'vertical',
+        hasIllustration: true,
+        styles: {
+          alignItems: 'center',
+        },
+      },
+    ],
+  },
+  media: {
+    flexShrink: 0,
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          alignSelf: 'flex-start',
+        },
+      },
+    },
+  },
+  imageWrapper: {
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          width: '100%',
+        },
+      },
+    },
+  },
+  image: {
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.color.border.strong,
+    variants: {
+      direction: {
+        horizontal: { width: 160, height: 95 },
+        vertical: {
+          width: '100%',
+          height: 160,
+        },
+      },
+    },
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: theme.space.lg,
+  },
+  textContainer: {
+    flex: 1,
+    gap: theme.space.lg,
+  },
+  heading: {
+    compoundVariants: [
+      {
+        direction: 'vertical',
+        hasIllustration: true,
+        styles: {
+          textAlign: 'center',
+        },
+      },
+    ],
+  },
+  description: {
+    compoundVariants: [
+      {
+        direction: 'vertical',
+        hasIllustration: true,
+        styles: {
+          textAlign: 'center',
+        },
+      },
+    ],
+  },
+  action: {
+    alignSelf: 'flex-start',
+  },
+  chevron: {
+    alignSelf: 'center',
+  },
+  closeButton: {
+    alignSelf: 'flex-start',
+  },
+}));
+
+export default Banner;

package/src/components/Banner/index.ts

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

package/src/components/BottomSheet/BottomSheetBackdrop.tsx

@@ -1,7 +1,7 @@
 import { BottomSheetBackdrop as Backdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
-import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 
 const StyledBottomSheetBackdrop = withUnistyles(Backdrop);
 
@@ -9,7 +9,6 @@ const BottomSheetBackdrop = ({ style, ...props }: BottomSheetDefaultBackdropProp
   const theme = useTheme();
   return (
     <StyledBottomSheetBackdrop
-      // @ts-expect-error - style unistyles error
       style={[styles.backdrop, style]}
       opacity={theme.components.overlay.opacity / 100}
       appearsOnIndex={0}

package/src/components/BottomSheet/BottomSheetFlatList.tsx

@@ -1,8 +1,7 @@
- 
 import { BottomSheetFlatList as FlatList } from '@gorhom/bottom-sheet';
+import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
-import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 
 const StyledBottomSheetFlatList = withUnistyles(FlatList);
 
@@ -20,7 +19,6 @@ const BottomSheetFlatList = ({
 
   return (
     <StyledBottomSheetFlatList
-      // @ts-expect-error - style
       style={[styles.container, style]}
       contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
       {...props}

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -7,7 +7,6 @@ const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
   return (
     <StyledBottomSheetHandle
-      // @ts-expect-error - style
       style={[styles.handle, style]}
       indicatorStyle={[styles.indicator, indicatorStyle]}
       {...props}

package/src/components/Button/ButtonIcon.tsx

@@ -13,7 +13,8 @@ const ButtonIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >

package/src/components/Button/ButtonRoot.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 import { ButtonContext } from './Button.context';
 import type { BaseButtonProps } from './Button.props';
 
@@ -17,7 +17,7 @@ const ButtonRoot = ({
   ...props
 }: BaseButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active, disabled = false } = states || {};
-  const { pressed } = useCardActionContext();
+  const { pressed } = useCardPressHandlerContext();
 
   styles.useVariants({
     variant,
@@ -103,7 +103,6 @@ const styles = StyleSheet.create(theme => ({
         ghost: {
           backgroundColor: 'transparent',
           borderWidth: 0,
-          textDecoration: 'underline',
         },
       },
       size: {
@@ -349,7 +348,6 @@ const styles = StyleSheet.create(theme => ({
         variant: 'ghost',
         colorScheme: 'functional',
         styles: {
-          textDecorationColor: theme.color.interactive.functional.foreground.subtle,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
@@ -397,7 +395,6 @@ const styles = StyleSheet.create(theme => ({
         variant: 'ghost',
         colorScheme: 'affirmative',
         styles: {
-          textDecorationColor: theme.color.interactive.affirmative.foreground.subtle,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
@@ -421,7 +418,6 @@ const styles = StyleSheet.create(theme => ({
         variant: 'ghost',
         colorScheme: 'destructive',
         styles: {
-          textDecorationColor: theme.color.interactive.destructive.foreground.subtle,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,

package/src/components/Button/ButtonText.tsx

@@ -22,7 +22,10 @@ const styles = StyleSheet.create(theme => ({
         emphasis: {},
         solid: {},
         outline: {},
-        ghost: {},
+        ghost: {
+          textDecorationStyle: 'solid',
+          textDecorationLine: 'underline',
+        },
       },
       colorScheme: {
         highlight: {},

package/src/components/Card/Card.context.ts

@@ -1,7 +1,14 @@
 import { createContext, useContext } from 'react';
+import CardProps from './Card.props';
 
 interface CardContextProps {
   pressed?: boolean;
+  noPadding?: boolean;
+  hasActions?: boolean;
+  hasContent?: boolean;
+  hasOnlyActions?: boolean;
+  space?: CardProps['space'];
+  variant?: CardProps['variant'];
 }
 
 export const CardContext = createContext<CardContextProps>({});

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

@@ -2,6 +2,7 @@ import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/bl
 import { BodyText, Card, Center, DetailText } from '../../';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Card.stories';
+import * as ActionStories from './CardAction/CardAction.stories';
 
 <Meta title="Components / Card" />
 
@@ -16,8 +17,18 @@ A Card component serves as a visual container that groups related content and ac
 - [Playground](#playground)
 - [Usage](#usage)
 - [Props](#props)
+  - [`CardPressHandler` Props](#cardpresshandler-props)
+  - [`CardAction` Props](#cardaction-props)
 - [Variants](#variants)
-- [Interactive](#interactive)
+- [Examples](#examples)
+  - [Interactive](#interactive)
+  - [With `CardAction`](#with-cardaction)
+    - [`CardAction` Playground](#cardaction-playground)
+    - [`CardAction` With Badge](#cardaction-with-badge)
+    - [`CardAction` Size Variants](#cardaction-size-variants)
+    - [`CardAction` Advanced Usage with Children](#cardaction-advanced-usage-with-children)
+    - [`CardAction` Component Parts](#cardaction-component-parts)
+    - [`CardAction` Accessibility](#cardaction-accessibility)
 
 ## Playground
 
@@ -55,7 +66,7 @@ const MyComponent = () => (
 | 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`           |
 | selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
-| onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | -                 |
+| onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | `-`               |
 | disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
 | space          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                           | The space between the content.             | `none`            |
 | alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                  | The align items of the flex container.     | `flex-start`      |
@@ -66,42 +77,237 @@ const MyComponent = () => (
 | rowGap         | `number`                                                                                                                                     | The row gap between the content.           | `0`               |
 | columnGap      | `number`                                                                                                                                     | The column gap between the content.        | `0`               |
 
-### `CardAction`
+### `CardPressHandler` Props
 
-| Property        | Type     | Description                                                                | Default   |
-| --------------- | -------- | -------------------------------------------------------------------------- | --------- |
-| actionToInherit | `string` | The action to inherit from the child component when the `Card` is pressed. | `onPress` |
+| Property         | Type     | Description                                                                 | Default   |
+| ---------------- | -------- | --------------------------------------------------------------------------- | --------- |
+| handlerToInherit | `string` | The handler to inherit from the child component when the `Card` is pressed. | `onPress` |
+
+### `CardAction` Props
+
+| Property             | Type                                                                                               | Description                                              | Default    |
+| -------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- |
+| loading              | `boolean`                                                                                          | Show loading skeleton state                              | `false`    |
+| disabled             | `boolean`                                                                                          | Disable interactions                                     | `false`    |
+| size                 | `'md' \| 'lg'`                                                                                     | Size of the heading text                                 | `'md'`     |
+| onPress              | `() => void`                                                                                       | Callback when the action is pressed                      | `-`        |
+| heading              | `string`                                                                                           | The main heading text (required when not using children) | `-`        |
+| helperText           | `string`                                                                                           | Optional secondary text below the heading                | `-`        |
+| leadingIcon          | `ReactNode`                                                                                        | The leading icon.                                        | `-`        |
+| trailingIcon         | `ReactNode`                                                                                        | The trailing icon.                                       | `-`        |
+| leadingContent       | `ReactNode`                                                                                        | Content to display on the left (typically an icon)       | `-`        |
+| trailingContent      | `ReactNode`                                                                                        | Content to display on the right (typically an icon)      | `-`        |
+| iconContainer        | `boolean`                                                                                          | Whether to show the icon container                       | `false`    |
+| iconContainerVariant | `'subtle' \| 'emphasis'`                                                                           | Variant of the icon container                            | `'subtle'` |
+| iconContainerColor   | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Semantic colour family for surface tokens                | `pig`      |
+| badge                | `BadgeProps`                                                                                       | Badge configuration object                               |            |
+| badgePosition        | `'bottom' \| 'middle' \| 'right' \| 'top'`                                                         | Position of the badge                                    | `'bottom'` |
 
 ## Variants
 
 <Canvas of={Stories.Variants} />
 
-## Interactive
+## Examples
+
+### Interactive
 
 You can make the card interactive by adding an `onPress` prop. You can also toggle the `selected` prop
 to change the card's appearance.
 
-Alternatively to make the card inherit an action from a child component, you can use the `CardAction` component.
-This will by default inherit the `onPress` action from the child component. You can specify a different action
-by passing the `actionToInherit` prop e.g `onChange`. Wrapping a component in a `CardAction` component will
+Alternatively to make the card inherit an event handler from a child component, you can use the `CardPressHandler` component.
+This will by default inherit the `onPress` handler from the child component. You can specify a different action
+by passing the `handlerToInherit` prop e.g `onChange`. Wrapping a component in a `CardPressHandler` component will
 make the card interactive and also show the `active` state of the child component when the `Card` is pressed.
 
 <Canvas of={Stories.Interactive} />
 
-See example below for how to use the `CardAction` component:
+See example below for how to use the `CardPressHandler` component:
 
 ```jsx
-import { Card, CardAction, BodyText, Heading, Felx, Button } from '@utilitywarehouse/hearth-react-native';
+import {
+  Card,
+  CardPressHandler,
+  BodyText,
+  Heading,
+  Flex,
+  Button,
+} from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <Card variant="emphasis" colorScheme="neutralSubtle">
     <Flex space="md" direction="column" align="stretch">
       <Heading size="md">Heading</Heading>
-      <BodyText>{children as string}</BodyText>
-      <CardAction>
+      <BodyText>Content</BodyText>
+      <CardPressHandler>
         <Button onPress={() => console.log('pressed')}>Press me</Button>
-      </CardAction>
+      </CardPressHandler>
     </Flex>
   </Card>
 );
 ```
+
+### With `CardAction`
+
+You can use the `CardAction` component within a `Card` to create actionable items with consistent styling.
+
+<Canvas of={Stories.WithActions} />
+
+```jsx
+import { Card, CardAction, BodyText, Heading, Flex } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Card variant="emphasis">
+    <BodyText>Content</BodyText>
+    <CardAction
+      onPress={() => console.log('Card action pressed')}
+      heading="Card Action Head"
+      helperText="Some helper text"
+      leadingIcon={BellMediumIcon}
+    />
+    <CardAction
+      onPress={() => console.log('Card action pressed')}
+      heading="Card Action Head"
+      leadingIcon={BellMediumIcon}
+    />
+    <CardAction
+      onPress={() => console.log('Card action pressed')}
+      heading="Card Action Head"
+      helperText="Testing"
+      leadingIcon={BellMediumIcon}
+      iconContainer={false}
+    />
+  </Card>
+);
+```
+
+#### `CardAction` Playground
+
+<Canvas of={ActionStories.Playground} />
+<Controls of={ActionStories.Playground} />
+
+#### `CardAction` With Badge
+
+The badge can be positioned in three different locations:
+
+```tsx
+import { Card, CardAction } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <>
+    {/* Badge at bottom (default) */}
+    <Card>
+      <CardAction
+        heading="Action"
+        helperText="Helper text"
+        badge={{ text: 'New' }}
+        badgePosition="bottom"
+        onPress={() => console.log('pressed')}
+      />
+    </Card>
+
+    {/* Badge in middle (between heading and helper text) */}
+    <Card>
+      <CardAction
+        heading="Action"
+        helperText="Helper text"
+        badge={{ text: 'New' }}
+        badgePosition="middle"
+        onPress={() => console.log('pressed')}
+      />
+    </Card>
+
+    {/* Badge on the right */}
+    <Card>
+      <CardAction
+        heading="Action"
+        helperText="Helper text"
+        badge={{ text: 'New' }}
+        badgePosition="right"
+        onPress={() => console.log('pressed')}
+      />
+    </Card>
+  </>
+);
+```
+
+#### `CardAction` Size Variants
+
+```tsx
+import { Card, CardAction } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <>
+    <Card>
+      <CardAction
+        heading="Medium heading"
+        helperText="Default md size"
+        size="md"
+        onPress={() => console.log('pressed')}
+      />
+    </Card>
+
+    <Card>
+      <CardAction
+        heading="Large heading"
+        helperText="Larger lg size"
+        size="lg"
+        onPress={() => console.log('pressed')}
+      />
+    </Card>
+  </>
+);
+```
+
+#### `CardAction` Advanced Usage with Children
+
+For more complex layouts, you can use the component parts directly:
+
+```tsx
+import {
+  Card,
+  CardAction,
+  CardActionLeadingContent,
+  CardActionContent,
+  CardActionText,
+  CardActionHelperText,
+  CardActionTrailingContent,
+  CardActionIcon,
+  CardActionTrailingIcon,
+} from '@utilitywarehouse/hearth-react-native';
+import {
+  ElectricityMediumIcon,
+  ChevronRightSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => (
+  <Card>
+    <CardAction onPress={() => console.log('pressed')}>
+      <CardActionLeadingContent>
+        <CardActionIcon as={ElectricityMediumIcon} />
+      </CardActionLeadingContent>
+      <CardActionContent>
+        <CardActionText>Custom Layout</CardActionText>
+        <CardActionHelperText>With complete control</CardActionHelperText>
+      </CardActionContent>
+      <CardActionTrailingContent>
+        <CardActionTrailingIcon as={ChevronRightSmallIcon} />
+      </CardActionTrailingContent>
+    </CardAction>
+  </Card>
+);
+```
+
+#### `CardAction` Component Parts
+
+- `CardAction` - Main component wrapper
+- `CardActionContent` - Container for text content
+- `CardActionText` - Heading text
+- `CardActionHelperText` - Secondary helper text
+- `CardActionLeadingContent` - Container for leading content
+- `CardActionTrailingContent` - Container for trailing content
+- `CardActionIcon` - Styled icon for leading content
+- `CardActionTrailingIcon` - Styled icon for trailing content
+
+#### `CardAction` Accessibility
+
+The component automatically sets `accessibilityRole="button"` when an `onPress` handler is provided, ensuring proper screen reader announcements.