🐛 remove margins on list items childs #2201 (#2202)

* 🐛 remove margins on list items childs * 🎨 add blocks to 5050hero and add liststyles for ol nesting * 🎨 add blocks to components
equinor · Mar 20, 2024 · b5a3d4f · b5a3d4f
1 parent 8a6c70a
commit b5a3d4f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 14 deletions.
diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -5,6 +5,7 @@ import type { HeroType } from '../../../types/types'
 import { BackgroundContainer, Text } from '@components'
 import ReadMoreLink from '../ReadMoreLink'
 import RichText from '../portableText/RichText'
+import Blocks from '../portableText/Blocks'
 
 const StyledHero = styled(BackgroundContainer)`
   display: grid;
@@ -79,7 +80,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBig
           )}
           {ingress && !isBigTitle && (
             <StyledIngress>
-              <RichText value={ingress} />
+              <Blocks value={ingress} />
             </StyledIngress>
           )}
           {link && !isBigTitle && (

diff --git a/web/pageComponents/topicPages/Accordion/Accordion.tsx b/web/pageComponents/topicPages/Accordion/Accordion.tsx
@@ -3,9 +3,8 @@ import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
 import useRouterReplace from '../../hooks/useRouterReplace'
 import { Accordion as EnvisAccordion } from '@components'
-import RichText from '../../shared/portableText/RichText'
-
 import type { AccordionListData } from '../../../types/types'
+import Blocks from '../../../pageComponents/shared/portableText/Blocks'
 
 const { Item, Header, Panel } = EnvisAccordion
 
@@ -63,7 +62,7 @@ const Accordion = ({ data, id, hasTitle = true, queryParamName }: AccordionProps
         return (
           <Item key={id} id={idx}>
             <Header headingLevel={hasTitle ? 'h3' : 'h2'}>{itemTitle}</Header>
-            <Panel>{content && <RichText value={content} />}</Panel>
+            <Panel>{content && <Blocks value={content} />}</Panel>
           </Item>
         )
       })}

diff --git a/web/pageComponents/topicPages/KeyNumbers/KeyNumbers.tsx b/web/pageComponents/topicPages/KeyNumbers/KeyNumbers.tsx
@@ -5,9 +5,9 @@ import TitleText from '../../shared/portableText/TitleText'
 import IngressText from '../../shared/portableText/IngressText'
 import KeyNumberItem from './KeyNumberItem'
 import ReadMoreLink from '../../../pageComponents/shared/ReadMoreLink'
-import RichText from '../../shared/portableText/RichText'
 import { Carousel } from '../../shared/Carousel'
 import { useMediaQuery } from '../../../lib/hooks/useMediaQuery'
+import Blocks from '../../../pageComponents/shared/portableText/Blocks'
 
 const Disclaimer = styled.div`
   @media (min-width: 1300px) {
@@ -85,7 +85,7 @@ export default function ({ data, anchor }: KeyNumbersProps) {
 
       {disclaimer && (
         <Disclaimer>
-          <RichText value={disclaimer} />
+          <Blocks value={disclaimer} />
         </Disclaimer>
       )}
       {action && <ReadMoreLink action={action} />}

diff --git a/web/pageComponents/topicPages/Promotion.tsx b/web/pageComponents/topicPages/Promotion.tsx
@@ -42,7 +42,7 @@ const Promotion = ({ data, anchor, ...rest }: { data: PromotionData; anchor?: st
           {title && <StyledHeading value={title} level="h2" size="xl" />}
           {ingress && (
             <Ingress>
-              <IngressText value={ingress} centered={true} />
+              <IngressText value={ingress} />
             </Ingress>
           )}
         </Intro>

diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
@@ -220,6 +220,33 @@ module.exports = {
                 fontWeight: theme('fontWeight.normal'),
                 marginBottom: theme('spacing.8'),
               },
+              'ul ul, ul ol, ol ul, ol ol': {
+                paddingLeft: em(38, 24),
+              },
+              'ol ol': {
+                listStyleType: 'lower-alpha',
+              },
+              'ol ol ol': {
+                listStyleType: 'lower-roman',
+              },
+              'ol > li': {
+                marginLeft: em(8, 14),
+              },
+              'ul > li': {
+                marginLeft: em(8, 14),
+              },
+              '> ul > li > *:first-child': {
+                marginTop: '0px',
+              },
+              '> ul > li > *:last-child': {
+                marginBottom: '0px',
+              },
+              '> ol > li > *:first-child': {
+                marginTop: '0px',
+              },
+              '> ol > li > *:last-child': {
+                marginBottom: '0px',
+              },
             },
             {
               '--tw-prose-body': theme('colors.slate.80'),
@@ -262,16 +289,9 @@ module.exports = {
               marginRight: theme('padding.layout-lg'),
             },
             'ul ul, ul ol, ol ul, ol ol': {
-              paddingLeft: em(38, 24),
               marginLeft: '0px',
               marginRight: '0px',
             },
-            'ol > li': {
-              marginLeft: em(8, 14),
-            },
-            'ul > li': {
-              marginLeft: em(8, 14),
-            },
             p: {
               paddingLeft: theme('padding.layout-lg'),
               paddingRight: theme('padding.layout-lg'),