Text improvements to the teaser component #2009 (#2019)

* 💄 padding adjustments to teaser component #2009 * 💄 Add padding for big text and eyebrow #2009
equinor · Dec 20, 2023 · 9d7f459 · 9d7f459
1 parent 4bf92d0
commit 9d7f459
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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>