diff --git a/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/components/ContentType/LoyaltyPage/loyaltyPage.module.css
index 203e19793..b20fa33a6 100644
--- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css
+++ b/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 {
diff --git a/components/Current/Aside/Puff/index.tsx b/components/Current/Aside/Puff/index.tsx
index a08f99605..bfb8f0843 100644
--- a/components/Current/Aside/Puff/index.tsx
+++ b/components/Current/Aside/Puff/index.tsx
@@ -3,10 +3,10 @@ import { useRouter } from "next/navigation"
import { Button } from "@scandic-hotels/design-system/current"
+import { renderOptions as currentRenderOptions } from "@/components/Current/currentRenderOptions"
import Image from "@/components/Image"
import JsonToHtml from "@/components/JsonToHtml"
-import { renderOptions as currentRenderOption } from "./../../currentRenderOptions"
import { renderOptions } from "./renderOptions"
import styles from "./puff.module.css"
@@ -45,7 +45,7 @@ export default function Puff({
{link.title || title}
@@ -74,7 +74,7 @@ export default function Puff({
diff --git a/components/Current/Preamble/index.tsx b/components/Current/Preamble/index.tsx
index ef0dc682a..bd0c7adc4 100644
--- a/components/Current/Preamble/index.tsx
+++ b/components/Current/Preamble/index.tsx
@@ -1,6 +1,6 @@
import JsonToHtml from "@/components/JsonToHtml"
-import { renderOptions as currentRenderOption } from "./../currentRenderOptions"
+import { renderOptions as currentRenderOptions } from "./../currentRenderOptions"
import Breadcrumbs from "./Breadcrumbs"
import { renderOptions } from "./renderOptions"
@@ -28,7 +28,7 @@ export default function Preamble({
) : null}
diff --git a/components/ImageContainer/imageContainer.module.css b/components/ImageContainer/imageContainer.module.css
index bde762010..3f61b2506 100644
--- a/components/ImageContainer/imageContainer.module.css
+++ b/components/ImageContainer/imageContainer.module.css
@@ -7,6 +7,7 @@
.image {
max-width: 100%;
+ width: 100%;
height: 365px;
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
diff --git a/components/JsonToHtml/index.tsx b/components/JsonToHtml/index.tsx
index 48ab55c93..501e394e0 100644
--- a/components/JsonToHtml/index.tsx
+++ b/components/JsonToHtml/index.tsx
@@ -1,5 +1,7 @@
import { nodesToHtml } from "./utils"
+import styles from "./jsontohtml.module.css"
+
import type { JsonToHtmlProps } from "@/types/components/jsontohtml"
export default function JsonToHtml({
@@ -11,7 +13,7 @@ export default function JsonToHtml({
return null
}
return (
-
+
{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
)
diff --git a/components/JsonToHtml/jsontohtml.module.css b/components/JsonToHtml/jsontohtml.module.css
index 25263c850..700de51bb 100644
--- a/components/JsonToHtml/jsontohtml.module.css
+++ b/components/JsonToHtml/jsontohtml.module.css
@@ -7,6 +7,54 @@
margin: var(--Spacing-x1) var(--Spacing-x0);
}
-.li {
- margin-left: var(--Spacing-x3);
+.ul,
+.ol {
+ padding: var(--Spacing-x2) var(--Spacing-x0);
+ display: grid;
+ gap: var(--Spacing-x1);
+}
+
+.ol:has(li:nth-last-child(n + 4)),
+.ul:has(li:nth-last-child(n + 4)) {
+ grid-template-columns: 1fr 1fr;
+ grid-auto-flow: column;
+}
+
+.ol > li::marker {
+ color: var(--Primary-Light-On-Surface-Accent);
+}
+
+.ul:has(.heart),
+.ul:has(.check) {
+ list-style: none;
+}
+.li:has(.heart),
+.li:has(.check) {
+ display: flex;
+}
+
+.li:not(:has(.heart), :has(.check)) {
+ margin-left: var(--Spacing-x2);
+}
+
+.li:has(.heart):before {
+ content: url("/_static/icons/heart.svg");
+ position: relative;
+ margin-right: var(--Spacing-x1);
+ height: 8px;
+ top: 3px;
+}
+
+.li:has(.check)::before {
+ content: url("/_static/icons/check-ring.svg");
+ position: relative;
+ margin-right: var(--Spacing-x1);
+ height: 8px;
+ top: 3px;
+}
+
+.container {
+ display: "grid";
+ gap: var(--Spacing-x3);
+ max-width: 1197px;
}
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index 70cd1f40a..f585dc768 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -10,7 +10,7 @@ import Caption from "../TempDesignSystem/Text/Caption"
import Footnote from "../TempDesignSystem/Text/Footnote"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import Title from "../TempDesignSystem/Text/Title"
-import { hasAvailableFormat } from "./utils"
+import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
import styles from "./jsontohtml.module.css"
@@ -18,7 +18,7 @@ import type { EmbedByUid } from "@/types/components/jsontohtml"
import { EmbedEnum } from "@/types/requests/utils/embeds"
import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
import {
- AvailableFormatEnum,
+ AvailableParagraphFormatEnum,
RTEItemTypeEnum,
RTETypeEnum,
} from "@/types/rte/enums"
@@ -201,20 +201,6 @@ export const renderOptions: RenderOptions = {
)
},
- [RTETypeEnum.h6]: (
- node: RTEDefaultNode,
- embeds: EmbedByUid,
- next: RTENext,
- fullRenderOptions: RenderOptions
- ) => {
- const props = extractPossibleAttributes(node.attrs)
- return (
-
- {next(node.children, embeds, fullRenderOptions)}
-
- )
- },
-
[RTETypeEnum.hr]: () => {
return
},
@@ -240,8 +226,26 @@ export const renderOptions: RenderOptions = {
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
+
+ // Set the number of rows dynamically to create even rows for each column. We want the li:s
+ // to flow with the column, so therefore this is needed.
+ let numberOfRows: number | undefined
+ if (node.children.length > 4) {
+ const half = node.children.length / 2
+ numberOfRows = Math.ceil(half)
+ }
+
return (
-
+
{next(node.children, embeds, fullRenderOptions)}
)
@@ -256,17 +260,13 @@ export const renderOptions: RenderOptions = {
const props = extractPossibleAttributes(node.attrs)
const hasFormat = node.children.some((item) =>
- hasAvailableFormat((item as RTETextNode).classname)
+ hasAvailableParagraphFormat((item as RTETextNode)?.classname)
)
// If a child node has an available format as className, we wrap it in a
// span and render the children with the correct component
if (hasFormat) {
- return (
-
- {next(node.children, embeds, fullRenderOptions)}
-
- )
+ return next(node.children, embeds, fullRenderOptions)
}
return (
@@ -423,6 +423,15 @@ export const renderOptions: RenderOptions = {
)
},
+ [RTETypeEnum.fragment]: (
+ node: RTEDefaultNode,
+ embeds: EmbedByUid,
+ next: RTENext,
+ fullRenderOptions: RenderOptions
+ ) => {
+ return <>{next(node.children, embeds, fullRenderOptions)}>
+ },
+
[RTETypeEnum.tr]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
@@ -472,8 +481,26 @@ export const renderOptions: RenderOptions = {
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
+
+ // Set the number of rows dynamically to create even rows for each column. We want the li:s
+ // to flow with the column, so therefore this is needed.
+ let numberOfRows: number | undefined
+ if (node.children.length > 4) {
+ const half = node.children.length / 2
+ numberOfRows = Math.ceil(half)
+ }
+
return (
-
+
{next(node.children, embeds, fullRenderOptions)}
)
@@ -533,7 +560,16 @@ export const renderOptions: RenderOptions = {
delete props.id
}
- if (className === AvailableFormatEnum.footnote) {
+ if (className) {
+ if (hasAvailableULFormat(className)) {
+ // @ts-ignore: We want to set css modules classNames even if it does not correspond
+ // to an existing class in the module style sheet. Due to our css modules plugin for
+ // typescript, we cannot do this without the ts-ignore
+ props.className = styles[className]
+ }
+ }
+
+ if (className === AvailableParagraphFormatEnum.footnote) {
return (
{children}
@@ -541,7 +577,7 @@ export const renderOptions: RenderOptions = {
)
}
- if (className === AvailableFormatEnum.caption) {
+ if (className === AvailableParagraphFormatEnum.caption) {
return (
{children}
@@ -549,7 +585,7 @@ export const renderOptions: RenderOptions = {
)
}
- if (className === AvailableFormatEnum["script-1"]) {
+ if (className === AvailableParagraphFormatEnum["script-1"]) {
return (
{children}
@@ -557,7 +593,7 @@ export const renderOptions: RenderOptions = {
)
}
- if (className === AvailableFormatEnum["script-2"]) {
+ if (className === AvailableParagraphFormatEnum["script-2"]) {
return (
{children}
@@ -565,14 +601,14 @@ export const renderOptions: RenderOptions = {
)
}
- if (className === AvailableFormatEnum["subtitle-1"]) {
+ if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
return (
{children}
)
}
- if (className === AvailableFormatEnum["subtitle-2"]) {
+ if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
return (
{children}
diff --git a/components/JsonToHtml/utils.tsx b/components/JsonToHtml/utils.tsx
index bf798829b..496b9f9e4 100644
--- a/components/JsonToHtml/utils.tsx
+++ b/components/JsonToHtml/utils.tsx
@@ -3,7 +3,11 @@ import { renderOptions } from "./renderOptions"
import type { EmbedByUid } from "@/types/components/jsontohtml"
import type { Embeds } from "@/types/requests/embeds"
import type { Node } from "@/types/requests/utils/edges"
-import { AvailableFormatEnum, RTETypeEnum } from "@/types/rte/enums"
+import {
+ AvailableParagraphFormatEnum,
+ AvailableULFormatEnum,
+ RTETypeEnum,
+} from "@/types/rte/enums"
import type {
RTENode,
RTERenderOptionComponent,
@@ -85,8 +89,18 @@ function next(
return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
}
-export function hasAvailableFormat(className?: string) {
- return className && Object.keys(AvailableFormatEnum).includes(className)
+export function hasAvailableParagraphFormat(className?: string) {
+ if (!className) {
+ return false
+ }
+ return Object.keys(AvailableParagraphFormatEnum).includes(className)
+}
+
+export function hasAvailableULFormat(className?: string) {
+ if (!className) {
+ return false
+ }
+ return Object.keys(AvailableULFormatEnum).includes(className)
}
export function nodeToHtml(
diff --git a/components/Section/Link/index.tsx b/components/Section/Link/index.tsx
index 924e81620..c8b27aedd 100644
--- a/components/Section/Link/index.tsx
+++ b/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"
>
{link.text}
diff --git a/public/_static/icons/check-ring.svg b/public/_static/icons/check-ring.svg
new file mode 100644
index 000000000..c08dd0661
--- /dev/null
+++ b/public/_static/icons/check-ring.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/public/_static/icons/heart.svg b/public/_static/icons/heart.svg
new file mode 100644
index 000000000..e46e94905
--- /dev/null
+++ b/public/_static/icons/heart.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/types/rte/enums.ts b/types/rte/enums.ts
index feb7834da..f4d6bd86c 100644
--- a/types/rte/enums.ts
+++ b/types/rte/enums.ts
@@ -37,6 +37,7 @@ export enum RTETypeEnum {
tr = "tr",
ul = "ul",
ImageVault = "ImageVault",
+ fragment = "fragment",
}
export type RTEType = keyof typeof RTETypeEnum
@@ -48,7 +49,7 @@ export enum RTEItemTypeEnum {
export type RTEItemType = keyof typeof RTEItemTypeEnum
-export enum AvailableFormatEnum {
+export enum AvailableParagraphFormatEnum {
"script-1" = "script-1",
"script-2" = "script-2",
"footnote" = "footnote",
@@ -56,3 +57,8 @@ export enum AvailableFormatEnum {
"subtitle-1" = "subtitle-1",
"subtitle-2" = "subtitle-2",
}
+
+export enum AvailableULFormatEnum {
+ "heart" = "heart",
+ "check" = "check",
+}