From 23224f72b2d640833a3ef5e40fa264745010d146 Mon Sep 17 00:00:00 2001 From: YassinL <62058919+YassinL@users.noreply.github.com> Date: Thu, 25 Jul 2024 19:15:48 +0200 Subject: [PATCH] (PC-30995) feat(Typo): replace and remove Hero typo (#6714) * (PC-30995) feat(Typo): replace and remove Hero typo * (PC-30995) update snapshot --- .../CreditHeader.native.test.tsx.native-snap | 24 +++++++++---------- eslint-custom-rules/no-raw-text.js | 14 +++++------ eslint-custom-rules/no-raw-text.test.js | 2 -- .../pages/AppComponents/AppComponents.tsx | 1 - .../components/CreditInfo/CreditInfo.tsx | 7 +++--- src/theme/index.ts | 6 ----- src/ui/theme/typography.stories.tsx | 5 ++-- src/ui/theme/typography.tsx | 5 ---- 8 files changed, 26 insertions(+), 38 deletions(-) diff --git a/__snapshots__/features/profile/components/Header/CreditHeader/CreditHeader.native.test.tsx.native-snap b/__snapshots__/features/profile/components/Header/CreditHeader/CreditHeader.native.test.tsx.native-snap index 1d1915966f0..c88ae99981d 100644 --- a/__snapshots__/features/profile/components/Header/CreditHeader/CreditHeader.native.test.tsx.native-snap +++ b/__snapshots__/features/profile/components/Header/CreditHeader/CreditHeader.native.test.tsx.native-snap @@ -698,9 +698,9 @@ exports[`CreditHeader Beneficiary is not underage should render correctly with v [ { "color": "#320096", - "fontFamily": "Montserrat-Medium", - "fontSize": 38, - "lineHeight": 48, + "fontFamily": "Montserrat-Bold", + "fontSize": 28, + "lineHeight": 44.8, }, ] } @@ -1242,9 +1242,9 @@ exports[`CreditHeader Beneficiary is underage should render correctly for 15 yea [ { "color": "#320096", - "fontFamily": "Montserrat-Medium", - "fontSize": 38, - "lineHeight": 48, + "fontFamily": "Montserrat-Bold", + "fontSize": 28, + "lineHeight": 44.8, }, ] } @@ -1750,9 +1750,9 @@ exports[`CreditHeader Beneficiary is underage should render correctly for 16 yea [ { "color": "#320096", - "fontFamily": "Montserrat-Medium", - "fontSize": 38, - "lineHeight": 48, + "fontFamily": "Montserrat-Bold", + "fontSize": 28, + "lineHeight": 44.8, }, ] } @@ -2258,9 +2258,9 @@ exports[`CreditHeader Beneficiary is underage should render correctly for 17 yea [ { "color": "#320096", - "fontFamily": "Montserrat-Medium", - "fontSize": 38, - "lineHeight": 48, + "fontFamily": "Montserrat-Bold", + "fontSize": 28, + "lineHeight": 44.8, }, ] } diff --git a/eslint-custom-rules/no-raw-text.js b/eslint-custom-rules/no-raw-text.js index 8b01ef13a5e..77947925f69 100644 --- a/eslint-custom-rules/no-raw-text.js +++ b/eslint-custom-rules/no-raw-text.js @@ -1,12 +1,12 @@ const ALLOWED_JSX_TAGS = [ /^.*Text$/, - /^(Styled|)+(Hero|Title[1-4]|Body|ButtonText(|NeutralInfo|Primary|Secondary)|Caption(|NeutralInfo|Primary|Secondary))$/, -]; + /^(Styled|)+(Title[1-4]|Body|ButtonText(|NeutralInfo|Primary|Secondary)|Caption(|NeutralInfo|Primary|Secondary))$/, +] -const WHITESPACES_REGEX = /^\s*$/; +const WHITESPACES_REGEX = /^\s*$/ const checkJSXTextAreEmpty = (child) => - child.type !== 'JSXText' || (child.type === 'JSXText' && WHITESPACES_REGEX.test(child.value)); + child.type !== 'JSXText' || (child.type === 'JSXText' && WHITESPACES_REGEX.test(child.value)) const conditions = [ { @@ -21,7 +21,7 @@ const conditions = [ check: (openingElement) => ALLOWED_JSX_TAGS.some((value) => value.test(openingElement.name)), message: 'allowed JSX tag', }, -]; +] module.exports = { name: 'no-raw-text', @@ -49,6 +49,6 @@ module.exports = { message: `No raw text outside tags , ${allowedTags}. \n *** = all exported Typo in src/ui/theme/typography.tsx`, }); }, - }; + } }, -}; +} diff --git a/eslint-custom-rules/no-raw-text.test.js b/eslint-custom-rules/no-raw-text.test.js index 2f35ea0d300..f56e6d9200b 100644 --- a/eslint-custom-rules/no-raw-text.test.js +++ b/eslint-custom-rules/no-raw-text.test.js @@ -10,7 +10,6 @@ const tests = { // string { code: 'toto' }, // string - { code: 'toto' }, { code: 'toto' }, { code: 'toto' }, { code: 'toto' }, @@ -24,7 +23,6 @@ const tests = { { code: 'toto' }, { code: 'toto' }, // string - { code: 'toto' }, { code: 'toto' }, { code: 'toto' }, { code: 'toto' }, diff --git a/src/features/internal/cheatcodes/pages/AppComponents/AppComponents.tsx b/src/features/internal/cheatcodes/pages/AppComponents/AppComponents.tsx index 251f310c19a..be8c6adb9ea 100644 --- a/src/features/internal/cheatcodes/pages/AppComponents/AppComponents.tsx +++ b/src/features/internal/cheatcodes/pages/AppComponents/AppComponents.tsx @@ -111,7 +111,6 @@ export const AppComponents: FunctionComponent = () => { {/* Typos */} - Hero Title 1 Title 2 Title 3 diff --git a/src/features/profile/components/CreditInfo/CreditInfo.tsx b/src/features/profile/components/CreditInfo/CreditInfo.tsx index d576a993ada..fb7bbd4481c 100644 --- a/src/features/profile/components/CreditInfo/CreditInfo.tsx +++ b/src/features/profile/components/CreditInfo/CreditInfo.tsx @@ -5,7 +5,8 @@ import styled from 'styled-components/native' import { DomainsCredit } from 'api/gen' import { CreditProgressBar } from 'features/profile/components/CreditInfo/CreditProgressBar' import { formatToFrenchDecimal } from 'libs/parsers/getDisplayPrice' -import { Typo, Spacer } from 'ui/theme' +import { Spacer } from 'ui/theme' +import { TypoDS } from 'ui/theme/designSystemTypographie' type CreditInfoProps = { totalCredit: DomainsCredit['all'] @@ -14,13 +15,13 @@ type CreditInfoProps = { export function CreditInfo({ totalCredit }: PropsWithChildren) { return ( - {formatToFrenchDecimal(totalCredit.remaining)} + {formatToFrenchDecimal(totalCredit.remaining)} ) } -const Hero = styled(Typo.Hero)(({ theme }) => ({ +const Title = styled(TypoDS.Title1)(({ theme }) => ({ color: theme.colors.secondary, })) diff --git a/src/theme/index.ts b/src/theme/index.ts index 77525234d9b..d0b81ce8cbf 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -108,12 +108,6 @@ export const theme = { }, designSystem: designTokens, typography: { - hero: { - fontFamily: 'Montserrat-Medium', - fontSize: getSpacing(9.5), - lineHeight: getSpacingString(12), - color: ColorsEnum.BLACK, - }, title1: { fontFamily: 'Montserrat-Black', fontSize: getSpacing(6.5), diff --git a/src/ui/theme/typography.stories.tsx b/src/ui/theme/typography.stories.tsx index dce84959ca4..a188afc469f 100644 --- a/src/ui/theme/typography.stories.tsx +++ b/src/ui/theme/typography.stories.tsx @@ -9,9 +9,10 @@ export default { title: 'Fondations/Typo', } -export const Typographies: ComponentStory = () => ( +type TypographyComponents = (typeof Typo)[keyof typeof Typo] + +export const Typographies: ComponentStory = () => ( - Hero Title1 diff --git a/src/ui/theme/typography.tsx b/src/ui/theme/typography.tsx index 6954e863aa9..d6ba197642f 100644 --- a/src/ui/theme/typography.tsx +++ b/src/ui/theme/typography.tsx @@ -10,10 +10,6 @@ interface CustomTextProps { } export type TextProps = CustomTextProps & RNTextProps -const Hero = styled(RNText)(({ theme }) => ({ - ...theme.typography.hero, -})) - const Title1 = styled(RNText).attrs<{ accessibilityLevel: HeadingLevel }>( ({ accessibilityLevel }) => getHeadingAttrs(accessibilityLevel ?? 1) )(({ theme }) => ({ @@ -81,7 +77,6 @@ const Hint = styled(RNText)(({ theme }) => ({ })) export const Typo = { - Hero, Title1, Title2, Title3,