From 0656f5ac211d37f47cdbbfa5dbbedf1d59259c58 Mon Sep 17 00:00:00 2001
From: Fernando Lucchesi <fernando@lucalto.com>
Date: Wed, 4 Oct 2023 08:57:33 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20logic=20structure=20#1?=
 =?UTF-8?q?890?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/components/src/Text/Text.tsx     |  6 +++--
 web/pageComponents/shared/Teaser.tsx | 38 ++++++++++++++--------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx
index e68246de3..2fa5a11cd 100644
--- 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
index c6bbd2102..89ea76fe0 100644
--- 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>