@hero-design/rn 7.19.0 → 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

@@ -32,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 (
@@ -71,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

@@ -15,10 +15,11 @@ import {
   TabScreen,
   HeaderTab,
 } from './StyledTabs';
-import Badge from '../Badge';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import ScrollableTabs from './ScrollableTabs';
-import type { IconName } from '../Icon';
+import TabWithBadge from './TabWithBadge';
+import type { BadgeConfigType } from './TabWithBadge';
+import { IconName } from '../Icon';
 
 export type ItemType =
   | string
@@ -32,6 +33,7 @@ export type TabType = {
   component: ReactNode;
   testID?: string;
   showBadge?: boolean;
+  badge?: BadgeConfigType;
 };
 
 export interface TabsProps extends ViewProps {
@@ -136,7 +138,8 @@ const Tabs = ({
                 testID,
                 activeItem,
                 inactiveItem: originalInactiveItem,
-                showBadge = false,
+                showBadge,
+                badge,
               } = tab;
 
               const active = selectedTabKey === key;
@@ -156,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

@@ -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/Toast/StyledToast.tsx

@@ -2,12 +2,13 @@ import styled from '@emotion/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,
   })
@@ -15,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,
@@ -46,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',
 }));
 

package/src/components/Toast/Toast.tsx

@@ -11,11 +11,9 @@ import {
 } from './StyledToast';
 import { useToastConfig } from './ToastContext';
 import type { IconName } from '../Icon';
-import type { ToastProps } from './types';
+import type { IntentType, ToastProps } from './types';
 
-const getIntentIcon = (
-  intent: 'success' | 'info' | 'warning' | 'error'
-): IconName => {
+const getIntentIcon = (intent: IntentType): IconName | undefined => {
   switch (intent) {
     case 'success':
       return 'circle-ok';
@@ -25,9 +23,28 @@ const getIntentIcon = (
       return 'circle-info';
     case 'error':
       return 'circle-warning';
+    default:
+      return undefined;
   }
 };
 
+const ToastIcon = ({
+  themeIntent,
+  icon,
+}: {
+  icon?: IconName;
+  themeIntent: IntentType;
+}) =>
+  icon ? (
+    <IconContainer testID="toast-left-icon">
+      <Icon
+        icon={icon}
+        size="small"
+        intent={themeIntent === 'snackbar' ? 'text-inverted' : 'text'}
+      />
+    </IconContainer>
+  ) : null;
+
 const Toast = ({
   content,
   icon,
@@ -88,13 +105,18 @@ const Toast = ({
     >
       <ContentContainer showDivider={!!actionLabel}>
         {icon !== null ? (
-          <IconContainer testID="toast-left-icon">
-            <Icon icon={icon || getIntentIcon(intent)} size="small" />
-          </IconContainer>
+          <ToastIcon
+            themeIntent={intent}
+            icon={icon || getIntentIcon(intent)}
+          />
         ) : null}
         <TextContainer>
           {typeof content === 'string' ? (
-            <Typography.Text>{content}</Typography.Text>
+            <Typography.Text
+              intent={intent === 'snackbar' ? 'inverted' : 'body'}
+            >
+              {content}
+            </Typography.Text>
           ) : (
             content
           )}
@@ -109,7 +131,10 @@ const Toast = ({
           }}
         >
           {typeof actionLabel === 'string' ? (
-            <Typography.Text fontWeight="semi-bold">
+            <Typography.Text
+              fontWeight="semi-bold"
+              intent={intent === 'snackbar' ? 'inverted' : 'body'}
+            >
               {actionLabel}
             </Typography.Text>
           ) : (

package/src/components/Toast/ToastProvider.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { View } from 'react-native';
 
 import type { ReactNode } from 'react';
 import ToastContainer from './ToastContainer';
@@ -29,21 +30,23 @@ const ToastProvider = ({
     }
   }, []);
 
-  const config = useMemo(() => ({ displayType, position }), [
-    displayType,
-    position,
-  ]);
+  const config = useMemo(
+    () => ({ displayType, position }),
+    [displayType, position]
+  );
 
   return (
     <ToastContext.Provider value={refState}>
-      {children}
-      <ToastConfigContext.Provider value={config}>
-        <ToastContainer
-          ref={toastRef}
-          displayType={displayType}
-          position={position}
-        />
-      </ToastConfigContext.Provider>
+      <View style={{ flex: 1 }}>
+        {children}
+        <ToastConfigContext.Provider value={config}>
+          <ToastContainer
+            ref={toastRef}
+            displayType={displayType}
+            position={position}
+          />
+        </ToastConfigContext.Provider>
+      </View>
     </ToastContext.Provider>
   );
 };

package/src/components/Toast/__tests__/Toast.spec.tsx

@@ -23,9 +23,26 @@ describe('Toast', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('Toast Content')).toBeDefined();
     expect(getByText('Action')).toBeDefined();
+    // Default icon
     expect(getByTestId('toast-left-icon')).toBeDefined();
   });
 
+  it.each`
+    intent
+    ${'notification'}
+    ${'snackbar'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { getByText, queryByTestId, toJSON } = renderWithTheme(
+      <Toast content="Toast Content" actionLabel="Action" intent={intent} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Toast Content')).toBeDefined();
+    expect(getByText('Action')).toBeDefined();
+    // No default icon
+    expect(queryByTestId('toast-left-icon')).toBeNull();
+  });
+
   describe('Icon', () => {
     it('not render icon when icon prop is null', () => {
       const { queryByTestId } = renderWithTheme(