@hero-design/rn 8.110.1 → 8.112.0

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

@@ -24,6 +24,7 @@ exports[`Caption has archived intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="archived"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -74,6 +75,7 @@ exports[`Caption has body intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="body"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -124,6 +126,7 @@ exports[`Caption has danger intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="danger"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -174,6 +177,7 @@ exports[`Caption has disabled intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="disabled"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -224,6 +228,7 @@ exports[`Caption has inactive intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="inactive"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -274,6 +279,7 @@ exports[`Caption has info intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="info"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -324,6 +330,7 @@ exports[`Caption has inverted intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="inverted"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -374,6 +381,7 @@ exports[`Caption has muted intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="muted"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -424,6 +432,7 @@ exports[`Caption has primary intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="primary"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -474,6 +483,7 @@ exports[`Caption has regular fontWeight style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="body"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -524,6 +534,7 @@ exports[`Caption has secondary intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="secondary"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -574,6 +585,7 @@ exports[`Caption has semi-bold fontWeight style 1`] = `
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -624,6 +636,7 @@ exports[`Caption has subdued intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="subdued"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -674,6 +687,7 @@ exports[`Caption has success intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="success"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -724,6 +738,7 @@ exports[`Caption has warning intent style 1`] = `
     }
     themeFontWeight="regular"
     themeIntent="warning"
+    themeIsItalic={false}
   >
     This is a test
   </Text>
@@ -749,3 +764,207 @@ exports[`Caption has warning intent style 1`] = `
   />
 </View>
 `;
+
+exports[`Caption renders fontStyle=italic with regular fontWeight 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-RegularItalic",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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[`Caption renders fontStyle=italic with semi-bold fontWeight 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBoldItalic",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="semi-bold"
+    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[`Caption renders fontStyle=normal with regular fontWeight 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    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>
+`;
+
+exports[`Caption renders fontStyle=normal with semi-bold fontWeight 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.24,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="semi-bold"
+    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/Caption/__tests__/index.spec.tsx

@@ -45,4 +45,23 @@ describe('Caption', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    fontStyle   | fontWeight
+    ${'normal'} | ${'regular'}
+    ${'italic'} | ${'regular'}
+    ${'normal'} | ${'semi-bold'}
+    ${'italic'} | ${'semi-bold'}
+  `(
+    'renders fontStyle=$fontStyle with $fontWeight fontWeight',
+    ({ fontStyle, fontWeight }) => {
+      const { toJSON } = renderWithTheme(
+        <Caption fontStyle={fontStyle} fontWeight={fontWeight}>
+          This is text with fontStyle
+        </Caption>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });

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

@@ -29,6 +29,10 @@ export interface CaptionProps extends NativeTextProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Font style to apply to the text.
+   */
+  fontStyle?: 'normal' | 'italic';
 }
 
 const Caption = ({
@@ -36,16 +40,20 @@ const Caption = ({
   fontWeight = 'regular',
   intent = 'body',
   allowFontScaling = false,
+  fontStyle = 'normal',
   ...nativeProps
-}: CaptionProps) => (
-  <StyledCaption
-    {...nativeProps}
-    themeFontWeight={fontWeight}
-    themeIntent={intent}
-    allowFontScaling={allowFontScaling}
-  >
-    {children}
-  </StyledCaption>
-);
+}: CaptionProps) => {
+  return (
+    <StyledCaption
+      {...nativeProps}
+      themeFontWeight={fontWeight}
+      themeIntent={intent}
+      themeIsItalic={fontStyle === 'italic'}
+      allowFontScaling={allowFontScaling}
+    >
+      {children}
+    </StyledCaption>
+  );
+};
 
 export default Caption;

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

@@ -4,11 +4,21 @@ import type { TypographyIntent } from '../types';
 
 const StyledLabel = styled(Text)<{
   themeIntent: TypographyIntent;
-}>(({ themeIntent, theme }) => ({
-  fontSize: theme.__hd__.typography.fontSizes.label,
-  lineHeight: theme.__hd__.typography.lineHeights.label,
-  letterSpacing: 0,
-  color: theme.__hd__.typography.colors[themeIntent],
-}));
+  themeIsItalic?: boolean;
+}>(({ themeIntent, theme, themeIsItalic }) => {
+  // For Label, we assume 'regular' weight for base font family
+  const baseFontWeight = 'regular';
+  const fontFamily = themeIsItalic
+    ? theme.__hd__.typography.fonts.neutral[`${baseFontWeight}Italic`]
+    : theme.__hd__.typography.fonts.neutral[baseFontWeight];
+
+  return {
+    fontSize: theme.__hd__.typography.fontSizes.label,
+    lineHeight: theme.__hd__.typography.lineHeights.label,
+    letterSpacing: 0,
+    color: theme.__hd__.typography.colors[themeIntent],
+    fontFamily,
+  };
+});
 
 export { StyledLabel };

package/src/components/Typography/Label/__tests__/__snapshots__/StyledLabel.tsx.snap

@@ -13,6 +13,7 @@ exports[`StyledLabel has body intent style 1`] = `
       [
         {
           "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -60,6 +61,7 @@ exports[`StyledLabel has danger intent style 1`] = `
       [
         {
           "color": "#cb300a",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -107,6 +109,7 @@ exports[`StyledLabel has info intent style 1`] = `
       [
         {
           "color": "#355bfb",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -154,6 +157,7 @@ exports[`StyledLabel has inverted intent style 1`] = `
       [
         {
           "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -201,6 +205,7 @@ exports[`StyledLabel has primary intent style 1`] = `
       [
         {
           "color": "#401960",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -248,6 +253,7 @@ exports[`StyledLabel has subdued intent style 1`] = `
       [
         {
           "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -295,6 +301,7 @@ exports[`StyledLabel has success intent style 1`] = `
       [
         {
           "color": "#5ace7d",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,
@@ -342,6 +349,7 @@ exports[`StyledLabel has warning intent style 1`] = `
       [
         {
           "color": "#ffbe71",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 10,
           "letterSpacing": 0,
           "lineHeight": 14,