(PC-30995) feat(Typo): replace and remove Hero typo (#6714)

* (PC-30995) feat(Typo): replace and remove Hero typo * (PC-30995) update snapshot
pass-culture · Jul 25, 2024 · 23224f7 · 23224f7
1 parent 8c14f6a
commit 23224f7
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 38 deletions.
diff --git a/.../features/profile/components/Header/CreditHeader/CreditHeader.native.test.tsx.native-snap b/.../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
@@ -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 <Text>, ${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
@@ -10,7 +10,6 @@ const tests = {
     // <Text>string</Text>
     { code: '<Text>toto</Text>' },
     // <Typo.***>string</Typo.***>
-    { code: '<Typo.Hero>toto</Typo.Hero>' },
     { code: '<Typo.Title1>toto</Typo.Title1>' },
     { code: '<Typo.Title2>toto</Typo.Title2>' },
     { code: '<Typo.Title3>toto</Typo.Title3>' },
@@ -24,7 +23,6 @@ const tests = {
     { code: '<Typo.CaptionPrimary>toto</Typo.CaptionPrimary>' },
     { code: '<Typo.CaptionSecondary>toto</Typo.CaptionSecondary>' },
     // <Styled***>string</Styled***>
-    { code: '<StyledHero>toto</StyledHero>' },
     { code: '<StyledTitle1>toto</StyledTitle1>' },
     { code: '<StyledTitle2>toto</StyledTitle2>' },
     { code: '<StyledTitle3>toto</StyledTitle3>' },

diff --git 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 */}
       <Accordion title="Typos">
-        <Typo.Hero>Hero</Typo.Hero>
         <Typo.Title1>Title 1</Typo.Title1>
         <Typo.Title2>Title 2</Typo.Title2>
         <Typo.Title3>Title 3</Typo.Title3>

diff --git 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<CreditInfoProps>) {
   return (
     <View testID="credit-info">
-      <Hero>{formatToFrenchDecimal(totalCredit.remaining)}</Hero>
+      <Title>{formatToFrenchDecimal(totalCredit.remaining)}</Title>
       <Spacer.Column numberOfSpaces={3} />
       <CreditProgressBar progress={totalCredit.remaining / totalCredit.initial} />
     </View>
   )
 }
 
-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
@@ -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
@@ -9,9 +9,10 @@ export default {
   title: 'Fondations/Typo',
 }
 
-export const Typographies: ComponentStory<typeof Typo.Hero> = () => (
+type TypographyComponents = (typeof Typo)[keyof typeof Typo]
+
+export const Typographies: ComponentStory<TypographyComponents> = () => (
   <React.Fragment>
-    <Typo.Hero>Hero</Typo.Hero>
     <Spacer.Column numberOfSpaces={2} />
     <Typo.Title1>Title1</Typo.Title1>
     <Spacer.Column numberOfSpaces={2} />

diff --git 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,