From e45e765d676f3a10dd62d4349ff706d617448e6d Mon Sep 17 00:00:00 2001 From: Bibazavr Date: Mon, 2 Sep 2024 09:46:26 +0300 Subject: [PATCH] feat: add font prop for Counter --- .../components/core/others/badge/Counter.mdx | 8 +++ .../__snapshots__/Button.test.tsx.snap | 18 +++-- .../__snapshots__/Avatar.test.tsx.snap | 3 +- .../components/Badge/Counter/Counter.tsx | 9 +-- .../Badge/Counter/__tests__/Counter.test.tsx | 4 ++ .../__snapshots__/Counter.test.tsx.snap | 70 ++++++++++++++++--- .../other/components/Badge/Counter/types.ts | 7 +- 7 files changed, 97 insertions(+), 22 deletions(-) diff --git a/docs/docs/components/core/others/badge/Counter.mdx b/docs/docs/components/core/others/badge/Counter.mdx index d26db4088..8fc265b0f 100644 --- 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 index a09f03961..d428d56c0 100644 --- 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 index c53aef5e8..9a1cce471 100644 --- 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 index f38df7db4..e71b8e79d 100644 --- a/packages/core/src/other/components/Badge/Counter/Counter.tsx +++ b/packages/core/src/other/components/Badge/Counter/Counter.tsx @@ -2,7 +2,7 @@ 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'; @@ -10,12 +10,13 @@ import {ICounterProps, ICounterSize, ICounterTypes} from './types'; const Counter: FC = ({ 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 = ({ return ( - + {text} - + ); }; 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 index 318858793..e3b305a66 100644 --- 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(); expect(toJSON()).toMatchSnapshot(); }); + test('render font', () => { + const {toJSON} = render(); + expect(toJSON()).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/other/components/Badge/Counter/__tests__/__snapshots__/Counter.test.tsx.snap b/packages/core/src/other/components/Badge/Counter/__tests__/__snapshots__/Counter.test.tsx.snap index c152fa0b6..030cea85a 100644 --- a/packages/core/src/other/components/Badge/Counter/__tests__/__snapshots__/Counter.test.tsx.snap +++ b/packages/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`] = ` `; +exports[`Counter render font 1`] = ` + + + 10 + + +`; + 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 index e23988ef0..4abc00a2b 100644 --- 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; size?: ICounterSize; maxLength?: number; }