@hero-design/rn 7.3.2 → 7.6.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;

package/src/components/BottomSheet/Footer.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { View } from 'react-native';
+import Divider from '../Divider';
+import { StyledFooter } from './StyledBottomSheet';
+
+const Footer = ({
+  children,
+  showDivider,
+}: {
+  children: ReactNode;
+  showDivider: boolean;
+}) => (
+  <View>
+    {showDivider ? <Divider /> : null}
+    <StyledFooter>{children}</StyledFooter>
+  </View>
+);
+
+export default Footer;

package/src/components/BottomSheet/Header.tsx

@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react';
+import { View } from 'react-native';
+import Button from '../Button';
+import Divider from '../Divider';
+import Typography from '../Typography';
+import {
+  StyledHeader,
+  StyledHeaderWrapper,
+  StyledIconWrapper,
+} from './StyledBottomSheet';
+
+const Header = ({
+  content,
+  showDivider,
+  onRequestClose = () => {},
+  showCloseButton,
+}: {
+  content: string | ReactElement;
+  showDivider: boolean;
+  onRequestClose?: () => void;
+  showCloseButton: boolean;
+}) => (
+  <>
+    <StyledHeaderWrapper>
+      {typeof content === 'string' ? (
+        <StyledHeader adjacentIcon={showCloseButton}>
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
+            {content}
+          </Typography.Text>
+        </StyledHeader>
+      ) : (
+        <View style={{ flex: 1 }}>{content}</View>
+      )}
+      {showCloseButton ? (
+        <StyledIconWrapper>
+          <Button.Icon
+            icon="cancel"
+            onPress={onRequestClose}
+            intent="text"
+            testID="bottom-sheet-close-icon"
+          />
+        </StyledIconWrapper>
+      ) : null}
+    </StyledHeaderWrapper>
+    {showDivider ? <Divider /> : null}
+  </>
+);
+
+export default Header;

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import { Animated, Pressable, StyleSheet, View, ViewProps } from 'react-native';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const StyledWrapper = styled(View)<ViewProps>({
+  ...StyleSheet.absoluteFillObject,
+  flexDirection: 'column-reverse',
+});
+
+const StyledBottomSheet = styled(Animated.View)<
+  ComponentProps<typeof Animated.View>
+>(({ theme }) => ({
+  borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
+  borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
+  backgroundColor: theme.__hd__.bottomSheet.colors.background,
+  width: '100%',
+  shadowColor: theme.__hd__.bottomSheet.colors.shadow,
+  shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
+  shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
+  shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
+  elevation: theme.__hd__.bottomSheet.shadows.elevation,
+  maxHeight: '94%',
+}));
+
+const StyledBackdrop = styled(AnimatedPressable)<
+  ComponentProps<typeof AnimatedPressable>
+>(({ theme }) => ({
+  ...StyleSheet.absoluteFillObject,
+  backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
+  opacity: 0.48,
+}));
+
+const StyledHeaderWrapper = styled(View)(({ theme }) => ({
+  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
+  flexDirection: 'row',
+}));
+
+const StyledHeader = styled(View)<{ adjacentIcon: boolean }>(
+  ({ theme, adjacentIcon }) => ({
+    flex: 1,
+    paddingLeft: theme.__hd__.bottomSheet.space.horizontalPadding,
+    paddingRight: adjacentIcon
+      ? 0
+      : theme.__hd__.bottomSheet.space.horizontalPadding,
+    paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
+    justifyContent: 'center',
+  })
+);
+
+const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.bottomSheet.space.horizontalPadding,
+  paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
+  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  flexDirection: 'row',
+}));
+
+const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: theme.__hd__.bottomSheet.sizes.closeIconWidth,
+}));
+
+export {
+  StyledWrapper,
+  StyledHeaderWrapper,
+  StyledHeader,
+  StyledFooter,
+  StyledIconWrapper,
+  StyledBottomSheet,
+  StyledBackdrop,
+};