npm - @hero-design/rn - Versions diffs - 8.33.1 → 8.34.0 - Mend

@hero-design/rn 8.33.1 → 8.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/src/components/Alert/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -77,16 +77,15 @@ exports[`Alert Icon render custom icon 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"
       >
         Content
       </Text>
@@ -172,16 +171,15 @@ exports[`Alert renders correctly when intent is error 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
         Title
       </Text>
@@ -193,16 +191,15 @@ exports[`Alert renders correctly when intent is error 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"
       >
         Content
       </Text>
@@ -323,16 +320,15 @@ exports[`Alert renders correctly when intent is info 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
         Title
       </Text>
@@ -344,16 +340,15 @@ exports[`Alert renders correctly when intent is info 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"
       >
         Content
       </Text>
@@ -447,16 +442,15 @@ exports[`Alert renders correctly when intent is notification 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
         Title
       </Text>
@@ -468,16 +462,15 @@ exports[`Alert renders correctly when intent is notification 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"
       >
         Content
       </Text>
@@ -598,16 +591,15 @@ exports[`Alert renders correctly when intent is success 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
         Title
       </Text>
@@ -619,16 +611,15 @@ exports[`Alert 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"
       >
         Content
       </Text>
@@ -749,16 +740,15 @@ exports[`Alert renders correctly when intent is warning 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
         Title
       </Text>
@@ -770,16 +760,15 @@ exports[`Alert renders correctly when intent is warning 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"
       >
         Content
       </Text>
@@ -900,16 +889,15 @@ exports[`Alert renders correctly without rounded  1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="semi-bold"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
         Title
       </Text>
@@ -921,16 +909,15 @@ exports[`Alert renders correctly without rounded  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"
       >
         Content
       </Text>

package/src/components/Alert/__tests__/index.spec.tsx CHANGED Viewed

@@ -90,7 +90,9 @@ describe('Alert', () => {
     it('renders custom title correctly', () => {
       const { getByText } = renderWithTheme(
         <Alert
-          title={<Typography.Text>Custom Title</Typography.Text>}
+          title={
+            <Typography.Body variant="small">Custom Title</Typography.Body>
+          }
           content="Content"
         />
       );
@@ -101,7 +103,11 @@ describe('Alert', () => {
   describe('Content', () => {
     it('renders custom content correctly', () => {
       const { getByText } = renderWithTheme(
-        <Alert content={<Typography.Text>Custom Content</Typography.Text>} />
+        <Alert
+          content={
+            <Typography.Body variant="small">Custom Content</Typography.Body>
+          }
+        />
       );
       expect(getByText('Custom Content')).toBeDefined();

package/src/components/Alert/index.tsx CHANGED Viewed

@@ -103,12 +103,12 @@ const Alert = ({
         ) : null}
         <TextContainer>
           {typeof title === 'string' ? (
-            <Typography.Text fontWeight="semi-bold">{title}</Typography.Text>
+            <Typography.Body variant="small-bold">{title}</Typography.Body>
           ) : (
             title
           )}
           {typeof content === 'string' ? (
-            <Typography.Text>{content}</Typography.Text>
+            <Typography.Body variant="small">{content}</Typography.Body>
           ) : (
             content
           )}

package/src/components/Attachment/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -69,16 +69,15 @@ exports[`Attachment 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"
       >
         Screenshot.png
       </Text>

package/src/components/Attachment/index.tsx CHANGED Viewed

@@ -57,7 +57,9 @@ const Attachment = ({
       {previewElement}
       {filename ? (
         <StyledTextContainer testID="attachment-content">
-          <Typography.Text numberOfLines={1}>{filename}</Typography.Text>
+          <Typography.Body variant="small" numberOfLines={1}>
+            {filename}
+          </Typography.Body>
         </StyledTextContainer>
       ) : null}
     </StyledContentContainer>

package/src/components/Badge/StyledBadge.tsx CHANGED Viewed

@@ -28,10 +28,7 @@ const StyledView = styled(Animated.View)<{
       : undefined,
 }));
-const StyledText = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.badge.fonts.default,
-  fontSize: theme.__hd__.badge.fontSizes.default,
-  lineHeight: theme.__hd__.badge.lineHeights.default,
+const StyledText = styled(Typography.Caption)(({ theme }) => ({
   color: theme.__hd__.badge.colors.text,
   includeFontPadding: false,
   textAlignVertical: 'center',

package/src/components/Badge/__tests__/Status.spec.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ describe('Status Badge', () => {
   it('renders correctly with intent', () => {
     const { getByText, toJSON } = renderWithTheme(
       <Badge.Status intent="success">
-        <Typography.Text>Activity</Typography.Text>
+        <Typography.Body variant="small">Activity</Typography.Body>
       </Badge.Status>
     );
     expect(toJSON()).toMatchSnapshot();

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap CHANGED Viewed

@@ -30,17 +30,14 @@ exports[`Badge has danger style when intent is danger 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 12,
+          "letterSpacing": 0.48,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -48,10 +45,8 @@ exports[`Badge has danger style when intent is danger 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
   >
     DECLINED
   </Text>
@@ -88,17 +83,14 @@ exports[`Badge has info style when intent is info 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 12,
+          "letterSpacing": 0.48,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -106,10 +98,8 @@ exports[`Badge has info style when intent is info 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
   >
     SUBMITTED
   </Text>
@@ -146,17 +136,14 @@ exports[`Badge has info style when intent is primary 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 12,
+          "letterSpacing": 0.48,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -164,10 +151,8 @@ exports[`Badge has info style when intent is primary 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
   >
     PRIMARY
   </Text>
@@ -204,17 +189,14 @@ exports[`Badge has success style when intent is success 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 12,
+          "letterSpacing": 0.48,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -222,10 +204,8 @@ exports[`Badge has success style when intent is success 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
   >
     APPROVED
   </Text>
@@ -262,17 +242,14 @@ exports[`Badge has warning style when intent is warning 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 12,
+          "letterSpacing": 0.48,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -280,10 +257,8 @@ exports[`Badge has warning style when intent is warning 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
   >
     PENDING
   </Text>
@@ -321,17 +296,14 @@ exports[`Badge renders correctly with custom props 1`] = `
         Object {
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontSize": 12,
+          "letterSpacing": 0.48,
+          "lineHeight": 16,
         },
         Array [
           Object {
             "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -339,10 +311,8 @@ exports[`Badge renders correctly with custom props 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
-    themeTypeface="neutral"
   >
     50+
   </Text>

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap CHANGED Viewed

@@ -51,16 +51,15 @@ exports[`Status Badge renders correctly with intent 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"
   >
     Activity
   </Text>

package/src/components/BottomNavigation/StyledBottomNavigation.tsx CHANGED Viewed

@@ -45,7 +45,7 @@ const BottomBarItem = styled(View)({
   alignItems: 'center',
 });
-const StyledBottomBarText = styled(Typography.Text)(({ theme }) => ({
+const StyledBottomBarText = styled(Typography.Caption)(({ theme }) => ({
   marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop,
 }));

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -142,7 +142,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "color": "#401960",
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
-                  "letterSpacing": 0.36,
+                  "letterSpacing": 0.24,
                   "lineHeight": 16,
                 },
                 Array [
@@ -153,10 +153,8 @@ exports[`BottomNavigation renders correctly 1`] = `
                 ],
               ]
             }
-            themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="primary"
-            themeTypeface="neutral"
           >
             Home
           </Text>
@@ -205,7 +203,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
-                  "letterSpacing": 0.36,
+                  "letterSpacing": 0.24,
                   "lineHeight": 16,
                 },
                 Array [
@@ -216,10 +214,8 @@ exports[`BottomNavigation renders correctly 1`] = `
                 ],
               ]
             }
-            themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="body"
-            themeTypeface="neutral"
           >
             Feed
           </Text>
@@ -268,7 +264,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
-                  "letterSpacing": 0.36,
+                  "letterSpacing": 0.24,
                   "lineHeight": 16,
                 },
                 Array [
@@ -279,10 +275,8 @@ exports[`BottomNavigation renders correctly 1`] = `
                 ],
               ]
             }
-            themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="body"
-            themeTypeface="neutral"
           >
             Alerts
           </Text>
@@ -331,7 +325,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
-                  "letterSpacing": 0.36,
+                  "letterSpacing": 0.24,
                   "lineHeight": 16,
                 },
                 Array [
@@ -342,10 +336,8 @@ exports[`BottomNavigation renders correctly 1`] = `
                 ],
               ]
             }
-            themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="body"
-            themeTypeface="neutral"
           >
             Profile
           </Text>

package/src/components/BottomNavigation/index.tsx CHANGED Viewed

@@ -142,7 +142,6 @@ const BottomNavigation = ({
                   />
                   {!!title && (
                     <StyledBottomBarText
-                      fontSize="small"
                       fontWeight="semi-bold"
                       intent={active ? 'primary' : 'body'}
                       numberOfLines={1}

package/src/components/BottomSheet/Header.tsx CHANGED Viewed

@@ -26,9 +26,7 @@ const Header = ({
     <StyledHeaderWrapper>
       {typeof content === 'string' ? (
         <StyledHeader>
-          <Typography.Text fontSize="large" fontWeight="semi-bold">
-            {content}
-          </Typography.Text>
+          <Typography.Body variant="regular-bold">{content}</Typography.Body>
         </StyledHeader>
       ) : (
         <View style={{ flex: 1 }}>{content}</View>

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -143,16 +143,15 @@ exports[`BottomSheet renders correctly with open state 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"
             >
               Title
             </Text>