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({
@@ -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", +}