@hero-design/rn 7.18.1 → 7.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.18.1",
+  "version": "7.20.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.18.1",
+    "@hero-design/colors": "7.20.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
@@ -62,6 +62,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.3.1",
@@ -76,7 +77,6 @@
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.5.5"
+    "ts-jest": "^27.0.7"
   }
 }

package/src/components/Accordion/AccordionItem.tsx

@@ -1,13 +1,14 @@
-import React, { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   StyledCollapse,
   StyledHeaderWrapper,
   StyledItemWrapper,
-  Variant,
 } from './StyledAccordion';
 import Typography from '../Typography';
 import Icon from '../Icon';
+import type { Variant } from './StyledAccordion';
 
 export type AccordionItemProps = {
   header: string | ReactElement;
@@ -38,7 +39,7 @@ const AccordionItem = ({
         header
       )}
       <Icon
-        icon={`arrow-${open ? 'up' : 'down'}`}
+        icon={open ? 'arrow-up' : 'arrow-down'}
         intent="primary"
         size="small"
       />

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Typography from '../../Typography';
-import Accordion, { AccordionProps } from '..';
+import Accordion from '..';
+import type { AccordionProps } from '..';
 
 const AccordionExample = (props: Omit<AccordionProps<string>, 'items'>) => (
   <Accordion

package/src/components/Accordion/index.tsx

@@ -1,5 +1,6 @@
-import React, { Key, ReactElement, useMemo } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import type { Key, ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import AccordionItem from './AccordionItem';
 import { Spacer, StyledWrapper } from './StyledAccordion';
 import { usePropsOrInternalState } from './utils';

package/src/components/Alert/StyledAlert.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/native';
-import { ComponentProps } from 'react';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 
 const Container = styled(View)<{
   themeVariant: 'default' | 'round';
-  themeIntent: 'success' | 'info' | 'warning' | 'error';
+  themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
 }>(({ theme, themeVariant = 'default', themeIntent }) => ({
   borderRadius: themeVariant === 'round' ? theme.__hd__.alert.radii.default : 0,
   backgroundColor: theme.__hd__.alert.colors[themeIntent],
@@ -14,17 +15,17 @@ const Container = styled(View)<{
 
 const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
-  paddingLeft: theme.__hd__.alert.space.padding,
+  paddingLeft: theme.__hd__.alert.space.iconLeftPadding,
 }));
 
 const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.alert.space.padding,
+  paddingHorizontal: theme.__hd__.alert.space.textPaddingHorizontal,
   flex: 1,
 }));
 
 const ContentContainer = styled(View)<{ showDivider: boolean }>(
   ({ theme, showDivider }) => ({
-    paddingVertical: theme.__hd__.alert.space.padding,
+    paddingVertical: theme.__hd__.alert.space.contentPaddingHorizontal,
     flex: 1,
     borderRightWidth: showDivider ? theme.__hd__.alert.borderWidths.base : 0,
     borderColor: theme.__hd__.alert.colors.divider,
@@ -35,7 +36,7 @@ const ContentContainer = styled(View)<{ showDivider: boolean }>(
 const CTAWrapper = styled(TouchableOpacity)<
   ComponentProps<typeof TouchableOpacity>
 >(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.alert.space.padding,
+  paddingHorizontal: theme.__hd__.alert.space.ctaPadding,
   justifyContent: 'center',
 }));
 

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

@@ -25,7 +25,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
           "borderRightWidth": 0,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -36,7 +36,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -63,7 +63,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -118,7 +118,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -129,7 +129,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -156,7 +156,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -218,7 +218,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="alert-close-icon"
@@ -266,7 +266,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -277,7 +277,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -304,7 +304,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -366,7 +366,128 @@ exports[`Alert renders correctly when intent is info 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
+      }
+    }
+    testID="alert-close-icon"
+  >
+    <HeroIcon
+      name="cancel"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
+</View>
+`;
+
+exports[`Alert renders correctly when intent is notification 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="notification"
+  themeVariant="default"
+>
+  <View
+    showDivider={true}
+    style={
+      Array [
+        Object {
+          "borderColor": "#e8e9ea",
+          "borderRightWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Content
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "justifyContent": "center",
+        "opacity": 1,
+        "paddingHorizontal": 12,
       }
     }
     testID="alert-close-icon"
@@ -414,7 +535,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -425,7 +546,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -452,7 +573,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -514,7 +635,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="alert-close-icon"
@@ -562,7 +683,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -573,7 +694,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -600,7 +721,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -662,7 +783,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="alert-close-icon"

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

@@ -21,12 +21,33 @@ describe('Alert', () => {
     );
 
     expect(toJSON()).toMatchSnapshot();
+    // Has default icon
     expect(getByTestId('alert-left-icon')).toBeDefined();
+
     expect(getByText('Title')).toBeDefined();
     expect(getByText('Content')).toBeDefined();
     expect(getByTestId('alert-close-icon')).toBeDefined();
   });
 
+  it('renders correctly when intent is notification', () => {
+    const { toJSON, getByText, queryByTestId } = renderWithTheme(
+      <Alert
+        title="Title"
+        content="Content"
+        intent="notification"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    // Has no default icon
+    expect(queryByTestId('alert-left-icon')).toBeNull();
+
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+    expect(queryByTestId('alert-close-icon')).toBeTruthy();
+  });
+
   describe('Icon', () => {
     it('not render icon when icon prop is null', () => {
       const { queryByTestId } = renderWithTheme(

package/src/components/Alert/index.tsx

@@ -1,6 +1,7 @@
-import React, { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import Icon, { IconName } from '../Icon';
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import {
   Container,
@@ -9,10 +10,11 @@ import {
   IconContainer,
   TextContainer,
 } from './StyledAlert';
+import type { IconName } from '../Icon';
 
 const getIntentIcon = (
-  intent: 'success' | 'info' | 'warning' | 'error'
-): IconName => {
+  intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
+) => {
   switch (intent) {
     case 'success':
       return 'circle-ok';
@@ -22,9 +24,18 @@ const getIntentIcon = (
       return 'circle-info';
     case 'error':
       return 'circle-warning';
+    default:
+      return undefined;
   }
 };
 
+const AlertIcon = ({ icon }: { icon?: IconName }) =>
+  icon ? (
+    <IconContainer testID="alert-left-icon">
+      <Icon icon={icon} size="small" />
+    </IconContainer>
+  ) : null;
+
 interface AlertProps {
   /**
    * Alert title.
@@ -44,7 +55,7 @@ interface AlertProps {
   /**
    * Visual intent color to apply to alert.
    */
-  intent?: 'success' | 'info' | 'warning' | 'error';
+  intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
   /**
    * 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.
    */
@@ -81,9 +92,7 @@ const Alert = ({
   >
     <ContentContainer showDivider={!!onClose}>
       {icon !== null ? (
-        <IconContainer testID="alert-left-icon">
-          <Icon icon={icon || getIntentIcon(intent)} size="small" />
-        </IconContainer>
+        <AlertIcon icon={icon || getIntentIcon(intent)} />
       ) : null}
       <TextContainer>
         {typeof title === 'string' ? (

package/src/components/Avatar/StyledAvatar.tsx

@@ -8,7 +8,8 @@ type ThemeSize =
   | 'xlarge'
   | 'xxlarge'
   | 'xxxlarge'
-  | 'xxxxlarge';
+  | 'xxxxlarge'
+  | 'xxxxxlarge';
 type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 
 const StyledPressable = styled(TouchableOpacity)<{

package/src/components/Avatar/index.tsx

@@ -1,10 +1,10 @@
-import {
+import React from 'react';
+import type {
   ImageSourcePropType,
   StyleProp,
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import React from 'react';
 import {
   StyledImage,
   StyledPressable,
@@ -32,7 +32,8 @@ interface AvatarProps extends ViewProps {
     | 'xlarge'
     | 'xxlarge'
     | 'xxxlarge'
-    | 'xxxxlarge';
+    | 'xxxxlarge'
+    | 'xxxxxlarge';
   /**
    * Additional style.
    */

package/src/components/Badge/Status.tsx

@@ -1,5 +1,7 @@
-import { View, StyleProp, ViewStyle, ViewProps, Animated } from 'react-native';
-import React, { ReactNode } from 'react';
+import { View, Animated } from 'react-native';
+import React from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
 import { StyledStatus } from './StyledBadge';
 
 export interface StatusProps extends ViewProps {

package/src/components/Badge/index.tsx

@@ -1,5 +1,6 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledView, StyledText } from './StyledBadge';
 import BadgeStatus from './Status';
 

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

@@ -1,9 +1,11 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import BottomNavigation, { BottomNavigationTabType } from '..';
+import BottomNavigation from '..';
+import type { BottomNavigationTabType } from '..';
 
 const TestComponent = (
   props: Omit<

package/src/components/BottomNavigation/index.tsx

@@ -1,12 +1,9 @@
-import React, { ReactNode } from 'react';
-import {
-  TouchableWithoutFeedback,
-  StyleProp,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
+import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Icon, { IconName } from '../Icon';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import Icon from '../Icon';
 import { isHeroIcon } from '../Icon/utils';
 import {
   BottomBar,
@@ -18,6 +15,7 @@ import {
   StyledBottomBarText,
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
+import type { IconName } from '../Icon';
 
 export type BottomNavigationTabType = {
   key: string;

package/src/components/BottomSheet/Footer.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { View } from 'react-native';
+import type { ReactNode } from 'react';
 import Divider from '../Divider';
 import { StyledFooter } from './StyledBottomSheet';
 

package/src/components/BottomSheet/Header.tsx

@@ -1,5 +1,6 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { View } from 'react-native';
+import type { ReactElement } from 'react';
 import Button from '../Button';
 import Divider from '../Divider';
 import Typography from '../Typography';

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/native';
-import { ComponentProps } from 'react';
 import {
   Animated,
   Pressable,
   SafeAreaView,
   StyleSheet,
   View,
-  ViewProps,
 } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);

package/src/components/BottomSheet/index.tsx

@@ -1,11 +1,7 @@
-import React, {
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { Animated, Easing, Modal, StyleProp, ViewStyle } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Modal } from 'react-native';
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import Footer from './Footer';
 import Header from './Header';
 import {