@hero-design/rn 7.18.1 → 7.20.0

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

@@ -178,28 +178,6 @@ exports[`Tabs renders correctly 1`] = `
               >
                 Work
               </Text>
-              <View
-                collapsable={false}
-                nativeID="animatedComponent"
-                style={
-                  Object {
-                    "backgroundColor": "#de350b",
-                    "borderRadius": 999,
-                    "height": 8,
-                    "opacity": 0,
-                    "position": "absolute",
-                    "right": -2,
-                    "top": -2,
-                    "transform": Array [
-                      Object {
-                        "scale": 0.5,
-                      },
-                    ],
-                    "width": 8,
-                  }
-                }
-                themeIntent="danger"
-              />
             </View>
           </View>
           <View
@@ -246,6 +224,59 @@ exports[`Tabs renders correctly 1`] = `
               >
                 Personal
               </Text>
+            </View>
+          </View>
+          <View
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "paddingVertical": 8,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Object {
+                  "paddingHorizontal": 8,
+                }
+              }
+              testID="deprecated-badge"
+            >
+              <Text
+                numberOfLines={1}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+              >
+                Home
+              </Text>
               <View
                 collapsable={false}
                 nativeID="animatedComponent"
@@ -254,13 +285,13 @@ exports[`Tabs renders correctly 1`] = `
                     "backgroundColor": "#de350b",
                     "borderRadius": 999,
                     "height": 8,
-                    "opacity": 0,
+                    "opacity": 1,
                     "position": "absolute",
                     "right": -2,
                     "top": -2,
                     "transform": Array [
                       Object {
-                        "scale": 0.5,
+                        "scale": 1,
                       },
                     ],
                     "width": 8,
@@ -291,7 +322,17 @@ exports[`Tabs renders correctly 1`] = `
               ]
             }
           >
-            <View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  },
+                  undefined,
+                ]
+              }
+            >
               <Text
                 numberOfLines={1}
                 style={
@@ -312,30 +353,50 @@ exports[`Tabs renders correctly 1`] = `
                 themeFontWeight="regular"
                 themeIntent="body"
               >
-                Home
+                Wallet
               </Text>
               <View
                 collapsable={false}
                 nativeID="animatedComponent"
                 style={
                   Object {
-                    "backgroundColor": "#de350b",
+                    "alignItems": "center",
+                    "backgroundColor": "#4568fb",
                     "borderRadius": 999,
-                    "height": 8,
+                    "height": 20,
+                    "justifyContent": "center",
+                    "marginLeft": 4,
+                    "minWidth": 20,
                     "opacity": 1,
-                    "position": "absolute",
-                    "right": -2,
-                    "top": -2,
+                    "paddingHorizontal": 8,
                     "transform": Array [
                       Object {
                         "scale": 1,
                       },
                     ],
-                    "width": 8,
                   }
                 }
-                themeIntent="danger"
-              />
+                themeIntent="info"
+                themePadding="wideContent"
+              >
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#ffffff",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 12,
+                        "includeFontPadding": false,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  50
+                </Text>
+              </View>
             </View>
           </View>
         </View>
@@ -487,6 +548,46 @@ exports[`Tabs renders correctly 1`] = `
           </Text>
         </View>
       </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={true}
+          collapsable={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Array [
+                undefined,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ],
+            ]
+          }
+        >
+          <Text>
+            Wallet Screen
+          </Text>
+        </View>
+      </View>
     </RNCViewPager>
   </View>
 </RNCSafeAreaProvider>

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

@@ -1,10 +1,12 @@
-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 Tabs, { TabType } from '..';
+import Tabs from '..';
 import Button from '../../Button';
+import type { TabType } from '..';
 
 const TestTabsComponent = (
   props: Omit<
@@ -30,6 +32,15 @@ const TestTabsComponent = (
       component: <Text>Home Screen</Text>,
       showBadge: true,
     },
+    {
+      key: 'wallet',
+      activeItem: 'Wallet',
+      component: <Text>Wallet Screen</Text>,
+      badge: {
+        type: 'counter',
+        value: 50,
+      },
+    },
   ];
 
   return (
@@ -69,6 +80,9 @@ describe('Tabs', () => {
     expect(getByText('Home Screen')).toBeDefined();
     fireEvent.press(getByText('Move to Work'));
     expect(getByText('Work Screen')).toBeDefined();
+    fireEvent.press(getByText('Wallet'));
+    expect(getByText('Wallet Screen')).toBeDefined();
+    expect(getByText('50')).toBeDefined();
   });
 
   it('renders correctly with lazy preloaded', () => {

package/src/components/Tabs/index.tsx

@@ -1,17 +1,11 @@
-import React, { ReactNode, useEffect } from 'react';
-import {
-  Animated,
-  TouchableWithoutFeedback,
-  View,
-  StyleProp,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@emotion/react';
-import PagerView, {
-  PagerViewOnPageScrollEventData,
-} from 'react-native-pager-view';
+import PagerView from 'react-native-pager-view';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { PagerViewOnPageScrollEventData } from 'react-native-pager-view';
 import Typography from '../Typography';
 import {
   ContentWrapper,
@@ -21,10 +15,11 @@ import {
   TabScreen,
   HeaderTab,
 } from './StyledTabs';
-import Badge from '../Badge';
-import { IconName } from '../Icon';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import ScrollableTabs from './ScrollableTabs';
+import TabWithBadge from './TabWithBadge';
+import type { BadgeConfigType } from './TabWithBadge';
+import { IconName } from '../Icon';
 
 export type ItemType =
   | string
@@ -38,6 +33,7 @@ export type TabType = {
   component: ReactNode;
   testID?: string;
   showBadge?: boolean;
+  badge?: BadgeConfigType;
 };
 
 export interface TabsProps extends ViewProps {
@@ -142,7 +138,8 @@ const Tabs = ({
                 testID,
                 activeItem,
                 inactiveItem: originalInactiveItem,
-                showBadge = false,
+                showBadge,
+                badge,
               } = tab;
 
               const active = selectedTabKey === key;
@@ -162,7 +159,11 @@ const Tabs = ({
                   testID={testID}
                 >
                   <HeaderTabItem>
-                    <Badge.Status visible={showBadge}>{tabItem}</Badge.Status>
+                    <TabWithBadge
+                      showBadge={showBadge}
+                      config={badge}
+                      tabItem={tabItem}
+                    />
                   </HeaderTabItem>
                 </TouchableWithoutFeedback>
               );

package/src/components/Tag/StyledTag.tsx

@@ -1,16 +1,6 @@
 import { View, Text } from 'react-native';
 import styled from '@emotion/native';
 
-const BACKGROUND_INTENTS = {
-  default: 'defaultBackground',
-  primary: 'primaryBackground',
-  info: 'infoBackground',
-  success: 'successBackground',
-  warning: 'warningBackground',
-  danger: 'dangerBackground',
-  archived: 'archivedBackground',
-} as const;
-
 type ThemeIntent =
   | 'default'
   | 'primary'
@@ -27,7 +17,7 @@ const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
     borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors[BACKGROUND_INTENTS[themeIntent]],
+    backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
   })
 );
 

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -43,8 +43,8 @@ exports[`Tag has archived style when intent is primary 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f3e6f6",
-        "borderColor": "#8505a2",
+        "backgroundColor": undefined,
+        "borderColor": "#001f23",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -59,7 +59,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,
@@ -233,7 +233,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#ebf4ff",
+        "backgroundColor": "#fff6eb",
         "borderColor": "#ffa234",
         "borderRadius": 4,
         "borderWidth": 1,

package/src/components/Tag/index.tsx

@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import React from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledView, StyledText } from './StyledTag';
 
 interface TagProps extends ViewProps {
@@ -11,8 +11,8 @@ interface TagProps extends ViewProps {
    * Visual intent color to apply to Tag.
    */
   intent?:
-    | 'default'
     | 'primary'
+    | 'default' // Will be deprecated in the future
     | 'info'
     | 'success'
     | 'warning'
@@ -30,7 +30,7 @@ interface TagProps extends ViewProps {
 
 const Tag = ({
   content,
-  intent = 'default',
+  intent = 'primary',
   style,
   testID,
   ...nativeProps

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

@@ -259,20 +259,16 @@ describe('TextInput', () => {
 
   describe('disabled', () => {
     it('renders correctly', () => {
-      const {
-        toJSON,
-        queryAllByTestId,
-        queryAllByText,
-        getByTestId,
-      } = renderWithTheme(
-        <TextInput
-          label="Amount (AUD)"
-          required
-          disabled
-          value="100"
-          testID="disabled-text-input"
-        />
-      );
+      const { toJSON, queryAllByTestId, queryAllByText, getByTestId } =
+        renderWithTheme(
+          <TextInput
+            label="Amount (AUD)"
+            required
+            disabled
+            value="100"
+            testID="disabled-text-input"
+          />
+        );
 
       expect(toJSON()).toMatchSnapshot();
       expect(queryAllByText('Amount (AUD)')).toHaveLength(1);

package/src/components/TextInput/index.tsx

@@ -1,11 +1,10 @@
 import React, { useRef } from 'react';
-import {
+import { TextInput as RNTextInput, StyleSheet } from 'react-native';
+import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-  TextInput as RNTextInput,
-  StyleSheet,
 } from 'react-native';
 import {
   StyledTextInputContainer,
@@ -15,7 +14,6 @@ import {
   StyledAsteriskLabel,
   StyledError,
   StyledTextInput,
-  Variant,
   StyledContainer,
   StyledMaxLengthMessage,
   StyledErrorContainer,
@@ -27,8 +25,10 @@ import {
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import { useTheme } from '../../theme';
+import type { Variant } from './StyledTextInput';
+import type { IconName } from '../Icon';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**

package/src/components/TimePicker/StyledTimePicker.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   height: theme.__hd__.timePicker.sizes.height,

package/src/components/TimePicker/TimePickerAndroid.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
-import { TimePickerProps } from './types';
+import type { TimePickerProps } from './types';
 
 const TimePickerAndroid = ({
   value,

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -7,7 +7,7 @@ import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
 import Typography from '../Typography';
 import { StyledPickerWrapper } from './StyledTimePicker';
-import { TimePickerProps } from './types';
+import type { TimePickerProps } from './types';
 
 const TimePickerIOS = ({
   value,

package/src/components/TimePicker/__tests__/TimePickerIOS.spec.tsx

@@ -1,7 +1,6 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
-import { ModalProps } from 'react-native';
-
+import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import TimePickerIOS from '../TimePickerIOS';
 

package/src/components/TimePicker/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 import TimePickerAndroid from './TimePickerAndroid';
 import TimePickerIOS from './TimePickerIOS';
-import { TimePickerProps } from './types';
+import type { TimePickerProps } from './types';
 
 const TimePicker = (props: TimePickerProps) => {
   if (Platform.OS === 'ios') {

package/src/components/TimePicker/types.ts

@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface TimePickerProps {
   /**

package/src/components/Toast/StyledToast.tsx

@@ -1,18 +1,14 @@
 import styled from '@emotion/native';
-import { ComponentProps } from 'react';
-import {
-  Animated,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from 'react-native';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
+import { IntentType } from './types';
 
 const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
   ({ theme, position }) => ({
     ...StyleSheet.absoluteFillObject,
-    paddingHorizontal: theme.__hd__.toast.space.largePadding,
-    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
+    paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
     flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
     elevation: 9999,
   })
@@ -20,27 +16,32 @@ const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
 
 const Container = styled(Animated.View)<{
   themeVariant: 'default' | 'round';
-  themeIntent: 'success' | 'info' | 'warning' | 'error';
+  themeIntent: IntentType;
 }>(({ theme, themeVariant, themeIntent }) => ({
   borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
   backgroundColor: theme.__hd__.toast.colors[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
+  shadowColor: theme.__hd__.toast.colors.shadow,
+  shadowOffset: theme.__hd__.toast.shadows.offset,
+  shadowRadius: theme.__hd__.toast.shadows.radius,
+  shadowOpacity: theme.__hd__.toast.shadows.opacity,
+  elevation: theme.__hd__.toast.shadows.elevation,
 }));
 
 const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
-  paddingLeft: theme.__hd__.toast.space.mediumPadding,
+  paddingLeft: theme.__hd__.toast.space.iconLeftPadding,
 }));
 
 const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.toast.space.mediumPadding,
+  paddingHorizontal: theme.__hd__.toast.space.textHorizontalPadding,
   flex: 1,
 }));
 
 const ContentContainer = styled(View)<{ showDivider: boolean }>(
   ({ theme, showDivider }) => ({
-    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    paddingVertical: theme.__hd__.toast.space.contentVerticalPadding,
     flex: 1,
     borderRightWidth: showDivider ? theme.__hd__.toast.borderWidths.base : 0,
     borderColor: theme.__hd__.toast.colors.divider,
@@ -51,7 +52,7 @@ const ContentContainer = styled(View)<{ showDivider: boolean }>(
 const CTAWrapper = styled(TouchableOpacity)<
   ComponentProps<typeof TouchableOpacity>
 >(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.alert.space.padding,
+  paddingHorizontal: theme.__hd__.toast.space.ctaPadding,
   justifyContent: 'center',
 }));