From 9d7f45995b562d51ced5c2da84ff4fa3682ede8d Mon Sep 17 00:00:00 2001
From: Malin J <millianapia@gmail.com>
Date: Wed, 20 Dec 2023 15:02:41 +0100
Subject: [PATCH] Text improvements to the teaser component #2009 (#2019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 padding adjustments to teaser component #2009

* 💄 Add padding for big text and eyebrow #2009
---
 sanityv3/schemas/objects/teaser.tsx   |  2 +-
 web/components/src/Teaser/Content.tsx |  4 ++-
 web/pageComponents/shared/Teaser.tsx  | 46 +++++++++++++++++----------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/sanityv3/schemas/objects/teaser.tsx b/sanityv3/schemas/objects/teaser.tsx
index fac1f71d5..db77b5f72 100644
--- a/sanityv3/schemas/objects/teaser.tsx
+++ b/sanityv3/schemas/objects/teaser.tsx
@@ -33,7 +33,7 @@ const blockConfig = {
   internalLink: false,
   externalLink: false,
   attachment: false,
-  lists: false,
+  lists: true,
 }
 
 const blockContentType = configureBlockContent({ ...blockConfig })
diff --git a/web/components/src/Teaser/Content.tsx b/web/components/src/Teaser/Content.tsx
index 1c315287b..cdafdf053 100644
--- a/web/components/src/Teaser/Content.tsx
+++ b/web/components/src/Teaser/Content.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components'
 
 const StyledContent = styled.div`
   display: grid;
-  grid-gap: var(--space-large);
   grid-auto-columns: auto;
   align-items: center;
   align-content: start;
@@ -13,6 +12,9 @@ const StyledContent = styled.div`
   p {
     margin-bottom: 0;
   }
+  ul {
+    margin-bottom: var(--space-medium);
+  }
 
   @media (min-width: 750px) {
     /*  max-height: 800px; */
diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx
index 7590023c4..1fe0865cc 100644
--- a/web/pageComponents/shared/Teaser.tsx
+++ b/web/pageComponents/shared/Teaser.tsx
@@ -22,6 +22,18 @@ const StyledEnvisTeaser = styled(EnvisTeaser)`
   font-size: var(--typeScale-1);
 `
 
+const StyledEyeBrow = styled(Eyebrow)`
+  padding-bottom: var(--space-large);
+`
+
+const StyledTeaserTitle = styled(TitleText)`
+  padding-bottom: var(--space-large);
+`
+
+const ContentWrapper = styled.div`
+  padding-bottom: var(--space-large);
+`
+
 const TeaserImage = ({ image }: { image: ImageWithAlt }) => {
   const imageSrc =
     image.extension === 'svg' ? urlFor(image).toString() : urlFor(image).size(1200, 800).auto('format').toString()
@@ -91,25 +103,27 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
         <Content>
           {isBigText ? (
             text && (
-              <IngressText
-                value={text}
-                components={{
-                  block: {
-                    normal: ({ children }: { children: React.ReactNode }) => (
-                      <Text size="lg" lineHeight="2_5">
-                        {children}
-                      </Text>
-                    ),
-                  } as BlockType,
-                }}
-              />
+              <ContentWrapper>
+                <IngressText
+                  value={text}
+                  components={{
+                    block: {
+                      normal: ({ children }: { children: React.ReactNode }) => (
+                        <Text size="lg" lineHeight="2_5">
+                          {children}
+                        </Text>
+                      ),
+                    } as BlockType,
+                  }}
+                />
+              </ContentWrapper>
             )
           ) : (
-            <>
-              {overline && <Eyebrow>{overline}</Eyebrow>}
-              {title && <TitleText value={title} />}
+            <ContentWrapper>
+              {overline && <StyledEyeBrow>{overline}</StyledEyeBrow>}
+              {title && <StyledTeaserTitle value={title} />}
               {text && <IngressText value={text} />}
-            </>
+            </ContentWrapper>
           )}
           {action && <TeaserAction action={action} />}
         </Content>