@hero-design/rn 7.4.0 → 7.5.0

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;