Add strong type #2798 (#2799)

* Add strong type #2798

* Adjust list to apply highlight #2798

web/pageComponents/shared/portableText/Blocks.tsx

@@ -8,7 +8,17 @@ import {
   PortableTextTypeComponent,
 } from '@portabletext/react'
 import { PortableTextBlock, PortableTextBlockStyle } from '@portabletext/types'
-import { FigureWithLayout, Quote, Fact, ExternalLink, InternalLink, BasicIframe, Highlight } from './components'
+import {
+  FigureWithLayout,
+  Quote,
+  Fact,
+  ExternalLink,
+  InternalLink,
+  BasicIframe,
+  Highlight,
+  BulletList,
+  NumberedList,
+} from './components'
 import { twMerge } from 'tailwind-merge'
 import { FormattedMessage } from 'react-intl'
 
@@ -53,6 +63,11 @@ const defaultSerializers = {
     highlight: ({ children }: TypeProps) => {
       return <Highlight>{children}</Highlight>
     },
+    strong: ({ children }: any) => <strong className="font-bold text-inherit">{children}</strong>,
+  },
+  list: {
+    bullet: BulletList,
+    number: NumberedList,
   },
 }
 const footnoteSerializer = {
@@ -183,6 +198,7 @@ export default function Blocks({
                       ...marksComponents,
                       ...(includeFootnotes && footnoteSerializer),
                     },
+                    list: { ...defaultSerializers.list },
                   }}
                 />
               </div>

web/pageComponents/shared/portableText/components/BulletList.tsx

@@ -1,12 +1,22 @@
-import { List } from '@components'
-import styled from 'styled-components'
-
-const StyledList = styled(List)`
-  &:not(li > ul) {
-    margin-bottom: var(--space-medium);
-  }
-`
+import * as React from 'react'
 
 export const BulletList = ({ children }: { children?: React.ReactNode }) => {
-  return <StyledList>{children}</StyledList>
+  return (
+    <ul className="list-disc">
+      {React.Children.map(children, (listItem) => {
+        if (!React.isValidElement(listItem)) return listItem
+
+        const hasHighlight = React.Children.toArray(listItem.props.children).some((child) => {
+          if (React.isValidElement(child)) {
+            return child.props?.markType === 'highlight'
+          }
+          return false
+        })
+
+        return (
+          <li className={hasHighlight ? 'marker:text-red-600' : 'marker:text-inherit'}>{listItem.props.children}</li>
+        )
+      })}
+    </ul>
+  )
 }

web/pageComponents/shared/portableText/components/NumberedList.tsx

@@ -1,11 +1,22 @@
-import { List } from '@components'
-import styled from 'styled-components'
+import * as React from 'react'
 
-const StyledList = styled(List)`
-  &:not(li > ul) {
-    margin-bottom: var(--space-medium);
-  }
-`
 export const NumberedList = ({ children }: { children?: React.ReactNode }) => {
-  return <StyledList variant="numbered">{children}</StyledList>
+  return (
+    <ol className="list-decimal">
+      {React.Children.map(children, (listItem) => {
+        if (!React.isValidElement(listItem)) return listItem
+
+        const hasHighlight = React.Children.toArray(listItem.props.children).some((child) => {
+          if (React.isValidElement(child)) {
+            return child.props?.markType === 'highlight'
+          }
+          return false
+        })
+
+        return (
+          <li className={hasHighlight ? 'marker:text-red-600' : 'marker:text-inherit'}>{listItem.props.children}</li>
+        )
+      })}
+    </ol>
+  )
 }