@hero-design/rn 8.33.1 → 8.34.0

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -105,14 +105,13 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -122,11 +121,9 @@ exports[`DatePickerIOS renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Start date
           </Text>
@@ -203,6 +200,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]
@@ -388,16 +386,15 @@ exports[`DatePickerIOS renders correctly 1`] = `
                             "color": "#001f23",
                             "fontFamily": "BeVietnamPro-SemiBold",
                             "fontSize": 16,
-                            "letterSpacing": 0.48,
+                            "letterSpacing": 0.24,
                             "lineHeight": 24,
                           },
                           undefined,
                         ]
                       }
-                      themeFontSize="large"
-                      themeFontWeight="semi-bold"
                       themeIntent="body"
                       themeTypeface="neutral"
+                      themeVariant="regular-bold"
                     >
                       Start date
                     </Text>
@@ -529,28 +526,26 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 14,
-                              "letterSpacing": 0.42,
-                              "lineHeight": 22,
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 16,
+                              "letterSpacing": 0.24,
+                              "lineHeight": 24,
                             },
                             Array [
                               Object {
                                 "color": "#401960",
                                 "flexShrink": 1,
-                                "fontFamily": "BeVietnamPro-SemiBold",
-                                "fontSize": 16,
+                                "lineHeight": 22,
                                 "textAlign": "center",
                               },
                               undefined,
                             ],
                           ]
                         }
-                        themeFontSize="medium"
-                        themeFontWeight="regular"
+                        themeButtonVariant="text-primary"
                         themeIntent="body"
                         themeTypeface="neutral"
-                        themeVariant="text-primary"
+                        themeVariant="regular-bold"
                       >
                         Confirm
                       </Text>

package/src/components/Empty/StyledEmpty.tsx

@@ -13,10 +13,8 @@ const StyledWrapper = styled(View)(({ theme }) => ({
   padding: theme.__hd__.empty.space.wrapperPadding,
 }));
 
-const StyledTitle = styled(Typography.Text)<{ themeVariant: ThemeVariant }>(
+const StyledTitle = styled(Typography.Title)<{ themeVariant: ThemeVariant }>(
   ({ theme, themeVariant }) => ({
-    fontFamily: theme.__hd__.empty.fonts.title,
-    fontSize: theme.__hd__.empty.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.empty.space.titleMargin,
     color:
@@ -26,11 +24,9 @@ const StyledTitle = styled(Typography.Text)<{ themeVariant: ThemeVariant }>(
   })
 );
 
-const StyledDescription = styled(Typography.Text)<{
+const StyledDescription = styled(Typography.Body)<{
   themeVariant: ThemeVariant;
 }>(({ theme, themeVariant }) => ({
-  fontFamily: theme.__hd__.empty.fonts.description,
-  fontSize: theme.__hd__.empty.fontSizes.description,
   textAlign: 'center',
   color:
     themeVariant === 'dark'

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

@@ -22,16 +22,14 @@ exports[`Empty renders empty state content correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
+          "letterSpacing": 0.24,
+          "lineHeight": 32,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "RebondGrotesque-SemiBold",
-            "fontSize": 24,
             "marginBottom": 8,
             "textAlign": "center",
           },
@@ -39,10 +37,9 @@ exports[`Empty renders empty state content correctly 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
+    themeLevel="h4"
+    themeTypeface="playful"
     themeVariant="light"
   >
     You have no notification at this time
@@ -54,26 +51,22 @@ exports[`Empty renders empty state content correctly 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "letterSpacing": 0.54,
+          "lineHeight": 26,
         },
         Array [
           Object {
             "color": "#4d6265",
-            "fontFamily": "RebondGrotesque",
-            "fontSize": 18,
             "textAlign": "center",
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
-    themeVariant="light"
+    themeTypeface="playful"
+    themeVariant="regular"
   >
     We'll notify you later.
   </Text>
@@ -117,16 +110,14 @@ exports[`Empty renders empty state with image correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
+          "letterSpacing": 0.24,
+          "lineHeight": 32,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "RebondGrotesque-SemiBold",
-            "fontSize": 24,
             "marginBottom": 8,
             "textAlign": "center",
           },
@@ -134,10 +125,9 @@ exports[`Empty renders empty state with image correctly 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
+    themeLevel="h4"
+    themeTypeface="playful"
     themeVariant="light"
   >
     You have no notification at this time
@@ -149,26 +139,22 @@ exports[`Empty renders empty state with image correctly 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "letterSpacing": 0.54,
+          "lineHeight": 26,
         },
         Array [
           Object {
             "color": "#4d6265",
-            "fontFamily": "RebondGrotesque",
-            "fontSize": 18,
             "textAlign": "center",
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
-    themeVariant="light"
+    themeTypeface="playful"
+    themeVariant="regular"
   >
     We'll notify you later.
   </Text>

package/src/components/Empty/index.tsx

@@ -58,9 +58,11 @@ const Empty = ({
             image.props.style,
           ],
         })}
-      <StyledTitle themeVariant={variant}>{title}</StyledTitle>
+      <StyledTitle themeVariant={variant} level="h4" typeface="playful">
+        {title}
+      </StyledTitle>
       {!!description && (
-        <StyledDescription themeVariant={variant}>
+        <StyledDescription themeVariant={variant} typeface="playful">
           {description}
         </StyledDescription>
       )}

package/src/components/Error/StyledError.tsx

@@ -62,21 +62,15 @@ const StyledErrorImage = styled(Image)(({ theme }) => ({
   resizeMode: 'contain',
 }));
 
-const StyledErrorTitle = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.error.fonts.title,
-  fontSize: theme.__hd__.error.fontSizes.title,
+const StyledErrorTitle = styled(Typography.Title)(({ theme }) => ({
   textAlign: 'center',
   marginBottom: theme.__hd__.error.space.titleMarginBottom,
   color: theme.__hd__.error.colors.title,
-  lineHeight: theme.__hd__.error.lineHeight.title,
 }));
 
-const StyledErrorDescription = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.error.fonts.description,
-  fontSize: theme.__hd__.error.fontSizes.description,
+const StyledErrorDescription = styled(Typography.Body)(({ theme }) => ({
   textAlign: 'center',
   color: theme.__hd__.error.colors.description,
-  lineHeight: theme.__hd__.error.lineHeight.description,
 }));
 
 export {

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

@@ -67,17 +67,14 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontFamily": "RebondGrotesque-SemiBold",
+            "fontSize": 24,
+            "letterSpacing": 0.24,
+            "lineHeight": 32,
           },
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "RebondGrotesque-SemiBold",
-              "fontSize": 24,
-              "lineHeight": 32,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -85,10 +82,9 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeLevel="h4"
+      themeTypeface="playful"
     >
       We’re sorry, something went wrong
     </Text>
@@ -99,26 +95,22 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 18,
+            "letterSpacing": 0.54,
+            "lineHeight": 26,
           },
           Array [
             Object {
               "color": "#4d6265",
-              "fontFamily": "RebondGrotesque",
-              "fontSize": 18,
-              "lineHeight": 26,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeTypeface="playful"
+      themeVariant="regular"
     >
       Please try again later
     </Text>
@@ -201,17 +193,14 @@ exports[`Error renders error screen with image correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontFamily": "RebondGrotesque-SemiBold",
+            "fontSize": 24,
+            "letterSpacing": 0.24,
+            "lineHeight": 32,
           },
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "RebondGrotesque-SemiBold",
-              "fontSize": 24,
-              "lineHeight": 32,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -219,10 +208,9 @@ exports[`Error renders error screen with image correctly 1`] = `
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeLevel="h4"
+      themeTypeface="playful"
     >
       We’re sorry, something went wrong
     </Text>
@@ -233,26 +221,22 @@ exports[`Error renders error screen with image correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 18,
+            "letterSpacing": 0.54,
+            "lineHeight": 26,
           },
           Array [
             Object {
               "color": "#4d6265",
-              "fontFamily": "RebondGrotesque",
-              "fontSize": 18,
-              "lineHeight": 26,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeTypeface="playful"
+      themeVariant="regular"
     >
       Please try again later
     </Text>
@@ -351,17 +335,14 @@ exports[`Error renders full screen error page correctly 1`] = `
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "letterSpacing": 0.24,
+              "lineHeight": 32,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "RebondGrotesque-SemiBold",
-                "fontSize": 24,
-                "lineHeight": 32,
                 "marginBottom": 8,
                 "textAlign": "center",
               },
@@ -369,10 +350,9 @@ exports[`Error renders full screen error page correctly 1`] = `
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
-        themeTypeface="neutral"
+        themeLevel="h4"
+        themeTypeface="playful"
       >
         We’re sorry, something went wrong
       </Text>
@@ -383,26 +363,22 @@ exports[`Error renders full screen error page correctly 1`] = `
             Object {
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontSize": 18,
+              "letterSpacing": 0.54,
+              "lineHeight": 26,
             },
             Array [
               Object {
                 "color": "#4d6265",
-                "fontFamily": "RebondGrotesque",
-                "fontSize": 18,
-                "lineHeight": 26,
                 "textAlign": "center",
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
-        themeTypeface="neutral"
+        themeTypeface="playful"
+        themeVariant="regular"
       >
         Please try again later
       </Text>
@@ -447,17 +423,14 @@ exports[`Error renders title only correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontFamily": "RebondGrotesque-SemiBold",
+            "fontSize": 24,
+            "letterSpacing": 0.24,
+            "lineHeight": 32,
           },
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "RebondGrotesque-SemiBold",
-              "fontSize": 24,
-              "lineHeight": 32,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -465,10 +438,9 @@ exports[`Error renders title only correctly 1`] = `
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeLevel="h4"
+      themeTypeface="playful"
     >
       We’re sorry, something went wrong
     </Text>
@@ -479,26 +451,22 @@ exports[`Error renders title only correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 18,
+            "letterSpacing": 0.54,
+            "lineHeight": 26,
           },
           Array [
             Object {
               "color": "#4d6265",
-              "fontFamily": "RebondGrotesque",
-              "fontSize": 18,
-              "lineHeight": 26,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeTypeface="playful"
+      themeVariant="regular"
     >
       Please try again later
     </Text>

package/src/components/Error/index.tsx

@@ -121,10 +121,14 @@ const ErrorPage = ({
             {renderImage(image)}
           </StyledErrorImageContainer>
         )}
-        <StyledErrorTitle>{title}</StyledErrorTitle>
+        <StyledErrorTitle level="h4" typeface="playful">
+          {title}
+        </StyledErrorTitle>
 
         {description && (
-          <StyledErrorDescription>{description}</StyledErrorDescription>
+          <StyledErrorDescription typeface="playful">
+            {description}
+          </StyledErrorDescription>
         )}
       </StyledErrorContent>
 

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -41,11 +41,8 @@ const StyledBackdrop = styled(Animated.View)<
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
-const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
-  fontSize: theme.__hd__.fab.fontSizes.header,
-  lineHeight: theme.__hd__.fab.lineHeights.header,
+const StyledHeaderText = styled(Typography.Title)<TextProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.headerText,
-  fontFamily: theme.__hd__.fab.fonts.header,
   marginRight: theme.__hd__.fab.space.headerTextMarginRight,
   marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
   textAlign: 'right',

package/src/components/FAB/ActionGroup/StyledActionItem.tsx

@@ -17,12 +17,8 @@ const StyledActionItem = styled(TouchableHighlight)(({ theme }) => ({
   overflow: 'hidden',
 }));
 
-const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>(
+const StyledActionItemText = styled(Typography.Body)<TouchableOpacityProps>(
   ({ theme }) => ({
-    paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
-    fontSize: theme.__hd__.fab.fontSizes.actionItemText,
-    lineHeight: theme.__hd__.fab.lineHeights.actionItemText,
-    fontFamily: theme.__hd__.fab.fonts.actionItemText,
     color: theme.__hd__.fab.colors.actionItemText,
   })
 );