🐛 Override textblock component #1880

equinor · Nov 2, 2023 · 8034fe3 · 8034fe3
1 parent 6943723
commit 8034fe3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/web/components/src/List/List.tsx b/web/components/src/List/List.tsx
@@ -15,7 +15,6 @@ const StyledList = styled(EdsList)<ListProps>`
   margin-left: var(--space-medium);
   margin-right: var(--space-medium);
   padding-left: var(--space-medium);
-  padding-bottom: var(--space-small);
   list-style-position: outside;
   ${({ unstyled }) =>
     unstyled && {

diff --git a/web/pageComponents/topicPages/TextBlock.tsx b/web/pageComponents/topicPages/TextBlock.tsx
@@ -1,12 +1,13 @@
-import { Eyebrow, BackgroundContainer, Text, Heading } from '@components'
+import { Eyebrow, BackgroundContainer, Text, Heading, List } from '@components'
 import IngressText from '../shared/portableText/IngressText'
 import RichText from '../shared/portableText/RichText'
 import TitleText from '../shared/portableText/TitleText'
 import Image, { Ratios } from '../shared/SanityImage'
 import styled from 'styled-components'
 import type { TextBlockData } from '../../types/types'
 import CallToActions from './CallToActions'
-import { BlockType } from '../shared/portableText/helpers/defaultSerializers'
+import { BlockType, ListType } from '../shared/portableText/helpers/defaultSerializers'
+import type { PortableTextBlock } from '@portabletext/types'
 
 export const StyledTextBlockWrapper = styled(BackgroundContainer)<{ id: string | undefined }>`
   ${({ id }) =>
@@ -39,6 +40,9 @@ const StyledTextBlock = styled.section`
     margin-bottom: 0;
   }
 `
+const StyledList = styled(List)`
+  margin-bottom: var(--space-medium);
+`
 
 const TextContainer = styled.div`
   margin-bottom: var(--space-medium);
@@ -93,12 +97,54 @@ const TextBlock = ({ data, anchor }: TextBlockProps) => {
             )}
             {overline && <Eyebrow>{overline}</Eyebrow>}
             {title && <TitleText value={title} />}
-            {ingress && <IngressText value={ingress} />}
+            {ingress && (
+              <IngressText
+                value={ingress}
+                components={{
+                  list: {
+                    bullet: ({ children }) => {
+                      return (
+                        <StyledList>
+                          <>{children}</>
+                        </StyledList>
+                      )
+                    },
+                    number: ({ children }) => {
+                      return (
+                        <StyledList>
+                          <>{children}</>
+                        </StyledList>
+                      )
+                    },
+                  },
+                }}
+              />
+            )}
           </>
         )}
         {text && (
           <TextContainer>
-            <RichText value={text} />
+            <RichText
+              value={text}
+              components={{
+                list: {
+                  bullet: ({ children }) => {
+                    return (
+                      <StyledList>
+                        <>{children}</>
+                      </StyledList>
+                    )
+                  },
+                  number: ({ children }) => {
+                    return (
+                      <StyledList>
+                        <>{children}</>
+                      </StyledList>
+                    )
+                  },
+                },
+              }}
+            ></RichText>
           </TextContainer>
         )}
         {callToActions && callToActions.length === 1 && !overrideButtonStyle && <Spacer />}