@hero-design/rn 7.18.1 → 7.20.0

package/src/components/Toast/types.ts

@@ -1,6 +1,14 @@
-import { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
+
+export type IntentType =
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'error'
+  | 'notification'
+  | 'snackbar';
 
 export interface ToastProps {
   /**
@@ -17,7 +25,13 @@ export interface ToastProps {
   /**
    * Visual intent color to apply to alert.
    */
-  intent?: 'success' | 'info' | 'warning' | 'error';
+  intent?:
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'error'
+    | 'notification'
+    | 'snackbar';
   /**
    * Toast variants
    */

package/src/components/Toolbar/StyledToolbar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
   position: 'absolute',

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ToolbarGroupWrapper } from './StyledToolbar';
-import ToolbarItem, { ToolbarItemProps } from './ToolbarItem';
+import ToolbarItem from './ToolbarItem';
+import type { ToolbarItemProps } from './ToolbarItem';
 
 export interface ToolbarGroupProps {
   /**

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import { ToolbarItemWrapper } from './StyledToolbar';
+import type { IconName } from '../Icon';
 
 export interface ToolbarItemProps {
   /**

package/src/components/Toolbar/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
 

package/src/components/Typography/Text/StyledText.tsx

@@ -8,7 +8,13 @@ const FONTWEIGHT_MAP = {
 } as const;
 
 const StyledText = styled(Text)<{
-  themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
+  themeFontSize:
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xlarge'
+    | 'xxxlarge'
+    | 'xxxxxlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:
     | 'body'

package/src/components/Typography/Text/__tests__/StyledText.spec.tsx

@@ -9,6 +9,7 @@ describe('StyledText', () => {
     ${'medium'}
     ${'large'}
     ${'xlarge'}
+    ${'xxxlarge'}
     ${'xxxxxlarge'}
   `('has $fontSize fontSize style', ({ fontSize }) => {
     const { toJSON } = renderWithTheme(

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -330,6 +330,28 @@ exports[`StyledText has xlarge fontSize style 1`] = `
 </Text>
 `;
 
+exports[`StyledText has xxxlarge fontSize style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 24,
+        "letterSpacing": 0.72,
+        "lineHeight": 32,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="xxxlarge"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
 exports[`StyledText has xxxxxlarge fontSize style 1`] = `
 <Text
   style={

package/src/components/Typography/Text/index.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import {
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
   TextProps as NativeTextProps,
   StyleProp,
   TextStyle,
@@ -14,7 +15,13 @@ export interface TextProps extends NativeTextProps {
   /**
    * Size of the text.
    */
-  fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
+  fontSize?:
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xlarge'
+    | 'xxxlarge'
+    | 'xxxxxlarge';
   /**
    * Font weight of the text.
    */

package/src/index.ts

@@ -13,6 +13,7 @@ import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
+import Box from './components/Box';
 import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Card from './components/Card';
@@ -56,6 +57,7 @@ export {
   Badge,
   BottomNavigation,
   BottomSheet,
+  Box,
   Button,
   Calendar,
   Card,

package/src/testHelpers/renderWithTheme.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, RenderOptions } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
+import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import { ThemeProvider } from '@emotion/react';
+import type { RenderOptions } from '@testing-library/react-native';
 import { theme } from '../index';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>

package/src/theme/ThemeProvider.ts

@@ -1,5 +1,5 @@
 import * as Emotion from '@emotion/react';
-import { Theme } from './getTheme';
+import type { Theme } from './getTheme';
 
 export interface ThemeProviderProps {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme);

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -22,6 +22,7 @@ Object {
         "divider": "#e8e9ea",
         "error": "#f46363",
         "info": "#b5c3fd",
+        "notification": "#ffffff",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -32,7 +33,10 @@ Object {
         "height": 48,
       },
       "space": Object {
-        "padding": 16,
+        "contentPaddingHorizontal": 12,
+        "ctaPadding": 12,
+        "iconLeftPadding": 12,
+        "textPaddingHorizontal": 12,
       },
     },
     "avatar": Object {
@@ -54,6 +58,7 @@ Object {
         "xxlarge": 32,
         "xxxlarge": 36,
         "xxxxlarge": 48,
+        "xxxxxlarge": 60,
       },
       "radii": Object {
         "rounded": 999,
@@ -66,6 +71,7 @@ Object {
         "xxlarge": 64,
         "xxxlarge": 80,
         "xxxxlarge": 96,
+        "xxxxxlarge": 136,
       },
     },
     "badge": Object {
@@ -227,14 +233,13 @@ Object {
     },
     "card": Object {
       "colors": Object {
+        "archived": "#bfc1c5",
+        "danger": "#e3602a",
         "dataCardIndicator": "#8505a2",
-        "indicator": Object {
-          "archived": "#bfc1c5",
-          "danger": "#e3602a",
-          "info": "#b5c3fd",
-          "success": "#5ace7d",
-          "warning": "#ffbe71",
-        },
+        "info": "#b5c3fd",
+        "primary": "#c38cee",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 12,
@@ -245,21 +250,24 @@ Object {
     },
     "checkbox": Object {
       "borderWidths": Object {
-        "default": 2,
+        "icon": 2,
+        "wrapper": 1,
       },
       "colors": Object {
-        "borderColor": "#8505a2",
-        "disabled": "#808f91",
-        "text": "#ffffff",
+        "default": "#001f23",
+        "disabledBorder": "#808f91",
       },
       "radii": Object {
-        "base": 4,
+        "icon": 4,
+        "wrapper": 8,
       },
       "sizes": Object {
-        "base": 24,
+        "icon": 20,
       },
       "space": Object {
-        "iconTop": -4,
+        "iconDescriptionPadding": 12,
+        "iconTop": -3,
+        "wrapperPadding": 16,
       },
     },
     "contentNavigator": Object {
@@ -424,12 +432,6 @@ Object {
         },
         "listItemContainerBackground": "#ffffff",
       },
-      "offsets": Object {
-        "cardShadow": Object {
-          "height": 2,
-          "width": 0,
-        },
-      },
       "opacity": Object {
         "cardShadow": 1,
         "disabled": 0.38,
@@ -440,6 +442,13 @@ Object {
         "cardShadow": 4,
         "leadingStatus": 999,
       },
+      "shadows": Object {
+        "cardElevation": 10,
+        "cardOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+      },
       "space": Object {
         "leadingStatusMarginRight": 8,
         "listItemContainerPadding": 16,
@@ -506,13 +515,7 @@ Object {
         "circle": 2,
       },
       "colors": Object {
-        "checkedCircle": "#8505a2",
-        "checkedWrapper": "#f3e6f6",
-        "circle": "#000000",
-        "wrapper": "#ffffff",
-      },
-      "radii": Object {
-        "wrapper": 4,
+        "circle": "#001f23",
       },
       "sizes": Object {
         "circle": 20,
@@ -521,7 +524,6 @@ Object {
       "space": Object {
         "circleLeftMargin": 8,
         "groupTopMargin": 4,
-        "wrapperPadding": 16,
       },
     },
     "richTextEditor": Object {
@@ -550,7 +552,7 @@ Object {
     },
     "sectionHeading": Object {
       "colors": Object {
-        "background": "#e8e9ea",
+        "background": "#f6f6f7",
       },
       "space": Object {
         "headingHorizontalPadding": 16,
@@ -577,25 +579,38 @@ Object {
       },
     },
     "spinner": Object {
-      "color": Object {
-        "default": "#8505a2",
+      "colors": Object {
+        "dot1": "#795e90",
+        "dot2": "#a08cb0",
+        "dot3": "#d9d1df",
+        "dot4": "#ece8ef",
       },
       "radii": Object {
-        "default": 8,
+        "default": 999,
       },
       "space": Object {
-        "spinnerDot": 16,
-        "spinnerDotPadding": 8,
-        "spinnerTextPaddingTop": 8,
+        "spinnerDot": Object {
+          "medium": 16,
+          "small": 8,
+        },
+        "spinnerDotPadding": Object {
+          "medium": 8,
+          "small": 4,
+        },
+        "spinnerTextPaddingTop": Object {
+          "medium": 8,
+          "small": 4,
+        },
       },
     },
     "switch": Object {
-      "borderWidths": Object {
-        "default": 1,
-      },
       "colors": Object {
-        "active": "#8505a2",
-        "inactive": "#808f91",
+        "backgroundColors": Object {
+          "checked": "#8505a2",
+          "disabled-checked": "#c282d1",
+          "disabled-unchecked": "#ccced1",
+          "unchecked": "#808f91",
+        },
         "thumb": "#ffffff",
       },
       "heights": Object {
@@ -624,8 +639,8 @@ Object {
         "headerBottom": 1,
       },
       "colors": Object {
-        "active": "#8505a2",
-        "activeBackground": "#f3e6f6",
+        "active": "#001f23",
+        "activeBackground": "#ece8ef",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
         "text": "#001f23",
@@ -639,6 +654,7 @@ Object {
       "space": Object {
         "flatListHorizontalPadding": 8,
         "itemHorizontalPadding": 8,
+        "itemMargin": 12,
         "itemVerticalPadding": 8,
         "outlineHorizontalPadding": 8,
         "outlineVerticalPadding": 4,
@@ -657,12 +673,12 @@ Object {
         "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#8505a2",
-        "primaryBackground": "#f3e6f6",
+        "primary": "#001f23",
+        "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "warning": "#ffa234",
-        "warningBackground": "#ebf4ff",
+        "warningBackground": "#fff6eb",
       },
       "fontSizes": Object {
         "default": 12,
@@ -772,18 +788,34 @@ Object {
         "divider": "#e8e9ea",
         "error": "#f46363",
         "info": "#b5c3fd",
+        "notification": "#ffffff",
+        "shadow": "#001f23",
+        "snackbar": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 16,
       },
+      "shadows": Object {
+        "elevation": 4,
+        "offset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "opacity": 0.12,
+        "radius": 4,
+      },
       "sizes": Object {
         "height": 48,
       },
       "space": Object {
-        "largePadding": 24,
-        "mediumPadding": 16,
+        "contentVerticalPadding": 12,
+        "ctaPadding": 12,
+        "iconLeftPadding": 12,
+        "textHorizontalPadding": 12,
+        "wrapperHorizontalPadding": 16,
+        "wrapperVerticalPadding": 24,
       },
     },
     "toolbar": Object {
@@ -821,6 +853,7 @@ Object {
         "medium": 14,
         "small": 12,
         "xlarge": 18,
+        "xxxlarge": 24,
         "xxxxxlarge": 32,
       },
       "fonts": Object {
@@ -833,6 +866,7 @@ Object {
         "medium": 22,
         "small": 20,
         "xlarge": 26,
+        "xxxlarge": 32,
         "xxxxxlarge": 40,
       },
     },
@@ -842,6 +876,23 @@ Object {
     "medium": 2,
   },
   "colors": Object {
+    "__alpha__globalLabel1": "#de350b",
+    "__alpha__globalLabel2": "#ffa234",
+    "__alpha__globalLabel3": "#017d6d",
+    "__alpha__globalLabel4": "#4568fb",
+    "__alpha__globalLabel5": "#737479",
+    "__alpha__globalLabel6": "#fcebe7",
+    "__alpha__globalLabel7": "#fff6eb",
+    "__alpha__globalLabel8": "#f0fef4",
+    "__alpha__globalLabel9": "#ecf0ff",
+    "__alpha__globalNeutral3": "#f6f6f7",
+    "__alpha__globalPrimary": "#001f23",
+    "__alpha__globalSecondary1": "#4d6265",
+    "__alpha__primary2": "#c38cee",
+    "__alpha__secondary1": "#795e90",
+    "__alpha__secondary2": "#a08cb0",
+    "__alpha__secondary3": "#d9d1df",
+    "__alpha__secondary4": "#ece8ef",
     "archived": "#ccced1",
     "archivedBackground": "#f6f6f7",
     "archivedDark": "#737479",
@@ -882,7 +933,7 @@ Object {
     "successLight": "#5ace7d",
     "text": "#001f23",
     "warning": "#ffbe71",
-    "warningBackground": "#ebf4ff",
+    "warningBackground": "#fff6eb",
     "warningDark": "#ffa234",
     "warningLight": "#ffbe71",
   },

package/src/theme/components/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-underscore-dangle": 0
+      }
+    }
+  ]
+}

package/src/theme/components/accordion.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getAccordionTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/alert.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getAlertTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -7,6 +7,7 @@ const getAlertTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     error: theme.colors.dangerLight,
     info: theme.colors.infoLight,
+    notification: theme.colors.platformBackground,
     divider: theme.colors.outline,
   };
 
@@ -15,7 +16,10 @@ const getAlertTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    padding: theme.space.medium,
+    contentPaddingHorizontal: theme.space.smallMedium,
+    textPaddingHorizontal: theme.space.smallMedium,
+    iconLeftPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.smallMedium,
   };
 
   const radii = {

package/src/theme/components/avatar.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -17,6 +17,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxlarge: theme.space.xlarge * 2,
     xxxlarge: theme.space.xxlarge * 2,
     xxxxlarge: theme.space.xxxlarge * 2,
+    xxxxxlarge: theme.space.small * 17,
   };
 
   const fontSizes = {
@@ -27,6 +28,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxlarge: theme.space.medium * 2,
     xxxlarge: theme.space.large * 1.5,
     xxxxlarge: theme.space.xlarge * 1.5,
+    xxxxxlarge: theme.space.xxlarge * 1.5,
   };
 
   const radii = {

package/src/theme/components/badge.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/bottomNavigation.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getBottomNavigationTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/bottomSheet.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/button.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getButtonTheme = (theme: GlobalTheme) => {
   const fonts = {

package/src/theme/components/calendar.ts

@@ -1,5 +1,5 @@
-import { GlobalTheme } from '../global';
 import { scale } from '../../utils/scale';
+import type { GlobalTheme } from '../global';
 
 const getCalendarTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/card.ts

@@ -1,15 +1,14 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
     dataCardIndicator: theme.colors.primary,
-    indicator: {
-      archived: theme.colors.archivedLight,
-      info: theme.colors.infoLight,
-      success: theme.colors.success,
-      warning: theme.colors.warning,
-      danger: theme.colors.dangerMediumLight,
-    },
+    primary: theme.colors.__alpha__primary2,
+    info: theme.colors.infoLight,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.dangerMediumLight,
+    archived: theme.colors.archivedLight,
   };
 
   const sizes = {

package/src/theme/components/checkbox.ts

@@ -1,28 +1,32 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
+import { scale } from '../../utils/scale';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
-    borderColor: theme.colors.primary,
-    text: theme.colors.invertedText,
-    disabled: theme.colors.inactiveBackground,
+    default: theme.colors.globalPrimary,
+    disabledBorder: theme.colors.globalPrimaryLight,
   };
 
   const space = {
     // to remove the empty space above the check icon
     // and also to center the check mark
-    iconTop: -theme.space.xsmall,
+    iconTop: -scale(3),
+    wrapperPadding: theme.space.medium,
+    iconDescriptionPadding: theme.space.smallMedium,
   };
 
   const sizes = {
-    base: theme.space.large,
+    icon: scale(20),
   };
 
   const radii = {
-    base: theme.radii.base,
+    wrapper: theme.radii.medium,
+    icon: theme.radii.base,
   };
 
   const borderWidths = {
-    default: theme.borderWidths.medium,
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium,
   };
 
   return {