@hero-design/rn 7.19.0 → 7.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.19.0",
+  "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.19.0",
+    "@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/Alert/StyledAlert.tsx

@@ -5,7 +5,7 @@ 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],
@@ -15,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,
@@ -36,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

@@ -13,8 +13,8 @@ import {
 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';
@@ -24,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.
@@ -46,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.
    */
@@ -83,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

@@ -32,7 +32,8 @@ interface AvatarProps extends ViewProps {
     | 'xlarge'
     | 'xxlarge'
     | 'xxxlarge'
-    | 'xxxxlarge';
+    | 'xxxxlarge'
+    | 'xxxxxlarge';
   /**
    * Additional style.
    */

package/src/components/Box/StyledBox.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/native';
+import { Theme } from '@emotion/react';
+import { View } from 'react-native';
+import { StyleProps, ThemeScale } from './types';
+
+import config, { ConfigType, flexPropsKey } from './config';
+import { pick } from './helpers';
+
+export const getThemeValue = (
+  theme: Theme,
+  key: keyof StyleProps,
+  props: StyleProps
+) => {
+  const propConfig = config[key];
+  const propValue = props[key];
+
+  if (!propValue) return undefined;
+
+  const { scale, property } = propConfig;
+
+  switch (scale) {
+    case 'colors':
+      return { [property]: theme.colors[propValue as ThemeScale['colors']] };
+    case 'space':
+      return { [property]: theme.space[propValue as ThemeScale['space']] };
+    case 'radii':
+      return { [property]: theme.radii[propValue as ThemeScale['radii']] };
+    case 'borderWidths':
+      return {
+        [property]: theme.borderWidths[propValue as ThemeScale['borderWidths']],
+      };
+  }
+};
+
+const mapStylePropToThemeValue = (theme: Theme, props: StyleProps) => {
+  const entries = Object.keys(props) as Array<keyof StyleProps>;
+  return entries.reduce(
+    (result, key) => ({
+      ...result,
+      ...getThemeValue(theme, key, props),
+    }),
+    {}
+  );
+};
+
+const configKeys = Object.keys(config) as Array<keyof ConfigType>;
+
+const StyledBox = styled(View)<StyleProps>(({ theme, ...otherProps }) => {
+  const styleProps = pick(configKeys, otherProps);
+  const flexProps = pick([...flexPropsKey], otherProps);
+  return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
+});
+
+export { StyledBox };