diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx index 2fa5a11cd..ec17c2c3b 100644 --- a/web/components/src/Text/Text.tsx +++ b/web/components/src/Text/Text.tsx @@ -10,7 +10,7 @@ type StyledTextProps = { const StyledText = styled(Typography)` font-size: var(--size); - line-height: var(--lineHeight-3); + line-height: var(--lineHeight); /* @TODO: Let's consider to move all the margin woo to the article layout We should. Not move, but scope. For both news and topic pages. But this will require a lot of retest, since in some of the uses cases we will need to reintroduce the margin */ @@ -42,6 +42,7 @@ const StyledText = styled(Typography)` export type TextProps = { size?: 'regular' | 'md' | 'small' | 'lg' + lineHeight?: '1' | '2' | '2_5' | '3' bold?: boolean italic?: boolean centered?: boolean @@ -57,12 +58,17 @@ const sizes = { small: 'var(--typeScale-0)', } +const lineHeights = { + 1: 'var(--lineHeight-1)', + 2: 'var(--lineHeight-2)', + '2_5': 'var(--lineHeight-2_5)', + 3: 'var(--lineHeight-3)', +} + export const Text = forwardRef(function Text( - { size = 'regular', style, children, inverted = false, ...rest }, + { size = 'regular', lineHeight = '3', style, children, inverted = false, ...rest }, ref, ) { - if (size === 'lg') console.log(ref) - return ( (function Text( { ...style, '--size': sizes[size], + '--lineHeight': lineHeights[lineHeight], } as CSSProperties } {...rest} diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index d272c4ace..7590023c4 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -95,7 +95,11 @@ const Teaser = ({ data, anchor }: TeaserProps) => { value={text} components={{ block: { - normal: ({ children }: { children: React.ReactNode }) => {children}, + normal: ({ children }: { children: React.ReactNode }) => ( + + {children} + + ), } as BlockType, }} /> diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx index 2cf30714c..9e35ba21b 100644 --- a/web/pageComponents/topicPages/TextBlock.tsx +++ b/web/pageComponents/topicPages/TextBlock.tsx @@ -78,7 +78,11 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => { value={ingress} components={{ block: { - normal: ({ children }: { children: React.ReactNode }) => {children}, + normal: ({ children }: { children: React.ReactNode }) => ( + + {children} + + ), } as BlockType, }} /> diff --git a/web/styles/settings.ts b/web/styles/settings.ts index af9f08e68..8fcc1f1a0 100644 --- a/web/styles/settings.ts +++ b/web/styles/settings.ts @@ -109,6 +109,7 @@ export const typography = css` /* Should probably do something more clever here */ --lineHeight-1: inherit; --lineHeight-2: 1.2; + --lineHeight-2_5: 1.35; --lineHeight-3: 1.5; /* Font weights */