scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Approved-by: Christian Andolf
This commit is contained in:
Erik Tiekstra
2025-06-03 05:45:14 +00:00
parent 958906d3bf
commit 6a639dfd7e
7 changed files with 273 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/scandic-web/components/Blocks/index.tsx
View File

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

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

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

86
apps/scandic-web/components/JsonToHtml/jsontohtml.module.css
View File

@@ -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; position: relative;
width: 100%; width: 100%;
height: 365px; height: 365px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
margin: var(--Spacing-x1) var(--Spacing-x0); margin: var(--Space-x3) 0;
overflow: hidden; overflow: hidden;
} }
@@ -14,17 +57,19 @@
.ul, .ul,
.ol { .ol {
padding: var(--Spacing-x2) var(--Spacing-x0);
display: grid; 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 { .ol > li::marker {
color: var(--Primary-Light-On-Surface-Accent); color: var(--Icon-Accent);
} }
.li { .li {
margin-left: var(--Spacing-x3); margin-left: var(--Space-x3);
} }
.heart > .li::before, .heart > .li::before,
@@ -33,8 +78,8 @@
position: relative; position: relative;
height: 8px; height: 8px;
top: 3px; 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, .heart > .li,
@@ -50,23 +95,32 @@
position: relative; position: relative;
height: 8px; height: 8px;
top: 3px; 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 { .li > p {
display: inline; display: inline;
margin: 0;
} }
.tableContainer { .tableContainer {
max-width: 100%; max-width: 100%;
overflow-x: auto; 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) { @media screen and (min-width: 768px) {

291
apps/scandic-web/components/JsonToHtml/renderOptions.tsx
View File

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

11
apps/scandic-web/components/Sidebar/index.tsx
View File

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

15
apps/scandic-web/components/Webviews/AccountPage/Blocks.tsx
View File

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

11
apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx
View File

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