diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx index b8bfc05a5..439ed36ee 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx @@ -46,7 +46,7 @@ export default async function IntroSection({ {intl.formatMessage({ id: "Welcome to" })} - +

{hotelName}

 diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css index 9e26a9027..29b501825 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css @@ -27,6 +27,10 @@ fill: var(--Text-Interactive-Secondary); } +.title { + color: var(--Text-Heading); +} + .introLink { text-decoration-color: var(--Scandic-Peach-80); width: fit-content; diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx index 5134d7675..29667026b 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx @@ -38,9 +38,9 @@ export default async function Facility({ data }: FacilityProps) {
{ordinaryOpeningTimes.alwaysOpen - ? intl.formatMessage({ id: "Mon–Fri: Always open" }) + ? intl.formatMessage({ id: "Monday–Friday: Always open" }) : intl.formatMessage( - { id: "Mon–Fri: {openingTime}–{closingTime}" }, + { id: "Monday–Friday: {openingTime}–{closingTime}" }, { openingTime: ordinaryOpeningTimes.openingTime, closingTime: ordinaryOpeningTimes.closingTime, @@ -49,9 +49,9 @@ export default async function Facility({ data }: FacilityProps) { {weekendOpeningTimes.alwaysOpen - ? intl.formatMessage({ id: "Sat–Sun: Always open" }) + ? intl.formatMessage({ id: "Saturday–Sunday: Always open" }) : intl.formatMessage( - { id: "Sat–Sun: {openingTime}–{closingTime}" }, + { id: "Saturday–Sunday: {openingTime}–{closingTime}" }, { openingTime: weekendOpeningTimes.openingTime, closingTime: weekendOpeningTimes.closingTime, diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/htmlContent.module.css b/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/htmlContent.module.css index be2804939..56a7645b7 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/htmlContent.module.css +++ b/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/htmlContent.module.css @@ -18,6 +18,14 @@ display: inline; } +.heading { + color: var(--Text-Heading); +} + +.text { + color: var(--Text-Default); +} + @media screen and (min-width: 768px) { .ol:has(li:nth-last-child(n + 5)), .ul:has(li:nth-last-child(n + 5)) { diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx index 942009b57..021fb204d 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx @@ -1,10 +1,10 @@ import { ElementType } from "domelementtype" import parse, { type DOMNode, Element, type Text } from "html-react-parser" +import { Typography } from "@scandic-hotels/design-system/Typography" + import Link from "@/components/TempDesignSystem/Link" import Table from "@/components/TempDesignSystem/Table" -import Body from "@/components/TempDesignSystem/Text/Body" -import Title from "@/components/TempDesignSystem/Text/Title" import { NodeNames } from "./utils" @@ -18,41 +18,86 @@ interface HtmlContentProps { export default function HtmlContent({ html }: HtmlContentProps) { const cleanedHtml = html.replace("

\n", "") + let parentIdx = 0 const parsedContent = parse(cleanedHtml, { replace: (domNode: DOMNode) => { if (domNode instanceof Element) { - return renderNode(domNode) + return renderNode(domNode, parentIdx) } else { if (domNode.data === "\n") { return
} } + parentIdx++ }, }) return
{parsedContent}
} function renderChildren(node: Element) { - return node.children?.map((child) => renderNode(child as Element)) + return node.children?.map((child, idx) => renderNode(child as Node, idx)) } -function renderNode(domNode: Node) { +function renderNode(domNode: Node, idx: number) { if (domNode.type === ElementType.Tag) { switch (domNode.name) { case NodeNames.h1: - case NodeNames.h2: + return ( + + {renderChildren(domNode)} + + ) + case NodeNames.h2: // TODO: change to lowercase + return ( + + {renderChildren(domNode)} + + ) case NodeNames.h3: + return ( + + {renderChildren(domNode)} + + ) case NodeNames.h4: + return ( + + {renderChildren(domNode)} + + ) case NodeNames.h5: - return {renderChildren(domNode)} - + return ( + + {renderChildren(domNode)} + + ) case NodeNames.br: - return
+ return
case NodeNames.a: - console.log(domNode.attribs.target) return ( {renderChildren(domNode)} + return
  • {renderChildren(domNode)}
    • case NodeNames.td: - return {renderChildren(domNode)} + return ( + + {renderChildren(domNode)} + + ) case NodeNames.th: return ( - - + + {renderChildren(domNode)} - - + + ) case NodeNames.tr: - return {renderChildren(domNode)} + return ( + + {renderChildren(domNode)} + + ) case NodeNames.tbody: - return {renderChildren(domNode)} + return ( + + {renderChildren(domNode)} + + ) case NodeNames.table: return ( -
    +
    {renderChildren(domNode)}
    ) @@ -136,7 +195,13 @@ function renderNode(domNode: Node) { case NodeNames.p: return ( domNode.children.length !== 0 && ( - {renderChildren(domNode)} + +

    {renderChildren(domNode)}

    +     ) ) diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx index c30cfbffb..cf50792cf 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx @@ -1,6 +1,6 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + import Link from "@/components/TempDesignSystem/Link" -import Caption from "@/components/TempDesignSystem/Text/Caption" -import Title from "@/components/TempDesignSystem/Text/Title" import { getIntl } from "@/i18n" import styles from "./sidebar.module.css" @@ -23,17 +23,22 @@ export default async function MeetingsSidebar({ return (