From 68c000aa0f76d9187a03e70c93826f7ebea88ea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Thu, 20 Mar 2025 12:50:24 +0000 Subject: [PATCH] Merged in feat/SW-1951 (pull request #1575) Feat(SW-1951): Fix heading styling bug in hotel subpages Approved-by: Erik Tiekstra --- .../HotelPage/IntroSection/index.tsx | 2 +- .../IntroSection/introSection.module.css | 4 + .../WellnessAndExercise/Facility/index.tsx | 8 +- .../HtmlContent/htmlContent.module.css | 8 ++ .../HotelSubpage/HtmlContent/index.tsx | 105 +++++++++++--- .../HotelSubpage/Sidebar/MeetingsSidebar.tsx | 25 ++-- .../HotelSubpage/Sidebar/ParkingSidebar.tsx | 67 +++++---- .../Sidebar/RestaurantSidebar.tsx | 54 ++++---- .../HotelSubpage/Sidebar/WellnessSidebar.tsx | 130 ++++++++++-------- .../HotelSubpage/Sidebar/sidebar.module.css | 8 ++ .../HotelSubpage/hotelSubpage.module.css | 8 ++ .../ContentType/HotelSubpage/index.tsx | 14 +- .../components/OpeningHours/index.tsx | 27 ++-- .../OpeningHours/openingHours.module.css | 8 ++ apps/scandic-web/i18n/dictionaries/da.json | 9 +- apps/scandic-web/i18n/dictionaries/de.json | 9 +- apps/scandic-web/i18n/dictionaries/en.json | 9 +- apps/scandic-web/i18n/dictionaries/fi.json | 9 +- apps/scandic-web/i18n/dictionaries/no.json | 9 +- apps/scandic-web/i18n/dictionaries/sv.json | 9 +- 20 files changed, 341 insertions(+), 181 deletions(-) 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 (