Merged in feature/SW-3245-move-jsontohtml (pull request #2661)

Feature/SW-3245 move jsontohtml

* wip

* Move JsonToHtml -> design-system

* Fix semantic issues within Stories

* replace imports of 'storybook/react-vite' with 'storybook/nextjs-vite'

* merge


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Blocks/Accordion/index.tsx

@@ -4,8 +4,8 @@ import { useState } from "react"
 
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 
-import JsonToHtml from "@/components/JsonToHtml"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

@@ -3,10 +3,10 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Title from "@scandic-hotels/design-system/Title"
 
-import JsonToHtml from "@/components/JsonToHtml"
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
 
 import { RewardIcon } from "../../RewardIcon"

apps/scandic-web/components/Blocks/TextCols/index.tsx

@@ -1,9 +1,6 @@
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import JsonToHtml from "@/components/JsonToHtml"
-
-import { renderOptions } from "./renderOptions"
-
 import styles from "./textcols.module.css"
 
 import type { TextColProps } from "@/types/components/blocks/textCols"
@@ -18,7 +15,6 @@ export default function TextCols({ text_cols }: TextColProps) {
             <JsonToHtml
               nodes={col.text.json.children}
               embeds={col.text.embedded_itemsConnection.edges}
-              renderOptions={renderOptions}
             />
           </section>
         )

apps/scandic-web/components/Blocks/TextCols/renderOptions.tsx

@@ -1,57 +0,0 @@
-import Link from "@scandic-hotels/design-system/Link"
-
-import styles from "./textcols.module.css"
-
-import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
-import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
-import type {
-  RTENext,
-  RTENode,
-  RTERegularNode,
-} from "@/types/transitionTypes/rte/node"
-import type { RenderOptions } from "@/types/transitionTypes/rte/option"
-
-export const renderOptions: RenderOptions = {
-  [RTETypeEnum.a]: (
-    node: RTERegularNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    if (node.attrs.url) {
-      return (
-        <a
-          href={node.attrs.url}
-          target={node.attrs.target ?? "_blank"}
-          key={node.uid}
-          className={styles.a}
-        >
-          {next(node.children, embeds, fullRenderOptions)}
-        </a>
-      )
-    }
-    return null
-  },
-  [RTETypeEnum.reference]: (
-    node: RTENode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    if ("attrs" in node) {
-      const type = node.attrs.type
-      if (type !== RTEItemTypeEnum.asset) {
-        const href = node.attrs?.locale
-          ? `/${node.attrs.locale}${node.attrs.href}`
-          : node.attrs.href
-        return (
-          <Link href={href} key={node.uid} className={styles.a}>
-            {next(node.children, embeds, fullRenderOptions)}
-          </Link>
-        )
-      }
-
-      return null
-    }
-  },
-}

apps/scandic-web/components/Blocks/UspGrid/index.tsx

@@ -1,8 +1,6 @@
 import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 
-import JsonToHtml from "@/components/JsonToHtml"
-
-import { renderOptions } from "./renderOptions"
 import { getUspIconName } from "./utils"
 
 import styles from "./uspgrid.module.css"
@@ -27,7 +25,6 @@ export default function UspGrid({ usp_grid }: UspGridProps) {
               <JsonToHtml
                 embeds={usp.text.embedded_itemsConnection?.edges}
                 nodes={usp.text.json.children}
-                renderOptions={renderOptions}
               />
             </div>
           )

apps/scandic-web/components/Blocks/UspGrid/renderOptions.tsx

@@ -1,32 +0,0 @@
-import Link from "@scandic-hotels/design-system/Link"
-
-import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
-import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
-import type { RTENext, RTENode } from "@/types/transitionTypes/rte/node"
-import type { RenderOptions } from "@/types/transitionTypes/rte/option"
-
-export const renderOptions: RenderOptions = {
-  [RTETypeEnum.reference]: (
-    node: RTENode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    if ("attrs" in node) {
-      const type = node.attrs.type
-      if (type !== RTEItemTypeEnum.asset) {
-        const href = node.attrs?.locale
-          ? `/${node.attrs.locale}${node.attrs.href}`
-          : node.attrs.href
-
-        return (
-          <Link href={href} key={node.uid} textDecoration="underline">
-            {next(node.children, embeds, fullRenderOptions)}
-          </Link>
-        )
-      }
-
-      return null
-    }
-  },
-}

apps/scandic-web/components/Blocks/index.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react"
 
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
 import CardsGrid from "@/components/Blocks/CardsGrid"
@@ -8,7 +9,6 @@ import DynamicContent from "@/components/Blocks/DynamicContent"
 import ShortcutsList from "@/components/Blocks/ShortcutsList"
 import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
-import JsonToHtml from "@/components/JsonToHtml"
 
 import AccordionSection from "./Accordion"
 import CardGallery from "./CardGallery"

apps/scandic-web/components/ContentType/DestinationPage/Blocks/index.tsx

@@ -1,11 +1,11 @@
 "use client"
 
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import AccordionSection from "@/components/Blocks/Accordion"
-import JsonToHtml from "@/components/JsonToHtml"
 
 import type { BlocksProps } from "@/types/components/blocks"
 

apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx

@@ -4,10 +4,10 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
-import JsonToHtml from "@/components/JsonToHtml"
 import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage"
 
 import type { DestinationCityPageData } from "@scandic-hotels/trpc/types/destinationCityPage"

apps/scandic-web/components/JsonToHtml/index.tsx

@@ -1,24 +0,0 @@
-import { cx } from "class-variance-authority"
-
-import { nodesToHtml } from "./utils"
-
-import styles from "./jsontohtml.module.css"
-
-import type { JsonToHtmlProps } from "@/types/transitionTypes/jsontohtml"
-
-export default function JsonToHtml({
-  embeds,
-  nodes,
-  renderOptions = {},
-  className,
-}: JsonToHtmlProps) {
-  if (!Array.isArray(nodes) || !nodes.length) {
-    return null
-  }
-
-  return (
-    <section className={cx(styles.container, className)}>
-      {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
-    </section>
-  )
-}

apps/scandic-web/components/JsonToHtml/jsontohtml.module.css

@@ -1,143 +0,0 @@
-.container {
-  max-width: var(--max-width-content);
-  margin: 0 auto;
-  width: 100%;
-
-  & > :first-child {
-    margin-top: 0;
-  }
-  & > :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.heading {
-  color: var(--Text-Heading);
-  margin-top: var(--Space-x3);
-  text-wrap: balance;
-  hyphens: auto;
-}
-
-.h1,
-.h2 {
-  margin-bottom: var(--Space-x2);
-}
-
-.h3,
-.h4,
-.h5,
-.p,
-.blockquote,
-.code,
-.divider,
-.div {
-  margin-bottom: var(--Space-x15);
-}
-
-.imageWithCaption {
-  display: grid;
-  gap: var(--Space-x1);
-  margin: var(--Space-x3) 0;
-
-  .imageWrapper {
-    margin: 0;
-  }
-}
-
-.imageWrapper {
-  position: relative;
-  width: 100%;
-  height: 365px;
-  border-radius: var(--Corner-radius-md);
-  margin: var(--Space-x3) 0;
-  overflow: hidden;
-}
-
-.image {
-  width: 100%;
-  object-fit: cover;
-}
-
-.ul,
-.ol {
-  display: grid;
-  gap: var(--Space-x1);
-  padding: 0;
-  margin-top: var(--Space-x2);
-  margin-bottom: var(--Space-x2);
-}
-
-.ol > li::marker {
-  color: var(--Icon-Accent);
-}
-
-.li {
-  margin-left: var(--Space-x3);
-}
-
-.heart > .li::before,
-.li:has(.heart)::before {
-  content: url("/_static/icons/heart.svg");
-  position: relative;
-  height: 8px;
-  top: 3px;
-  margin-right: var(--Space-x1);
-  margin-left: calc(var(--Space-x3) * -1);
-}
-
-.heart > .li,
-.check > .li,
-.li:has(.check),
-.li:has(.heart) {
-  list-style: none;
-}
-
-.check > .li::before,
-.li:has(.check)::before {
-  content: url("/_static/icons/check-ring.svg");
-  position: relative;
-  height: 8px;
-  top: 3px;
-  margin-right: var(--Space-x1);
-  margin-left: calc(var(--Space-x3) * -1);
-}
-
-.li > p {
-  display: inline;
-  margin: 0;
-}
-
-.tableContainer {
-  max-width: 100%;
-  overflow-x: auto;
-  margin: var(--Space-x3) 0;
-}
-
-.table .p {
-  display: inline;
-  margin: 0;
-}
-
-.theadContent {
-  color: var(--Text-Heading);
-}
-
-.iframe {
-  margin: var(--Space-x3) 0;
-}
-
-@media screen and (min-width: 768px) {
-  .ol:has(li:nth-last-child(n + 5)),
-  .ul:has(li:nth-last-child(n + 5)) {
-    grid-template-columns: 1fr 1fr;
-    grid-auto-flow: column;
-  }
-}
-
-@container sidebar (max-width: 360px) {
-  .ol,
-  .ul {
-    display: flex;
-    flex-direction: column;
-  }
-}

apps/scandic-web/components/JsonToHtml/renderOptions.tsx

@@ -1,842 +0,0 @@
-import { cx } from "class-variance-authority"
-
-import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Image from "@scandic-hotels/design-system/Image"
-import ImageContainer from "@scandic-hotels/design-system/ImageContainer"
-import Link from "@scandic-hotels/design-system/Link"
-import Table from "@scandic-hotels/design-system/Table"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-import { ContentEnum } from "@scandic-hotels/trpc/types/content"
-import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
-
-import {
-  hasAvailableParagraphFormat,
-  hasAvailableULFormat,
-  makeCssModuleCompatibleClassName,
-} from "./utils"
-
-import styles from "./jsontohtml.module.css"
-
-import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
-import type {
-  Attributes,
-  RTEImageVaultAttrs,
-} from "@/types/transitionTypes/rte/attrs"
-import {
-  AvailableParagraphFormatEnum,
-  RTEItemTypeEnum,
-  RTETypeEnum,
-} from "@/types/transitionTypes/rte/enums"
-import {
-  type RTEDefaultNode,
-  type RTEImageNode,
-  RTEMarkType,
-  type RTENext,
-  type RTENode,
-  type RTERegularNode,
-  type RTETextNode,
-} from "@/types/transitionTypes/rte/node"
-import type { RenderOptions } from "@/types/transitionTypes/rte/option"
-
-function noNestedLinksOrReferences(node: RTENode) {
-  if ("type" in node) {
-    if (node.type === RTETypeEnum.reference) {
-      return node.children
-    } else if (node.type === RTETypeEnum.a) {
-      return node.children
-    }
-  }
-  return node
-}
-
-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
-  }
-
-  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 { className, ...props } = extractPossibleAttributes(node.attrs)
-      return (
-        <Link
-          key={node.uid}
-          className={className}
-          {...props}
-          href={node.attrs.url}
-          target={node.attrs.target ?? "_blank"}
-          textDecoration="underline"
-        >
-          {next(
-            // Sometimes editors happen to nest a reference inside a link and vice versa.
-            // In that case use the outermost link, i.e. ignore nested links.
-            node.children.flatMap(noNestedLinksOrReferences),
-            embeds,
-            fullRenderOptions
-          )}
-        </Link>
-      )
-    }
-    return null
-  },
-
-  [RTETypeEnum.blockquote]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <Typography key={node.uid} variant="Title/Decorative/lg">
-        <blockquote className={cx(styles.blockquote, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </blockquote>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.code]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <code key={node.uid} className={cx(styles.code, className)} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </code>
-    )
-  },
-
-  [RTETypeEnum.embed]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...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}
-        className={cx(styles.iframe, className)}
-        {...props}
-      >
-        {next(node.children, embeds, fullRenderOptions)}
-      </iframe>
-    )
-  },
-
-  [RTETypeEnum.h1]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <Typography key={node.uid} variant="Title/lg">
-        <h1 className={cx(styles.heading, styles.h1, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </h1>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.h2]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <Typography key={node.uid} variant="Title/md">
-        <h2 className={cx(styles.heading, styles.h2, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </h2>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.h3]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <Typography key={node.uid} variant="Title/sm">
-        <h3 className={cx(styles.heading, styles.h3, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </h3>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.h4]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <Typography key={node.uid} variant="Title/xs">
-        <h4 className={cx(styles.heading, styles.h4, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </h4>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.h5]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <Typography key={node.uid} variant="Title/xs">
-        <h5 className={cx(styles.heading, styles.h5, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </h5>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.hr]: () => {
-    return <Divider className={styles.divider} color="burgundy" />
-  },
-
-  [RTETypeEnum.li]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    const compatibleClassName = makeCssModuleCompatibleClassName(
-      className,
-      "ul"
-    )
-    return (
-      <li
-        key={node.uid}
-        {...props}
-        className={cx(styles.li, compatibleClassName)}
-      >
-        {next(node.children, embeds, fullRenderOptions)}
-      </li>
-    )
-  },
-
-  [RTETypeEnum.ol]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...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 (
-      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
-        <ol
-          className={cx(styles.ol, className)}
-          {...props}
-          style={
-            numberOfRows
-              ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
-              : {}
-          }
-        >
-          {next(node.children, embeds, fullRenderOptions)}
-        </ol>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.p]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...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 (
-      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
-        <p className={cx(styles.p, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </p>
-      </Typography>
-    )
-  },
-
-  [RTETypeEnum.span]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    let propsClassName = className
-
-    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
-        propsClassName = styles[className]
-      }
-    }
-
-    return (
-      <span className={propsClassName} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </span>
-    )
-  },
-  [RTETypeEnum.div]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    let propsClassName = props.className
-
-    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
-        propsClassName = styles[className]
-      }
-    }
-
-    return (
-      <div className={cx(styles.div, propsClassName)} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </div>
-    )
-  },
-
-  [RTETypeEnum.reference]: (
-    node: RTENode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    if ("attrs" in node) {
-      const type = node.attrs.type
-      if (type === RTEItemTypeEnum.asset) {
-        const imageTypeRegex = /^image\//
-        const isImage = imageTypeRegex.test(node.attrs["asset-type"])
-        if (isImage) {
-          const image = embeds?.[node?.attrs?.["asset-uid"]]
-          if (image?.node.__typename === ContentEnum.blocks.SysAsset) {
-            if (image.node.url) {
-              const alt = image?.node?.title ?? node.attrs.alt
-              const { className, ...props } = extractPossibleAttributes(
-                node.attrs
-              )
-              return (
-                <div key={node.uid} className={styles.imageWrapper}>
-                  <Image
-                    className={cx(styles.image, className)}
-                    src={image.node.url}
-                    alt={alt}
-                    fill
-                    sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
-                    {...props}
-                  />
-                </div>
-              )
-            }
-          }
-        } else if (node.attrs["display-type"] === "link" && node.attrs.href) {
-          const { className, ...props } = extractPossibleAttributes(node.attrs)
-          return (
-            <Link
-              key={node.uid}
-              className={className}
-              href={node.attrs.href}
-              textDecoration="underline"
-              target="_blank"
-              variant="icon"
-              {...props}
-            >
-              {next(
-                // Sometimes editors happen to nest a reference inside a link and vice versa.
-                // In that case use the outermost link, i.e. ignore nested links.
-                node.children.flatMap(noNestedLinksOrReferences),
-                embeds,
-                fullRenderOptions
-              )}
-              <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-            </Link>
-          )
-        }
-      } else if (type === RTEItemTypeEnum.entry) {
-        const entry = embeds?.[node?.attrs?.["entry-uid"]]
-
-        if (entry?.node.__typename === ContentEnum.blocks.ImageContainer) {
-          if (entry.node.image_left && entry.node.image_right) {
-            return (
-              <ImageContainer
-                key={node.uid}
-                leftImage={entry.node.image_left}
-                rightImage={entry.node.image_right}
-              />
-            )
-          }
-          return null
-        } else if (
-          entry?.node.__typename === ContentEnum.blocks.AccountPage ||
-          entry?.node.__typename === ContentEnum.blocks.CampaignOverviewPage ||
-          entry?.node.__typename === ContentEnum.blocks.CampaignPage ||
-          entry?.node.__typename === ContentEnum.blocks.CollectionPage ||
-          entry?.node.__typename === ContentEnum.blocks.ContentPage ||
-          entry?.node.__typename === ContentEnum.blocks.DestinationCityPage ||
-          entry?.node.__typename ===
-            ContentEnum.blocks.DestinationCountryPage ||
-          entry?.node.__typename ===
-            ContentEnum.blocks.DestinationOverviewPage ||
-          entry?.node.__typename === ContentEnum.blocks.HotelPage ||
-          entry?.node.__typename === ContentEnum.blocks.LoyaltyPage ||
-          entry?.node.__typename === ContentEnum.blocks.StartPage
-        ) {
-          // If entry is not an ImageContainer, it is a page and we return it as a link
-          const { className, ...props } = extractPossibleAttributes(node.attrs)
-
-          return (
-            <Link
-              key={node.uid}
-              className={className}
-              {...props}
-              href={entry.node.url}
-              textDecoration="underline"
-            >
-              {next(
-                // Sometimes editors happen to nest a reference inside a link and vice versa.
-                // In that case use the outermost link, i.e. ignore nested links.
-                node.children.flatMap(noNestedLinksOrReferences),
-                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
-        let image = undefined
-        if ("dimensions" in attrs) {
-          image = attrs
-        } else {
-          image = insertResponseToImageVaultAsset(attrs)
-        }
-        const alt = image.meta.alt ?? image.title
-        const caption = image.meta.caption
-        const { className, ...props } = extractPossibleAttributes(attrs)
-        return (
-          <div key={node.uid} className={styles.imageWithCaption}>
-            <div className={styles.imageWrapper}>
-              <Image
-                alt={alt}
-                className={cx(styles.image, className)}
-                src={image.url}
-                fill
-                sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
-                focalPoint={image.focalPoint}
-                {...props}
-              />
-            </div>
-            {caption ? (
-              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <p>{image.meta.caption}</p>
-              </Typography>
-            ) : null}
-          </div>
-        )
-      }
-    }
-
-    return null
-  },
-
-  [RTETypeEnum.table]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    return (
-      <div key={node.uid} className={styles.tableContainer}>
-        <Table className={cx(styles.table, className)} {...props}>
-          {next(node.children, embeds, fullRenderOptions)}
-        </Table>
-      </div>
-    )
-  },
-
-  [RTETypeEnum.thead]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    // Override the styling of p tags inside the thead tag
-    const theadChildPRenderOptions = {
-      ...fullRenderOptions,
-      [RTETypeEnum.p]: (
-        node: RTEDefaultNode,
-        embeds: EmbedByUid,
-        next: RTENext,
-        fullRenderOptions: RenderOptions
-      ) => (
-        <Typography variant="Body/Paragraph/mdBold">
-          <span className={styles.theadContent}>
-            {next(node.children, embeds, fullRenderOptions)}
-          </span>
-        </Typography>
-      ),
-    }
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Table.THead key={node.uid} {...props}>
-        {next(node.children, embeds, theadChildPRenderOptions)}
-      </Table.THead>
-    )
-  },
-
-  [RTETypeEnum.tbody]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Table.TBody key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Table.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.fragment]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    return <>{next(node.children, embeds, fullRenderOptions)}</>
-  },
-
-  [RTETypeEnum.tr]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Table.TR key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Table.TR>
-    )
-  },
-
-  [RTETypeEnum.th]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Table.TH key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Table.TH>
-    )
-  },
-
-  [RTETypeEnum.td]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const props = extractPossibleAttributes(node.attrs)
-    return (
-      <Table.TD key={node.uid} {...props}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </Table.TD>
-    )
-  },
-
-  [RTETypeEnum.ul]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    const compatibleClassName = makeCssModuleCompatibleClassName(
-      className,
-      "ul"
-    )
-
-    // 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 (
-      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
-        <ul
-          className={cx(styles.ul, compatibleClassName)}
-          {...props}
-          style={
-            numberOfRows
-              ? {
-                  gridTemplateRows: `repeat(${numberOfRows}, auto)`,
-                }
-              : {}
-          }
-        >
-          {next(node.children, embeds, fullRenderOptions)}
-        </ul>
-      </Typography>
-    )
-  },
-
-  /** TextNode wrappers */
-  [RTEMarkType.bold]: (children: React.ReactNode) => {
-    return (
-      <Typography variant="Body/Paragraph/mdBold">
-        <strong>{children}</strong>
-      </Typography>
-    )
-  },
-
-  [RTEMarkType.italic]: (children: React.ReactNode) => {
-    return <em>{children}</em>
-  },
-
-  [RTEMarkType.underline]: (children: React.ReactNode) => {
-    return (
-      <Typography variant="Link/md">
-        <u>{children}</u>
-      </Typography>
-    )
-  },
-
-  [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
-  ) => {
-    const props = { id }
-    let propsClassName = className
-
-    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
-        propsClassName = styles[className]
-      }
-    }
-
-    if (className === AvailableParagraphFormatEnum.footnote) {
-      return (
-        <Typography key={id} variant="Label/xsRegular">
-          <p className={cx(styles.p, propsClassName)} {...props}>
-            {children}
-          </p>
-        </Typography>
-      )
-    }
-
-    if (className === AvailableParagraphFormatEnum.caption) {
-      return (
-        <Typography key={id} variant="Body/Supporting text (caption)/smRegular">
-          <p className={cx(styles.p, propsClassName)} {...props}>
-            {children}
-          </p>
-        </Typography>
-      )
-    }
-
-    if (className === AvailableParagraphFormatEnum["script-1"]) {
-      return (
-        <Typography key={id} variant="Title/Decorative/lg">
-          <p className={cx(styles.p, propsClassName)} {...props}>
-            {children}
-          </p>
-        </Typography>
-      )
-    }
-
-    if (className === AvailableParagraphFormatEnum["script-2"]) {
-      return (
-        <Typography key={id} variant="Title/Decorative/md">
-          <p className={cx(styles.p, propsClassName)} {...props}>
-            {children}
-          </p>
-        </Typography>
-      )
-    }
-
-    if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
-      return (
-        <Typography key={id} variant="Title/Subtitle/lg">
-          <p className={cx(styles.p, propsClassName)} {...props}>
-            {children}
-          </p>
-        </Typography>
-      )
-    }
-    if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
-      return (
-        <Typography key={id} variant="Title/Subtitle/md">
-          <p className={cx(styles.p, propsClassName)} {...props}>
-            {children}
-          </p>
-        </Typography>
-      )
-    }
-    return (
-      <Typography key={id} variant="Body/Paragraph/mdRegular">
-        <span className={propsClassName} {...props}>
-          {children}
-        </span>
-      </Typography>
-    )
-  },
-
-  /**
-   * 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)
-  },
-}

apps/scandic-web/components/JsonToHtml/utils.tsx

@@ -1,179 +0,0 @@
-import React, { cloneElement } from "react"
-
-import { renderOptions } from "./renderOptions"
-
-import styles from "./jsontohtml.module.css"
-
-import type { Node } from "@scandic-hotels/trpc/types/edges"
-import type { Embeds } from "@scandic-hotels/trpc/types/embeds"
-
-import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
-import {
-  AvailableParagraphFormatEnum,
-  AvailableULFormatEnum,
-  RTETypeEnum,
-} from "@/types/transitionTypes/rte/enums"
-import {
-  RTEMarkType,
-  type RTENode,
-  type RTERenderMark,
-  type RTERenderOptionComponent,
-  type RTETextNode,
-} from "@/types/transitionTypes/rte/node"
-import type { RenderOptions } from "@/types/transitionTypes/rte/option"
-
-export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
-  const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
-    if (embed.node.system?.uid) {
-      acc[embed.node.system.uid] = embed
-    }
-    return acc
-  }, {})
-
-  return embedsByUid
-}
-
-export function nodeChildrenToHtml(
-  nodes: RTENode[],
-  embeds: EmbedByUid,
-  fullRenderOptions: RenderOptions
-): any {
-  return nodes
-    .map((node, i) => {
-      // This function either returns a JSX element or null
-      const element = nodeToHtml(node, embeds, fullRenderOptions)
-      if (!element) {
-        return null
-      }
-
-      return cloneElement(element, {
-        key: `child-rte-${i}`,
-      })
-    })
-    .filter(Boolean)
-}
-
-export function textNodeToHtml(
-  node: RTETextNode,
-  fullRenderOptions: RenderOptions
-) {
-  let text = <>{node.text}</>
-
-  if (node.classname || node.id) {
-    text = (fullRenderOptions[RTEMarkType.classnameOrId] as RTERenderMark)(
-      text,
-      node.classname,
-      node.id
-    )
-  }
-  if (node.break) {
-    text = (fullRenderOptions[RTEMarkType.break] as RTERenderMark)(text)
-  }
-  if (node.superscript) {
-    text = (fullRenderOptions[RTEMarkType.superscript] as RTERenderMark)(text)
-  }
-  if (node.subscript) {
-    text = (fullRenderOptions[RTEMarkType.subscript] as RTERenderMark)(text)
-  }
-  if (node.inlineCode) {
-    text = (fullRenderOptions[RTEMarkType.inlineCode] as RTERenderMark)(text)
-  }
-  if (node.strikethrough) {
-    text = (fullRenderOptions[RTEMarkType.strikethrough] as RTERenderMark)(text)
-  }
-  if (node.underline) {
-    text = (fullRenderOptions[RTEMarkType.underline] as RTERenderMark)(text)
-  }
-  if (node.italic) {
-    text = (fullRenderOptions[RTEMarkType.italic] as RTERenderMark)(text)
-  }
-  if (node.bold) {
-    text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text)
-  }
-  return text
-}
-
-function next(
-  nodes: RTENode[],
-  embeds: EmbedByUid,
-  fullRenderOptions: RenderOptions
-) {
-  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,
-  fullRenderOptions: RenderOptions
-) {
-  if ("type" in node === false) {
-    return textNodeToHtml(node, fullRenderOptions)
-  } else {
-    const renderer = fullRenderOptions[node.type] as RTERenderOptionComponent
-    if (renderer) {
-      if (node.type === RTETypeEnum.doc) {
-        return null
-      }
-
-      return renderer(node, embeds, next, fullRenderOptions)
-    } else {
-      return next(node.children, embeds, fullRenderOptions)
-    }
-  }
-}
-
-function getUniqueId(node: RTENode) {
-  if ("uid" in node) {
-    return node.uid
-  }
-  return node.id
-}
-
-export function nodesToHtml(
-  nodes: RTENode[],
-  embedsArray: Node<Embeds>[],
-  overrideRenderOptions: RenderOptions
-) {
-  const embeds = groupEmbedsByUid(embedsArray)
-  const fullRenderOptions = { ...renderOptions, ...overrideRenderOptions }
-
-  return nodes.map((node, index) => {
-    const nodeHtml = nodeToHtml(node, embeds, fullRenderOptions)
-
-    return (
-      <React.Fragment key={getUniqueId(node) ?? `node-${index}`}>
-        {nodeHtml}
-      </React.Fragment>
-    )
-  })
-}
-
-export function makeCssModuleCompatibleClassName(
-  className: string | undefined,
-  formatType: "ul"
-): string {
-  if (!className) return ""
-
-  if (formatType === "ul" && 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
-    return styles[className] || className
-  }
-
-  return className
-}

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -4,13 +4,12 @@ import Image from "next/image"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 
-import JsonToHtml from "@/components/JsonToHtml"
-
 import SectionContainer from "../Section/Container"
 
 import styles from "./sasTierComparison.module.css"

apps/scandic-web/components/Sidebar/index.tsx

@@ -1,8 +1,8 @@
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 import { SidebarEnums } from "@scandic-hotels/trpc/types/sidebar"
 
 import EmployeeBenefitsAuthCard from "@/components/DigitalTeamMemberCard/EmployeeBenefits/AuthCard"
-import JsonToHtml from "@/components/JsonToHtml"
 
 import ShortcutsList from "../Blocks/ShortcutsList"
 import Card from "../TempDesignSystem/Card"
@@ -39,8 +39,8 @@ export default function Sidebar({ blocks }: SidebarProps) {
           case SidebarEnums.blocks.JoinLoyaltyContact:
             return (
               <JoinLoyaltyContact
-                block={block.join_loyalty_contact}
                 key={`${block.typename}-${idx}`}
+                block={block.join_loyalty_contact}
               />
             )
           case SidebarEnums.blocks.ScriptedCard:
@@ -67,10 +67,10 @@ export default function Sidebar({ blocks }: SidebarProps) {
 
             return (
               <TeaserCard
+                key={block.teaser_card.system.uid}
                 title={block.teaser_card.heading}
                 description={block.teaser_card.body_text}
                 intent={block.teaser_card.theme}
-                key={block.teaser_card.system.uid}
                 primaryButton={block.teaser_card.primaryButton}
                 secondaryButton={block.teaser_card.secondaryButton}
                 sidePeekButton={block.teaser_card.sidePeekButton}
@@ -79,7 +79,13 @@ export default function Sidebar({ blocks }: SidebarProps) {
               />
             )
           case SidebarEnums.blocks.QuickLinks:
-            return <ShortcutsList {...block.shortcuts} hasTwoColumns={false} />
+            return (
+              <ShortcutsList
+                key={`${block.typename}-${idx}`}
+                {...block.shortcuts}
+                hasTwoColumns={false}
+              />
+            )
 
           default:
             return null

apps/scandic-web/components/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -4,11 +4,10 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
-import JsonToHtml from "@/components/JsonToHtml"
-
 import styles from "./sidepeek.module.css"
 
 import type { AlertSidepeekProps } from "./sidepeek"

apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"
 import { Button } from "@scandic-hotels/design-system/Button"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
-import JsonToHtml from "@/components/JsonToHtml"
-
 import styles from "./sidepeek.module.css"
 
 import type { TeaserCardSidepeekProps } from "@/types/components/teaserCard"

apps/scandic-web/components/Webviews/AccountPage/Blocks.tsx

@@ -1,3 +1,4 @@
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
 
@@ -7,7 +8,6 @@ import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
 import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentRewards"
 import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
 import ShortcutsList from "@/components/Blocks/ShortcutsList"
-import JsonToHtml from "@/components/JsonToHtml"
 import { getLang } from "@/i18n/serverContext"
 import { modWebviewLink } from "@/utils/webviews"
 

apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx

@@ -1,9 +1,9 @@
+import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocksEnum"
 
 import CardsGrid from "@/components/Blocks/CardsGrid"
 import DynamicContent from "@/components/Blocks/DynamicContent"
 import ShortcutsList from "@/components/Blocks/ShortcutsList"
-import JsonToHtml from "@/components/JsonToHtml"
 import { getLang } from "@/i18n/serverContext"
 import { modWebviewLink } from "@/utils/webviews"