@hero-design/rn 7.4.0 → 7.6.1-alpha

package/src/components/Alert/__tests__/index.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Alert from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+
+describe('Alert', () => {
+  it.each`
+    intent
+    ${'success'}
+    ${'warning'}
+    ${'info'}
+    ${'error'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Alert
+        title="Title"
+        content="Content"
+        intent={intent}
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('alert-left-icon')).toBeDefined();
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+    expect(getByTestId('alert-close-icon')).toBeDefined();
+  });
+
+  describe('Icon', () => {
+    it('not render icon when icon prop is null', () => {
+      const { queryByTestId } = renderWithTheme(
+        <Alert icon={null} content="Content" />
+      );
+
+      expect(queryByTestId('alert-left-icon')).toBeNull();
+    });
+
+    it('render custom icon correctly', () => {
+      const { toJSON } = renderWithTheme(
+        <Alert icon="home" content="Content" />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('Title', () => {
+    it('not render title when title is undefined', () => {
+      const { queryByText } = renderWithTheme(<Alert content="Content" />);
+
+      expect(queryByText('Title')).toBeNull();
+    });
+
+    it('renders custom title correctly', () => {
+      const { getByText } = renderWithTheme(
+        <Alert
+          title={<Typography.Text>Custom Title</Typography.Text>}
+          content="Content"
+        />
+      );
+      expect(getByText('Custom Title')).toBeDefined();
+    });
+  });
+
+  describe('Content', () => {
+    it('renders custom content correctly', () => {
+      const { getByText } = renderWithTheme(
+        <Alert content={<Typography.Text>Custom Content</Typography.Text>} />
+      );
+
+      expect(getByText('Custom Content')).toBeDefined();
+    });
+
+    it('not renders close icon when onClose callback is undefined', () => {
+      const { queryByTestId } = renderWithTheme(
+        <Alert title="Title" content="Content" />
+      );
+
+      expect(queryByTestId('alert-close-icon')).toBeNull();
+    });
+  });
+});

package/src/components/Alert/index.tsx

@@ -0,0 +1,109 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import {
+  Container,
+  ContentContainer,
+  CTAWrapper,
+  IconContainer,
+  TextContainer,
+} from './StyledAlert';
+
+const getIntentIcon = (
+  intent: 'success' | 'info' | 'warning' | 'error'
+): IconName => {
+  switch (intent) {
+    case 'success':
+      return 'circle-ok';
+    case 'warning':
+      return 'warning';
+    case 'info':
+      return 'circle-info';
+    case 'error':
+      return 'circle-warning';
+  }
+};
+
+interface AlertProps {
+  /**
+   * Alert title.
+   */
+  title?: string | ReactElement;
+  /**
+   * Alert content.
+   */
+  content: string | ReactElement;
+  /**
+   * Icon name of the alert.
+   * - undefined: use default icon according to Alert intent.
+   * - null: no icon at all.
+   * - IconName: an icon identifier from hero-design icon list.
+   */
+  icon?: null | IconName;
+  /**
+   * Visual intent color to apply to alert.
+   */
+  intent?: 'success' | 'info' | 'warning' | 'error';
+  /**
+   * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
+   */
+  onClose?: () => void;
+  /**
+   * Use rounded variant.
+   */
+  variant?: 'default' | 'round';
+  /**
+   * Addtional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Alert = ({
+  content,
+  icon,
+  title,
+  intent = 'info',
+  onClose,
+  variant = 'default',
+  style,
+  testID,
+}: AlertProps): JSX.Element => (
+  <Container
+    themeVariant={variant}
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+  >
+    <ContentContainer showDivider={!!onClose}>
+      {icon !== null ? (
+        <IconContainer testID="alert-left-icon">
+          <Icon icon={icon || getIntentIcon(intent)} size="small" />
+        </IconContainer>
+      ) : null}
+      <TextContainer>
+        {typeof title === 'string' ? (
+          <Typography.Text fontWeight="semi-bold">{title}</Typography.Text>
+        ) : (
+          title
+        )}
+        {typeof content === 'string' ? (
+          <Typography.Text>{content}</Typography.Text>
+        ) : (
+          content
+        )}
+      </TextContainer>
+    </ContentContainer>
+    {onClose ? (
+      <CTAWrapper onPress={onClose} testID="alert-close-icon">
+        <Icon icon="cancel" size="small" />
+      </CTAWrapper>
+    ) : null}
+  </Container>
+);
+
+export default Alert;

package/src/components/BottomSheet/Header.tsx

@@ -24,7 +24,7 @@ const Header = ({
     <StyledHeaderWrapper>
       {typeof content === 'string' ? (
         <StyledHeader adjacentIcon={showCloseButton}>
-          <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
             {content}
           </Typography.Text>
         </StyledHeader>

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap

@@ -111,14 +111,14 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                 Object {
                   "color": "#292a2b",
                   "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.54,
-                  "lineHeight": 26,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="xlarge"
+            themeFontSize="large"
             themeFontWeight="semi-bold"
             themeIntent="body"
           >
@@ -376,14 +376,14 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                 Object {
                   "color": "#292a2b",
                   "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 18,
-                  "letterSpacing": 0.54,
-                  "lineHeight": 26,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 undefined,
               ]
             }
-            themeFontSize="xlarge"
+            themeFontSize="large"
             themeFontWeight="semi-bold"
             themeIntent="body"
           >

package/src/components/BottomSheet/index.tsx

@@ -40,6 +40,10 @@ interface BottomSheetProps {
    * is being dismiss by interacting outside of the bottom sheet.
    */
   onRequestClose?: () => void;
+  /**
+   * Callback that is called once the bottom sheet has been dismissed.
+   */
+  onDismiss?: () => void;
   /**
    * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
    */
@@ -69,6 +73,7 @@ const BottomSheet = ({
   children,
   onOpen,
   onRequestClose,
+  onDismiss,
   showCloseButton = true,
   hasBackdrop = true,
   showDivider = true,
@@ -93,6 +98,7 @@ const BottomSheet = ({
       const endValueOfTransition = open ? 1 : 0;
       if (endValueOfTransition === 0 && value === endValueOfTransition) {
         setVisibility(false);
+        onDismiss?.();
       }
     });