@hero-design/rn 8.33.1 → 8.33.2

package/src/components/Select/SingleSelect/__tests__/index.spec.tsx

@@ -60,12 +60,8 @@ const renderSingleOption = ({
     onPress={onPress}
     title={
       <>
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
-          {item.text}
-        </Typography.Text>
-        <Typography.Text fontSize="large" intent="subdued">
-          {item.role}
-        </Typography.Text>
+        <Typography.Body variant="regular-bold">{item.text}</Typography.Body>
+        <Typography.Body intent="subdued">{item.role}</Typography.Body>
       </>
     }
   />
@@ -176,7 +172,7 @@ describe('rendering', () => {
         value="daniel"
         onConfirm={jest.fn()}
         renderSelectedValue={(selectedValue, _inputProps) => (
-          <Typography.Text>Custom {selectedValue}</Typography.Text>
+          <Typography.Body>Custom {selectedValue}</Typography.Body>
         )}
       />
     );
@@ -191,7 +187,7 @@ describe('rendering', () => {
         value=""
         onConfirm={jest.fn()}
         renderSelectedValue={() => (
-          <Typography.Text>Custom value</Typography.Text>
+          <Typography.Body>Custom value</Typography.Body>
         )}
       />
     );
@@ -206,7 +202,7 @@ describe('rendering', () => {
         value="Jack"
         onConfirm={jest.fn()}
         renderSelectedValue={(selectedValue) => (
-          <Typography.Text>{`Selected: ${selectedValue}`}</Typography.Text>
+          <Typography.Body>{`Selected: ${selectedValue}`}</Typography.Body>
         )}
       />
     );

package/src/components/Success/StyledSuccess.tsx

@@ -40,17 +40,13 @@ const StyledSuccessImageContainer = styled(View)(({ theme }) => ({
   height: theme.__hd__.success.sizes.image,
 }));
 
-const StyledSuccessTitle = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.success.fonts.title,
-  fontSize: theme.__hd__.success.fontSizes.title,
+const StyledSuccessTitle = styled(Typography.Title)(({ theme }) => ({
   textAlign: 'center',
   marginBottom: theme.__hd__.success.space.titleMarginBottom,
   color: theme.__hd__.success.colors.title,
 }));
 
-const StyledSuccessDescription = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.success.fonts.description,
-  fontSize: theme.__hd__.success.fontSizes.description,
+const StyledSuccessDescription = styled(Typography.Body)(({ theme }) => ({
   textAlign: 'center',
   color: theme.__hd__.success.colors.description,
 }));

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

@@ -89,16 +89,14 @@ exports[`Success renders full screen success 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,
                 "marginBottom": 8,
                 "textAlign": "center",
               },
@@ -106,10 +104,9 @@ exports[`Success renders full screen success page correctly 1`] = `
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
-        themeTypeface="neutral"
+        themeLevel="h4"
+        themeTypeface="playful"
       >
         We’re sorry, something went wrong
       </Text>
@@ -120,25 +117,22 @@ exports[`Success renders full screen success page correctly 1`] = `
             Object {
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
             },
             Array [
               Object {
                 "color": "#4d6265",
-                "fontFamily": "RebondGrotesque",
-                "fontSize": 18,
                 "textAlign": "center",
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="regular"
       >
         Please try again later
       </Text>
@@ -214,16 +208,14 @@ exports[`Success renders succe 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,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -231,10 +223,9 @@ exports[`Success renders succe 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>
@@ -245,25 +236,22 @@ exports[`Success renders succe screen with custom image element correctly 1`] =
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "color": "#4d6265",
-              "fontFamily": "RebondGrotesque",
-              "fontSize": 18,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Please try again later
     </Text>
@@ -346,16 +334,14 @@ exports[`Success renders success 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,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -363,10 +349,9 @@ exports[`Success renders success screen with image correctly 1`] = `
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeLevel="h4"
+      themeTypeface="playful"
     >
       We’re sorry, something went wrong
     </Text>
@@ -377,25 +362,22 @@ exports[`Success renders success screen with image correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "color": "#4d6265",
-              "fontFamily": "RebondGrotesque",
-              "fontSize": 18,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Please try again later
     </Text>
@@ -439,16 +421,14 @@ exports[`Success 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,
               "marginBottom": 8,
               "textAlign": "center",
             },
@@ -456,10 +436,9 @@ exports[`Success renders title only correctly 1`] = `
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
+      themeLevel="h4"
+      themeTypeface="playful"
     >
       We’re sorry, something went wrong
     </Text>
@@ -470,25 +449,22 @@ exports[`Success renders title only correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "color": "#4d6265",
-              "fontFamily": "RebondGrotesque",
-              "fontSize": 18,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Please try again later
     </Text>

package/src/components/Success/index.tsx

@@ -104,7 +104,9 @@ const SuccessPage = ({
             {renderImage(image)}
           </StyledSuccessImageContainer>
         )}
-        <StyledSuccessTitle>{title}</StyledSuccessTitle>
+        <StyledSuccessTitle level="h4" typeface="playful">
+          {title}
+        </StyledSuccessTitle>
 
         {!!description && (
           <StyledSuccessDescription>{description}</StyledSuccessDescription>

package/src/components/Swipeable/__tests__/SwipeableAction.spec.tsx

@@ -13,7 +13,7 @@ describe('rendering', () => {
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <SwipeableAction intent={intent}>
-        <Typography.Text>Action title</Typography.Text>
+        <Typography.Body variant="small">Action title</Typography.Body>
       </SwipeableAction>
     );
 
@@ -27,7 +27,7 @@ describe('behavior', () => {
     const onPress = jest.fn();
     const { getByText } = renderWithTheme(
       <SwipeableAction onPress={onPress}>
-        <Typography.Text>Action title</Typography.Text>
+        <Typography.Body variant="small">Action title</Typography.Body>
       </SwipeableAction>
     );
 

package/src/components/Swipeable/__tests__/__snapshots__/SwipeableAction.spec.tsx.snap

@@ -28,16 +28,15 @@ exports[`rendering renders correctly when intent is danger 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Action title
   </Text>
@@ -72,16 +71,15 @@ exports[`rendering renders correctly when intent is primary 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Action title
   </Text>
@@ -116,16 +114,15 @@ exports[`rendering renders correctly when intent is success 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Action title
   </Text>

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

@@ -17,16 +17,15 @@ exports[`Swipeable renders correctly 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.48,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       Swipeable Item
     </Text>

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

@@ -9,22 +9,24 @@ describe('Swipeable', () => {
       <Swipeable
         leftActions={
           <Swipeable.Action intent="primary">
-            <Typography.Text intent="inverted">Archived</Typography.Text>
+            <Typography.Body variant="small" intent="inverted">
+              Archived
+            </Typography.Body>
           </Swipeable.Action>
         }
         rightActions={
           <>
             <Swipeable.Action intent="success">
-              <Typography.Text>Approve</Typography.Text>
+              <Typography.Body variant="small">Approve</Typography.Body>
             </Swipeable.Action>
             <Swipeable.Action intent="danger">
-              <Typography.Text>Decline</Typography.Text>
+              <Typography.Body variant="small">Decline</Typography.Body>
             </Swipeable.Action>
           </>
         }
         rightActionsWidth={168}
       >
-        <Typography.Text>Swipeable Item</Typography.Text>
+        <Typography.Body variant="small">Swipeable Item</Typography.Body>
       </Swipeable>
     );
 

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -69,7 +69,7 @@ const Option = <T,>({
         onLayout={onLayout}
       >
         <OptionContent
-          content={<Typography.Text fontSize="large">{text}</Typography.Text>}
+          content={<Typography.Body>{text}</Typography.Body>}
           badge={badge}
         />
       </StyledTextWrapper>

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -104,10 +104,9 @@ exports[`Option renders correctly when selected 1`] = `
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       My Dashboard
     </Text>

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -59,10 +59,9 @@ exports[`SelectorSwitch renders correctly 1`] = `
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       My Dashboard
     </Text>

package/src/components/Tabs/ScrollableTabsHeader.tsx

@@ -44,13 +44,13 @@ const getTabItem = ({
 
   if (typeof item === 'string') {
     return (
-      <Typography.Text
-        fontWeight={active ? 'semi-bold' : 'regular'}
+      <Typography.Body
+        variant={active ? 'regular-bold' : 'regular'}
         numberOfLines={1}
         style={{ color }}
       >
         {item}
-      </Typography.Text>
+      </Typography.Body>
     );
   }
 

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

@@ -16,7 +16,7 @@ describe('ScenceView', () => {
           lazy
           lazyPreloadDistance={1}
         >
-          <Typography.Text>Scene 1</Typography.Text>
+          <Typography.Body variant="small">Scene 1</Typography.Body>
         </ScenceView>
       );
 
@@ -32,7 +32,7 @@ describe('ScenceView', () => {
             lazy
             lazyPreloadDistance={1}
           >
-            <Typography.Text>Scene 1</Typography.Text>
+            <Typography.Body variant="small">Scene 1</Typography.Body>
           </ScenceView>
         </ThemeProvider>
       );
@@ -49,7 +49,7 @@ describe('ScenceView', () => {
           lazy
           lazyPreloadDistance={1}
         >
-          <Typography.Text>Scene 1</Typography.Text>
+          <Typography.Body variant="small">Scene 1</Typography.Body>
         </ScenceView>
       );
 
@@ -65,7 +65,7 @@ describe('ScenceView', () => {
             lazy
             lazyPreloadDistance={1}
           >
-            <Typography.Text>Scene 1</Typography.Text>
+            <Typography.Body variant="small">Scene 1</Typography.Body>
           </ScenceView>
         </ThemeProvider>
       );

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

@@ -50,16 +50,15 @@ exports[`ScenceView lazy not renders child correctly when the scence is lazy and
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Scene 1
   </Text>
@@ -100,16 +99,15 @@ exports[`ScenceView lazy renders child correctly when the scence is focused and
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Scene 1
   </Text>
@@ -144,16 +142,15 @@ exports[`ScenceView lazy renders child correctly when the scence is focused and
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Scene 1
   </Text>