@cleartrip/ct-design-typography 5.28.0-SNAPSHOT-impression-fix.0 → 5.28.0-SNAPSHOT-inter-2.0

package/dist/Typography.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.native.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/Typography.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAwB,IAAI,EAAuB,MAAM,cAAc,CAAC;AAQ/E,OAAO,EAAE,WAAW,EAAyB,MAAM,QAAQ,CAAC;AA+B5D,QAAA,MAAM,UAAU,0EA8Ef,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Typography.native.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/Typography.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAwB,IAAI,EAAuB,MAAM,cAAc,CAAC;AAO/E,OAAO,EAAE,WAAW,EAAyB,MAAM,QAAQ,CAAC;AAyD5D,QAAA,MAAM,UAAU,0EAyFf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-typography",
-  "version": "5.28.0-SNAPSHOT-impression-fix.0",
+  "version": "5.28.0-SNAPSHOT-inter-2.0",
   "description": "Typography component with enhanced styleConfig support for RNW compatibility",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-typography.cjs.js",
@@ -19,13 +19,13 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-types": "5.28.0-SNAPSHOT-impression-fix.0",
-    "@cleartrip/ct-design-theme": "5.28.0-SNAPSHOT-impression-fix.0",
-    "@cleartrip/ct-design-conditional-wrap": "5.28.0-SNAPSHOT-impression-fix.0",
-    "@cleartrip/ct-design-container": "5.28.0-SNAPSHOT-impression-fix.0",
-    "@cleartrip/ct-design-common-utils": "5.27.1-SNAPSHOT-impression-fix.0",
-    "@cleartrip/ct-design-event-propagation": "5.28.0-SNAPSHOT-impression-fix.0",
-    "@cleartrip/ct-design-style-manager": "5.27.1-SNAPSHOT-impression-fix.0"
+    "@cleartrip/ct-design-types": "5.28.0-SNAPSHOT-inter-2.0",
+    "@cleartrip/ct-design-theme": "5.28.0-SNAPSHOT-inter-2.0",
+    "@cleartrip/ct-design-conditional-wrap": "5.28.0-SNAPSHOT-inter-2.0",
+    "@cleartrip/ct-design-container": "5.28.0-SNAPSHOT-inter-2.0",
+    "@cleartrip/ct-design-event-propagation": "5.28.0-SNAPSHOT-inter-2.0",
+    "@cleartrip/ct-design-common-utils": "5.27.1-SNAPSHOT-inter-2.0",
+    "@cleartrip/ct-design-style-manager": "5.27.1-SNAPSHOT-inter-2.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0"

package/src/Typography.native.tsx

@@ -1,15 +1,14 @@
 import React, { forwardRef } from 'react';
 
 import { NativeSyntheticEvent, Text, TextLayoutEventData } from 'react-native';
-import { useStyles } from '@cleartrip/ct-design-style-manager';
-import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { useNativeMergeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
 import { getAccessibilityProps } from '@cleartrip/ct-design-common-utils';
 import EventCollectorProvider, { useMergeEvents } from '@cleartrip/ct-design-event-propagation';
 import { useTriggerEvents } from '@cleartrip/ct-design-event-propagation';
 import Conditional from '@cleartrip/ct-design-conditional-wrap';
 
 import { ITypography, TypographyVariantType } from './type';
-import { TypographyColor } from './constants';
+import { TypographyColor, TypographyVariant } from './constants';
 import { getTypographyStyles } from './style';
 
 const getTextType = (variant: TypographyVariantType) => {
@@ -39,6 +38,32 @@ const getTextType = (variant: TypographyVariantType) => {
   return variantMapper[variant as keyof typeof variantMapper] as keyof HTMLElementTagNameMap;
 };
 
+const FONT_WEIGHT = {
+  [TypographyVariant.HD1]: 'SemiBold',
+  [TypographyVariant.HD2]: 'SemiBold',
+  [TypographyVariant.HD3]: 'SemiBold',
+  [TypographyVariant.HM1]: 'SemiBold',
+  [TypographyVariant.HM2]: 'SemiBold',
+  [TypographyVariant.HM3]: 'SemiBold',
+  [TypographyVariant.HM4]: 'SemiBold',
+  [TypographyVariant.B1]: 'Medium',
+  [TypographyVariant.B2]: 'Medium',
+  [TypographyVariant.B3]: 'Medium',
+  [TypographyVariant.B3CAPS]: 'SemiBold',
+  [TypographyVariant.B4]: 'Medium',
+  [TypographyVariant.B4CAPS]: 'SemiBold',
+  [TypographyVariant.P1]: 'Regular',
+  [TypographyVariant.P2]: 'Regular',
+  [TypographyVariant.P3]: 'Regular',
+  [TypographyVariant.L1]: 'SemiBold',
+  [TypographyVariant.L2]: 'SemiBold',
+  [TypographyVariant.L3]: 'SemiBold',
+  [TypographyVariant.OVERLINE]: 'SemiBold',
+  [TypographyVariant.TAG]: 'SemiBold',
+  [TypographyVariant.M4BOLD]: 'Bold',
+  [TypographyVariant.WRAPPER]: 'Regular',
+};
+
 const Typography = forwardRef<Text, ITypography>(
   (
     {
@@ -76,11 +101,22 @@ const Typography = forwardRef<Text, ITypography>(
       [color, variant, isStriked, isUnderlined, colorCode],
     );
 
+    const fontFamily = useStyles(
+      (theme) => {
+        return {
+          root: {
+            fontFamily: `${theme.typography.fontFamily}-${FONT_WEIGHT[variant as keyof typeof FONT_WEIGHT] || 'Regular'}`,
+          },
+        };
+      },
+      [variant],
+    );
+
     const { root: rootStyles = [] } = styleConfig || {};
 
     const mergedTypographyStyles = useNativeMergeStyles(
-      [typographyStyles.root, ...rootStyles],
-      [typographyStyles, styleConfig?.root],
+      [typographyStyles.root, fontFamily.root, ...rootStyles],
+      [typographyStyles, fontFamily, styleConfig?.root],
     );
 
     const mergedEvents = useMergeEvents({ onClick: [onClick] });