fix: add stylings for list

components/ContentType/LoyaltyPage/loyaltyPage.module.css

@@ -4,6 +4,7 @@
   padding-left: var(--Spacing-x0);
   padding-right: var(--Spacing-x0);
   position: relative;
+  justify-content: center;
 }
 
 .blocks {

components/Current/Aside/Puff/index.tsx

@@ -3,10 +3,10 @@ import { useRouter } from "next/navigation"
 
 import { Button } from "@scandic-hotels/design-system/current"
 
+import { renderOptions as currentRenderOptions } from "@/components/Current/currentRenderOptions"
 import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
 
-import { renderOptions as currentRenderOption } from "./../../currentRenderOptions"
 import { renderOptions } from "./renderOptions"
 
 import styles from "./puff.module.css"
@@ -45,7 +45,7 @@ export default function Puff({
             <JsonToHtml
               embeds={[]}
               nodes={text.json.children}
-              renderOptions={{ ...currentRenderOption, ...renderOptions }}
+              renderOptions={{ ...currentRenderOptions, ...renderOptions }}
             />
             <div>
               <Button onPress={onClick}>{link.title || title}</Button>
@@ -74,7 +74,7 @@ export default function Puff({
               <JsonToHtml
                 embeds={[]}
                 nodes={text.json.children}
-                renderOptions={renderOptions}
+                renderOptions={{ ...currentRenderOptions, ...renderOptions }}
               />
             </section>
           </article>

components/Current/Preamble/index.tsx

@@ -1,6 +1,6 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
-import { renderOptions as currentRenderOption } from "./../currentRenderOptions"
+import { renderOptions as currentRenderOptions } from "./../currentRenderOptions"
 import Breadcrumbs from "./Breadcrumbs"
 import { renderOptions } from "./renderOptions"
 
@@ -28,7 +28,7 @@ export default function Preamble({
           <JsonToHtml
             embeds={preamble.text.embedded_itemsConnection.edges}
             nodes={preamble.text.json.children}
-            renderOptions={{ ...currentRenderOption, ...renderOptions }}
+            renderOptions={{ ...currentRenderOptions, ...renderOptions }}
           />
         ) : null}
       </section>

components/ImageContainer/imageContainer.module.css

@@ -7,6 +7,7 @@
 
 .image {
   max-width: 100%;
+  width: 100%;
   height: 365px;
   object-fit: cover;
   border-radius: var(--Corner-radius-Medium);

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(

components/Section/Link/index.tsx

@@ -18,7 +18,7 @@ export default function SectionLink({ link, variant }: SectionLinkProps) {
       className={classNames}
       color="burgundy"
       href={link.href}
-      variant="myPage"
+      variant="underscored"
     >
       <ArrowRight color="burgundy" className={styles.icon} />
       {link.text}