(PC-33849) refactor(TypoDS): missing typo body update and refacto (#7492

) * (PC-33849) refactor(useIsTextEllipsis): improve typo, clarify the hook and his utility * (PC-33849) refactor(SuggestedPlaces): remove this small margin inaccordance with designer * (PC-33849) refacto(TypoDS): update typo and remove useless code * (PC-33849) refacto(BulletListItem): adapt with new typo body from DS * missing snapshot from another PR
pass-culture · Jan 9, 2025 · 27709d0 · 27709d0
1 parent 73560b4
commit 27709d0
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 19 deletions.
diff --git a/__snapshots__/features/auth/pages/signup/SetBirthday/SetBirthday.web.test.tsx.web-snap b/__snapshots__/features/auth/pages/signup/SetBirthday/SetBirthday.web.test.tsx.web-snap
@@ -92,9 +92,9 @@ exports[`<SetBirthday /> no touch device should render correctly 1`] = `
 }
 
 .c3 {
-  font-family: Montserrat-Regular;
-  font-size: 15px;
-  line-height: 20px;
+  font-family: Montserrat-Medium;
+  font-size: 1rempx;
+  line-height: 1.6rem;
   color: #161617;
   width: 100%;
   padding-right: 16px;
@@ -118,9 +118,9 @@ exports[`<SetBirthday /> no touch device should render correctly 1`] = `
 }
 
 .c6 {
-  font-family: Montserrat-Regular;
-  font-size: 15px;
-  line-height: 20px;
+  font-family: Montserrat-Medium;
+  font-size: 1rempx;
+  line-height: 1.6rem;
   color: #161617;
   width: 100%;
   padding-right: 16px;
@@ -144,9 +144,9 @@ exports[`<SetBirthday /> no touch device should render correctly 1`] = `
 }
 
 .c7 {
-  font-family: Montserrat-Regular;
-  font-size: 15px;
-  line-height: 20px;
+  font-family: Montserrat-Medium;
+  font-size: 1rempx;
+  line-height: 1.6rem;
   color: #161617;
   width: 100%;
   padding-right: 16px;

diff --git a/src/features/identityCheck/pages/identification/errors/eduConnect/NotEligibleEduConnect.tsx b/src/features/identityCheck/pages/identification/errors/eduConnect/NotEligibleEduConnect.tsx
@@ -81,7 +81,6 @@ type TextBodyProps = TextProps & {
 }
 const Body = styled(TypoDS.Body).attrs<TextBodyProps>((props) => props)<TextBodyProps>(
   ({ theme, textAlign }) => ({
-    ...theme.typography.body,
     textAlign,
     color: theme.colors.white,
   })

diff --git a/src/features/search/pages/SuggestedPlacesOrVenues/SuggestedPlaces.tsx b/src/features/search/pages/SuggestedPlacesOrVenues/SuggestedPlaces.tsx
@@ -91,10 +91,9 @@ const NotLongEnough = ({ show }: { show: boolean }) =>
     </StyledBody>
   ) : null
 
-const ListIconWrapper = styled.View(({ theme }) => ({
-  marginTop: (theme.typography.body.fontSize * 15) / 100,
+const ListIconWrapper = styled.View({
   marginRight: getSpacing(0.5),
-}))
+})
 
 const StyledBody = styled(TypoDS.Body)(({ theme }) => ({
   color: theme.colors.greyDark,

diff --git a/src/ui/components/BulletListItem.tsx b/src/ui/components/BulletListItem.tsx
@@ -5,6 +5,7 @@ import { Li } from 'ui/components/Li'
 import { VerticalUl } from 'ui/components/Ul'
 import { Dot } from 'ui/svg/icons/Dot'
 import { getSpacing, TypoDS } from 'ui/theme'
+import { REM_TO_PX } from 'ui/theme/constants'
 
 // Use with Ul or VerticalUl to be accessible in web
 export const BulletListItem: React.FC<{
@@ -70,7 +71,9 @@ const NestedBullet = styled(Dot).attrs(({ theme }) => ({
 }))``
 
 const BulletContainer = styled.View(({ theme }) => ({
-  height: theme.designSystem.typography.body.lineHeight,
+  height: theme.isDesktopViewport
+    ? parseFloat(theme.designSystem.typography.body.lineHeight) * REM_TO_PX
+    : parseFloat(theme.designSystem.typography.body.lineHeight),
   justifyContent: 'center',
 }))
 

diff --git a/src/ui/components/CollapsibleText/useIsTextEllipsis.ts b/src/ui/components/CollapsibleText/useIsTextEllipsis.ts
@@ -1,17 +1,17 @@
 import { useCallback, useState } from 'react'
 import { useTheme } from 'styled-components/native'
 
-import { IsTextEllipsisOutput } from './types'
+import { REM_TO_PX } from 'ui/theme/constants'
 
-const REM_TO_PX = 16
+import { IsTextEllipsisOutput } from './types'
 
 // React Native Web doesn't support onTextLayout
 // https://github.com/necolas/react-native-web/issues/1685
 export const useIsTextEllipsis = (numberOfLines: number): IsTextEllipsisOutput => {
   const [isTextEllipsis, setIsTextEllipsis] = useState(false)
   const theme = useTheme()
 
-  const lineHeight = Number(theme.designSystem.typography.body.lineHeight.slice(0, -3)) * REM_TO_PX
+  const lineHeight = parseFloat(theme.designSystem.typography.body.lineHeight) * REM_TO_PX
 
   const onLayout: Required<IsTextEllipsisOutput>['onLayout'] = useCallback(
     (event) => {

diff --git a/src/ui/components/CollapsibleText/useIsTextEllipsis.web.test.tsx b/src/ui/components/CollapsibleText/useIsTextEllipsis.web.test.tsx
@@ -5,8 +5,9 @@ import { ThemeProvider } from 'styled-components/native'
 import { computedTheme } from 'tests/computedTheme'
 import { act, renderHook } from 'tests/utils/web'
 import { useIsTextEllipsis } from 'ui/components/CollapsibleText/useIsTextEllipsis'
+import { REM_TO_PX } from 'ui/theme/constants'
 
-const LINE_HEIGHT = Number(computedTheme.typography.body.lineHeight.slice(0, -2))
+const LINE_HEIGHT = parseFloat(computedTheme.designSystem.typography.body.lineHeight) * REM_TO_PX
 
 describe('useIsTextEllipsis', () => {
   it('should return the text ends with ellipsis when the text takes more lines than the max', async () => {

diff --git a/src/ui/components/inputs/DropDown/DropDown.web.tsx b/src/ui/components/inputs/DropDown/DropDown.web.tsx
@@ -105,7 +105,7 @@ const StyledSelect = styled.select<SelectProps>`
       : `${theme.borderRadius.button}px`
     const { fontFamily, fontSize, color, lineHeight } = isEmpty
       ? theme.typography.placeholder
-      : theme.typography.body
+      : theme.designSystem.typography.body
     return `
     font-family: ${fontFamily};
     font-size: ${fontSize}px;

diff --git a/src/ui/theme/constants.ts b/src/ui/theme/constants.ts
@@ -39,3 +39,5 @@ export const ILLUSTRATION_ICON_SIZE = getSpacing(35) // 140
 export const FULLPAGE_ILLUSTRATION_ICON_SIZE = getSpacing(50)
 // small illustrations should be imported with ILLUSTRATION_SMALL_SIZE
 export const ILLUSTRATION_SMALL_SIZE = getSpacing(25)
+
+export const REM_TO_PX = 16