@hero-design/rn 8.12.5-alpha.0 → 8.12.5

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

@@ -15,6 +15,7 @@ exports[`Card renders correctly when intent is archived 1`] = `
   themeIntent="archived"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -52,6 +53,7 @@ exports[`Card renders correctly when intent is danger 1`] = `
   themeIntent="danger"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -89,6 +91,7 @@ exports[`Card renders correctly when intent is info 1`] = `
   themeIntent="info"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -126,6 +129,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
   themeIntent="primary"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -163,6 +167,7 @@ exports[`Card renders correctly when intent is success 1`] = `
   themeIntent="success"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -198,6 +203,7 @@ exports[`Card renders correctly when intent is undefined 1`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap

@@ -133,6 +133,7 @@ exports[`CardCarousel should render correctly 1`] = `
               }
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -216,6 +217,7 @@ exports[`CardCarousel should render correctly 1`] = `
               }
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {

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

@@ -173,6 +173,7 @@ exports[`Carousel renders basic carousel 1`] = `
               width={750}
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -202,6 +203,7 @@ exports[`Carousel renders basic carousel 1`] = `
                 Welcome to the new Employment Hero app
               </Text>
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -307,6 +309,7 @@ exports[`Carousel renders basic carousel 1`] = `
                 }
               />
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -336,6 +339,7 @@ exports[`Carousel renders basic carousel 1`] = `
                 Same app with a new look!
               </Text>
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -431,6 +435,7 @@ exports[`Carousel renders basic carousel 1`] = `
               width={750}
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -460,6 +465,7 @@ exports[`Carousel renders basic carousel 1`] = `
                 Easier to get around
               </Text>
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -553,6 +559,7 @@ exports[`Carousel renders basic carousel 1`] = `
               width={750}
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -631,6 +638,7 @@ exports[`Carousel renders basic carousel 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}
@@ -916,6 +924,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
               width={750}
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -945,6 +954,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                 Welcome to the new Employment Hero app
               </Text>
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -1050,6 +1060,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                 }
               />
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -1079,6 +1090,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                 Same app with a new look!
               </Text>
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -1174,6 +1186,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
               width={750}
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -1203,6 +1216,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                 Easier to get around
               </Text>
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -1296,6 +1310,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
               width={750}
             >
               <Text
+                allowFontScaling={false}
                 style={
                   Array [
                     Object {
@@ -1374,6 +1389,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           disabled={false}
           ellipsizeMode="tail"
           numberOfLines={1}

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

@@ -154,6 +154,7 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -238,6 +239,7 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -318,6 +320,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -402,6 +405,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

package/src/components/ContentNavigator/__tests__/__snapshots__/StyledContentNavigator.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Value has correct style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {

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

@@ -52,6 +52,7 @@ exports[`rendering renders correctly 1`] = `
     />
   </View>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -170,6 +171,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
     />
   </View>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

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

@@ -99,6 +99,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           testID="label-container"
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -148,6 +149,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "disabled": false,
               }
             }
+            allowFontScaling={false}
             editable={true}
             onBlur={[Function]}
             onChangeText={[Function]}

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

@@ -99,6 +99,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
           testID="label-container"
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -148,6 +149,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "disabled": false,
               }
             }
+            allowFontScaling={false}
             editable={true}
             onBlur={[Function]}
             onChangeText={[Function]}
@@ -373,6 +375,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     }
                   >
                     <Text
+                      allowFontScaling={false}
                       style={
                         Array [
                           Object {
@@ -512,6 +515,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       }
                     >
                       <Text
+                        allowFontScaling={false}
                         disabled={false}
                         ellipsizeMode="tail"
                         numberOfLines={1}

package/src/components/Empty/StyledEmpty.tsx

@@ -1,5 +1,6 @@
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import styled from '@emotion/native';
+import Typography from '../Typography';
 
 type ThemeVariant = 'light' | 'dark';
 
@@ -12,7 +13,7 @@ const StyledWrapper = styled(View)(({ theme }) => ({
   padding: theme.__hd__.empty.space.wrapperPadding,
 }));
 
-const StyledTitle = styled(Text)<{ themeVariant: ThemeVariant }>(
+const StyledTitle = styled(Typography.Text)<{ themeVariant: ThemeVariant }>(
   ({ theme, themeVariant }) => ({
     fontFamily: theme.__hd__.empty.fonts.title,
     fontSize: theme.__hd__.empty.fontSizes.title,
@@ -25,16 +26,16 @@ const StyledTitle = styled(Text)<{ themeVariant: ThemeVariant }>(
   })
 );
 
-const StyledDescription = styled(Text)<{ themeVariant: ThemeVariant }>(
-  ({ theme, themeVariant }) => ({
-    fontFamily: theme.__hd__.empty.fonts.description,
-    fontSize: theme.__hd__.empty.fontSizes.description,
-    textAlign: 'center',
-    color:
-      themeVariant === 'dark'
-        ? theme.__hd__.empty.colors.invertedSubduedText
-        : theme.__hd__.empty.colors.subduedText,
-  })
-);
+const StyledDescription = styled(Typography.Text)<{
+  themeVariant: ThemeVariant;
+}>(({ theme, themeVariant }) => ({
+  fontFamily: theme.__hd__.empty.fonts.description,
+  fontSize: theme.__hd__.empty.fontSizes.description,
+  textAlign: 'center',
+  color:
+    themeVariant === 'dark'
+      ? theme.__hd__.empty.colors.invertedSubduedText
+      : theme.__hd__.empty.colors.subduedText,
+}));
 
 export { StyledWrapper, StyledTitle, StyledDescription };

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

@@ -17,34 +17,62 @@ exports[`Empty renders empty state content correctly 1`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "RebondGrotesque-SemiBold",
-          "fontSize": 24,
-          "marginBottom": 16,
-          "textAlign": "center",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "RebondGrotesque-SemiBold",
+            "fontSize": 24,
+            "marginBottom": 16,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
     themeVariant="light"
   >
     You have no notification at this time
   </Text>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#4d6265",
-          "fontFamily": "RebondGrotesque",
-          "fontSize": 18,
-          "textAlign": "center",
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#4d6265",
+            "fontFamily": "RebondGrotesque",
+            "fontSize": 18,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
     themeVariant="light"
   >
     We'll notify you later.
@@ -84,34 +112,62 @@ exports[`Empty renders empty state with image correctly 1`] = `
     }
   />
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "RebondGrotesque-SemiBold",
-          "fontSize": 24,
-          "marginBottom": 16,
-          "textAlign": "center",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "RebondGrotesque-SemiBold",
+            "fontSize": 24,
+            "marginBottom": 16,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
     themeVariant="light"
   >
     You have no notification at this time
   </Text>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#4d6265",
-          "fontFamily": "RebondGrotesque",
-          "fontSize": 18,
-          "textAlign": "center",
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#4d6265",
+            "fontFamily": "RebondGrotesque",
+            "fontSize": 18,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
     themeVariant="light"
   >
     We'll notify you later.

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

@@ -53,6 +53,7 @@ exports[`ActionGroup has active false 1`] = `
     testID="action-group"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -136,6 +137,7 @@ exports[`ActionGroup has active false 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -216,6 +218,7 @@ exports[`ActionGroup has active false 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -296,6 +299,7 @@ exports[`ActionGroup has active false 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -376,6 +380,7 @@ exports[`ActionGroup has active false 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -456,6 +461,7 @@ exports[`ActionGroup has active false 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -546,20 +552,34 @@ exports[`ActionGroup has active false 1`] = `
       themeSize="xsmall"
     />
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginHorizontal": 8,
-            "textAlign": "center",
-            "textAlignVertical": "center",
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "lineHeight": 24,
+              "marginHorizontal": 8,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
     >
       Shout out
     </Text>
@@ -620,6 +640,7 @@ exports[`ActionGroup has active true 1`] = `
     testID="action-group"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -703,6 +724,7 @@ exports[`ActionGroup has active true 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -783,6 +805,7 @@ exports[`ActionGroup has active true 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -863,6 +886,7 @@ exports[`ActionGroup has active true 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -943,6 +967,7 @@ exports[`ActionGroup has active true 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1023,6 +1048,7 @@ exports[`ActionGroup has active true 1`] = `
           themeSize="medium"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1113,20 +1139,34 @@ exports[`ActionGroup has active true 1`] = `
       themeSize="xsmall"
     />
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 16,
-            "lineHeight": 24,
-            "marginHorizontal": 8,
-            "textAlign": "center",
-            "textAlignVertical": "center",
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "lineHeight": 24,
+              "marginHorizontal": 8,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
     >
       Shout out
     </Text>

package/src/components/FAB/StyledFAB.tsx

@@ -1,8 +1,9 @@
-import { Text, TouchableHighlight } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import styled from '@emotion/native';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
 import Icon from '../Icon';
 import type { IconProps } from '../Icon';
+import Typography from '../Typography';
 
 const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
   ({ theme }) => ({
@@ -25,7 +26,7 @@ const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
   textAlign: 'center',
 }));
 
-const StyledFABText = styled(Text)<TextProps>(({ theme }) => ({
+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,

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

@@ -29,6 +29,7 @@ exports[`StyledFABContainer renders correctly 1`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {