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}

public/_static/icons/check-ring.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5625_32337" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5625_32337)">
+<path d="M7.08333 9.21667L5.65738 7.79072C5.53579 7.66913 5.38889 7.60833 5.21667 7.60833C5.04444 7.60833 4.89722 7.66944 4.775 7.79167C4.65278 7.91389 4.59167 8.06111 4.59167 8.23333C4.59167 8.40556 4.6518 8.5518 4.77207 8.67207L6.64167 10.5417C6.76742 10.6694 6.91414 10.7333 7.08182 10.7333C7.2495 10.7333 7.39722 10.6694 7.525 10.5417L11.225 6.84167C11.3472 6.71944 11.4083 6.57222 11.4083 6.4C11.4083 6.22778 11.3472 6.08056 11.225 5.95833C11.1028 5.83611 10.9556 5.775 10.7833 5.775C10.6111 5.775 10.4646 5.83538 10.3439 5.95613L7.08333 9.21667ZM8 14.5C7.10103 14.5 6.25623 14.3291 5.46558 13.9873C4.67493 13.6455 3.98717 13.1816 3.4023 12.5956C2.81743 12.0097 2.35417 11.3217 2.0125 10.5319C1.67083 9.74202 1.5 8.89806 1.5 8C1.5 7.10103 1.67091 6.25623 2.01272 5.46558C2.35453 4.67493 2.81842 3.98717 3.40438 3.4023C3.99035 2.81743 4.67826 2.35417 5.46812 2.0125C6.25798 1.67083 7.10194 1.5 8 1.5C8.89897 1.5 9.74377 1.67091 10.5344 2.01272C11.3251 2.35453 12.0128 2.81842 12.5977 3.40438C13.1826 3.99035 13.6458 4.67826 13.9875 5.46812C14.3292 6.25798 14.5 7.10194 14.5 8C14.5 8.89897 14.3291 9.74377 13.9873 10.5344C13.6455 11.3251 13.1816 12.0128 12.5956 12.5977C12.0097 13.1826 11.3217 13.6458 10.5319 13.9875C9.74202 14.3292 8.89806 14.5 8 14.5ZM8 13.25C9.46111 13.25 10.7014 12.7403 11.7208 11.7208C12.7403 10.7014 13.25 9.46111 13.25 8C13.25 6.53889 12.7403 5.29861 11.7208 4.27917C10.7014 3.25972 9.46111 2.75 8 2.75C6.53889 2.75 5.29861 3.25972 4.27917 4.27917C3.25972 5.29861 2.75 6.53889 2.75 8C2.75 9.46111 3.25972 10.7014 4.27917 11.7208C5.29861 12.7403 6.53889 13.25 8 13.25Z" fill="#B05B65"/>
+</g>
+</svg>

public/_static/icons/heart.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5625_32301" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_5625_32301)">
+<path d="M7.99994 13.4171L7.23327 12.7255C6.14142 11.7524 5.24068 10.9189 4.53105 10.2249C3.82142 9.53081 3.26225 8.91489 2.85354 8.37709C2.44481 7.8393 2.16148 7.34774 2.00353 6.90241C1.84558 6.45708 1.7666 6.00088 1.7666 5.53379C1.7666 4.57813 2.09435 3.77255 2.74985 3.11704C3.40536 2.46154 4.21095 2.13379 5.1666 2.13379C5.70314 2.13379 6.22338 2.25046 6.72734 2.48379C7.23129 2.71712 7.65549 3.05046 7.99994 3.48379C8.36105 3.05046 8.78882 2.71712 9.28327 2.48379C9.77771 2.25046 10.2944 2.13379 10.8333 2.13379C11.7889 2.13379 12.5945 2.46154 13.25 3.11704C13.9055 3.77255 14.2333 4.57813 14.2333 5.53379C14.2333 6.00088 14.1571 6.45153 14.0047 6.88574C13.8523 7.31996 13.5717 7.80319 13.163 8.33542C12.7543 8.86767 12.1923 9.48637 11.4772 10.1915C10.762 10.8967 9.84734 11.7524 8.73327 12.7588L7.99994 13.4171Z" fill="#B05B65"/>
+</g>
+</svg>

types/rte/enums.ts

@@ -37,6 +37,7 @@ export enum RTETypeEnum {
   tr = "tr",
   ul = "ul",
   ImageVault = "ImageVault",
+  fragment = "fragment",
 }
 
 export type RTEType = keyof typeof RTETypeEnum
@@ -48,7 +49,7 @@ export enum RTEItemTypeEnum {
 
 export type RTEItemType = keyof typeof RTEItemTypeEnum
 
-export enum AvailableFormatEnum {
+export enum AvailableParagraphFormatEnum {
   "script-1" = "script-1",
   "script-2" = "script-2",
   "footnote" = "footnote",
@@ -56,3 +57,8 @@ export enum AvailableFormatEnum {
   "subtitle-1" = "subtitle-1",
   "subtitle-2" = "subtitle-2",
 }
+
+export enum AvailableULFormatEnum {
+  "heart" = "heart",
+  "check" = "check",
+}