Merged develop into feat/hotel-pages-intro-section

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,6 +3,7 @@ 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"
 
@@ -44,7 +45,7 @@ export default function Puff({
             <JsonToHtml
               embeds={[]}
               nodes={text.json.children}
-              renderOptions={renderOptions}
+              renderOptions={{ ...currentRenderOptions, ...renderOptions }}
             />
             <div>
               <Button onPress={onClick}>{link.title || title}</Button>
@@ -73,7 +74,7 @@ export default function Puff({
               <JsonToHtml
                 embeds={[]}
                 nodes={text.json.children}
-                renderOptions={renderOptions}
+                renderOptions={{ ...currentRenderOptions, ...renderOptions }}
               />
             </section>
           </article>

components/Current/Blocks/Text.tsx

@@ -1,5 +1,7 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
+import { renderOptions } from "./../currentRenderOptions"
+
 import type { TextProps } from "@/types/components/current/blocks/text"
 
 export default function Text({ text }: TextProps) {
@@ -7,6 +9,7 @@ export default function Text({ text }: TextProps) {
     <JsonToHtml
       embeds={text.content.embedded_itemsConnection.edges}
       nodes={text.content.json.children}
+      renderOptions={renderOptions}
     />
   )
 }

components/Current/Preamble/index.tsx

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

components/Current/currentRenderOptions.module.css

@@ -0,0 +1,6 @@
+.image {
+  height: auto;
+  margin-bottom: var(--Spacing-x2);
+  max-width: 100%;
+  object-fit: cover;
+}

components/Current/currentRenderOptions.tsx

@@ -0,0 +1,474 @@
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./currentRenderOptions.module.css"
+
+import type { EmbedByUid } from "@/types/components/jsontohtml"
+import { EmbedEnum } from "@/types/requests/utils/embeds"
+import type { Attributes } from "@/types/rte/attrs"
+import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
+import type {
+  RTEDefaultNode,
+  RTENext,
+  RTENode,
+  RTERegularNode,
+} from "@/types/rte/node"
+import { RTEMarkType } from "@/types/rte/node"
+import type { RenderOptions } from "@/types/rte/option"
+
+function extractPossibleAttributes(attrs: Attributes | undefined) {
+  if (!attrs) return {}
+  const props: Record<string, any> = {}
+  if (attrs.id) {
+    props.id = attrs.id
+  }
+
+  if (attrs.class) {
+    props.className = attrs.class
+  } else if (attrs["class-name"]) {
+    props.className = attrs["class-name"]
+  } else if (attrs.classname) {
+    props.className = attrs.classname
+  } else if (attrs?.style?.["text-align"]) {
+    props.style = {
+      textAlign: attrs?.style?.["text-align"],
+    }
+  }
+
+  return props
+}
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.a]: (
+    node: RTERegularNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if (node.attrs.url) {
+      const props = extractPossibleAttributes(node.attrs)
+      return (
+        <a
+          {...props}
+          href={node.attrs.url}
+          target={node.attrs.target ?? "_blank"}
+          key={node.uid}
+        >
+          {next(node.children, embeds, fullRenderOptions)}
+        </a>
+      )
+    }
+    return null
+  },
+
+  [RTETypeEnum.blockquote]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <blockquote key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </blockquote>
+    )
+  },
+
+  [RTETypeEnum.code]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <code key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </code>
+    )
+  },
+
+  [RTETypeEnum.embed]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    if (node.attrs.src) {
+      props.src = node.attrs.src
+    }
+    if (node.attrs.url) {
+      props.src = node.attrs.url
+    }
+    if (!props.src) {
+      return null
+    }
+    return (
+      <iframe key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </iframe>
+    )
+  },
+
+  [RTETypeEnum.h1]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h1 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h1>
+    )
+  },
+
+  [RTETypeEnum.h2]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h2 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h2>
+    )
+  },
+
+  [RTETypeEnum.h3]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h3 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h3>
+    )
+  },
+
+  [RTETypeEnum.h4]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h4 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h4>
+    )
+  },
+
+  [RTETypeEnum.h5]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h5 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h5>
+    )
+  },
+
+  [RTETypeEnum.h6]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <h6 key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </h6>
+    )
+  },
+
+  [RTETypeEnum.hr]: () => {
+    return <hr />
+  },
+
+  [RTETypeEnum.li]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <li key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </li>
+    )
+  },
+
+  [RTETypeEnum.ol]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <ol key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </ol>
+    )
+  },
+
+  [RTETypeEnum.p]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <p {...props} key={node.uid}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </p>
+    )
+  },
+
+  [RTETypeEnum.reference]: (
+    node: RTENode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if ("attrs" in node) {
+      const type = node.attrs.type
+      if (type === RTEItemTypeEnum.asset) {
+        const image = embeds?.[node?.attrs?.["asset-uid"]]
+        if (image?.node.__typename === EmbedEnum.SysAsset) {
+          const alt = image?.node?.title ?? node.attrs.alt
+          const alignment = node.attrs?.style?.["text-align"]
+            ? {
+                alignSelf: node.attrs?.style?.["text-align"],
+              }
+            : {}
+          return (
+            <Image
+              key={node.uid}
+              alt={alt}
+              className={styles.image}
+              height={image.node.dimension.height}
+              src={image?.node?.url}
+              width={image.node.dimension.width}
+              style={alignment}
+            />
+          )
+        }
+      } else {
+        const props = extractPossibleAttributes(node.attrs)
+        const href = node.attrs?.locale
+          ? `/${node.attrs.locale}${node.attrs.href}`
+          : node.attrs.href
+        return (
+          <Link {...props} href={href} key={node.uid}>
+            {next(node.children, embeds, fullRenderOptions)}
+          </Link>
+        )
+      }
+    }
+
+    return null
+  },
+
+  [RTETypeEnum.table]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <table key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </table>
+    )
+  },
+
+  [RTETypeEnum.thead]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <thead key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </thead>
+    )
+  },
+
+  [RTETypeEnum.tbody]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tbody key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tbody>
+    )
+  },
+
+  [RTETypeEnum.tfoot]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tfoot key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tfoot>
+    )
+  },
+
+  [RTETypeEnum.tr]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tr key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tr>
+    )
+  },
+
+  [RTETypeEnum.th]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <th key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </th>
+    )
+  },
+
+  [RTETypeEnum.td]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <td key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </td>
+    )
+  },
+
+  [RTETypeEnum.ul]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <ul key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </ul>
+    )
+  },
+
+  /** TextNode wrappers */
+  [RTEMarkType.bold]: (children: React.ReactNode) => {
+    return <strong>{children}</strong>
+  },
+
+  [RTEMarkType.italic]: (children: React.ReactNode) => {
+    return <em>{children}</em>
+  },
+
+  [RTEMarkType.underline]: (children: React.ReactNode) => {
+    return <u>{children}</u>
+  },
+
+  [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
+    return <s>{children}</s>
+  },
+
+  [RTEMarkType.inlineCode]: (children: React.ReactNode) => {
+    return <span>{children}</span>
+  },
+
+  [RTEMarkType.subscript]: (children: React.ReactNode) => {
+    return <sub>{children}</sub>
+  },
+
+  [RTEMarkType.superscript]: (children: React.ReactNode) => {
+    return <sup>{children}</sup>
+  },
+
+  [RTEMarkType.break]: (children: React.ReactNode) => {
+    return (
+      <>
+        <br />
+        {children}
+      </>
+    )
+  },
+
+  [RTEMarkType.classnameOrId]: (
+    children: React.ReactNode,
+    className?: string,
+    id?: string
+  ) => {
+    let props = {
+      className,
+      id,
+    }
+    if (!className) {
+      delete props.className
+    }
+    if (!id) {
+      delete props.id
+    }
+    return (
+      <span key={id} {...props}>
+        {children}
+      </span>
+    )
+  },
+
+  /**
+   * Contentstack can return something called `default` as seen here in their
+   * own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
+   */
+  default: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    return next(node.children, embeds, fullRenderOptions)
+  },
+}

components/ImageContainer/imageContainer.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  width: 100%;
+  grid-template-columns: auto;
+}
+
+.image {
+  max-width: 100%;
+  width: 100%;
+  height: 365px;
+  object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .image {
+    margin: var(--Spacing-x1) var(--Spacing-x0);
+  }
+}

components/ImageContainer/index.tsx

@@ -0,0 +1,36 @@
+import Image from "../Image"
+import Caption from "../TempDesignSystem/Text/Caption"
+
+import styles from "./imageContainer.module.css"
+
+import type { ImageContainerProps } from "@/types/components/imageContainer"
+
+export default function ImageContainer({
+  leftImage,
+  rightImage,
+}: ImageContainerProps) {
+  return (
+    <section className={styles.container}>
+      <article>
+        <Image
+          className={styles.image}
+          src={leftImage.url}
+          height={365}
+          width={600}
+          alt={leftImage.meta.alt || leftImage.title}
+        />
+        <Caption>{leftImage.meta.caption}</Caption>
+      </article>
+      <article>
+        <Image
+          className={styles.image}
+          src={rightImage.url}
+          height={365}
+          width={600}
+          alt={rightImage.meta.alt || rightImage.title}
+        />
+        <Caption>{leftImage.meta.caption}</Caption>
+      </article>
+    </section>
+  )
+}

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({
@@ -10,5 +12,9 @@ export default function JsonToHtml({
   if (!Array.isArray(nodes) || !nodes.length) {
     return null
   }
-  return <>{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}</>
+  return (
+    <section className={styles.container}>
+      {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
+    </section>
+  )
 }

components/JsonToHtml/jsontohtml.module.css

@@ -1,6 +1,60 @@
 .image {
-  height: auto;
-  margin-bottom: var(--Spacing-x2);
   max-width: 100%;
+  width: 100%;
+  height: 365px;
   object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
+  margin: var(--Spacing-x1) var(--Spacing-x0);
+}
+
+.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

@@ -1,17 +1,34 @@
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
+import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
+
+import ImageContainer from "../ImageContainer"
+import Divider from "../TempDesignSystem/Divider"
+import BiroScript from "../TempDesignSystem/Text/BiroScript"
+import Body from "../TempDesignSystem/Text/Body"
+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 { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
 import type { EmbedByUid } from "@/types/components/jsontohtml"
 import { EmbedEnum } from "@/types/requests/utils/embeds"
-import type { Attributes } from "@/types/rte/attrs"
-import { RTEItemTypeEnum, RTETypeEnum } from "@/types/rte/enums"
+import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
+import {
+  AvailableParagraphFormatEnum,
+  RTEItemTypeEnum,
+  RTETypeEnum,
+} from "@/types/rte/enums"
 import type {
   RTEDefaultNode,
+  RTEImageNode,
   RTENext,
   RTENode,
   RTERegularNode,
+  RTETextNode,
 } from "@/types/rte/node"
 import { RTEMarkType } from "@/types/rte/node"
 import type { RenderOptions } from "@/types/rte/option"
@@ -48,14 +65,16 @@ export const renderOptions: RenderOptions = {
     if (node.attrs.url) {
       const props = extractPossibleAttributes(node.attrs)
       return (
-        <a
+        <Link
           {...props}
           href={node.attrs.url}
-          target={node.attrs.target ?? "_blank"}
           key={node.uid}
+          target={node.attrs.target ?? "_blank"}
+          variant="underscored"
+          color="burgundy"
         >
           {next(node.children, embeds, fullRenderOptions)}
-        </a>
+        </Link>
       )
     }
     return null
@@ -69,9 +88,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <blockquote key={node.uid} {...props}>
+      <BiroScript key={node.uid} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
-      </blockquote>
+      </BiroScript>
     )
   },
 
@@ -120,9 +139,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h1 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h1">
         {next(node.children, embeds, fullRenderOptions)}
-      </h1>
+      </Title>
     )
   },
 
@@ -134,9 +153,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h2 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h2">
         {next(node.children, embeds, fullRenderOptions)}
-      </h2>
+      </Title>
     )
   },
 
@@ -148,9 +167,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h3 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h3">
         {next(node.children, embeds, fullRenderOptions)}
-      </h3>
+      </Title>
     )
   },
 
@@ -162,9 +181,9 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h4 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h4">
         {next(node.children, embeds, fullRenderOptions)}
-      </h4>
+      </Title>
     )
   },
 
@@ -176,28 +195,14 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <h5 key={node.uid} {...props}>
+      <Title key={node.uid} {...props} level="h5">
         {next(node.children, embeds, fullRenderOptions)}
-      </h5>
-    )
-  },
-
-  [RTETypeEnum.h6]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <h6 key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </h6>
+      </Title>
     )
   },
 
   [RTETypeEnum.hr]: () => {
-    return <hr />
+    return <Divider />
   },
 
   [RTETypeEnum.li]: (
@@ -208,7 +213,7 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <li key={node.uid} {...props}>
+      <li key={node.uid} {...props} className={styles.li}>
         {next(node.children, embeds, fullRenderOptions)}
       </li>
     )
@@ -221,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>
     )
@@ -235,10 +258,21 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     const props = extractPossibleAttributes(node.attrs)
+
+    const hasFormat = node.children.some((item) =>
+      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 next(node.children, embeds, fullRenderOptions)
+    }
+
     return (
-      <p {...props} key={node.uid}>
+      <Body {...props} key={node.uid}>
         {next(node.children, embeds, fullRenderOptions)}
-      </p>
+      </Body>
     )
   },
 
@@ -254,32 +288,78 @@ export const renderOptions: RenderOptions = {
         const image = embeds?.[node?.attrs?.["asset-uid"]]
         if (image?.node.__typename === EmbedEnum.SysAsset) {
           const alt = image?.node?.title ?? node.attrs.alt
-          const alignment = node.attrs?.style?.["text-align"]
-            ? {
-                alignSelf: node.attrs?.style?.["text-align"],
-              }
-            : {}
+          const props = extractPossibleAttributes(node.attrs)
+          props.className = styles.image
           return (
             <Image
               key={node.uid}
               alt={alt}
-              className={styles.image}
               height={image.node.dimension.height}
               src={image?.node?.url}
               width={image.node.dimension.width}
-              style={alignment}
+              {...props}
             />
           )
         }
-      } else {
-        const props = extractPossibleAttributes(node.attrs)
-        const href = node.attrs?.locale
-          ? `/${node.attrs.locale}${node.attrs.href}`
-          : node.attrs.href
+      } else if (type === RTEItemTypeEnum.entry) {
+        const entry = embeds?.[node?.attrs?.["entry-uid"]]
+
+        if (entry?.node.__typename === EmbedEnum.ImageContainer) {
+          const leftImage = insertResponseToImageVaultAsset(
+            entry.node.image_left
+          )
+          const rightImage = insertResponseToImageVaultAsset(
+            entry.node.image_right
+          )
+          return (
+            <ImageContainer leftImage={leftImage} rightImage={rightImage} />
+          )
+        } else {
+          // If entry is not an ImageContainer, it is a page and we return it as a link
+          const props = extractPossibleAttributes(node.attrs)
+          const href = node.attrs?.locale
+            ? `/${node.attrs.locale}${node.attrs.href}`
+            : node.attrs.href
+          return (
+            <Link
+              {...props}
+              href={href}
+              key={node.uid}
+              variant="underscored"
+              color="burgundy"
+            >
+              {next(node.children, embeds, fullRenderOptions)}
+            </Link>
+          )
+        }
+      }
+    }
+
+    return null
+  },
+
+  [RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
+    if ("attrs" in node) {
+      const type = node.type
+      if (type === RTETypeEnum.ImageVault) {
+        const attrs = node.attrs as RTEImageVaultAttrs
+        const image = insertResponseToImageVaultAsset(attrs)
+        const alt = image.meta.alt ?? image.title
+
+        const width = parseInt(attrs.width.replaceAll("px", ""))
+        const props = extractPossibleAttributes(attrs)
         return (
-          <Link {...props} href={href} key={node.uid}>
-            {next(node.children, embeds, fullRenderOptions)}
-          </Link>
+          <section key={node.uid}>
+            <Image
+              alt={alt}
+              className={styles.image}
+              height={365}
+              src={image.url}
+              width={width}
+              {...props}
+            />
+            <Caption>{image.meta.caption}</Caption>
+          </section>
         )
       }
     }
@@ -343,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,
@@ -392,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>
     )
@@ -452,6 +559,62 @@ export const renderOptions: RenderOptions = {
     if (!id) {
       delete props.id
     }
+
+    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}
+        </Footnote>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum.caption) {
+      return (
+        <Caption key={id} {...props}>
+          {children}
+        </Caption>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum["script-1"]) {
+      return (
+        <BiroScript key={id} type="one" {...props}>
+          {children}
+        </BiroScript>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum["script-2"]) {
+      return (
+        <BiroScript key={id} type="two" {...props}>
+          {children}
+        </BiroScript>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
+      return (
+        <Subtitle key={id} {...props}>
+          {children}
+        </Subtitle>
+      )
+    }
+    if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
+      return (
+        <Subtitle key={id} {...props}>
+          {children}
+        </Subtitle>
+      )
+    }
     return (
       <span 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 { RTETypeEnum } from "@/types/rte/enums"
+import {
+  AvailableParagraphFormatEnum,
+  AvailableULFormatEnum,
+  RTETypeEnum,
+} from "@/types/rte/enums"
 import type {
   RTENode,
   RTERenderOptionComponent,
@@ -74,7 +78,6 @@ export function textNodeToHtml(
   if (node.bold) {
     text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text)
   }
-
   return text
 }
 
@@ -86,6 +89,20 @@ function next(
   return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
 }
 
+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(
   node: RTENode,
   embeds: EmbedByUid,

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -44,7 +44,7 @@ export default async function ContactRow({ contact }: ContactRowProps) {
       <Link
         className={styles.link}
         href={openableLink}
-        variant="myPage"
+        variant="underscored"
         color="burgundy"
         size="small"
       >

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}

components/TempDesignSystem/Link/link.module.css

@@ -20,7 +20,7 @@
   gap: var(--Spacing-x-half);
 }
 
-.myPage {
+.underscored {
   font-family: var(--typography-Body-Underlined-fontFamily);
   font-size: var(--typography-Body-Underlined-fontSize);
   font-weight: var(--typography-Body-Underlined-fontWeight);

components/TempDesignSystem/Link/variants.ts

@@ -23,7 +23,7 @@ export const linkVariants = cva(styles.link, {
       breadcrumb: styles.breadcrumb,
       default: styles.default,
       icon: styles.icon,
-      myPage: styles.myPage,
+      underscored: styles.underscored,
       myPageMobileDropdown: styles.myPageMobileDropdown,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,

components/TempDesignSystem/LoyaltyCard/index.tsx

@@ -49,7 +49,7 @@ export default function LoyaltyCard({
             color="burgundy"
             href={link.href}
             target={link.openInNewTab ? "_blank" : undefined}
-            variant="myPage"
+            variant="underscored"
           >
             <ArrowRight
               color="burgundy"

components/TempDesignSystem/Text/Title/variants.ts

@@ -32,7 +32,6 @@ const config = {
   defaultVariants: {
     color: "burgundy",
     textAlign: "left",
-    textTransform: "uppercase",
     type: "h1",
   },
 } as const