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

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,5 +1,7 @@
-import { View, Image, TouchableOpacity, Text } from 'react-native';
+import { View, Image, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
+import Typography from '../Typography';
+import { TextProps } from '../Typography/Text';
 
 type ThemeSize =
   | 'small'
@@ -31,11 +33,16 @@ const StyledTextWrapper = styled(View)(() => ({
   height: '100%',
 }));
 
-const StyledText = styled(Text)<{
-  themeSize: ThemeSize;
-}>(({ themeSize, theme }) => ({
+const StyledText = styled(Typography.Text)<
+  TextProps & {
+    themeSize: ThemeSize;
+  }
+>(({ themeSize, theme }) => ({
   fontFamily: theme.__hd__.avatar.fonts.default,
   fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+  lineHeight: 0, // auto center
+  textAlignVertical: 'center',
+  textAlign: 'center',
   color: theme.__hd__.avatar.colors.text,
   overflow: 'hidden',
 }));

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -47,18 +47,35 @@ exports[`StyledPressable renders correct style 1`] = `
 
 exports[`StyledText renders correct style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
-        "color": "#ffffff",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 16,
-        "overflow": "hidden",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
       },
-      undefined,
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "lineHeight": 0,
+          "overflow": "hidden",
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
     ]
   }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
   themeSize="small"
+  themeTypeface="neutral"
 >
   MD
 </Text>

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

@@ -43,18 +43,35 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "overflow": "hidden",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "lineHeight": 0,
+              "overflow": "hidden",
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
       themeSize="small"
+      themeTypeface="neutral"
     >
       TT
     </Text>
@@ -180,18 +197,35 @@ exports[`Avatar shows title when there is no source 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "overflow": "hidden",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "lineHeight": 0,
+              "overflow": "hidden",
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
       themeSize="small"
+      themeTypeface="neutral"
     >
       TT
     </Text>

package/src/components/Badge/StyledBadge.tsx

@@ -1,5 +1,6 @@
-import { Animated, Text } from 'react-native';
+import { Animated } from 'react-native';
 import styled from '@emotion/native';
+import Typography from '../Typography';
 
 type ThemeIntent =
   | 'primary'
@@ -27,9 +28,10 @@ const StyledView = styled(Animated.View)<{
       : undefined,
 }));
 
-const StyledText = styled(Text)(({ theme }) => ({
+const StyledText = styled(Typography.Text)(({ theme }) => ({
   fontFamily: theme.__hd__.badge.fonts.default,
   fontSize: theme.__hd__.badge.fontSizes.default,
+  lineHeight: theme.__hd__.badge.lineHeights.default,
   color: theme.__hd__.badge.colors.text,
   includeFontPadding: false,
   textAlignVertical: 'center',

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

@@ -24,19 +24,34 @@ exports[`Badge has danger style when intent is danger 1`] = `
   themePadding="wideContent"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "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": 12,
+            "includeFontPadding": false,
+            "lineHeight": 20,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
   >
     DECLINED
   </Text>
@@ -67,19 +82,34 @@ exports[`Badge has info style when intent is info 1`] = `
   themePadding="wideContent"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "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": 12,
+            "includeFontPadding": false,
+            "lineHeight": 20,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
   >
     SUBMITTED
   </Text>
@@ -110,19 +140,34 @@ exports[`Badge has info style when intent is primary 1`] = `
   themePadding="wideContent"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "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": 12,
+            "includeFontPadding": false,
+            "lineHeight": 20,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
   >
     PRIMARY
   </Text>
@@ -153,19 +198,34 @@ exports[`Badge has success style when intent is success 1`] = `
   themePadding="wideContent"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "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": 12,
+            "includeFontPadding": false,
+            "lineHeight": 20,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
   >
     APPROVED
   </Text>
@@ -196,19 +256,34 @@ exports[`Badge has warning style when intent is warning 1`] = `
   themePadding="wideContent"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "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": 12,
+            "includeFontPadding": false,
+            "lineHeight": 20,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
   >
     PENDING
   </Text>
@@ -240,19 +315,34 @@ exports[`Badge renders correctly with custom props 1`] = `
   themePadding="wideContent"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 12,
-          "includeFontPadding": false,
-          "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": 12,
+            "includeFontPadding": false,
+            "lineHeight": 20,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
   >
     50+
   </Text>

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

@@ -44,6 +44,7 @@ exports[`Status Badge renders correctly 1`] = `
 exports[`Status Badge renders correctly with intent 1`] = `
 <View>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

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

@@ -134,6 +134,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeSize="medium"
           />
           <Text
+            allowFontScaling={false}
             numberOfLines={1}
             style={
               Array [
@@ -196,6 +197,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeSize="medium"
           />
           <Text
+            allowFontScaling={false}
             numberOfLines={1}
             style={
               Array [
@@ -258,6 +260,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeSize="medium"
           />
           <Text
+            allowFontScaling={false}
             numberOfLines={1}
             style={
               Array [
@@ -320,6 +323,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeSize="medium"
           />
           <Text
+            allowFontScaling={false}
             numberOfLines={1}
             style={
               Array [

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

@@ -136,6 +136,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
             }
           >
             <Text
+              allowFontScaling={false}
               style={
                 Array [
                   Object {

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -53,6 +53,7 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
     />
   </View>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -136,6 +137,7 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
     />
   </View>
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -32,6 +32,7 @@ exports[`Button renders correctly 1`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={false}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -246,6 +247,7 @@ exports[`Button renders correctly 3`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={true}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -316,6 +318,7 @@ exports[`Button renders correctly 4`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={false}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -534,6 +537,7 @@ exports[`Button renders correctly 6`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={true}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -602,6 +606,7 @@ exports[`Button renders correctly 7`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={false}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -816,6 +821,7 @@ exports[`Button renders correctly 9`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={true}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -884,6 +890,7 @@ exports[`Button renders correctly 10`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={false}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -1098,6 +1105,7 @@ exports[`Button renders correctly 12`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={true}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -1166,6 +1174,7 @@ exports[`Button renders correctly 13`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={false}
     ellipsizeMode="tail"
     numberOfLines={1}
@@ -1380,6 +1389,7 @@ exports[`Button renders correctly 15`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     disabled={true}
     ellipsizeMode="tail"
     numberOfLines={1}

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -597,6 +597,7 @@ exports[`StyledButtonIconWrapper has right style 1`] = `
 
 exports[`StyledButtonText has filled-danger style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -631,6 +632,7 @@ exports[`StyledButtonText has filled-danger style 1`] = `
 
 exports[`StyledButtonText has filled-primary style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -665,6 +667,7 @@ exports[`StyledButtonText has filled-primary style 1`] = `
 
 exports[`StyledButtonText has filled-secondary style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -699,6 +702,7 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
 
 exports[`StyledButtonText has outlined-danger style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -733,6 +737,7 @@ exports[`StyledButtonText has outlined-danger style 1`] = `
 
 exports[`StyledButtonText has outlined-primary style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -767,6 +772,7 @@ exports[`StyledButtonText has outlined-primary style 1`] = `
 
 exports[`StyledButtonText has outlined-secondary style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -801,6 +807,7 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
 
 exports[`StyledButtonText has text-danger style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -835,6 +842,7 @@ exports[`StyledButtonText has text-danger style 1`] = `
 
 exports[`StyledButtonText has text-primary style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -869,6 +877,7 @@ exports[`StyledButtonText has text-primary style 1`] = `
 
 exports[`StyledButtonText has text-secondary style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
@@ -903,6 +912,7 @@ exports[`StyledButtonText has text-secondary style 1`] = `
 
 exports[`StyledButtonText renders disabled correctly 1`] = `
 <Text
+  allowFontScaling={false}
   disabled={true}
   style={
     Array [

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -42,6 +42,7 @@ exports[`CalendarRowItem renders correctly 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -124,6 +125,7 @@ exports[`CalendarRowItem renders correctly 2`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -206,6 +208,7 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -288,6 +291,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -370,6 +374,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {