@hero-design/rn 8.110.0 → 8.111.0

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

@@ -23,6 +23,7 @@ exports[`Title has archived intent style 1`] = `
       ]
     }
     themeIntent="archived"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -74,6 +75,7 @@ exports[`Title has body intent style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -125,6 +127,7 @@ exports[`Title has danger intent style 1`] = `
       ]
     }
     themeIntent="danger"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -176,6 +179,7 @@ exports[`Title has disabled intent style 1`] = `
       ]
     }
     themeIntent="disabled"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -227,6 +231,7 @@ exports[`Title has h1 level and neutral typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -278,6 +283,7 @@ exports[`Title has h1 level and playful typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="playful"
   >
@@ -329,6 +335,7 @@ exports[`Title has h2 level and neutral typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h2"
     themeTypeface="neutral"
   >
@@ -380,6 +387,7 @@ exports[`Title has h2 level and playful typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h2"
     themeTypeface="playful"
   >
@@ -431,6 +439,7 @@ exports[`Title has h3 level and neutral typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h3"
     themeTypeface="neutral"
   >
@@ -482,6 +491,7 @@ exports[`Title has h3 level and playful typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h3"
     themeTypeface="playful"
   >
@@ -533,6 +543,7 @@ exports[`Title has h4 level and neutral typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h4"
     themeTypeface="neutral"
   >
@@ -584,6 +595,7 @@ exports[`Title has h4 level and playful typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h4"
     themeTypeface="playful"
   >
@@ -635,6 +647,7 @@ exports[`Title has h5 level and neutral typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h5"
     themeTypeface="neutral"
   >
@@ -686,6 +699,7 @@ exports[`Title has h5 level and playful typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h5"
     themeTypeface="playful"
   >
@@ -737,6 +751,7 @@ exports[`Title has h6 level and neutral typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h6"
     themeTypeface="neutral"
   >
@@ -788,6 +803,7 @@ exports[`Title has h6 level and playful typeface style 1`] = `
       ]
     }
     themeIntent="body"
+    themeIsItalic={false}
     themeLevel="h6"
     themeTypeface="playful"
   >
@@ -839,6 +855,7 @@ exports[`Title has inactive intent style 1`] = `
       ]
     }
     themeIntent="inactive"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -890,6 +907,7 @@ exports[`Title has info intent style 1`] = `
       ]
     }
     themeIntent="info"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -941,6 +959,7 @@ exports[`Title has inverted intent style 1`] = `
       ]
     }
     themeIntent="inverted"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -992,6 +1011,7 @@ exports[`Title has muted intent style 1`] = `
       ]
     }
     themeIntent="muted"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -1043,6 +1063,7 @@ exports[`Title has primary intent style 1`] = `
       ]
     }
     themeIntent="primary"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -1094,6 +1115,7 @@ exports[`Title has secondary intent style 1`] = `
       ]
     }
     themeIntent="secondary"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -1145,6 +1167,7 @@ exports[`Title has subdued intent style 1`] = `
       ]
     }
     themeIntent="subdued"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -1196,6 +1219,7 @@ exports[`Title has success intent style 1`] = `
       ]
     }
     themeIntent="success"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -1247,6 +1271,7 @@ exports[`Title has warning intent style 1`] = `
       ]
     }
     themeIntent="warning"
+    themeIsItalic={false}
     themeLevel="h1"
     themeTypeface="neutral"
   >
@@ -1274,3 +1299,419 @@ exports[`Title has warning intent style 1`] = `
   />
 </View>
 `;
+
+exports[`Title renders fontStyle=italic with h1 level and neutral typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-RegularItalic",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={true}
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    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[`Title renders fontStyle=italic with h1 level and playful typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "Saiga-MediumItalic",
+          "fontSize": 36,
+          "letterSpacing": 1.5,
+          "lineHeight": 44,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={true}
+    themeLevel="h1"
+    themeTypeface="playful"
+  >
+    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[`Title renders fontStyle=italic with h3 level and neutral typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBoldItalic",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={true}
+    themeLevel="h3"
+    themeTypeface="neutral"
+  >
+    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[`Title renders fontStyle=italic with h3 level and playful typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "Saiga-MediumItalic",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={true}
+    themeLevel="h3"
+    themeTypeface="playful"
+  >
+    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[`Title renders fontStyle=normal with h1 level and neutral typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={false}
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    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[`Title renders fontStyle=normal with h1 level and playful typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "Saiga-Medium",
+          "fontSize": 36,
+          "letterSpacing": 1.5,
+          "lineHeight": 44,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={false}
+    themeLevel="h1"
+    themeTypeface="playful"
+  >
+    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[`Title renders fontStyle=normal with h3 level and neutral typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={false}
+    themeLevel="h3"
+    themeTypeface="neutral"
+  >
+    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[`Title renders fontStyle=normal with h3 level and playful typeface 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "Saiga-Medium",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeIsItalic={false}
+    themeLevel="h3"
+    themeTypeface="playful"
+  >
+    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/Title/__tests__/index.spec.tsx

@@ -54,4 +54,27 @@ describe('Title', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    fontStyle   | level   | typeface
+    ${'normal'} | ${'h1'} | ${'neutral'}
+    ${'italic'} | ${'h1'} | ${'neutral'}
+    ${'normal'} | ${'h3'} | ${'neutral'}
+    ${'italic'} | ${'h3'} | ${'neutral'}
+    ${'normal'} | ${'h1'} | ${'playful'}
+    ${'italic'} | ${'h1'} | ${'playful'}
+    ${'normal'} | ${'h3'} | ${'playful'}
+    ${'italic'} | ${'h3'} | ${'playful'}
+  `(
+    'renders fontStyle=$fontStyle with $level level and $typeface typeface',
+    ({ fontStyle, level, typeface }) => {
+      const { toJSON } = renderWithTheme(
+        <Title fontStyle={fontStyle} level={level} typeface={typeface}>
+          This is text with fontStyle
+        </Title>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });

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

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { ReactNode } from 'react';
+import React from 'react';
 import type {
   TextProps as NativeTextProps,
   StyleProp,
   TextStyle,
 } from 'react-native';
-import { StyledTitle } from './StyledTitle';
 import type { TypographyIntent } from '../types';
+import { StyledTitle } from './StyledTitle';
 
 export interface TitleProps extends NativeTextProps {
   /**
@@ -36,6 +36,10 @@ export interface TitleProps extends NativeTextProps {
    * The level of Title including h1, h2, h3, h4, h5 and h6.
    */
   level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Font style to apply to the text.
+   */
+  fontStyle?: 'normal' | 'italic';
 }
 
 const Title = ({
@@ -44,6 +48,7 @@ const Title = ({
   allowFontScaling = false,
   level = 'h1',
   typeface = 'neutral',
+  fontStyle = 'normal',
   ...nativeProps
 }: TitleProps) => (
   <StyledTitle
@@ -51,6 +56,7 @@ const Title = ({
     themeLevel={level}
     themeTypeface={typeface}
     themeIntent={intent}
+    themeIsItalic={fontStyle === 'italic'}
     allowFontScaling={allowFontScaling}
   >
     {children}