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

@hero-design/rn 8.33.1 → 8.33.2

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 (172) hide show

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

@@ -65,17 +65,14 @@ exports[`ActionGroup has active false 1`] = `
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 24,
+              "letterSpacing": 0,
+              "lineHeight": 32,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 24,
-                "lineHeight": 32,
                 "marginBottom": 24,
                 "marginRight": 24,
                 "textAlign": "right",
@@ -85,9 +82,8 @@ exports[`ActionGroup has active false 1`] = `
           ]
         }
         testID="header-text"
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h4"
         themeTypeface="neutral"
       >
         What would you like to create?
@@ -189,26 +185,21 @@ exports[`ActionGroup has active false 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Give shout out
           </Text>
@@ -297,26 +288,21 @@ exports[`ActionGroup has active false 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Goal
           </Text>
@@ -405,26 +391,21 @@ exports[`ActionGroup has active false 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Leave request
           </Text>
@@ -513,26 +494,21 @@ exports[`ActionGroup has active false 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Safety incident
           </Text>
@@ -621,26 +597,21 @@ exports[`ActionGroup has active false 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Timesheets
           </Text>
@@ -742,16 +713,13 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "color": "#ffffff",
-              "fontFamily": "BeVietnamPro-SemiBold",
-              "fontSize": 16,
-              "lineHeight": 24,
               "marginHorizontal": 8,
               "textAlign": "center",
               "textAlignVertical": "center",
@@ -760,10 +728,9 @@ exports[`ActionGroup has active false 1`] = `
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Shout out
     </Text>
@@ -836,17 +803,14 @@ exports[`ActionGroup has active true 1`] = `
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 24,
+              "letterSpacing": 0,
+              "lineHeight": 32,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 24,
-                "lineHeight": 32,
                 "marginBottom": 24,
                 "marginRight": 24,
                 "textAlign": "right",
@@ -856,9 +820,8 @@ exports[`ActionGroup has active true 1`] = `
           ]
         }
         testID="header-text"
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h4"
         themeTypeface="neutral"
       >
         What would you like to create?
@@ -960,26 +923,21 @@ exports[`ActionGroup has active true 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Give shout out
           </Text>
@@ -1068,26 +1026,21 @@ exports[`ActionGroup has active true 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Goal
           </Text>
@@ -1176,26 +1129,21 @@ exports[`ActionGroup has active true 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Leave request
           </Text>
@@ -1284,26 +1232,21 @@ exports[`ActionGroup has active true 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Safety incident
           </Text>
@@ -1392,26 +1335,21 @@ exports[`ActionGroup has active true 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
                 },
                 Array [
                   Object {
                     "color": "#ffffff",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                    "paddingLeft": 4,
                   },
                   undefined,
                 ],
               ]
             }
-            themeFontSize="medium"
-            themeFontWeight="regular"
             themeIntent="body"
             themeTypeface="neutral"
+            themeVariant="regular"
           >
             Timesheets
           </Text>

package/src/components/FAB/ActionGroup/index.tsx CHANGED Viewed

@@ -141,7 +141,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
             <Animated.View
               style={{ transform: [{ translateY: titleTranslateY }] }}
             >
-              <StyledHeaderText testID="header-text">
+              <StyledHeaderText testID="header-text" level="h4">
                 {headerTitle}
               </StyledHeaderText>
             </Animated.View>

package/src/components/FAB/StyledFAB.tsx CHANGED Viewed

@@ -30,10 +30,7 @@ const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   textAlign: 'center',
 }));
-const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
-  fontFamily: theme.__hd__.fab.fonts.title,
-  fontSize: theme.__hd__.fab.fontSizes.title,
-  lineHeight: theme.__hd__.fab.lineHeights.title,
+const StyledFABText = styled(Typography.Body)<TextProps>(({ theme }) => ({
   color: theme.__hd__.fab.colors.titleText,
   textAlignVertical: 'center',
   textAlign: 'center',

package/src/components/FAB/__tests__/StyledFAB.spec.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
       <StyledFAB>
-        <Typography.Text> button </Typography.Text>
+        <Typography.Body variant="small"> button </Typography.Body>
       </StyledFAB>
     );

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

@@ -42,16 +42,15 @@ exports[`StyledFAB 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"
   >
      button
   </Text>

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

@@ -255,16 +255,13 @@ exports[`FAB when title has value renders 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": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 16,
-            "lineHeight": 24,
             "marginHorizontal": 8,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -273,10 +270,9 @@ exports[`FAB when title has value renders correctly 1`] = `
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="regular"
   >
     Shout out
   </Text>

package/src/components/List/BasicListItem.tsx CHANGED Viewed

@@ -90,16 +90,12 @@ const BasicListItem = ({
         )}
         <StyledTitleContainer>
           {typeof title === 'string' ? (
-            <Typography.Text intent="body" fontSize="large">
-              {title}
-            </Typography.Text>
+            <Typography.Body intent="body">{title}</Typography.Body>
           ) : (
             title
           )}
           {subtitle && (
-            <Typography.Text intent="subdued" fontSize="small">
-              {subtitle}
-            </Typography.Text>
+            <Typography.Caption intent="subdued">{subtitle}</Typography.Caption>
           )}
         </StyledTitleContainer>
         {suffix && (

package/src/components/List/ListItem.tsx CHANGED Viewed

@@ -124,16 +124,14 @@ const ListItem = ({
             )}
             <StyledTitleContainer>
               {typeof title === 'string' ? (
-                <Typography.Text intent="body" fontSize="large">
-                  {title}
-                </Typography.Text>
+                <Typography.Body intent="body">{title}</Typography.Body>
               ) : (
                 title
               )}
               {!!subtitle && (
-                <Typography.Text intent="subdued" fontSize="small">
+                <Typography.Caption intent="subdued">
                   {subtitle}
-                </Typography.Text>
+                </Typography.Caption>
               )}
             </StyledTitleContainer>
             {suffix && (

package/src/components/List/__tests__/ListItem.spec.tsx CHANGED Viewed

@@ -57,8 +57,8 @@ describe('ListItem', () => {
             justifyContent: 'space-between',
           }}
         >
-          <Typography.Text>Gross pay</Typography.Text>
-          <Typography.Text>$1052.03</Typography.Text>
+          <Typography.Body>Gross pay</Typography.Body>
+          <Typography.Body>$1052.03</Typography.Body>
         </View>
         <View
           style={{
@@ -67,8 +67,8 @@ describe('ListItem', () => {
             justifyContent: 'space-between',
           }}
         >
-          <Typography.Text>Gross pay</Typography.Text>
-          <Typography.Text>$1052.03</Typography.Text>
+          <Typography.Body>Gross pay</Typography.Body>
+          <Typography.Body>$1052.03</Typography.Body>
         </View>
       </ListItem>
     );

package/src/components/List/__tests__/StyledBasicListItem.spec.tsx CHANGED Viewed

@@ -18,7 +18,9 @@ describe('StyledListItemContainer', () => {
           themeSelected={themeSelected}
           themeDisabled={themeDisabled}
         >
-          <Typography.Text>StyledListItemContainer</Typography.Text>
+          <Typography.Body variant="small">
+            StyledListItemContainer
+          </Typography.Body>
         </StyledListItemContainer>
       );
       expect(toJSON()).toMatchSnapshot();

package/src/components/List/__tests__/StyledListItem.spec.tsx CHANGED Viewed

@@ -21,7 +21,9 @@ describe('ListItemContainer', () => {
           themeSelected={themeSelected}
           themeVariant={themeVariant}
         >
-          <Typography.Text>StyledListItemContainer</Typography.Text>
+          <Typography.Body variant="small">
+            StyledListItemContainer
+          </Typography.Body>
         </StyledListItemContainer>
       );
       expect(toJSON()).toMatchSnapshot();

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

@@ -80,10 +80,9 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       List item
     </Text>
@@ -95,16 +94,14 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
-            "letterSpacing": 0.36,
+            "letterSpacing": 0.48,
             "lineHeight": 16,
           },
           undefined,
         ]
       }
-      themeFontSize="small"
       themeFontWeight="regular"
       themeIntent="subdued"
-      themeTypeface="neutral"
     >
       subtitle
     </Text>
@@ -218,10 +215,9 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       List item
     </Text>
@@ -233,16 +229,14 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
-            "letterSpacing": 0.36,
+            "letterSpacing": 0.48,
             "lineHeight": 16,
           },
           undefined,
         ]
       }
-      themeFontSize="small"
       themeFontWeight="regular"
       themeIntent="subdued"
-      themeTypeface="neutral"
     >
       subtitle
     </Text>