@hero-design/rn 7.18.1 → 7.20.0

package/src/components/Toast/Toast.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Animated, LayoutAnimation } from 'react-native';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import {
   Container,
@@ -10,11 +10,10 @@ import {
   TextContainer,
 } from './StyledToast';
 import { useToastConfig } from './ToastContext';
-import { ToastProps } from './types';
+import type { IconName } from '../Icon';
+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';
@@ -24,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,
@@ -87,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
           )}
@@ -108,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/ToastContainer.tsx

@@ -3,8 +3,8 @@ import { useTheme } from '@emotion/react';
 
 import Toast from './Toast';
 import { ToastContainerWrapper } from './StyledToast';
-import { ToastContainerProps, ToastItemProps } from './types';
-import { ToastControllerContextType } from './ToastContext';
+import type { ToastContainerProps, ToastItemProps } from './types';
+import type { ToastControllerContextType } from './ToastContext';
 
 const generateID = () =>
   (performance.now().toString(36) + Math.random().toString(36)).replace(

package/src/components/Toast/ToastContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { ToastContainerProps, ToastProps } from './types';
+import type { ToastContainerProps, ToastProps } from './types';
 
 export type ToastControllerContextType = {
   show: (props: Omit<ToastProps, 'position'>) => string;

package/src/components/Toast/ToastProvider.tsx

@@ -1,12 +1,11 @@
-import React, { ReactNode, useEffect, useRef, useState, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { View } from 'react-native';
 
+import type { ReactNode } from 'react';
 import ToastContainer from './ToastContainer';
-import {
-  ToastConfigContext,
-  ToastContext,
-  ToastControllerContextType,
-} from './ToastContext';
-import { ToastContainerProps } from './types';
+import { ToastConfigContext, ToastContext } from './ToastContext';
+import type { ToastControllerContextType } from './ToastContext';
+import type { ToastContainerProps } from './types';
 
 type ToastProviderProps = {
   /**
@@ -31,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(

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

@@ -2,7 +2,7 @@ import { act } from '@testing-library/react-native';
 import React, { createRef } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import ToastContainer from '../ToastContainer';
-import { ToastControllerContextType } from '../ToastContext';
+import type { ToastControllerContextType } from '../ToastContext';
 
 describe('ToastContainer', () => {
   afterEach(() => {

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

@@ -8,9 +8,17 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     Object {
       "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
+      "elevation": 4,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
       "transform": Array [
         Object {
           "translateY": 20,
@@ -30,7 +38,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
           "borderRightWidth": 0,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -41,7 +49,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -68,7 +76,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -106,9 +114,17 @@ exports[`Toast renders correctly when intent is error 1`] = `
     Object {
       "backgroundColor": "#f46363",
       "borderRadius": 0,
+      "elevation": 4,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
       "transform": Array [
         Object {
           "translateY": 20,
@@ -128,7 +144,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -139,7 +155,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -166,7 +182,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -209,7 +225,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="toast-action-button"
@@ -245,9 +261,17 @@ exports[`Toast renders correctly when intent is info 1`] = `
     Object {
       "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
+      "elevation": 4,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
       "transform": Array [
         Object {
           "translateY": 20,
@@ -267,7 +291,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -278,7 +302,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -305,7 +329,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -348,7 +372,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="toast-action-button"
@@ -376,6 +400,246 @@ exports[`Toast renders correctly when intent is info 1`] = `
 </View>
 `;
 
+exports[`Toast renders correctly when intent is notification 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "borderRadius": 0,
+      "elevation": 4,
+      "flexDirection": "row",
+      "minHeight": 48,
+      "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+      "transform": Array [
+        Object {
+          "translateY": 20,
+        },
+      ],
+    }
+  }
+  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-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        Toast 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="toast-action-button"
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="semi-bold"
+      themeIntent="body"
+    >
+      Action
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Toast renders correctly when intent is snackbar 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "backgroundColor": "#001f23",
+      "borderRadius": 0,
+      "elevation": 4,
+      "flexDirection": "row",
+      "minHeight": 48,
+      "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
+      "transform": Array [
+        Object {
+          "translateY": 20,
+        },
+      ],
+    }
+  }
+  themeIntent="snackbar"
+  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": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="inverted"
+      >
+        Toast 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="toast-action-button"
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="semi-bold"
+      themeIntent="inverted"
+    >
+      Action
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`Toast renders correctly when intent is success 1`] = `
 <View
   collapsable={false}
@@ -384,9 +648,17 @@ exports[`Toast renders correctly when intent is success 1`] = `
     Object {
       "backgroundColor": "#5ace7d",
       "borderRadius": 0,
+      "elevation": 4,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
       "transform": Array [
         Object {
           "translateY": 20,
@@ -406,7 +678,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -417,7 +689,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -444,7 +716,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -487,7 +759,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="toast-action-button"
@@ -523,9 +795,17 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     Object {
       "backgroundColor": "#ffbe71",
       "borderRadius": 0,
+      "elevation": 4,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
+      "shadowColor": "#001f23",
+      "shadowOffset": Object {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 4,
       "transform": Array [
         Object {
           "translateY": 20,
@@ -545,7 +825,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
           "borderRightWidth": 1,
           "flex": 1,
           "flexDirection": "row",
-          "paddingVertical": 16,
+          "paddingVertical": 12,
         },
         undefined,
       ]
@@ -556,7 +836,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "paddingLeft": 16,
+            "paddingLeft": 12,
           },
           undefined,
         ]
@@ -583,7 +863,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         Array [
           Object {
             "flex": 1,
-            "paddingHorizontal": 16,
+            "paddingHorizontal": 12,
           },
           undefined,
         ]
@@ -626,7 +906,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
       Object {
         "justifyContent": "center",
         "opacity": 1,
-        "paddingHorizontal": 16,
+        "paddingHorizontal": 12,
       }
     }
     testID="toast-action-button"