@hero-design/rn 8.110.0 → 8.111.0

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -14,6 +14,7 @@ exports[`Label has archived intent style 1`] = `
       [
         {
           "color": "#606065",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -22,6 +23,7 @@ exports[`Label has archived intent style 1`] = `
       ]
     }
     themeIntent="archived"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -62,6 +64,7 @@ exports[`Label has body intent style 1`] = `
       [
         {
           "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -70,6 +73,7 @@ exports[`Label has body intent style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -110,6 +114,7 @@ exports[`Label has danger intent style 1`] = `
       [
         {
           "color": "#cb300a",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -118,6 +123,7 @@ exports[`Label has danger intent style 1`] = `
       ]
     }
     themeIntent="danger"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -158,6 +164,7 @@ exports[`Label has disabled intent style 1`] = `
       [
         {
           "color": "#bfc1c5",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -166,6 +173,7 @@ exports[`Label has disabled intent style 1`] = `
       ]
     }
     themeIntent="disabled"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -206,6 +214,7 @@ exports[`Label has inactive intent style 1`] = `
       [
         {
           "color": "#808f91",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -214,6 +223,7 @@ exports[`Label has inactive intent style 1`] = `
       ]
     }
     themeIntent="inactive"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -254,6 +264,7 @@ exports[`Label has info intent style 1`] = `
       [
         {
           "color": "#355bfb",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -262,6 +273,7 @@ exports[`Label has info intent style 1`] = `
       ]
     }
     themeIntent="info"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -302,6 +314,7 @@ exports[`Label has inverted intent style 1`] = `
       [
         {
           "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -310,6 +323,7 @@ exports[`Label has inverted intent style 1`] = `
       ]
     }
     themeIntent="inverted"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -350,6 +364,7 @@ exports[`Label has muted intent style 1`] = `
       [
         {
           "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -358,6 +373,7 @@ exports[`Label has muted intent style 1`] = `
       ]
     }
     themeIntent="muted"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -398,6 +414,7 @@ exports[`Label has primary intent style 1`] = `
       [
         {
           "color": "#401960",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -406,6 +423,7 @@ exports[`Label has primary intent style 1`] = `
       ]
     }
     themeIntent="primary"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -446,6 +464,7 @@ exports[`Label has secondary intent style 1`] = `
       [
         {
           "color": "#795e90",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -454,6 +473,7 @@ exports[`Label has secondary intent style 1`] = `
       ]
     }
     themeIntent="secondary"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -494,6 +514,7 @@ exports[`Label has subdued intent style 1`] = `
       [
         {
           "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -502,6 +523,7 @@ exports[`Label has subdued intent style 1`] = `
       ]
     }
     themeIntent="subdued"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -542,6 +564,7 @@ exports[`Label has success intent style 1`] = `
       [
         {
           "color": "#5ace7d",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -550,6 +573,7 @@ exports[`Label has success intent style 1`] = `
       ]
     }
     themeIntent="success"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -590,6 +614,7 @@ exports[`Label has warning intent style 1`] = `
       [
         {
           "color": "#ffbe71",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -598,6 +623,7 @@ exports[`Label has warning intent style 1`] = `
       ]
     }
     themeIntent="warning"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -623,3 +649,103 @@ exports[`Label has warning intent style 1`] = `
   />
 </View>
 `;
+
+exports[`Label renders fontStyle=italic 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-RegularItalic",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={true}
+  >
+    This is text with fontStyle
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Label renders fontStyle=normal 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={false}
+  >
+    This is text with fontStyle
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Typography/Label/__tests__/index.spec.tsx

@@ -31,4 +31,16 @@ describe('Label', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    fontStyle
+    ${'normal'}
+    ${'italic'}
+  `('renders fontStyle=$fontStyle', ({ fontStyle }) => {
+    const { toJSON } = renderWithTheme(
+      <Label fontStyle={fontStyle}>This is text with fontStyle</Label>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Typography/Label/index.tsx

@@ -25,21 +25,29 @@ export interface LabelProps extends NativeTextProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Font style to apply to the text.
+   */
+  fontStyle?: 'normal' | 'italic';
 }
 
 const Label = ({
   children,
   intent = 'body',
   allowFontScaling = false,
+  fontStyle = 'normal',
   ...nativeProps
-}: LabelProps) => (
-  <StyledLabel
-    {...nativeProps}
-    themeIntent={intent}
-    allowFontScaling={allowFontScaling}
-  >
-    {children}
-  </StyledLabel>
-);
+}: LabelProps) => {
+  return (
+    <StyledLabel
+      {...nativeProps}
+      themeIntent={intent}
+      themeIsItalic={fontStyle === 'italic'}
+      allowFontScaling={allowFontScaling}
+    >
+      {children}
+    </StyledLabel>
+  );
+};
 
 export default Label;

package/src/components/Typography/Title/StyledTitle.tsx

@@ -8,13 +8,27 @@ const StyledTitle = styled(Text)<{
   themeIntent: TypographyIntent;
   themeLevel: ThemeLevel;
   themeTypeface: 'neutral' | 'playful';
-}>(({ themeIntent, themeLevel, theme, themeTypeface: typeface }) => ({
-  fontSize: theme.__hd__.typography.fontSizes.titles[typeface][themeLevel],
-  lineHeight: theme.__hd__.typography.lineHeights.titles[typeface][themeLevel],
-  letterSpacing:
-    theme.__hd__.typography.letterSpacings.titles[typeface][themeLevel],
-  fontFamily: theme.__hd__.typography.fontWeights.titles[typeface][themeLevel],
-  color: theme.__hd__.typography.colors[themeIntent],
-}));
+  themeIsItalic?: boolean;
+}>(
+  ({
+    themeIntent,
+    themeLevel,
+    theme,
+    themeTypeface: typeface,
+    themeIsItalic,
+  }) => ({
+    fontSize: theme.__hd__.typography.fontSizes.titles[typeface][themeLevel],
+    lineHeight:
+      theme.__hd__.typography.lineHeights.titles[typeface][themeLevel],
+    letterSpacing:
+      theme.__hd__.typography.letterSpacings.titles[typeface][themeLevel],
+    color: theme.__hd__.typography.colors[themeIntent],
+    fontFamily: themeIsItalic
+      ? theme.__hd__.typography.fontWeights.titles[typeface][
+          `${themeLevel}Italic`
+        ]
+      : theme.__hd__.typography.fontWeights.titles[typeface][themeLevel],
+  })
+);
 
 export { StyledTitle };