✨ Adjust line height #1890

equinor · Oct 6, 2023 · 07b2a1e · 07b2a1e
1 parent b4a64a5
commit 07b2a1e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx
@@ -10,7 +10,7 @@ type StyledTextProps = {
 
 const StyledText = styled(Typography)<StyledTextProps>`
   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)<StyledTextProps>`
 
 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<HTMLDivElement, TextProps>(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 (
     <StyledText
       ref={ref}
@@ -71,6 +77,7 @@ export const Text = forwardRef<HTMLDivElement, TextProps>(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
@@ -95,7 +95,11 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
                 value={text}
                 components={{
                   block: {
-                    normal: ({ children }: { children: React.ReactNode }) => <Text size="lg">{children}</Text>,
+                    normal: ({ children }: { children: React.ReactNode }) => (
+                      <Text size="lg" lineHeight="2_5">
+                        {children}
+                      </Text>
+                    ),
                   } as BlockType,
                 }}
               />

diff --git 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 }) => <Text size="lg">{children}</Text>,
+                  normal: ({ children }: { children: React.ReactNode }) => (
+                    <Text lineHeight="2_5" size="lg">
+                      {children}
+                    </Text>
+                  ),
                 } as BlockType,
               }}
             />

diff --git 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 */