🎨 Improve logic structure #1890

equinor · Oct 4, 2023 · 0656f5a · 0656f5a
1 parent 2b2a9a0
commit 0656f5a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx
@@ -41,7 +41,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
 `
 
 export type TextProps = {
-  size?: 'regular' | 'md' | 'small' | 'big'
+  size?: 'regular' | 'md' | 'small' | 'lg'
   bold?: boolean
   italic?: boolean
   centered?: boolean
@@ -51,16 +51,18 @@ export type TextProps = {
 
 /* Should be easy enough to change later on */
 const sizes = {
+  lg: 'var(--typeScale-4_5)',
   regular: 'var(--typeScale-1)',
   md: 'var(--typeScale-2)',
   small: 'var(--typeScale-0)',
-  big: 'var(--typeScale-4_5)',
 }
 
 export const Text = forwardRef<HTMLDivElement, TextProps>(function Text(
   { size = 'regular', style, children, inverted = false, ...rest },
   ref,
 ) {
+  if (size === 'lg') console.log(ref)
+
   return (
     <StyledText
       ref={ref}

diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx
@@ -89,25 +89,25 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
           {image?.asset && <TeaserImage image={image} />}
         </Media>
         <Content>
-          {overline && <Eyebrow>{overline}</Eyebrow>}
-
-          {title && <TitleText value={title} />}
-
-          {text && (
-            <IngressText
-              value={text}
-              components={
-                bigTextTeaser
-                  ? {
-                      block: {
-                        normal: ({ children }: { children: React.ReactNode }) => {
-                          return <Text size="big">{children}</Text>
-                        },
-                      } as BlockType,
-                    }
-                  : {}
-              }
-            />
+          {bigTextTeaser ? (
+            text && (
+              <IngressText
+                value={text}
+                components={{
+                  block: {
+                    normal: ({ children }: { children: React.ReactNode }) => {
+                      return <Text size="lg">{children}</Text>
+                    },
+                  } as BlockType,
+                }}
+              />
+            )
+          ) : (
+            <>
+              {overline && <Eyebrow>{overline}</Eyebrow>}
+              {title && <TitleText value={title} />}
+              {text && <IngressText value={text} />}
+            </>
           )}
           {action && <TeaserAction action={action} />}
         </Content>