feat(native-ui): add onPress prop to Alert (#665)

utilitywarehouse · Jan 23, 2025 · e46c3b0 · e46c3b0
1 parent c701ed6
commit e46c3b0
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 2,646 deletions.
diff --git a/.changeset/curly-peas-sin.md b/.changeset/curly-peas-sin.md
@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Adds `onPress` prop to `Alert`
diff --git a/apps/native-ui-storybook/components/Alert/Alert.docs.mdx b/apps/native-ui-storybook/components/Alert/Alert.docs.mdx
@@ -79,15 +79,18 @@ const MyComponent = () => {
 
 ## Props
 
-| Property            | Type                                   | Description                                                        | Default |
-| ------------------- | -------------------------------------- | ------------------------------------------------------------------ | ------- |
-| `colorScheme`       | `'cyan' \| 'green' \| 'gold' \| 'red'` | The colour scheme of the alert. Mapped to an icon.                 | 'info'  |
-| `title`             | `string`                               | The title of the alert.                                            |         |
-| `text`              | `string`                               | The text of the alert.                                             |         |
-| `link`              | `string`                               | The text of the link.                                              |         |
-| `onPressLink`       | `() => void`                           | A callback function to be called when the link is clicked.         |         |
-| `onPressIconButton` | `() => void`                           | A callback function to be called when the icon button is clicked.  |         |
-| `onClose`           | `() => void`                           | A callback function to be called when the close button is clicked. |         |
+| Property            | Type                                   | Description                                                       | Default |
+| ------------------- | -------------------------------------- | ----------------------------------------------------------------- | ------- |
+| `colorScheme`       | `'cyan' \| 'green' \| 'gold' \| 'red'` | The colour scheme of the alert. Mapped to an icon.                | 'info'  |
+| `title`             | `string`                               | The title of the alert.                                           |         |
+| `text`              | `string`                               | The text of the alert.                                            |         |
+| `link`              | `string`                               | The text of the link.                                             |         |
+| `linkTestID`        | `string`                               | The testID of the link.                                           |         |
+| `iconButtonTestID`  | `string`                               | The testID of the icon button.                                    |         |
+| `onPress`           | `() => void`                           | A callback function to be called when the alert is tapped.        |         |
+| `onPressLink`       | `() => void`                           | A callback function to be called when the link is tapped.         |         |
+| `onPressIconButton` | `() => void`                           | A callback function to be called when the icon button is tapped.  |         |
+| `onClose`           | `() => void`                           | A callback function to be called when the close button is tapped. |         |
 
 ## Variants
 
@@ -106,15 +109,15 @@ If you need to use the Alert component in a more advanced way, you can use the p
       <VStack space="lg" style={{flex: 1}}>
         <AlertTitle>Information</AlertTitle>
         <AlertText>Unlock the power of knowledge with the following information.</AlertText>
-        <AlertLink onPress={() => console.log('Link clicked')}>
+        <AlertLink onPress={() => console.log('Link tapped')}>
           <AlertLinkText>Learn more</AlertLinkText>
           <AlertLinkChevron />
         </AlertLink>
       </VStack>
-      <AlertIconButton onPress={() => console.log('Icon button clicked')}>
+      <AlertIconButton onPress={() => console.log('Icon button tapped')}>
         <AlertIconButtonChevron />
       </AlertIconButton>
-      <AlertCloseButton onClose={() => console.log('Close button clicked')}>
+      <AlertCloseButton onClose={() => console.log('Close button tapped')}>
         <AlertCloseButtonIcon />
       </AlertCloseButton>
     </Alert>
@@ -146,17 +149,17 @@ const MyComponent = () => {
         <AlertTitle>Information</AlertTitle>
         <AlertText>Unlock the power of knowledge with the following information.</AlertText>
 
-        <AlertLink onPress={() => console.log('Link clicked')}>
+        <AlertLink onPress={() => console.log('Link tapped')}>
           <AlertLinkText>Learn more</AlertLinkText>
           <AlertLinkChevron />
         </AlertLink>
       </VStack>
       {/* Note: AlertIconButton should not be used with the AlertLink component */}
-      <AlertIconButton onPress={() => console.log('Icon button clicked')}>
+      <AlertIconButton onPress={() => console.log('Icon button tapped')}>
         <AlertIconButtonChevron />
       </AlertIconButton>
 
-      <AlertCloseButton onClose={() => console.log('Close button clicked')}>
+      <AlertCloseButton onClose={() => console.log('Close button tapped')}>
         <AlertCloseButtonIcon />
       </AlertCloseButton>
     </Alert>

diff --git a/apps/native-ui-storybook/components/Icon/Icon.tsx b/apps/native-ui-storybook/components/Icon/Icon.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 
 import { Icon, createIcon, HStack } from '@utilitywarehouse/native-ui';
 import * as Icons from '@utilitywarehouse/react-native-icons';
-import { Path, Rect } from 'react-native-svg';
+import Svg, { Path, Rect } from 'react-native-svg';
 import { colors } from '@utilitywarehouse/colour-system';
 import { StoryFn } from '@storybook/react';
 
@@ -38,6 +38,7 @@ IconBasic.args = {
 };
 
 export const GluestackIcon = createIcon({
+  Root: Svg,
   viewBox: '0 0 32 32',
   path: (
     <>

diff --git a/apps/native-ui-storybook/docs/components/BackToTopButton.tsx b/apps/native-ui-storybook/docs/components/BackToTopButton.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonIcon, ButtonText, NativeUIProvider } from '@utilitywarehouse/native-ui';
+import { Button, ButtonIcon, ButtonText } from '@utilitywarehouse/native-ui';
 import { ChevronUpSmallIcon } from '@utilitywarehouse/react-native-icons';
 import React, { useState } from 'react';
 import { Platform } from 'react-native';

diff --git a/apps/native-ui-storybook/docs/components/ViewFigmaButton.tsx b/apps/native-ui-storybook/docs/components/ViewFigmaButton.tsx
@@ -2,14 +2,16 @@ import { Button, ButtonIcon, ButtonText, createIcon } from '@utilitywarehouse/na
 import { ChevronRightSmallIcon } from '@utilitywarehouse/react-native-icons';
 import React from 'react';
 import { Platform } from 'react-native';
-import { Path } from 'react-native-svg';
+import Svg, { Path } from 'react-native-svg';
 
 interface Props {
   url: string;
 }
 
 const FigmaIcon = createIcon({
+  Root: Svg,
   viewBox: '0 0 24 24',
+
   path: (
     <Path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z" />
   ),
@@ -30,7 +32,7 @@ const ViewFigmaButton: React.FC<Props> = ({ url }) => (
       }}
       onPress={() => window.open(url)}
     >
-      <ButtonIcon as={FigmaIcon} />
+      <ButtonIcon as={FigmaIcon} width={24} height={24} />
       <ButtonText>View in Figma</ButtonText>
       <ButtonIcon as={ChevronRightSmallIcon} />
     </Button>

diff --git a/packages/native-ui/src/components/Alert/Alert.props.ts b/packages/native-ui/src/components/Alert/Alert.props.ts
@@ -1,9 +1,9 @@
-import type { ViewProps } from 'react-native';
+import type { PressableProps } from 'react-native';
 
 /**
  * Props for the Alert component.
  */
-interface AlertWithoutChildrenProps extends ViewProps {
+interface AlertWithoutChildrenProps extends PressableProps {
   /**
    * The text content of the alert.
    */
@@ -19,6 +19,16 @@ interface AlertWithoutChildrenProps extends ViewProps {
    */
   link?: string;
 
+  /**
+   * The test ID for the link.
+   */
+  linkTestID?: string;
+
+  /**
+   * The test ID for the icon button.
+   */
+  iconButtonTestID?: string;
+
   /**
    * The color scheme of the alert.
    * Possible values: 'cyan', 'green', 'gold', 'red'.
@@ -44,7 +54,7 @@ interface AlertWithoutChildrenProps extends ViewProps {
 }
 
 interface AlertWithChildrenProps
-  extends ViewProps,
+  extends PressableProps,
     Omit<AlertWithoutChildrenProps, 'text' | 'children'> {
   text?: never;
   onPressLink?: never;

diff --git a/packages/native-ui/src/components/Alert/Alert.tsx b/packages/native-ui/src/components/Alert/Alert.tsx
@@ -6,7 +6,7 @@ import AlertCloseButton, { AlertCloseButtonIcon } from './AlertCloseButton';
 import type { AlertProps } from './Alert.props';
 import { AlertContext } from './Alert.context';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
-import { View } from 'react-native';
+import { View, Pressable, ViewStyle } from 'react-native';
 import AlertText from './AlertText';
 import AlertIcon from './AlertIcon';
 
@@ -21,6 +21,9 @@ const Alert = forwardRef<View, AlertProps>(
       onPressIconButton,
       onClose,
       children,
+      onPress,
+      iconButtonTestID,
+      linkTestID,
       style,
       ...props
     },
@@ -42,7 +45,13 @@ const Alert = forwardRef<View, AlertProps>(
 
     return (
       <AlertContext.Provider value={value}>
-        <View ref={ref} {...props} style={[styles.container, style]}>
+        <Pressable
+          ref={ref}
+          {...props}
+          style={[styles.container, style as ViewStyle]}
+          onPress={onPress}
+          disabled={!onPress}
+        >
           {children ? (
             children
           ) : (
@@ -52,14 +61,14 @@ const Alert = forwardRef<View, AlertProps>(
                 {!!title && <AlertTitle>{title}</AlertTitle>}
                 <AlertText>{text}</AlertText>
                 {!!link && (
-                  <AlertLink onPress={onPressLink}>
+                  <AlertLink onPress={onPressLink} testID={linkTestID}>
                     <AlertLinkText>{link}</AlertLinkText>
                     <AlertLinkChevron />
                   </AlertLink>
                 )}
               </View>
-              {!!onPressIconButton && !link && (
-                <AlertIconButton onPress={onPressIconButton}>
+              {(!!onPressIconButton || !!onPress) && !link && (
+                <AlertIconButton onPress={onPressIconButton || onPress} testID={iconButtonTestID}>
                   <AlertIconButtonChevron />
                 </AlertIconButton>
               )}
@@ -70,7 +79,7 @@ const Alert = forwardRef<View, AlertProps>(
               )}
             </>
           )}
-        </View>
+        </Pressable>
       </AlertContext.Provider>
     );
   }

diff --git a/packages/native-ui/src/lab/Carousel/CarouselItems.tsx b/packages/native-ui/src/lab/Carousel/CarouselItems.tsx
@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import { AccessibilityActionEvent, FlatList, ViewToken, ViewStyle } from 'react-native';
 
-import { Box } from '../';
+import { Box } from '../../components';
 import CarouselContext from './Carousel.context';
 import { CarouselItemProps, CarouselItemsProps, CarouselRef } from './Carousel.props';
 

diff --git a/packages/native-ui/src/lab/Carousel/CarouselPagination.tsx b/packages/native-ui/src/lab/Carousel/CarouselPagination.tsx
@@ -1,9 +1,7 @@
 import { nanoid } from 'nanoid/non-secure';
 import React, { FC, useContext, useEffect, useMemo } from 'react';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
-
-import { Text } from '../../components/Text';
-import { Box } from '../';
+import { Box, Text } from '../../components';
 import { CarouselPaginationProps, CarouselPaginationItemProps } from './Carousel.props';
 import CarouselContext from './Carousel.context';