feat: add font prop for Counter

lad-tech · Sep 2, 2024 · e45e765 · e45e765
1 parent 11d6b17
commit e45e765
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 22 deletions.
diff --git a/docs/docs/components/core/others/badge/Counter.mdx b/docs/docs/components/core/others/badge/Counter.mdx
@@ -70,3 +70,11 @@ Custom styles for counter
 | number | 2       |
 
 Maximum number length
+
+### `font`
+
+| Type                                                                                                       | DEFAULT             |
+|:-----------------------------------------------------------------------------------------------------------|:--------------------|
+| [TypographyProp](https://github.com/lad-tech/mobydick/blob/main/packages/core/src/typography/types.ts#L49) | 'Regular-Primary-S' |
+
+Font for text
diff --git a/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/core/src/cta/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -202,8 +202,9 @@ exports[`@lad-tech/mobydick-core/Button renders correctly destructive 1`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 16,
+            "fontWeight": "600",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -865,8 +866,9 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 3`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 16,
+            "fontWeight": "600",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -951,8 +953,9 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 4`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 16,
+            "fontWeight": "600",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1037,8 +1040,9 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 5`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 16,
+            "fontWeight": "600",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1187,8 +1191,9 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 7`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 16,
+            "fontWeight": "600",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1273,8 +1278,9 @@ exports[`@lad-tech/mobydick-core/Button renders correctly loading types 8`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 16,
+            "fontWeight": "600",
             "lineHeight": 20,
             "minHeight": 20,
           },

diff --git a/packages/core/src/other/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/core/src/other/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -128,8 +128,9 @@ exports[`Avatar render avatar badge counter 1`] = `
         [
           {
             "color": "#FFFFFF",
-            "fontFamily": "Inter-SemiBold",
+            "fontFamily": "Inter",
             "fontSize": 10,
+            "fontWeight": "600",
             "lineHeight": 14,
             "minHeight": 14,
           },

diff --git a/packages/core/src/other/components/Badge/Counter/Counter.tsx b/packages/core/src/other/components/Badge/Counter/Counter.tsx
@@ -2,20 +2,21 @@ import {FC} from 'react';
 
 import View from '../../../../basic/components/View/View';
 import useStyles from '../../../../styles/hooks/useStyles';
-import {TypographyLegacy} from '../../../../typography';
+import {Typography} from '../../../../typography';
 
 import stylesCreate from './stylesCreate';
 import {ICounterProps, ICounterSize, ICounterTypes} from './types';
 
 const Counter: FC<ICounterProps> = ({
   count,
   style,
+  font,
   size = ICounterSize.medium,
   type = ICounterTypes.accent,
   maxLength = 2,
 }) => {
   const [styles] = useStyles(stylesCreate, size, type);
-  const font =
+  const fontCorrection =
     size === ICounterSize.medium ? 'SemiBold-White-M' : 'SemiBold-White-XXS';
 
   if (!count) {
@@ -29,9 +30,9 @@ const Counter: FC<ICounterProps> = ({
 
   return (
     <View style={[styles.counter, style]}>
-      <TypographyLegacy style={styles.text} font={font}>
+      <Typography style={styles.text} font={font ?? fontCorrection}>
         {text}
-      </TypographyLegacy>
+      </Typography>
     </View>
   );
 };

diff --git a/packages/core/src/other/components/Badge/Counter/__tests__/Counter.test.tsx b/packages/core/src/other/components/Badge/Counter/__tests__/Counter.test.tsx
@@ -58,4 +58,8 @@ describe('Counter', () => {
     const {toJSON} = render(<Counter />);
     expect(toJSON()).toMatchSnapshot();
   });
+  test('render font', () => {
+    const {toJSON} = render(<Counter font={'Bold-Black-XXS'} count={10} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
diff --git a/...ges/core/src/other/components/Badge/Counter/__tests__/__snapshots__/Counter.test.tsx.snap b/...ges/core/src/other/components/Badge/Counter/__tests__/__snapshots__/Counter.test.tsx.snap
@@ -26,8 +26,9 @@ exports[`Counter render counter ICounterSize.medium 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -68,8 +69,9 @@ exports[`Counter render counter ICounterSize.small 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 10,
+          "fontWeight": "600",
           "lineHeight": 14,
           "minHeight": 14,
         },
@@ -110,8 +112,9 @@ exports[`Counter render counter ICounterTypes.accent 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -152,8 +155,9 @@ exports[`Counter render counter ICounterTypes.accentLight 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -194,8 +198,9 @@ exports[`Counter render counter ICounterTypes.attention 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -236,8 +241,9 @@ exports[`Counter render counter ICounterTypes.attentionLight 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -278,8 +284,9 @@ exports[`Counter render counter ICounterTypes.muted 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -320,8 +327,9 @@ exports[`Counter render counter ICounterTypes.mutedLight 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -364,8 +372,9 @@ exports[`Counter render counter style 1`] = `
       [
         {
           "color": "#FFFFFF",
-          "fontFamily": "Inter-SemiBold",
+          "fontFamily": "Inter",
           "fontSize": 16,
+          "fontWeight": "600",
           "lineHeight": 20,
           "minHeight": 20,
         },
@@ -382,4 +391,47 @@ exports[`Counter render counter style 1`] = `
 </View>
 `;
 
+exports[`Counter render font 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#2B78EE",
+        "borderRadius": 12,
+        "height": 24,
+        "justifyContent": "center",
+        "minWidth": 24,
+        "zIndex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    allowFontScaling={true}
+    style={
+      [
+        {
+          "color": "#151C2C",
+          "fontFamily": "Inter",
+          "fontSize": 10,
+          "fontWeight": "700",
+          "lineHeight": 14,
+          "minHeight": 14,
+        },
+        {
+          "color": "#FFFFFF",
+          "paddingHorizontal": 6,
+          "textAlign": "center",
+        },
+      ]
+    }
+  >
+    10
+  </Text>
+</View>
+`;
+
 exports[`Counter render notification 1`] = `null`;
diff --git a/packages/core/src/other/components/Badge/Counter/types.ts b/packages/core/src/other/components/Badge/Counter/types.ts
@@ -1,4 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {StyleProp, ViewStyle} from 'react-native';
+
+import {TypographyProp} from '../../../../typography';
 
 export enum ICounterSize {
   medium = 'medium',
@@ -17,8 +19,9 @@ export enum ICounterTypes {
 
 export interface ICounterProps {
   count?: number;
+  font?: TypographyProp;
   type?: ICounterTypes;
-  style?: ViewStyle | ViewStyle[];
+  style?: StyleProp<ViewStyle>;
   size?: ICounterSize;
   maxLength?: number;
 }