fix: add stylings for list

components/JsonToHtml/index.tsx

@@ -1,5 +1,7 @@
 import { nodesToHtml } from "./utils"
 
+import styles from "./jsontohtml.module.css"
+
 import type { JsonToHtmlProps } from "@/types/components/jsontohtml"
 
 export default function JsonToHtml({
@@ -11,7 +13,7 @@ export default function JsonToHtml({
     return null
   }
   return (
-    <section style={{ display: "grid", gap: "var(--Spacing-x3" }}>
+    <section className={styles.container}>
       {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
     </section>
   )

components/JsonToHtml/jsontohtml.module.css

@@ -7,6 +7,54 @@
   margin: var(--Spacing-x1) var(--Spacing-x0);
 }
 
-.li {
-  margin-left: var(--Spacing-x3);
+.ul,
+.ol {
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+.ol:has(li:nth-last-child(n + 4)),
+.ul:has(li:nth-last-child(n + 4)) {
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: column;
+}
+
+.ol > li::marker {
+  color: var(--Primary-Light-On-Surface-Accent);
+}
+
+.ul:has(.heart),
+.ul:has(.check) {
+  list-style: none;
+}
+.li:has(.heart),
+.li:has(.check) {
+  display: flex;
+}
+
+.li:not(:has(.heart), :has(.check)) {
+  margin-left: var(--Spacing-x2);
+}
+
+.li:has(.heart):before {
+  content: url("/_static/icons/heart.svg");
+  position: relative;
+  margin-right: var(--Spacing-x1);
+  height: 8px;
+  top: 3px;
+}
+
+.li:has(.check)::before {
+  content: url("/_static/icons/check-ring.svg");
+  position: relative;
+  margin-right: var(--Spacing-x1);
+  height: 8px;
+  top: 3px;
+}
+
+.container {
+  display: "grid";
+  gap: var(--Spacing-x3);
+  max-width: 1197px;
 }

components/JsonToHtml/renderOptions.tsx

@@ -10,7 +10,7 @@ import Caption from "../TempDesignSystem/Text/Caption"
 import Footnote from "../TempDesignSystem/Text/Footnote"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
 import Title from "../TempDesignSystem/Text/Title"
-import { hasAvailableFormat } from "./utils"
+import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
@@ -18,7 +18,7 @@ import type { EmbedByUid } from "@/types/components/jsontohtml"
 import { EmbedEnum } from "@/types/requests/utils/embeds"
 import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
 import {
-  AvailableFormatEnum,
+  AvailableParagraphFormatEnum,
   RTEItemTypeEnum,
   RTETypeEnum,
 } from "@/types/rte/enums"
@@ -201,20 +201,6 @@ export const renderOptions: RenderOptions = {
     )
   },
 
-  [RTETypeEnum.h6]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Subtitle asChild key={node.uid} {...props}>
-        <h6>{next(node.children, embeds, fullRenderOptions)}</h6>
-      </Subtitle>
-    )
-  },
-
   [RTETypeEnum.hr]: () => {
     return <Divider />
   },
@@ -240,8 +226,26 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
+
+    // Set the number of rows dynamically to create even rows for each column. We want the li:s
+    // to flow with the column, so therefore this is needed.
+    let numberOfRows: number | undefined
+    if (node.children.length > 4) {
+      const half = node.children.length / 2
+      numberOfRows = Math.ceil(half)
+    }
+
     return (
-      <ol key={node.uid} {...props}>
+      <ol
+        key={node.uid}
+        {...props}
+        className={styles.ol}
+        style={
+          numberOfRows
+            ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+            : {}
+        }
+      >
         {next(node.children, embeds, fullRenderOptions)}
       </ol>
     )
@@ -256,17 +260,13 @@ export const renderOptions: RenderOptions = {
     const props = extractPossibleAttributes(node.attrs)
 
     const hasFormat = node.children.some((item) =>
-      hasAvailableFormat((item as RTETextNode).classname)
+      hasAvailableParagraphFormat((item as RTETextNode)?.classname)
     )
 
     // If a child node has an available format as className, we wrap it in a
     // span and render the children with the correct component
     if (hasFormat) {
-      return (
-        <span {...props} key={node.uid}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </span>
-      )
+      return next(node.children, embeds, fullRenderOptions)
     }
 
     return (
@@ -423,6 +423,15 @@ export const renderOptions: RenderOptions = {
     )
   },
 
+  [RTETypeEnum.fragment]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    return <>{next(node.children, embeds, fullRenderOptions)}</>
+  },
+
   [RTETypeEnum.tr]: (
     node: RTEDefaultNode,
     embeds: EmbedByUid,
@@ -472,8 +481,26 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
+
+    // Set the number of rows dynamically to create even rows for each column. We want the li:s
+    // to flow with the column, so therefore this is needed.
+    let numberOfRows: number | undefined
+    if (node.children.length > 4) {
+      const half = node.children.length / 2
+      numberOfRows = Math.ceil(half)
+    }
+
     return (
-      <ul key={node.uid} {...props}>
+      <ul
+        key={node.uid}
+        {...props}
+        className={styles.ul}
+        style={
+          numberOfRows
+            ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+            : {}
+        }
+      >
         {next(node.children, embeds, fullRenderOptions)}
       </ul>
     )
@@ -533,7 +560,16 @@ export const renderOptions: RenderOptions = {
       delete props.id
     }
 
-    if (className === AvailableFormatEnum.footnote) {
+    if (className) {
+      if (hasAvailableULFormat(className)) {
+        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
+        // to an existing class in the module style sheet. Due to our css modules plugin for
+        // typescript, we cannot do this without the ts-ignore
+        props.className = styles[className]
+      }
+    }
+
+    if (className === AvailableParagraphFormatEnum.footnote) {
       return (
         <Footnote key={id} {...props}>
           {children}
@@ -541,7 +577,7 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum.caption) {
+    if (className === AvailableParagraphFormatEnum.caption) {
       return (
         <Caption key={id} {...props}>
           {children}
@@ -549,7 +585,7 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum["script-1"]) {
+    if (className === AvailableParagraphFormatEnum["script-1"]) {
       return (
         <BiroScript key={id} type="one" {...props}>
           {children}
@@ -557,7 +593,7 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum["script-2"]) {
+    if (className === AvailableParagraphFormatEnum["script-2"]) {
       return (
         <BiroScript key={id} type="two" {...props}>
           {children}
@@ -565,14 +601,14 @@ export const renderOptions: RenderOptions = {
       )
     }
 
-    if (className === AvailableFormatEnum["subtitle-1"]) {
+    if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
       return (
         <Subtitle key={id} {...props}>
           {children}
         </Subtitle>
       )
     }
-    if (className === AvailableFormatEnum["subtitle-2"]) {
+    if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
       return (
         <Subtitle key={id} {...props}>
           {children}

components/JsonToHtml/utils.tsx

@@ -3,7 +3,11 @@ import { renderOptions } from "./renderOptions"
 import type { EmbedByUid } from "@/types/components/jsontohtml"
 import type { Embeds } from "@/types/requests/embeds"
 import type { Node } from "@/types/requests/utils/edges"
-import { AvailableFormatEnum, RTETypeEnum } from "@/types/rte/enums"
+import {
+  AvailableParagraphFormatEnum,
+  AvailableULFormatEnum,
+  RTETypeEnum,
+} from "@/types/rte/enums"
 import type {
   RTENode,
   RTERenderOptionComponent,
@@ -85,8 +89,18 @@ function next(
   return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
 }
 
-export function hasAvailableFormat(className?: string) {
-  return className && Object.keys(AvailableFormatEnum).includes(className)
+export function hasAvailableParagraphFormat(className?: string) {
+  if (!className) {
+    return false
+  }
+  return Object.keys(AvailableParagraphFormatEnum).includes(className)
+}
+
+export function hasAvailableULFormat(className?: string) {
+  if (!className) {
+    return false
+  }
+  return Object.keys(AvailableULFormatEnum).includes(className)
 }
 
 export function nodeToHtml(