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

Merged in feat/SW-1951 (pull request #1575)

Browse Source 
Feat(SW-1951): Fix heading styling bug in hotel subpages

Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-03-20 12:50:24 +00:00
parent cfdbdfc0bc
commit 68c000aa0f
20 changed files with 341 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
View File

@@ -46,7 +46,7 @@ export default async function IntroSection({
<BiroScript tilted="medium" color="red"> <BiroScript tilted="medium" color="red">
{intl.formatMessage({ id: "Welcome to" })} {intl.formatMessage({ id: "Welcome to" })}
</BiroScript> </BiroScript>
<Typography variant="Title/lg"> <Typography variant="Title/lg" className={styles.title}>
<h1>{hotelName}</h1> <h1>{hotelName}</h1>
</Typography> </Typography>
</div> </div>

4
apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
View File

@@ -27,6 +27,10 @@
fill: var(--Text-Interactive-Secondary); fill: var(--Text-Interactive-Secondary);
} }
.title {
color: var(--Text-Heading);
}
.introLink { .introLink {
text-decoration-color: var(--Scandic-Peach-80); text-decoration-color: var(--Scandic-Peach-80);
width: fit-content; width: fit-content;

8
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
View File

@@ -38,9 +38,9 @@ export default async function Facility({ data }: FacilityProps) {
<div className={styles.openingHours}> <div className={styles.openingHours}>
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">
{ordinaryOpeningTimes.alwaysOpen {ordinaryOpeningTimes.alwaysOpen
? intl.formatMessage({ id: "Mon–Fri: Always open" }) ? intl.formatMessage({ id: "Monday–Friday: Always open" })
: intl.formatMessage( : intl.formatMessage(
{ id: "Mon–Fri: {openingTime}–{closingTime}" }, { id: "Monday–Friday: {openingTime}–{closingTime}" },
{ {
openingTime: ordinaryOpeningTimes.openingTime, openingTime: ordinaryOpeningTimes.openingTime,
closingTime: ordinaryOpeningTimes.closingTime, closingTime: ordinaryOpeningTimes.closingTime,
@@ -49,9 +49,9 @@ export default async function Facility({ data }: FacilityProps) {
</Body> </Body>
<Body color="uiTextHighContrast"> <Body color="uiTextHighContrast">
{weekendOpeningTimes.alwaysOpen {weekendOpeningTimes.alwaysOpen
? intl.formatMessage({ id: "Sat–Sun: Always open" }) ? intl.formatMessage({ id: "Saturday–Sunday: Always open" })
: intl.formatMessage( : intl.formatMessage(
{ id: "Sat–Sun: {openingTime}–{closingTime}" }, { id: "Saturday–Sunday: {openingTime}–{closingTime}" },
{ {
openingTime: weekendOpeningTimes.openingTime, openingTime: weekendOpeningTimes.openingTime,
closingTime: weekendOpeningTimes.closingTime, closingTime: weekendOpeningTimes.closingTime,

8
apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/htmlContent.module.css
View File

@@ -18,6 +18,14 @@
display: inline; display: inline;
} }
.heading {
color: var(--Text-Heading);
}
.text {
color: var(--Text-Default);
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.ol:has(li:nth-last-child(n + 5)), .ol:has(li:nth-last-child(n + 5)),
.ul:has(li:nth-last-child(n + 5)) { .ul:has(li:nth-last-child(n + 5)) {

103
apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx
View File

@@ -1,10 +1,10 @@
import { ElementType } from "domelementtype" import { ElementType } from "domelementtype"
import parse, { type DOMNode, Element, type Text } from "html-react-parser" 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 Link from "@/components/TempDesignSystem/Link"
import Table from "@/components/TempDesignSystem/Table" import Table from "@/components/TempDesignSystem/Table"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { NodeNames } from "./utils" import { NodeNames } from "./utils"
@@ -18,41 +18,86 @@ interface HtmlContentProps {
export default function HtmlContent({ html }: HtmlContentProps) { export default function HtmlContent({ html }: HtmlContentProps) {
const cleanedHtml = html.replace("<p></p>\n", "") const cleanedHtml = html.replace("<p></p>\n", "")
let parentIdx = 0
const parsedContent = parse(cleanedHtml, { const parsedContent = parse(cleanedHtml, {
replace: (domNode: DOMNode) => { replace: (domNode: DOMNode) => {
if (domNode instanceof Element) { if (domNode instanceof Element) {
return renderNode(domNode) return renderNode(domNode, parentIdx)
} else { } else {
if (domNode.data === "\n") { if (domNode.data === "\n") {
return <br /> return <br />
} }
} }
parentIdx++
}, },
}) })
return <div>{parsedContent}</div> return <div>{parsedContent}</div>
} }
function renderChildren(node: Element) { 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) { if (domNode.type === ElementType.Tag) {
switch (domNode.name) { switch (domNode.name) {
case NodeNames.h1: case NodeNames.h1:
case NodeNames.h2: return (
<Typography
key={domNode.name + idx}
variant="Title/md"
className={styles.heading}
>
<domNode.name>{renderChildren(domNode)}</domNode.name>
</Typography>
)
case NodeNames.h2: // TODO: change to lowercase
return (
<Typography
key={domNode.name + idx}
variant="Title/sm"
className={styles.heading}
>
<domNode.name>{renderChildren(domNode)}</domNode.name>
</Typography>
)
case NodeNames.h3: case NodeNames.h3:
return (
<Typography
key={domNode.name + idx}
variant="Title/xs"
className={styles.heading}
>
<domNode.name>{renderChildren(domNode)}</domNode.name>
</Typography>
)
case NodeNames.h4: case NodeNames.h4:
return (
<Typography
key={domNode.name + idx}
variant="Title/Subtitle/lg"
className={styles.heading}
>
<domNode.name>{renderChildren(domNode)}</domNode.name>
</Typography>
)
case NodeNames.h5: case NodeNames.h5:
return <Title level={domNode.name}>{renderChildren(domNode)}</Title> return (
<Typography
key={domNode.name + idx}
variant="Title/Subtitle/md"
className={styles.heading}
>
<domNode.name>{renderChildren(domNode)}</domNode.name>
</Typography>
)
case NodeNames.br: case NodeNames.br:
return <br /> return <br key={domNode.name + idx} />
case NodeNames.a: case NodeNames.a:
console.log(domNode.attribs.target)
return ( return (
<Link <Link
key={domNode.name + idx}
color="peach80" color="peach80"
textDecoration="underline" textDecoration="underline"
weight="bold" weight="bold"
@@ -71,6 +116,7 @@ function renderNode(domNode: Node) {
} }
return ( return (
<ul <ul
key={domNode.name + idx}
className={styles.ul} className={styles.ul}
style={ style={
numberOfRows numberOfRows
@@ -92,6 +138,7 @@ function renderNode(domNode: Node) {
} }
return ( return (
<ol <ol
key={domNode.name + idx}
className={styles.ol} className={styles.ol}
style={ style={
numberOfOlRows numberOfOlRows
@@ -106,29 +153,41 @@ function renderNode(domNode: Node) {
) )
case NodeNames.li: case NodeNames.li:
return <li>{renderChildren(domNode)}</li> return <li key={domNode.name + idx}>{renderChildren(domNode)}</li>
case NodeNames.td: case NodeNames.td:
return <Table.TD>{renderChildren(domNode)}</Table.TD> return (
<Table.TD key={domNode.name + idx}>
{renderChildren(domNode)}
</Table.TD>
)
case NodeNames.th: case NodeNames.th:
return ( return (
<Table.TH> <Typography className={styles.heading}>
<Body color={"burgundy"} textTransform={"bold"}> <Table.TH key={domNode.name + idx}>
{renderChildren(domNode)} {renderChildren(domNode)}
</Body>
</Table.TH> </Table.TH>
</Typography>
) )
case NodeNames.tr: case NodeNames.tr:
return <Table.TR>{renderChildren(domNode)}</Table.TR> return (
<Table.TR key={domNode.name + idx}>
{renderChildren(domNode)}
</Table.TR>
)
case NodeNames.tbody: case NodeNames.tbody:
return <Table.TBody>{renderChildren(domNode)}</Table.TBody> return (
<Table.TBody key={domNode.name + idx}>
{renderChildren(domNode)}
</Table.TBody>
)
case NodeNames.table: case NodeNames.table:
return ( return (
<div className={styles.tableContainer}> <div key={domNode.name + idx} className={styles.tableContainer}>
<Table>{renderChildren(domNode)}</Table> <Table>{renderChildren(domNode)}</Table>
</div> </div>
) )
@@ -136,7 +195,13 @@ function renderNode(domNode: Node) {
case NodeNames.p: case NodeNames.p:
return ( return (
domNode.children.length !== 0 && ( domNode.children.length !== 0 && (
<Body>{renderChildren(domNode)}</Body> <Typography
key={domNode.name + idx}
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<p>{renderChildren(domNode)}</p>
</Typography>
) )
) )

19
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx
View File

@@ -1,6 +1,6 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Link from "@/components/TempDesignSystem/Link" 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 { getIntl } from "@/i18n"
import styles from "./sidebar.module.css" import styles from "./sidebar.module.css"
@@ -23,17 +23,22 @@ export default async function MeetingsSidebar({
return ( return (
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Contact us" })} <h3>{intl.formatMessage({ id: "Contact us" })}</h3>
</Title> </Typography>
<div className={styles.contactDetails}> <div className={styles.contactDetails}>
<Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link> <Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
{country === Country.Finland ? ( {country === Country.Finland ? (
<Caption> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<p>
{intl.formatMessage({ {intl.formatMessage({
id: "Price 0,16 €/min + local call charges", id: "Price 0,16 €/min + local call charges",
})} })}
</Caption> </p>
</Typography>
) : null} ) : null}
{email && ( {email && (
<Link textDecoration="underline" href={`mailto:${email}`}> <Link textDecoration="underline" href={`mailto:${email}`}>

45
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx
View File

@@ -1,7 +1,6 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css" import styles from "./sidebar.module.css"
@@ -19,32 +18,48 @@ export default async function ParkingSidebar({ hotel }: HotelSidebarProps) {
return ( return (
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Address" })} <h3>{intl.formatMessage({ id: "Address" })}</h3>
</Title> </Typography>
<Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
<div> <div>
<Body color="uiTextHighContrast">{hotel.address.streetAddress}</Body> <p>{hotel.address.streetAddress}</p>
<Body color="uiTextHighContrast"> <p>
{hotel.address.zipCode} {hotel.address.city} {hotel.address.zipCode} {hotel.address.city}
</Body> </p>
<Body color="uiTextHighContrast">{hotel.address.country}</Body> <p> {hotel.address.country}</p>
</div> </div>
</Typography>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Contact us" })} <h3>{intl.formatMessage({ id: "Contact us" })}</h3>
</Title> </Typography>
<div className={styles.contactDetails}>
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}> <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
{hotel.contactInformation.phoneNumber} {hotel.contactInformation.phoneNumber}
</Link> </Link>
{hotel.address.country === Country.Finland ? ( {hotel.address.country === Country.Finland ? (
<Caption> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<p>
{intl.formatMessage({ {intl.formatMessage({
id: "Price 0,16 €/min + local call charges", id: "Price 0,16 €/min + local call charges",
})} })}
</Caption> </p>
</Typography>
) : null} ) : null}
<Link
textDecoration="underline"
href={`mailto:${hotel.contactInformation.email}`}
>
{hotel.contactInformation.email}
</Link>
</div>
</div> </div>
</aside> </aside>
) )

44
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx
View File

@@ -1,10 +1,9 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import { OpenInNewSmallIcon } from "@/components/Icons" import { OpenInNewSmallIcon } from "@/components/Icons"
import OpeningHours from "@/components/OpeningHours" import OpeningHours from "@/components/OpeningHours"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css" import styles from "./sidebar.module.css"
@@ -30,9 +29,9 @@ export default async function RestaurantSidebar({
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
{openingDetails.length ? ( {openingDetails.length ? (
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Opening hours" })} <h3>{intl.formatMessage({ id: "Opening hours" })}</h3>
</Title> </Typography>
{openingDetails.map((details) => ( {openingDetails.map((details) => (
<OpeningHours <OpeningHours
key={details.openingHours.name} key={details.openingHours.name}
@@ -54,9 +53,9 @@ export default async function RestaurantSidebar({
)} )}
{restaurant.menus.length ? ( {restaurant.menus.length ? (
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Menus" })} <h3>{intl.formatMessage({ id: "Menus" })}</h3>
</Title> </Typography>
<ul className={styles.menuList}> <ul className={styles.menuList}>
{restaurant.menus.map(({ name, url }) => ( {restaurant.menus.map(({ name, url }) => (
<li key={name}> <li key={name}>
@@ -75,29 +74,36 @@ export default async function RestaurantSidebar({
</div> </div>
) : null} ) : null}
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Address" })} <h3>{intl.formatMessage({ id: "Address" })}</h3>
</Title> </Typography>
<Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
<div> <div>
<Body color="uiTextHighContrast">{address.streetAddress}</Body> <p>{address.streetAddress}</p>
<Body color="uiTextHighContrast">{`${address.zipCode} ${address.city}`}</Body> <p>{`${address.zipCode} ${address.city}`}</p>
</div> </div>
</Typography>
</div> </div>
{(phoneNumber || email) && ( {(phoneNumber || email) && (
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Contact us" })} <h3>{intl.formatMessage({ id: "Contact us" })}</h3>
</Title> </Typography>
<div className={styles.contactDetails}> <div className={styles.contactDetails}>
{phoneNumber && ( {phoneNumber && (
<> <>
<Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link> <Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
{address.country === Country.Finland ? ( {address.country === Country.Finland ? (
<Caption> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<p>
{intl.formatMessage({ {intl.formatMessage({
id: "Price 0,16 €/min + local call charges", id: "Price 0,16 €/min + local call charges",
})} })}
</Caption> </p>
</Typography>
) : null} ) : null}
</> </>
)} )}

76
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx
View File

@@ -1,8 +1,6 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { translateWellnessType } from "../../HotelPage/utils" import { translateWellnessType } from "../../HotelPage/utils"
@@ -22,19 +20,25 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) {
return ( return (
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Opening hours" })} <h3>{intl.formatMessage({ id: "Opening hours" })}</h3>
</Title> </Typography>
{hotel.healthFacilities.map((facility) => ( {hotel.healthFacilities.map((facility) => (
<div key={facility.type}> <div key={facility.type}>
<Subtitle type="two" color="uiTextHighContrast" asChild> <Typography variant="Title/Subtitle/md" className={styles.text}>
<h4>{translateWellnessType(facility.type, intl)}</h4> <h4>{translateWellnessType(facility.type, intl)}</h4>
</Subtitle> </Typography>
<Body color="uiTextHighContrast">
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<div>
<p>
{facility.openingDetails.openingHours.ordinary.alwaysOpen {facility.openingDetails.openingHours.ordinary.alwaysOpen
? intl.formatMessage({ id: "Mon–Fri: Always open" }) ? intl.formatMessage({ id: "Monday–Friday: Always open" })
: intl.formatMessage( : intl.formatMessage(
{ id: "Mon–Fri: {openingTime}–{closingTime}" }, { id: "Monday–Friday: {openingTime}–{closingTime}" },
{ {
openingTime: openingTime:
facility.openingDetails.openingHours.ordinary facility.openingDetails.openingHours.ordinary
@@ -44,12 +48,12 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) {
.closingTime, .closingTime,
} }
)} )}
</Body> </p>
<Body color="uiTextHighContrast"> <p>
{facility.openingDetails.openingHours.weekends.alwaysOpen {facility.openingDetails.openingHours.weekends.alwaysOpen
? intl.formatMessage({ id: "Sat–Sun: Always open" }) ? intl.formatMessage({ id: "Saturday–Sunday: Always open" })
: intl.formatMessage( : intl.formatMessage(
{ id: "Sat–Sun: {openingTime}–{closingTime}" }, { id: "Saturday–Sunday: {openingTime}–{closingTime}" },
{ {
openingTime: openingTime:
facility.openingDetails.openingHours.weekends facility.openingDetails.openingHours.weekends
@@ -59,36 +63,50 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) {
.closingTime, .closingTime,
} }
)} )}
</Body> </p>
</div>
</Typography>
</div> </div>
))} ))}
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Address" })} <h3>{intl.formatMessage({ id: "Address" })}</h3>
</Title> </Typography>
<div className={styles.contactDetails}>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<div> <div>
<Body color="uiTextHighContrast">{hotel.address.streetAddress}</Body> <p>{hotel.address.streetAddress}</p>
<Body color="uiTextHighContrast"> <p>
{hotel.address.zipCode} {hotel.address.city} {hotel.address.zipCode} {hotel.address.city}
</Body> </p>
<Body color="uiTextHighContrast">{hotel.address.country}</Body> <p> {hotel.address.country}</p>
</div>
</Typography>
</div> </div>
</div> </div>
<div className={styles.content}> <div className={styles.content}>
<Title level="h3" as="h4"> <Typography variant="Title/xs" className={styles.heading}>
{intl.formatMessage({ id: "Contact us" })} <h3>{intl.formatMessage({ id: "Contact us" })}</h3>
</Title> </Typography>
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}> <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
{hotel.contactInformation.phoneNumber} {hotel.contactInformation.phoneNumber}
</Link> </Link>
{hotel.address.country === Country.Finland ? ( {hotel.address.country === Country.Finland ? (
<Caption> <Typography
variant="Body/Paragraph/mdRegular"
className={styles.text}
>
<p>
{intl.formatMessage({ {intl.formatMessage({
id: "Price 0,16 €/min + local call charges", id: "Price 0,16 €/min + local call charges",
})} })}
</Caption> </p>
</Typography>
) : null} ) : null}
</div> </div>
</aside> </aside>

8
apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css
View File

@@ -23,6 +23,14 @@
display: grid; display: grid;
} }
.heading {
color: var(--Text-Heading);
}
.text {
color: var(--Text-Default);
}
@media (min-width: 1367px) { @media (min-width: 1367px) {
.sidebar { .sidebar {
grid-column: 2; grid-column: 2;

8
apps/scandic-web/components/ContentType/HotelSubpage/hotelSubpage.module.css
View File

@@ -51,6 +51,14 @@
bottom: 0; bottom: 0;
} }
.heading {
color: var(--Text-Heading);
}
.text {
color: var(--Text-Default);
}
@media (min-width: 1367px) { @media (min-width: 1367px) {
.hotelSubpage { .hotelSubpage {
padding-bottom: var(--Spacing-x9); padding-bottom: var(--Spacing-x9);

14
apps/scandic-web/components/ContentType/HotelSubpage/index.tsx
View File

@@ -1,6 +1,8 @@
import { notFound } from "next/navigation" import { notFound } from "next/navigation"
import { Suspense } from "react" import { Suspense } from "react"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { import {
getHotel, getHotel,
getHotelPage, getHotelPage,
@@ -12,8 +14,6 @@ import Hero from "@/components/Hero"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton" import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import { safeTry } from "@/utils/safeTry" import { safeTry } from "@/utils/safeTry"
@@ -91,9 +91,9 @@ export default async function HotelSubpage({
</div> </div>
<div className={styles.contentContainer}> <div className={styles.contentContainer}>
<Title as="h2" level="h1"> <Typography variant="Title/md" className={styles.heading}>
{pageData.heading} <h1>{pageData.heading}</h1>
</Title> </Typography>
<HotelSubpageSidebar <HotelSubpageSidebar
subpage={subpage} subpage={subpage}
@@ -106,7 +106,9 @@ export default async function HotelSubpage({
<main className={styles.mainContent}> <main className={styles.mainContent}>
{pageData.elevatorPitch && ( {pageData.elevatorPitch && (
<div className={styles.intro}> <div className={styles.intro}>
<Preamble>{pageData.elevatorPitch}</Preamble> <Typography variant="Body/Lead text" className={styles.text}>
<p>{pageData.elevatorPitch}</p>
</Typography>
</div> </div>
)} )}

27
apps/scandic-web/components/OpeningHours/index.tsx
View File

@@ -1,5 +1,5 @@
import Body from "@/components/TempDesignSystem/Text/Body" import { Typography } from "@scandic-hotels/design-system/Typography"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./openingHours.module.css" import styles from "./openingHours.module.css"
@@ -95,20 +95,27 @@ export default async function OpeningHours({
return ( return (
<div className={type === "default" ? styles.wrapper : ""}> <div className={type === "default" ? styles.wrapper : ""}>
<Body textTransform="bold" asChild> <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
<h5>{heading ?? openingHours.name}</h5> <h5>{heading ?? openingHours.name}</h5>
</Body> </Typography>
{groupedOpeningHours.map((groupedOpeningHour) => { {groupedOpeningHours.map((groupedOpeningHour) => {
return ( return (
<Body color="uiTextHighContrast" key={groupedOpeningHour}> <Typography
{groupedOpeningHour} variant="Body/Paragraph/mdRegular"
</Body> className={styles.text}
key={groupedOpeningHour}
>
<p>{groupedOpeningHour}</p>
</Typography>
) )
})} })}
{alternateOpeningHours?.name ? ( {alternateOpeningHours?.name ? (
<Caption color="uiTextMediumContrast"> <Typography
{alternateOpeningHours.name} variant="Body/Supporting text (caption)/smRegular"
</Caption> className={styles.caption}
>
<p>{alternateOpeningHours.name}</p>
</Typography>
) : null} ) : null}
</div> </div>
) )

8
apps/scandic-web/components/OpeningHours/openingHours.module.css
View File

@@ -2,3 +2,11 @@
display: grid; display: grid;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.caption {
color: var(--Text-Secondary);
}
.text {
color: var(--Text-Default);
}

9
apps/scandic-web/i18n/dictionaries/da.json
View File

@@ -436,6 +436,7 @@
"Max {max, plural, one {{range} guest} other {{range} guests}}": "Maks {max, plural, one {{range} gæst} other {{range} gæster}}", "Max {max, plural, one {{range} guest} other {{range} guests}}": "Maks {max, plural, one {{range} gæst} other {{range} gæster}}",
"Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}", "Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
"Meetings & Conferences": "Møder & Konferencer", "Meetings & Conferences": "Møder & Konferencer",
"Meetings, Conferences & Events": "Møder, Konferencer & Arrangementer",
"Member Since: {value}": "Member Since: {value}", "Member Since: {value}": "Member Since: {value}",
"Member discount": "Member discount", "Member discount": "Member discount",
"Member no. {nr}": "Medlemsnummer {nr}", "Member no. {nr}": "Medlemsnummer {nr}",
@@ -457,9 +458,9 @@
"Modify dates": "Modify dates", "Modify dates": "Modify dates",
"Modify guest details": "Ændre gæstdetaljer", "Modify guest details": "Ændre gæstdetaljer",
"Monday": "Mandag", "Monday": "Mandag",
"Monday–Friday: {openingTime}–{closingTime}": "Mandag–Fredag: {openingTime}–{closingTime}",
"Monday–Friday: {openingTime}–{closingTime}: Always open": "Mandag–Fredag: Altid åben",
"Month": "Måned", "Month": "Måned",
"Mon–Fri: Always open": "Man–Fre: Altid åben",
"Mon–Fri: {openingTime}–{closingTime}": "Man–Fre: {openingTime}–{closingTime}",
"Multi-room booking is not available with reward night.": "Multi-værelse booking er ikke tilgængelig med belønning nat.", "Multi-room booking is not available with reward night.": "Multi-værelse booking er ikke tilgængelig med belønning nat.",
"Multi-room booking is not available with this booking code.": "Multi-værelse booking er ikke tilgængelig med denne reservationskode.", "Multi-room booking is not available with this booking code.": "Multi-værelse booking er ikke tilgængelig med denne reservationskode.",
"Museum": "Museum", "Museum": "Museum",
@@ -644,8 +645,8 @@
"SAS EuroBonus": "SAS EuroBonus", "SAS EuroBonus": "SAS EuroBonus",
"SF points to receive": "SF points to receive", "SF points to receive": "SF points to receive",
"Saturday": "Lørdag", "Saturday": "Lørdag",
"Sat–Sun: Always open": "Lør–Søn: Altid åben", "Saturday–Sunday: Always open": "Lørdag–Søndag: Altid åben",
"Sat–Sun: {openingTime}–{closingTime}": "Lør–Søn: {openingTime}–{closingTime}", "Saturday–Sunday: {openingTime}–{closingTime}": "Lørdag–Søndag: {openingTime}–{closingTime}",
"Sauna": "Sauna", "Sauna": "Sauna",
"Sauna and gym": "Sauna and gym", "Sauna and gym": "Sauna and gym",
"Save": "Gemme", "Save": "Gemme",

9
apps/scandic-web/i18n/dictionaries/de.json
View File

@@ -437,6 +437,7 @@
"Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} gast} other {{range} gäste}}", "Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} gast} other {{range} gäste}}",
"Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}", "Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
"Meetings & Conferences": "Tagungen & Konferenzen", "Meetings & Conferences": "Tagungen & Konferenzen",
"Meetings, Conferences & Events": "Møder, Konferencer & Arrangementer",
"Member Since: {value}": "Member Since: {value}", "Member Since: {value}": "Member Since: {value}",
"Member discount": "Member discount", "Member discount": "Member discount",
"Member no. {nr}": "Mitgliedsnummer {nr}", "Member no. {nr}": "Mitgliedsnummer {nr}",
@@ -458,9 +459,9 @@
"Modify dates": "Ändra datum", "Modify dates": "Ändra datum",
"Modify guest details": "Gastdetails ändern", "Modify guest details": "Gastdetails ändern",
"Monday": "Montag", "Monday": "Montag",
"Monday–Friday: Always open": "Montag–Fretag: Immer geöffnet",
"Monday–Friday: {openingTime}–{closingTime}": "Montag–Fretag: {openingTime}–{closingTime}",
"Month": "Monat", "Month": "Monat",
"Mon–Fri: Always open": "Mo–Fr: Immer geöffnet",
"Mon–Fri: {openingTime}–{closingTime}": "Mo–Fr: {openingTime}–{closingTime}",
"Multi-room booking is not available with reward night.": "Mehrzimmerbuchungen sind mit Prämiennächten nicht möglich.", "Multi-room booking is not available with reward night.": "Mehrzimmerbuchungen sind mit Prämiennächten nicht möglich.",
"Multi-room booking is not available with this booking code.": "Mehrzimmerbuchungen sind mit diesem Buchungscode nicht möglich.", "Multi-room booking is not available with this booking code.": "Mehrzimmerbuchungen sind mit diesem Buchungscode nicht möglich.",
"Museum": "Museum", "Museum": "Museum",
@@ -643,8 +644,8 @@
"SAS EuroBonus": "SAS EuroBonus", "SAS EuroBonus": "SAS EuroBonus",
"SF points to receive": "SF points to receive", "SF points to receive": "SF points to receive",
"Saturday": "Samstag", "Saturday": "Samstag",
"Sat–Sun: Always open": "Sa–So: Immer geöffnet", "Saturday–Sunday: Always open": "Samstag–Sonntag: Immer geöffnet",
"Sat–Sun: {openingTime}–{closingTime}": "Sa–So: {openingTime}–{closingTime}", "Saturday–Sunday: {openingTime}–{closingTime}": "Samstag–Sonntag: {openingTime}–{closingTime}",
"Sauna": "Sauna", "Sauna": "Sauna",
"Sauna and gym": "Sauna and gym", "Sauna and gym": "Sauna and gym",
"Save": "Speichern", "Save": "Speichern",

9
apps/scandic-web/i18n/dictionaries/en.json
View File

@@ -435,6 +435,7 @@
"Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} guest} other {{range} guests}}", "Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} guest} other {{range} guests}}",
"Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}", "Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
"Meetings & Conferences": "Meetings & Conferences", "Meetings & Conferences": "Meetings & Conferences",
"Meetings, Conferences & Events": "Meetings, Conferences & Events",
"Member Since: {value}": "Member Since: {value}", "Member Since: {value}": "Member Since: {value}",
"Member discount": "Member discount", "Member discount": "Member discount",
"Member no. {nr}": "Member no. {nr}", "Member no. {nr}": "Member no. {nr}",
@@ -456,9 +457,9 @@
"Modify dates": "Modify dates", "Modify dates": "Modify dates",
"Modify guest details": "Modify guest details", "Modify guest details": "Modify guest details",
"Monday": "Monday", "Monday": "Monday",
"Monday–Friday: Always open": "Monday–Friday: Always open",
"Monday–Friday: {openingTime}–{closingTime}": "Monday–Friday: {openingTime}–{closingTime}",
"Month": "Month", "Month": "Month",
"Mon–Fri: Always open": "Mon–Fri: Always open",
"Mon–Fri: {openingTime}–{closingTime}": "Mon–Fri: {openingTime}–{closingTime}",
"Multi-room booking is not available with reward night.": "Multi-room booking is not available with reward night.", "Multi-room booking is not available with reward night.": "Multi-room booking is not available with reward night.",
"Multi-room booking is not available with this booking code.": "Multi-room booking is not available with this booking code.", "Multi-room booking is not available with this booking code.": "Multi-room booking is not available with this booking code.",
"Museum": "Museum", "Museum": "Museum",
@@ -642,8 +643,8 @@
"SAS EuroBonus": "SAS EuroBonus", "SAS EuroBonus": "SAS EuroBonus",
"SF points to receive": "SF points to receive", "SF points to receive": "SF points to receive",
"Saturday": "Saturday", "Saturday": "Saturday",
"Sat–Sun: Always open": "Sat–Sun: Always open", "Saturday–Sunday: Always open": "Saturday–Sunday: Always open",
"Sat–Sun: {openingTime}–{closingTime}": "Sat–Sun: {openingTime}–{closingTime}", "Saturday–Sunday: {openingTime}–{closingTime}": "Saturday–Sunday: {openingTime}–{closingTime}",
"Sauna": "Sauna", "Sauna": "Sauna",
"Sauna and gym": "Sauna and gym", "Sauna and gym": "Sauna and gym",
"Save": "Save", "Save": "Save",

9
apps/scandic-web/i18n/dictionaries/fi.json
View File

@@ -436,6 +436,7 @@
"Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} vieras} other {{range} vieraita}}", "Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} vieras} other {{range} vieraita}}",
"Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}", "Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
"Meetings & Conferences": "Kokoukset & Konferenssit", "Meetings & Conferences": "Kokoukset & Konferenssit",
"Meetings, Conferences & Events": "Tagungen, Konferenzen & Veranstaltungen",
"Member Since: {value}": "Member Since: {value}", "Member Since: {value}": "Member Since: {value}",
"Member discount": "Member discount", "Member discount": "Member discount",
"Member no. {nr}": "Jäsenyysnumero {nr}", "Member no. {nr}": "Jäsenyysnumero {nr}",
@@ -457,9 +458,9 @@
"Modify dates": "Muuta päivämääriä", "Modify dates": "Muuta päivämääriä",
"Modify guest details": "Muuta vierailijoiden tietoja", "Modify guest details": "Muuta vierailijoiden tietoja",
"Monday": "Maanantai", "Monday": "Maanantai",
"Monday–Friday: Always open": "Maanantai–Perjantai: Aina auki",
"Monday–Friday: {openingTime}–{closingTime}": "Maanantai–Perjantai: {openingTime}-{closingTime}",
"Month": "Kuukausi", "Month": "Kuukausi",
"Mon–Fri: Always open": "Ma–Pe: Aina auki",
"Mon–Fri: {openingTime}–{closingTime}": "Ma–Pe: {openingTime}-{closingTime}",
"Multi-room booking is not available with reward night.": "Usean huoneen varaus ei ole saatavilla palkintoyönä.", "Multi-room booking is not available with reward night.": "Usean huoneen varaus ei ole saatavilla palkintoyönä.",
"Multi-room booking is not available with this booking code.": "Usean huoneen varaus ei ole käytettävissä tällä varauskoodilla.", "Multi-room booking is not available with this booking code.": "Usean huoneen varaus ei ole käytettävissä tällä varauskoodilla.",
"Museum": "Museo", "Museum": "Museo",
@@ -643,8 +644,8 @@
"SAS EuroBonus": "SAS EuroBonus", "SAS EuroBonus": "SAS EuroBonus",
"SF points to receive": "SF points to receive", "SF points to receive": "SF points to receive",
"Saturday": "Lauantai", "Saturday": "Lauantai",
"Sat–Sun: Always open": "La–Su: Aina auki", "Saturday–Sunday: Always open": "Lauantai–Sunnuntai: Aina auki",
"Sat–Sun: {openingTime}–{closingTime}": "La–Su: {openingTime}–{closingTime}", "Saturday–Sunday: {openingTime}–{closingTime}": "Lauantai–Sunnuntai: {openingTime}–{closingTime}",
"Sauna": "Sauna", "Sauna": "Sauna",
"Sauna and gym": "Sauna and gym", "Sauna and gym": "Sauna and gym",
"Save": "Tallenna", "Save": "Tallenna",

9
apps/scandic-web/i18n/dictionaries/no.json
View File

@@ -435,6 +435,7 @@
"Max {max, plural, one {{range} guest} other {{range} guests}}": "Maks {max, plural, one {{range} gjest} other {{range} gjester}}", "Max {max, plural, one {{range} guest} other {{range} guests}}": "Maks {max, plural, one {{range} gjest} other {{range} gjester}}",
"Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}", "Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
"Meetings & Conferences": "Møter & Konferanser", "Meetings & Conferences": "Møter & Konferanser",
"Meetings, Conferences & Events": "Møter, Konferanser & Arrangementer",
"Member Since: {value}": "Member Since: {value}", "Member Since: {value}": "Member Since: {value}",
"Member discount": "Member discount", "Member discount": "Member discount",
"Member no. {nr}": "Medlemsnummer {nr}", "Member no. {nr}": "Medlemsnummer {nr}",
@@ -456,9 +457,9 @@
"Modify dates": "Endre datoer", "Modify dates": "Endre datoer",
"Modify guest details": "Endre gjestdetaljer", "Modify guest details": "Endre gjestdetaljer",
"Monday": "Mandag", "Monday": "Mandag",
"Monday–Friday: Always open": "Mandag–Fredag: Alltid åpen",
"Monday–Friday: {openingTime}–{closingTime}": "Mandag–Fredag: {openingTime}–{closingTime}",
"Month": "Måned", "Month": "Måned",
"Mon–Fri: Always open": "Man–Fre: Alltid åpen",
"Mon–Fri: {openingTime}–{closingTime}": "Man–Fre: {openingTime}–{closingTime}",
"Multi-room booking is not available with reward night.": "Multi-rom booking er ikke tilgjengelig med belønning natt.", "Multi-room booking is not available with reward night.": "Multi-rom booking er ikke tilgjengelig med belønning natt.",
"Multi-room booking is not available with this booking code.": "Bestilling av flere rom er ikke tilgjengelig med denne bestillingskoden.", "Multi-room booking is not available with this booking code.": "Bestilling av flere rom er ikke tilgjengelig med denne bestillingskoden.",
"Museum": "Museum", "Museum": "Museum",
@@ -640,8 +641,8 @@
"SAS EuroBonus": "SAS EuroBonus", "SAS EuroBonus": "SAS EuroBonus",
"SF points to receive": "SF points to receive", "SF points to receive": "SF points to receive",
"Saturday": "Lørdag", "Saturday": "Lørdag",
"Sat–Sun: Always open": "Lør–Søn: Alltid åpen", "Saturday–Sunday: Always open": "Lørdag–Søndag: Alltid åpen",
"Sat–Sun: {openingTime}–{closingTime}": "Lør–Søn: {openingTime}–{closingTime}", "Saturday–Sunday: {openingTime}–{closingTime}": "Lørdag–Søndag: {openingTime}–{closingTime}",
"Sauna": "Badstue", "Sauna": "Badstue",
"Sauna and gym": "Sauna and gym", "Sauna and gym": "Sauna and gym",
"Save": "Lagre", "Save": "Lagre",

9
apps/scandic-web/i18n/dictionaries/sv.json
View File

@@ -435,6 +435,7 @@
"Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} gäst} other {{range} gäster}}", "Max {max, plural, one {{range} guest} other {{range} guests}}": "Max {max, plural, one {{range} gäst} other {{range} gäster}}",
"Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}", "Max. {max, plural, one {{range} guest} other {{range} guests}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
"Meetings & Conferences": "Möten & Konferenser", "Meetings & Conferences": "Möten & Konferenser",
"Meetings, Conferences & Events": "Möten, Konferenser & Evenemang",
"Member Since: {value}": "Member Since: {value}", "Member Since: {value}": "Member Since: {value}",
"Member discount": "Member discount", "Member discount": "Member discount",
"Member no. {nr}": "Medlemsnummer {nr}", "Member no. {nr}": "Medlemsnummer {nr}",
@@ -456,9 +457,9 @@
"Modify dates": "Ändra datum", "Modify dates": "Ändra datum",
"Modify guest details": "Ändra gästinformation", "Modify guest details": "Ändra gästinformation",
"Monday": "Måndag", "Monday": "Måndag",
"Monday–Friday: Always open": "Måndag–Fredag: Alltid öppet",
"Monday–Friday: {openingTime}–{closingTime}": "Måndag–Fredag: {openingTime}–{closingTime}",
"Month": "Månad", "Month": "Månad",
"Mon–Fri: Always open": "Mån–Fre: Alltid öppet",
"Mon–Fri: {openingTime}–{closingTime}": "Mån–Fre: {openingTime}–{closingTime}",
"Multi-room booking is not available with reward night.": "Flerrumsbokning är inte tillgänglig med belöningsnatt.", "Multi-room booking is not available with reward night.": "Flerrumsbokning är inte tillgänglig med belöningsnatt.",
"Multi-room booking is not available with this booking code.": "Flerrumsbokning är inte tillgänglig med denna bokningskod.", "Multi-room booking is not available with this booking code.": "Flerrumsbokning är inte tillgänglig med denna bokningskod.",
"Museum": "Museum", "Museum": "Museum",
@@ -641,8 +642,8 @@
"SAS EuroBonus": "SAS EuroBonus", "SAS EuroBonus": "SAS EuroBonus",
"SF points to receive": "SF points to receive", "SF points to receive": "SF points to receive",
"Saturday": "Lördag", "Saturday": "Lördag",
"Sat–Sun: Always open": "Lör–Sön: Alltid öppet", "Saturday–Sunday: Always open": "Lördag–Söndag: Alltid öppet",
"Sat–Sun: {openingTime}–{closingTime}": "Lör–Sön: {openingTime}–{closingTime}", "Saturday–Sunday: {openingTime}–{closingTime}": "Lördag–Söndag: {openingTime}–{closingTime}",
"Sauna": "Bastu", "Sauna": "Bastu",
"Sauna and gym": "Sauna and gym", "Sauna and gym": "Sauna and gym",
"Save": "Spara", "Save": "Spara",