feat(SW-2930): Aligned margins and spacing for RTE html with Figma

Approved-by: Christian Andolf

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

@@ -38,12 +38,11 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.Content:
         return (
-          <section key={`${block.typename}-${idx}`}>
           <JsonToHtml
+            key={`${block.typename}-${idx}`}
             nodes={block.content.json.children}
             embeds={block.content.embedded_itemsConnection.edges}
           />
-          </section>
         )
       case BlocksEnums.block.DynamicContent:
         return (
@@ -97,12 +96,11 @@ export default function Blocks({ blocks }: BlocksProps) {
         return <TextCols text_cols={block.text_cols} />
       case BlocksEnums.block.TextContent:
         return (
-          <section key={`${block.typename}-${idx}`}>
           <JsonToHtml
+            key={`${block.typename}-${idx}`}
             embeds={block.text_content.content.embedded_itemsConnection.edges}
             nodes={block.text_content.content.json.children}
           />
-          </section>
         )
       case BlocksEnums.block.UspGrid:
         return <UspGrid usp_grid={block.usp_grid} />

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

@@ -29,12 +29,11 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.Content:
         return (
-          <section key={`${block.typename}-${idx}`}>
           <JsonToHtml
+            key={`${block.typename}-${idx}`}
             nodes={block.content.json.children}
             embeds={block.content.embedded_itemsConnection.edges}
           />
-          </section>
         )
       default:
         return null

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

@@ -1,9 +1,52 @@
-.imageContainer {
+.container {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.heading {
+  color: var(--Text-Heading);
+  margin-top: var(--Space-x3);
+}
+
+.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(--Spacing-x1) var(--Spacing-x0);
+  margin: var(--Space-x3) 0;
   overflow: hidden;
 }
 
@@ -14,17 +57,19 @@
 
 .ul,
 .ol {
-  padding: var(--Spacing-x2) var(--Spacing-x0);
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
+  padding: 0;
+  margin-top: var(--Space-x2);
+  margin-bottom: var(--Space-x2);
 }
 
 .ol > li::marker {
-  color: var(--Primary-Light-On-Surface-Accent);
+  color: var(--Icon-Accent);
 }
 
 .li {
-  margin-left: var(--Spacing-x3);
+  margin-left: var(--Space-x3);
 }
 
 .heart > .li::before,
@@ -33,8 +78,8 @@
   position: relative;
   height: 8px;
   top: 3px;
-  margin-right: var(--Spacing-x1);
+  margin-right: var(--Space-x1);
-  margin-left: calc(var(--Spacing-x3) * -1);
+  margin-left: calc(var(--Space-x3) * -1);
 }
 
 .heart > .li,
@@ -50,23 +95,32 @@
   position: relative;
   height: 8px;
   top: 3px;
-  margin-right: var(--Spacing-x1);
+  margin-right: var(--Space-x1);
-  margin-left: calc(var(--Spacing-x3) * -1);
+  margin-left: calc(var(--Space-x3) * -1);
-}
-
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-  max-width: 1197px;
 }
 
 .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) {

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

@@ -1,3 +1,5 @@
+import { cx } from "class-variance-authority"
+
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -8,12 +10,6 @@ import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
 import ImageContainer from "../ImageContainer"
 import Divider from "../TempDesignSystem/Divider"
 import Table from "../TempDesignSystem/Table"
-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,
@@ -87,12 +83,13 @@ export const renderOptions: RenderOptions = {
     fullRenderOptions: RenderOptions
   ) => {
     if (node.attrs.url) {
-      const props = extractPossibleAttributes(node.attrs)
+      const { className, ...props } = extractPossibleAttributes(node.attrs)
       return (
         <Link
+          key={node.uid}
+          className={cx(styles.link, className)}
           {...props}
           href={node.attrs.url}
-          key={node.uid}
           target={node.attrs.target ?? "_blank"}
           textDecoration="underline"
         >
@@ -115,11 +112,13 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <BiroScript key={node.uid} {...props}>
+      <Typography key={node.uid} variant="Title/Decorative/lg">
+        <blockquote className={cx(styles.blockquote, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </BiroScript>
+        </blockquote>
+      </Typography>
     )
   },
 
@@ -129,9 +128,9 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <code key={node.uid} {...props}>
+      <code key={node.uid} className={cx(styles.code, className)} {...props}>
         {next(node.children, embeds, fullRenderOptions)}
       </code>
     )
@@ -143,7 +142,7 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     if (node.attrs.src) {
       props.src = node.attrs.src
     }
@@ -154,7 +153,11 @@ export const renderOptions: RenderOptions = {
       return null
     }
     return (
-      <iframe key={node.uid} {...props}>
+      <iframe
+        key={node.uid}
+        className={cx(styles.iframe, className)}
+        {...props}
+      >
         {next(node.children, embeds, fullRenderOptions)}
       </iframe>
     )
@@ -166,11 +169,13 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h1">
+      <Typography key={node.uid} variant="Title/lg">
+        <h1 className={cx(styles.heading, styles.h1, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+        </h1>
+      </Typography>
     )
   },
 
@@ -180,11 +185,13 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h2">
+      <Typography key={node.uid} variant="Title/md">
+        <h2 className={cx(styles.heading, styles.h2, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+        </h2>
+      </Typography>
     )
   },
 
@@ -194,11 +201,13 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h3">
+      <Typography key={node.uid} variant="Title/sm">
+        <h3 className={cx(styles.heading, styles.h3, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+        </h3>
+      </Typography>
     )
   },
 
@@ -208,11 +217,13 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h4">
+      <Typography key={node.uid} variant="Title/xs">
+        <h4 className={cx(styles.heading, styles.h4, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+        </h4>
+      </Typography>
     )
   },
 
@@ -222,16 +233,18 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h5">
+      <Typography key={node.uid} variant="Title/xs">
+        <h5 className={cx(styles.heading, styles.h5, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </Title>
+        </h5>
+      </Typography>
     )
   },
 
   [RTETypeEnum.hr]: () => {
-    return <Divider />
+    return <Divider className={styles.divider} />
   },
 
   [RTETypeEnum.li]: (
@@ -240,16 +253,16 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     const compatibleClassName = makeCssModuleCompatibleClassName(
-      props.className,
+      className,
       "ul"
     )
     return (
       <li
         key={node.uid}
         {...props}
-        className={`${styles.li} ${compatibleClassName}`}
+        className={cx(styles.li, compatibleClassName)}
       >
         {next(node.children, embeds, fullRenderOptions)}
       </li>
@@ -262,7 +275,7 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    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.
@@ -273,10 +286,10 @@ export const renderOptions: RenderOptions = {
     }
 
     return (
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
         <ol
-        key={node.uid}
+          className={cx(styles.ol, className)}
           {...props}
-        className={styles.ol}
           style={
             numberOfRows
               ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
@@ -285,6 +298,7 @@ export const renderOptions: RenderOptions = {
         >
           {next(node.children, embeds, fullRenderOptions)}
         </ol>
+      </Typography>
     )
   },
 
@@ -294,7 +308,7 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
 
     const hasFormat = node.children.some((item) =>
       hasAvailableParagraphFormat((item as RTETextNode)?.classname)
@@ -307,9 +321,11 @@ export const renderOptions: RenderOptions = {
     }
 
     return (
-      <Body {...props} key={node.uid}>
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
+        <p className={cx(styles.p, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
-      </Body>
+        </p>
+      </Typography>
     )
   },
 
@@ -319,20 +335,22 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    let props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    const className = props.className
+    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
-        props.className = styles[className]
+        propsClassName = styles[className]
       }
     }
 
     return (
-      <span {...props}>{next(node.children, embeds, fullRenderOptions)}</span>
+      <span className={cx(styles.span, propsClassName)} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </span>
     )
   },
   [RTETypeEnum.div]: (
@@ -341,20 +359,22 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    let props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
-    const className = props.className
+    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
-        props.className = styles[className]
+        propsClassName = styles[className]
       }
     }
 
     return (
-      <div {...props}>{next(node.children, embeds, fullRenderOptions)}</div>
+      <div className={cx(styles.div, propsClassName)} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </div>
     )
   },
 
@@ -374,14 +394,15 @@ export const renderOptions: RenderOptions = {
           if (image?.node.__typename === ContentEnum.blocks.SysAsset) {
             if (image.node.url) {
               const alt = image?.node?.title ?? node.attrs.alt
-              const props = extractPossibleAttributes(node.attrs)
+              const { className, ...props } = extractPossibleAttributes(
-              props.className = styles.image
+                node.attrs
+              )
               return (
-                <div className={styles.imageContainer}>
+                <div key={node.uid} className={styles.imageWrapper}>
                   <Image
-                    alt={alt}
+                    className={cx(styles.image, className)}
-                    className={styles.image}
                     src={image.node.url}
+                    alt={alt}
                     fill
                     sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
                     {...props}
@@ -391,12 +412,15 @@ export const renderOptions: RenderOptions = {
             }
           }
         } else if (node.attrs["display-type"] === "link" && node.attrs.href) {
+          const { className, ...props } = extractPossibleAttributes(node.attrs)
           return (
             <Link
-              href={node.attrs.href}
               key={node.uid}
+              className={cx(styles.link, className)}
+              href={node.attrs.href}
               textDecoration="underline"
               target="_blank"
+              {...props}
             >
               {next(
                 // Sometimes editors happen to nest a reference inside a link and vice versa.
@@ -420,6 +444,7 @@ export const renderOptions: RenderOptions = {
           if (entry.node.image_left && entry.node.image_right) {
             return (
               <ImageContainer
+                key={node.uid}
                 leftImage={entry.node.image_left}
                 rightImage={entry.node.image_right}
               />
@@ -440,13 +465,14 @@ export const renderOptions: RenderOptions = {
           entry?.node.__typename === ContentEnum.blocks.StartPage
         ) {
           // If entry is not an ImageContainer, it is a page and we return it as a link
-          const props = extractPossibleAttributes(node.attrs)
+          const { className, ...props } = extractPossibleAttributes(node.attrs)
 
           return (
             <Link
+              key={node.uid}
+              className={cx(styles.link, className)}
               {...props}
               href={entry.node.url}
-              key={node.uid}
               textDecoration="underline"
             >
               {next(
@@ -477,13 +503,14 @@ export const renderOptions: RenderOptions = {
           image = insertResponseToImageVaultAsset(attrs)
         }
         const alt = image.meta.alt ?? image.title
-        const props = extractPossibleAttributes(attrs)
+        const caption = image.meta.caption
+        const { className, ...props } = extractPossibleAttributes(attrs)
         return (
-          <section key={node.uid}>
+          <div key={node.uid} className={styles.imageWithCaption}>
-            <div className={styles.imageContainer}>
+            <div className={styles.imageWrapper}>
               <Image
                 alt={alt}
-                className={styles.image}
+                className={cx(styles.image, className)}
                 src={image.url}
                 fill
                 sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
@@ -491,8 +518,12 @@ export const renderOptions: RenderOptions = {
                 {...props}
               />
             </div>
-            <Caption>{image.meta.caption}</Caption>
+            {caption ? (
-          </section>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{image.meta.caption}</p>
+              </Typography>
+            ) : null}
+          </div>
         )
       }
     }
@@ -506,10 +537,10 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <div className={styles.tableContainer}>
+      <div key={node.uid} className={styles.tableContainer}>
-        <Table key={node.uid} {...props}>
+        <Table className={cx(styles.table, className)} {...props}>
           {next(node.children, embeds, fullRenderOptions)}
         </Table>
       </div>
@@ -531,9 +562,11 @@ export const renderOptions: RenderOptions = {
         next: RTENext,
         fullRenderOptions: RenderOptions
       ) => (
-        <Body color={"burgundy"} textTransform={"bold"}>
+        <Typography variant="Body/Paragraph/mdBold">
+          <span className={styles.theadContent}>
             {next(node.children, embeds, fullRenderOptions)}
-        </Body>
+          </span>
+        </Typography>
       ),
     }
     const props = extractPossibleAttributes(node.attrs)
@@ -629,9 +662,9 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    const props = extractPossibleAttributes(node.attrs)
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
     const compatibleClassName = makeCssModuleCompatibleClassName(
-      props.className,
+      className,
       "ul"
     )
 
@@ -644,10 +677,10 @@ export const renderOptions: RenderOptions = {
     }
 
     return (
-      <Typography variant="Body/Paragraph/mdRegular" key={node.uid}>
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
         <ul
+          className={cx(styles.ul, compatibleClassName)}
           {...props}
-          className={`${styles.ul} ${compatibleClassName}`}
           style={
             numberOfRows
               ? {
@@ -664,7 +697,11 @@ export const renderOptions: RenderOptions = {
 
   /** TextNode wrappers */
   [RTEMarkType.bold]: (children: React.ReactNode) => {
-    return <strong>{children}</strong>
+    return (
+      <Typography variant="Body/Paragraph/mdBold">
+        <strong>{children}</strong>
+      </Typography>
+    )
   },
 
   [RTEMarkType.italic]: (children: React.ReactNode) => {
@@ -672,7 +709,11 @@ export const renderOptions: RenderOptions = {
   },
 
   [RTEMarkType.underline]: (children: React.ReactNode) => {
-    return <u>{children}</u>
+    return (
+      <Typography variant="Link/md">
+        <u>{children}</u>
+      </Typography>
+    )
   },
 
   [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
@@ -705,13 +746,9 @@ export const renderOptions: RenderOptions = {
     className?: string,
     id?: string
   ) => {
-    let props = {
+    const props = { id }
-      className,
+    let propsClassName = className
-      id,
+
-    }
-    if (!className) {
-      delete props.className
-    }
     if (!id) {
       delete props.id
     }
@@ -721,60 +758,74 @@ export const renderOptions: RenderOptions = {
         // @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]
+        propsClassName = styles[className]
       }
     }
 
     if (className === AvailableParagraphFormatEnum.footnote) {
       return (
-        <Footnote key={id} {...props}>
+        <Typography key={id} variant="Label/xsRegular">
+          <p className={cx(styles.p, propsClassName)} {...props}>
             {children}
-        </Footnote>
+          </p>
+        </Typography>
       )
     }
 
     if (className === AvailableParagraphFormatEnum.caption) {
       return (
-        <Caption key={id} {...props}>
+        <Typography key={id} variant="Body/Supporting text (caption)/smRegular">
+          <p className={cx(styles.p, propsClassName)} {...props}>
             {children}
-        </Caption>
+          </p>
+        </Typography>
       )
     }
 
     if (className === AvailableParagraphFormatEnum["script-1"]) {
       return (
-        <BiroScript key={id} type="one" {...props}>
+        <Typography key={id} variant="Title/Decorative/lg">
+          <p className={cx(styles.p, propsClassName)} {...props}>
             {children}
-        </BiroScript>
+          </p>
+        </Typography>
       )
     }
 
     if (className === AvailableParagraphFormatEnum["script-2"]) {
       return (
-        <BiroScript key={id} type="two" {...props}>
+        <Typography key={id} variant="Title/Decorative/md">
+          <p className={cx(styles.p, propsClassName)} {...props}>
             {children}
-        </BiroScript>
+          </p>
+        </Typography>
       )
     }
 
     if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
       return (
-        <Subtitle key={id} {...props} type="one">
+        <Typography key={id} variant="Title/Subtitle/lg">
+          <p className={cx(styles.p, propsClassName)} {...props}>
             {children}
-        </Subtitle>
+          </p>
+        </Typography>
       )
     }
     if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
       return (
-        <Subtitle key={id} {...props} type="two">
+        <Typography key={id} variant="Title/Subtitle/md">
+          <p className={cx(styles.p, propsClassName)} {...props}>
             {children}
-        </Subtitle>
+          </p>
+        </Typography>
       )
     }
     return (
-      <span key={id} {...props}>
+      <Typography key={id} variant="Body/Paragraph/mdRegular">
+        <span className={cx(styles.span, propsClassName)} {...props}>
           {children}
         </span>
+      </Typography>
     )
   },
 

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

@@ -20,12 +20,11 @@ export default function Sidebar({ blocks }: SidebarProps) {
         switch (block.typename) {
           case SidebarEnums.blocks.Content:
             return (
-              <section key={`${block.typename}-${idx}`}>
               <JsonToHtml
+                key={`${block.typename}-${idx}`}
                 embeds={block.content.embedded_itemsConnection.edges}
                 nodes={block.content.json.children}
               />
-              </section>
             )
           case SidebarEnums.blocks.DynamicContent:
             switch (block.dynamic_content.component) {

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

@@ -80,14 +80,13 @@ export default async function Content({ content }: ContentProps) {
               )
             case BlocksEnums.block.TextContent:
               return (
-                <section key={`${item.__typename}-${idx}`}>
                 <JsonToHtml
+                  key={`${item.__typename}-${idx}`}
                   embeds={
                     item.text_content.content.embedded_itemsConnection.edges
                   }
                   nodes={item.text_content.content.json.children}
                 />
-                </section>
               )
             default:
               return null

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

@@ -23,12 +23,11 @@ export default async function Blocks({ blocks }: BlocksProps) {
           )
         case BlocksEnums.block.Content:
           return (
-            <section key={`${block.__typename}-${idx}`}>
             <JsonToHtml
+              key={`${block.__typename}-${idx}`}
               nodes={block.content.json.children}
               embeds={block.content.embedded_itemsConnection.edges}
             />
-            </section>
           )
         case BlocksEnums.block.DynamicContent:
           const dynamicContent = {