@utilitywarehouse/hearth-react-native 0.30.4 → 0.31.1

package/src/components/ExpandableCard/ExpandableCard.tsx

@@ -14,6 +14,7 @@ const ExpandableCard = ({
   badge,
   badgePosition = 'bottom',
   numericValue,
+  triggerContent,
   expandedContent,
   duration = 200,
   animateOpacity = true,
@@ -39,18 +40,25 @@ const ExpandableCard = ({
     onExpandedChange?.(newExpanded);
   };
 
+  const triggerProps =
+    triggerContent !== undefined
+      ? { triggerContent }
+      : {
+          heading,
+          helperText,
+          leadingIcon,
+          leadingContent,
+          badge,
+          badgePosition,
+          numericValue,
+        };
+
   const renderDefaultContent = () => (
     <>
       <ExpandableCardTrigger
         onPress={handlePress}
         disabled={disabled}
-        heading={heading}
-        helperText={helperText}
-        leadingIcon={leadingIcon}
-        leadingContent={leadingContent}
-        badge={badge}
-        badgePosition={badgePosition}
-        numericValue={numericValue}
+        {...triggerProps}
         isExpanded={isExpanded}
         testID={`${testID}-trigger`}
       />

package/src/components/ExpandableCard/ExpandableCardText.tsx

@@ -3,7 +3,7 @@ import { BodyText } from '../BodyText';
 
 const ExpandableCardText = ({ children, ...props }: TextProps) => {
   return (
-    <BodyText size="lg" {...props}>
+    <BodyText size="md" weight="semibold" {...props}>
       {children}
     </BodyText>
   );

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

@@ -1,7 +1,25 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { PressableProps } from 'react-native';
 
-export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'children'> {
+interface ExpandableCardTriggerSharedProps extends Omit<PressableProps, 'children'> {
+  /**
+   * Whether the expandable card is expanded
+   */
+  isExpanded: boolean;
+  /**
+   * Whether to show the chevron when providing custom children.
+   * @default true
+   */
+  showChevron?: boolean;
+  /**
+   * Whether the trigger is disabled
+   */
+  disabled?: boolean;
+  /* Optional children */
+  children?: ReactNode;
+}
+
+interface ExpandableCardTriggerDefaultContentProps {
   /**
    * The main heading text
    */
@@ -31,16 +49,28 @@ export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'childr
    * Optional numeric value to display
    */
   numericValue?: string | number;
+
   /**
-   * Whether the expandable card is expanded
+   * Custom trigger content that replaces the default trigger layout.
    */
-  isExpanded: boolean;
+  triggerContent?: never;
+}
+
+interface ExpandableCardTriggerCustomContentProps {
   /**
-   * Whether the trigger is disabled
+   * Custom trigger content that replaces the default trigger layout.
    */
-  disabled?: boolean;
-  /* Optional children */
-  children?: ReactNode;
+  triggerContent: ReactNode;
+  heading?: never;
+  helperText?: never;
+  leadingIcon?: never;
+  leadingContent?: never;
+  badge?: never;
+  badgePosition?: never;
+  numericValue?: never;
 }
 
+type ExpandableCardTriggerProps = ExpandableCardTriggerSharedProps &
+  (ExpandableCardTriggerDefaultContentProps | ExpandableCardTriggerCustomContentProps);
+
 export default ExpandableCardTriggerProps;

package/src/components/ExpandableCard/ExpandableCardTriggerRoot.tsx

@@ -22,7 +22,9 @@ const ExpandableCardTriggerRoot = ({
   badge,
   badgePosition = 'bottom',
   numericValue,
+  triggerContent,
   isExpanded,
+  showChevron = true,
   disabled,
   states,
   children,
@@ -53,6 +55,8 @@ const ExpandableCardTriggerRoot = ({
     return null;
   };
 
+  const defaultAccessibilityLabel = [heading, helperText].filter(Boolean).join(', ');
+
   const renderDefaultContent = () => (
     <>
       {renderLeadingContent()}
@@ -73,6 +77,36 @@ const ExpandableCardTriggerRoot = ({
     </>
   );
 
+  const renderChevron = () => (
+    <ExpandableCardTrailingContent style={styles.chevron}>
+      <ExpandableCardTrailingIcon as={isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon} />
+    </ExpandableCardTrailingContent>
+  );
+
+  const renderCustomTriggerContent = () => (
+    <>
+      {triggerContent}
+      {showChevron ? renderChevron() : null}
+    </>
+  );
+
+  const renderChildrenContent = () => (
+    <>
+      {children}
+      {showChevron ? renderChevron() : null}
+    </>
+  );
+
+  let triggerBody = renderDefaultContent();
+
+  if (triggerContent !== undefined) {
+    triggerBody = renderCustomTriggerContent();
+  }
+
+  if (children) {
+    triggerBody = renderChildrenContent();
+  }
+
   return (
     <Pressable
       {...props}
@@ -81,9 +115,9 @@ const ExpandableCardTriggerRoot = ({
       disabled={disabled}
       accessibilityRole="button"
       accessibilityState={{ expanded: isExpanded, disabled }}
-      accessibilityLabel={`${heading}${helperText ? `, ${helperText}` : ''}`}
+      accessibilityLabel={props.accessibilityLabel || defaultAccessibilityLabel || undefined}
     >
-      {children || renderDefaultContent()}
+      {triggerBody}
     </Pressable>
   );
 };

package/src/components/Flex/Flex.props.ts

@@ -1,7 +1,21 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
+import {
+  DisplayProps,
+  FlexLayoutProps,
+  GapProps,
+  MarginProps,
+  PaddingProps,
+  SpacingValues,
+} from '../../types';
 
-interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
+interface FlexProps
+  extends
+    ViewProps,
+    MarginProps,
+    PaddingProps,
+    FlexLayoutProps,
+    GapProps,
+    Omit<DisplayProps, 'direction'> {
   direction?: ViewStyle['flexDirection'];
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];

package/src/components/FormField/FormField.tsx

@@ -1,6 +1,7 @@
 import { createFormControl } from '@gluestack-ui/form-control';
 import { useMemo, useState } from 'react';
 import { View } from 'react-native';
+import { BodyText } from '../BodyText';
 import { HelperIcon, HelperText } from '../Helper';
 import { FormFieldContext } from './FormField.context';
 import FormFieldProps from './FormField.props';
@@ -94,7 +95,7 @@ const FormField = ({
                 accessibilityElementsHidden={shouldHandleAccessibility}
               >
                 {label}
-                {!required ? ` (Optional)` : ''}
+                {!required ? <BodyText weight="regular"> (Optional)</BodyText> : ''}
               </FormFieldLabelText>
             )}
             {!!helperText && (

package/src/components/List/List.stories.tsx

@@ -10,6 +10,7 @@ import {
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
+import { FlatList } from 'react-native';
 import { List, ListAction, ListItem, ListItemIcon, ListItemTrailingIcon } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { Badge } from '../Badge';
@@ -398,6 +399,40 @@ export const Loading: Story = {
   ),
 };
 
+export const WithFlatList: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const listData = Array.from({ length: 200 }).map((_, index) => ({
+      id: index.toString(),
+      heading: `List Item ${index + 1}`,
+      helperText: `Supporting Text ${index + 1}`,
+    }));
+
+    return (
+      <List
+        container="subtleWhite"
+        heading="FlatList Example"
+        helperText="This list is rendered using FlatList for performance"
+      >
+        <FlatList
+          data={listData}
+          keyExtractor={item => item.id}
+          renderItem={({ item }) => (
+            <ListItem
+              heading={item.heading}
+              helperText={item.helperText}
+              leadingContent={<ListItemIcon as={SettingsMediumIcon} />}
+              onPress={() => console.log(`${item.heading} pressed`)}
+            />
+          )}
+        />
+      </List>
+    );
+  },
+};
+
 export const KitchenSink: Story = {
   parameters: {
     controls: { include: [] },

package/src/components/Modal/Modal.docs.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, BottomSheetModal, Box, Button, Center, Heading, Modal } from '../../';
+import { BodyText, BottomSheetModal, Box, Button, Center, Flex, Heading, Modal } from '../../';
 import StorybookLink from '../../../../../shared/storybook/StorybookLink';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Modal.stories';
@@ -28,6 +28,7 @@ If you need a modal layout inside a React Navigation modal screen, use <Storyboo
   - [Modal with Image](#modal-with-image)
   - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
+  - [Sticky Custom Footer](#sticky-custom-footer)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
@@ -107,9 +108,13 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                        | -              |
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')           | -              |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline')      | -              |
+| `footer`                      | `ReactNode`                                                        | Custom footer content that replaces the built-in action buttons                                                    | -              |
+| `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                         | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                       | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                            | `false`        |
 
+When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
+
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 
 ### `ModalImage` Props
@@ -371,6 +376,52 @@ const CustomContentModal = () => {
 };
 ```
 
+### Sticky Custom Footer
+
+Replace the built-in buttons with a custom sticky footer when you need custom layouts or button arrangements:
+
+<Canvas of={Stories.StickyCustomFooter} />
+
+```tsx
+const StickyCustomFooterModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Show Custom Footer Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Update billing details"
+        description="Use a custom sticky footer when you need horizontal actions or extra decoration."
+        footer={
+          <Flex direction="row" spacing="md" pt="250">
+            <Button
+              variant="outline"
+              colorScheme="functional"
+              onPress={() => modalRef.current?.dismiss()}
+              style={{ flex: 1 }}
+            >
+              Cancel
+            </Button>
+            <Button onPress={() => modalRef.current?.dismiss()} style={{ flex: 1 }}>
+              Save changes
+            </Button>
+          </Flex>
+        }
+        footerStyle={{
+          boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+        }}
+      >
+        <Box gap="200">
+          <BodyText>Review the changes before saving.</BodyText>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+```
+
 ### Loading State
 
 Show a loading spinner while processing:

package/src/components/Modal/Modal.props.ts

@@ -1,10 +1,25 @@
 import { BottomSheetProps } from '../BottomSheet';
-import { ModalCommonProps } from './Modal.shared.types';
+import {
+  ModalButtonFooterProps,
+  ModalCommonBaseProps,
+  ModalCustomFooterProps,
+} from './Modal.shared.types';
 
-interface ModalProps extends Omit<BottomSheetProps, 'children'>, ModalCommonProps {
-  fullscreen?: boolean;
-  closeOnPrimaryButtonPress?: boolean;
-  closeOnSecondaryButtonPress?: boolean;
-}
+type ModalBaseProps = Omit<BottomSheetProps, 'children'> &
+  ModalCommonBaseProps & {
+    fullscreen?: boolean;
+  };
+
+type ModalProps =
+  | (ModalBaseProps &
+      ModalButtonFooterProps & {
+        closeOnPrimaryButtonPress?: boolean;
+        closeOnSecondaryButtonPress?: boolean;
+      })
+  | (ModalBaseProps &
+      ModalCustomFooterProps & {
+        closeOnPrimaryButtonPress?: never;
+        closeOnSecondaryButtonPress?: never;
+      });
 
 export default ModalProps;

package/src/components/Modal/Modal.shared.types.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
-export interface ModalCommonProps {
+export interface ModalCommonBaseProps {
   loading?: boolean;
   image?: ReactNode;
   showCloseButton?: boolean;
@@ -13,12 +13,31 @@ export interface ModalCommonProps {
   description?: string;
   stickyFooter?: boolean;
   children?: ViewProps['children'];
+  onPressCloseButton?: () => void;
+  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+}
+
+export interface ModalButtonFooterProps {
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
   onPressSecondaryButton?: () => void;
   secondaryButtonText?: string;
-  onPressCloseButton?: () => void;
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
-  closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
+  footer?: never;
+  footerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface ModalCustomFooterProps {
+  footer: ReactNode;
+  footerStyle?: StyleProp<ViewStyle>;
+  onPressPrimaryButton?: never;
+  primaryButtonText?: never;
+  onPressSecondaryButton?: never;
+  secondaryButtonText?: never;
+  primaryButtonProps?: never;
+  secondaryButtonProps?: never;
 }
+
+export type ModalCommonProps = ModalCommonBaseProps &
+  (ModalButtonFooterProps | ModalCustomFooterProps);

package/src/components/Modal/Modal.stories.tsx

@@ -5,9 +5,10 @@ import { Modal, ModalImage } from '.';
 import pigs from '../../../docs/assets/pigs.png';
 import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
-import { BottomSheetModal } from '../BottomSheet';
+import { BottomSheetModal, BottomSheetModalProvider } from '../BottomSheet';
 import { Box } from '../Box';
 import { Button } from '../Button';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Modal',
@@ -164,6 +165,56 @@ export const WithCustomContent = () => {
   );
 };
 
+export const StickyCustomFooter = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  const openModal = () => {
+    modalRef.current?.present();
+  };
+
+  const closeModal = () => {
+    modalRef.current?.dismiss();
+  };
+
+  return (
+    <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+      <ViewWrap>
+        <Button onPress={openModal}>Open Modal</Button>
+
+        <Modal
+          ref={modalRef}
+          heading="Update billing details"
+          description="Review the changes below, then save or discard them using a custom sticky footer."
+          onPressCloseButton={closeModal}
+          footer={
+            <Flex direction="row" spacing="md" pt="250">
+              <Button
+                variant="outline"
+                colorScheme="functional"
+                onPress={closeModal}
+                style={{ flex: 1 }}
+              >
+                Cancel
+              </Button>
+              <Button onPress={closeModal} style={{ flex: 1 }}>
+                Save changes
+              </Button>
+            </Flex>
+          }
+          footerStyle={{
+            boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+          }}
+        >
+          <Box gap="200">
+            <BodyText>Billing address: 14 Park Street, Bristol</BodyText>
+            <BodyText>Preferred payment day: 15th of each month</BodyText>
+          </Box>
+        </Modal>
+      </ViewWrap>
+    </View>
+  );
+};
+
 export const Loading = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -239,3 +290,116 @@ export const FullscreenModal: Story = {
     );
   },
 };
+
+export const NoStickyFooter: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Modal Heading"
+            description="This is a modal description without a sticky footer."
+            onPressCloseButton={closeModal}
+            primaryButtonText="Primary"
+            onPressPrimaryButton={closeModal}
+            secondaryButtonText="Cancel"
+            onPressSecondaryButton={closeModal}
+            stickyFooter={false}
+          >
+            <Box gap="200">
+              <BodyText>This is a modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const NoFooter: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Modal Heading"
+            description="This is a modal description without a footer."
+            onPressCloseButton={closeModal}
+          >
+            <Box gap="200">
+              <BodyText>This is a modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const NoSafeArea: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <BottomSheetModalProvider useSafeAreaInsets={false}>
+        <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+          <ViewWrap>
+            <Button onPress={openModal}>Open Modal</Button>
+
+            <Modal
+              ref={modalRef}
+              heading="Modal Heading"
+              description="This is a modal description without safe area insets."
+              onPressCloseButton={closeModal}
+              primaryButtonText="Primary"
+              onPressPrimaryButton={closeModal}
+              secondaryButtonText="Cancel"
+              onPressSecondaryButton={closeModal}
+            >
+              <Box gap="200">
+                <BodyText>This is a modal with content.</BodyText>
+                <BodyText>You can swipe it up and down to close.</BodyText>
+              </Box>
+            </Modal>
+          </ViewWrap>
+        </View>
+      </BottomSheetModalProvider>
+    );
+  },
+};