@hero-design/rn 7.19.0 → 7.20.0

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"

package/src/components/Toast/types.ts

@@ -2,6 +2,14 @@ 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 {
   /**
    * Toast content.
@@ -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/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

@@ -15,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,