Merged in feat/SW-1951 (pull request #1575)
Feat(SW-1951): Fix heading styling bug in hotel subpages Approved-by: Erik Tiekstra
This commit is contained in:
@@ -46,7 +46,7 @@ export default async function IntroSection({
|
||||
<BiroScript tilted="medium" color="red">
|
||||
{intl.formatMessage({ id: "Welcome to" })}
|
||||
</BiroScript>
|
||||
<Typography variant="Title/lg">
|
||||
<Typography variant="Title/lg" className={styles.title}>
|
||||
<h1>{hotelName}</h1>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -38,9 +38,9 @@ export default async function Facility({ data }: FacilityProps) {
|
||||
<div className={styles.openingHours}>
|
||||
<Body color="uiTextHighContrast">
|
||||
{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) {
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">
|
||||
{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,
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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("<p></p>\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 <br />
|
||||
}
|
||||
}
|
||||
parentIdx++
|
||||
},
|
||||
})
|
||||
return <div>{parsedContent}</div>
|
||||
}
|
||||
|
||||
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 (
|
||||
<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:
|
||||
return (
|
||||
<Typography
|
||||
key={domNode.name + idx}
|
||||
variant="Title/xs"
|
||||
className={styles.heading}
|
||||
>
|
||||
<domNode.name>{renderChildren(domNode)}</domNode.name>
|
||||
</Typography>
|
||||
)
|
||||
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:
|
||||
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:
|
||||
return <br />
|
||||
return <br key={domNode.name + idx} />
|
||||
|
||||
case NodeNames.a:
|
||||
console.log(domNode.attribs.target)
|
||||
return (
|
||||
<Link
|
||||
key={domNode.name + idx}
|
||||
color="peach80"
|
||||
textDecoration="underline"
|
||||
weight="bold"
|
||||
@@ -71,6 +116,7 @@ function renderNode(domNode: Node) {
|
||||
}
|
||||
return (
|
||||
<ul
|
||||
key={domNode.name + idx}
|
||||
className={styles.ul}
|
||||
style={
|
||||
numberOfRows
|
||||
@@ -92,6 +138,7 @@ function renderNode(domNode: Node) {
|
||||
}
|
||||
return (
|
||||
<ol
|
||||
key={domNode.name + idx}
|
||||
className={styles.ol}
|
||||
style={
|
||||
numberOfOlRows
|
||||
@@ -106,29 +153,41 @@ function renderNode(domNode: Node) {
|
||||
)
|
||||
|
||||
case NodeNames.li:
|
||||
return <li>{renderChildren(domNode)}</li>
|
||||
return <li key={domNode.name + idx}>{renderChildren(domNode)}</li>
|
||||
|
||||
case NodeNames.td:
|
||||
return <Table.TD>{renderChildren(domNode)}</Table.TD>
|
||||
return (
|
||||
<Table.TD key={domNode.name + idx}>
|
||||
{renderChildren(domNode)}
|
||||
</Table.TD>
|
||||
)
|
||||
|
||||
case NodeNames.th:
|
||||
return (
|
||||
<Table.TH>
|
||||
<Body color={"burgundy"} textTransform={"bold"}>
|
||||
<Typography className={styles.heading}>
|
||||
<Table.TH key={domNode.name + idx}>
|
||||
{renderChildren(domNode)}
|
||||
</Body>
|
||||
</Table.TH>
|
||||
</Table.TH>
|
||||
</Typography>
|
||||
)
|
||||
|
||||
case NodeNames.tr:
|
||||
return <Table.TR>{renderChildren(domNode)}</Table.TR>
|
||||
return (
|
||||
<Table.TR key={domNode.name + idx}>
|
||||
{renderChildren(domNode)}
|
||||
</Table.TR>
|
||||
)
|
||||
|
||||
case NodeNames.tbody:
|
||||
return <Table.TBody>{renderChildren(domNode)}</Table.TBody>
|
||||
return (
|
||||
<Table.TBody key={domNode.name + idx}>
|
||||
{renderChildren(domNode)}
|
||||
</Table.TBody>
|
||||
)
|
||||
|
||||
case NodeNames.table:
|
||||
return (
|
||||
<div className={styles.tableContainer}>
|
||||
<div key={domNode.name + idx} className={styles.tableContainer}>
|
||||
<Table>{renderChildren(domNode)}</Table>
|
||||
</div>
|
||||
)
|
||||
@@ -136,7 +195,13 @@ function renderNode(domNode: Node) {
|
||||
case NodeNames.p:
|
||||
return (
|
||||
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>
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<aside className={styles.sidebar}>
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Contact us" })}
|
||||
</Title>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Contact us" })}</h3>
|
||||
</Typography>
|
||||
<div className={styles.contactDetails}>
|
||||
<Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
|
||||
{country === Country.Finland ? (
|
||||
<Caption>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</Caption>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
{email && (
|
||||
<Link textDecoration="underline" href={`mailto:${email}`}>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
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 styles from "./sidebar.module.css"
|
||||
@@ -19,32 +18,48 @@ export default async function ParkingSidebar({ hotel }: HotelSidebarProps) {
|
||||
return (
|
||||
<aside className={styles.sidebar}>
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Address" })}
|
||||
</Title>
|
||||
<div>
|
||||
<Body color="uiTextHighContrast">{hotel.address.streetAddress}</Body>
|
||||
<Body color="uiTextHighContrast">
|
||||
{hotel.address.zipCode} {hotel.address.city}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{hotel.address.country}</Body>
|
||||
</div>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Address" })}</h3>
|
||||
</Typography>
|
||||
|
||||
<Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
|
||||
<div>
|
||||
<p>{hotel.address.streetAddress}</p>
|
||||
<p>
|
||||
{hotel.address.zipCode} {hotel.address.city}
|
||||
</p>
|
||||
<p> {hotel.address.country}</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Contact us" })}
|
||||
</Title>
|
||||
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
|
||||
{hotel.contactInformation.phoneNumber}
|
||||
</Link>
|
||||
{hotel.address.country === Country.Finland ? (
|
||||
<Caption>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</Caption>
|
||||
) : null}
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Contact us" })}</h3>
|
||||
</Typography>
|
||||
<div className={styles.contactDetails}>
|
||||
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
|
||||
{hotel.contactInformation.phoneNumber}
|
||||
</Link>
|
||||
{hotel.address.country === Country.Finland ? (
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
<Link
|
||||
textDecoration="underline"
|
||||
href={`mailto:${hotel.contactInformation.email}`}
|
||||
>
|
||||
{hotel.contactInformation.email}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { OpenInNewSmallIcon } from "@/components/Icons"
|
||||
import OpeningHours from "@/components/OpeningHours"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
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 styles from "./sidebar.module.css"
|
||||
@@ -30,9 +29,9 @@ export default async function RestaurantSidebar({
|
||||
<aside className={styles.sidebar}>
|
||||
{openingDetails.length ? (
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Opening hours" })}
|
||||
</Title>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Opening hours" })}</h3>
|
||||
</Typography>
|
||||
{openingDetails.map((details) => (
|
||||
<OpeningHours
|
||||
key={details.openingHours.name}
|
||||
@@ -54,9 +53,9 @@ export default async function RestaurantSidebar({
|
||||
)}
|
||||
{restaurant.menus.length ? (
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Menus" })}
|
||||
</Title>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Menus" })}</h3>
|
||||
</Typography>
|
||||
<ul className={styles.menuList}>
|
||||
{restaurant.menus.map(({ name, url }) => (
|
||||
<li key={name}>
|
||||
@@ -75,29 +74,36 @@ export default async function RestaurantSidebar({
|
||||
</div>
|
||||
) : null}
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Address" })}
|
||||
</Title>
|
||||
<div>
|
||||
<Body color="uiTextHighContrast">{address.streetAddress}</Body>
|
||||
<Body color="uiTextHighContrast">{`${address.zipCode} ${address.city}`}</Body>
|
||||
</div>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Address" })}</h3>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
|
||||
<div>
|
||||
<p>{address.streetAddress}</p>
|
||||
<p>{`${address.zipCode} ${address.city}`}</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
{(phoneNumber || email) && (
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Contact us" })}
|
||||
</Title>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Contact us" })}</h3>
|
||||
</Typography>
|
||||
<div className={styles.contactDetails}>
|
||||
{phoneNumber && (
|
||||
<>
|
||||
<Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
|
||||
{address.country === Country.Finland ? (
|
||||
<Caption>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</Caption>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
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 { translateWellnessType } from "../../HotelPage/utils"
|
||||
@@ -22,73 +20,93 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) {
|
||||
return (
|
||||
<aside className={styles.sidebar}>
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Opening hours" })}
|
||||
</Title>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Opening hours" })}</h3>
|
||||
</Typography>
|
||||
{hotel.healthFacilities.map((facility) => (
|
||||
<div key={facility.type}>
|
||||
<Subtitle type="two" color="uiTextHighContrast" asChild>
|
||||
<Typography variant="Title/Subtitle/md" className={styles.text}>
|
||||
<h4>{translateWellnessType(facility.type, intl)}</h4>
|
||||
</Subtitle>
|
||||
<Body color="uiTextHighContrast">
|
||||
{facility.openingDetails.openingHours.ordinary.alwaysOpen
|
||||
? intl.formatMessage({ id: "Mon–Fri: Always open" })
|
||||
: intl.formatMessage(
|
||||
{ id: "Mon–Fri: {openingTime}–{closingTime}" },
|
||||
{
|
||||
openingTime:
|
||||
facility.openingDetails.openingHours.ordinary
|
||||
.openingTime,
|
||||
closingTime:
|
||||
facility.openingDetails.openingHours.ordinary
|
||||
.closingTime,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">
|
||||
{facility.openingDetails.openingHours.weekends.alwaysOpen
|
||||
? intl.formatMessage({ id: "Sat–Sun: Always open" })
|
||||
: intl.formatMessage(
|
||||
{ id: "Sat–Sun: {openingTime}–{closingTime}" },
|
||||
{
|
||||
openingTime:
|
||||
facility.openingDetails.openingHours.weekends
|
||||
.openingTime,
|
||||
closingTime:
|
||||
facility.openingDetails.openingHours.weekends
|
||||
.closingTime,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
{facility.openingDetails.openingHours.ordinary.alwaysOpen
|
||||
? intl.formatMessage({ id: "Monday–Friday: Always open" })
|
||||
: intl.formatMessage(
|
||||
{ id: "Monday–Friday: {openingTime}–{closingTime}" },
|
||||
{
|
||||
openingTime:
|
||||
facility.openingDetails.openingHours.ordinary
|
||||
.openingTime,
|
||||
closingTime:
|
||||
facility.openingDetails.openingHours.ordinary
|
||||
.closingTime,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{facility.openingDetails.openingHours.weekends.alwaysOpen
|
||||
? intl.formatMessage({ id: "Saturday–Sunday: Always open" })
|
||||
: intl.formatMessage(
|
||||
{ id: "Saturday–Sunday: {openingTime}–{closingTime}" },
|
||||
{
|
||||
openingTime:
|
||||
facility.openingDetails.openingHours.weekends
|
||||
.openingTime,
|
||||
closingTime:
|
||||
facility.openingDetails.openingHours.weekends
|
||||
.closingTime,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Address" })}
|
||||
</Title>
|
||||
<div>
|
||||
<Body color="uiTextHighContrast">{hotel.address.streetAddress}</Body>
|
||||
<Body color="uiTextHighContrast">
|
||||
{hotel.address.zipCode} {hotel.address.city}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{hotel.address.country}</Body>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Address" })}</h3>
|
||||
</Typography>
|
||||
<div className={styles.contactDetails}>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
>
|
||||
<div>
|
||||
<p>{hotel.address.streetAddress}</p>
|
||||
<p>
|
||||
{hotel.address.zipCode} {hotel.address.city}
|
||||
</p>
|
||||
<p> {hotel.address.country}</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
<Title level="h3" as="h4">
|
||||
{intl.formatMessage({ id: "Contact us" })}
|
||||
</Title>
|
||||
<Typography variant="Title/xs" className={styles.heading}>
|
||||
<h3>{intl.formatMessage({ id: "Contact us" })}</h3>
|
||||
</Typography>
|
||||
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
|
||||
{hotel.contactInformation.phoneNumber}
|
||||
</Link>
|
||||
{hotel.address.country === Country.Finland ? (
|
||||
<Caption>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</Caption>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "Price 0,16 €/min + local call charges",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -23,6 +23,14 @@
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--Text-Heading);
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
@media (min-width: 1367px) {
|
||||
.sidebar {
|
||||
grid-column: 2;
|
||||
|
||||
@@ -51,6 +51,14 @@
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--Text-Heading);
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
@media (min-width: 1367px) {
|
||||
.hotelSubpage {
|
||||
padding-bottom: var(--Spacing-x9);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import {
|
||||
getHotel,
|
||||
getHotelPage,
|
||||
@@ -12,8 +14,6 @@ import Hero from "@/components/Hero"
|
||||
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
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 { getLang } from "@/i18n/serverContext"
|
||||
import { safeTry } from "@/utils/safeTry"
|
||||
@@ -91,9 +91,9 @@ export default async function HotelSubpage({
|
||||
</div>
|
||||
|
||||
<div className={styles.contentContainer}>
|
||||
<Title as="h2" level="h1">
|
||||
{pageData.heading}
|
||||
</Title>
|
||||
<Typography variant="Title/md" className={styles.heading}>
|
||||
<h1>{pageData.heading}</h1>
|
||||
</Typography>
|
||||
|
||||
<HotelSubpageSidebar
|
||||
subpage={subpage}
|
||||
@@ -106,7 +106,9 @@ export default async function HotelSubpage({
|
||||
<main className={styles.mainContent}>
|
||||
{pageData.elevatorPitch && (
|
||||
<div className={styles.intro}>
|
||||
<Preamble>{pageData.elevatorPitch}</Preamble>
|
||||
<Typography variant="Body/Lead text" className={styles.text}>
|
||||
<p>{pageData.elevatorPitch}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./openingHours.module.css"
|
||||
@@ -95,20 +95,27 @@ export default async function OpeningHours({
|
||||
|
||||
return (
|
||||
<div className={type === "default" ? styles.wrapper : ""}>
|
||||
<Body textTransform="bold" asChild>
|
||||
<Typography variant="Body/Paragraph/mdBold" className={styles.text}>
|
||||
<h5>{heading ?? openingHours.name}</h5>
|
||||
</Body>
|
||||
</Typography>
|
||||
{groupedOpeningHours.map((groupedOpeningHour) => {
|
||||
return (
|
||||
<Body color="uiTextHighContrast" key={groupedOpeningHour}>
|
||||
{groupedOpeningHour}
|
||||
</Body>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.text}
|
||||
key={groupedOpeningHour}
|
||||
>
|
||||
<p>{groupedOpeningHour}</p>
|
||||
</Typography>
|
||||
)
|
||||
})}
|
||||
{alternateOpeningHours?.name ? (
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{alternateOpeningHours.name}
|
||||
</Caption>
|
||||
<Typography
|
||||
variant="Body/Supporting text (caption)/smRegular"
|
||||
className={styles.caption}
|
||||
>
|
||||
<p>{alternateOpeningHours.name}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -2,3 +2,11 @@
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
@@ -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}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
|
||||
"Meetings & Conferences": "Møder & Konferencer",
|
||||
"Meetings, Conferences & Events": "Møder, Konferencer & Arrangementer",
|
||||
"Member Since: {value}": "Member Since: {value}",
|
||||
"Member discount": "Member discount",
|
||||
"Member no. {nr}": "Medlemsnummer {nr}",
|
||||
@@ -457,9 +458,9 @@
|
||||
"Modify dates": "Modify dates",
|
||||
"Modify guest details": "Ændre gæstdetaljer",
|
||||
"Monday": "Mandag",
|
||||
"Monday–Friday: {openingTime}–{closingTime}": "Mandag–Fredag: {openingTime}–{closingTime}",
|
||||
"Monday–Friday: {openingTime}–{closingTime}: Always open": "Mandag–Fredag: Altid åben",
|
||||
"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 this booking code.": "Multi-værelse booking er ikke tilgængelig med denne reservationskode.",
|
||||
"Museum": "Museum",
|
||||
@@ -644,8 +645,8 @@
|
||||
"SAS EuroBonus": "SAS EuroBonus",
|
||||
"SF points to receive": "SF points to receive",
|
||||
"Saturday": "Lørdag",
|
||||
"Sat–Sun: Always open": "Lør–Søn: Altid åben",
|
||||
"Sat–Sun: {openingTime}–{closingTime}": "Lør–Søn: {openingTime}–{closingTime}",
|
||||
"Saturday–Sunday: Always open": "Lørdag–Søndag: Altid åben",
|
||||
"Saturday–Sunday: {openingTime}–{closingTime}": "Lørdag–Søndag: {openingTime}–{closingTime}",
|
||||
"Sauna": "Sauna",
|
||||
"Sauna and gym": "Sauna and gym",
|
||||
"Save": "Gemme",
|
||||
|
||||
@@ -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} guest} other {{range} guests}}",
|
||||
"Meetings & Conferences": "Tagungen & Konferenzen",
|
||||
"Meetings, Conferences & Events": "Møder, Konferencer & Arrangementer",
|
||||
"Member Since: {value}": "Member Since: {value}",
|
||||
"Member discount": "Member discount",
|
||||
"Member no. {nr}": "Mitgliedsnummer {nr}",
|
||||
@@ -458,9 +459,9 @@
|
||||
"Modify dates": "Ändra datum",
|
||||
"Modify guest details": "Gastdetails ändern",
|
||||
"Monday": "Montag",
|
||||
"Monday–Friday: Always open": "Montag–Fretag: Immer geöffnet",
|
||||
"Monday–Friday: {openingTime}–{closingTime}": "Montag–Fretag: {openingTime}–{closingTime}",
|
||||
"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 this booking code.": "Mehrzimmerbuchungen sind mit diesem Buchungscode nicht möglich.",
|
||||
"Museum": "Museum",
|
||||
@@ -643,8 +644,8 @@
|
||||
"SAS EuroBonus": "SAS EuroBonus",
|
||||
"SF points to receive": "SF points to receive",
|
||||
"Saturday": "Samstag",
|
||||
"Sat–Sun: Always open": "Sa–So: Immer geöffnet",
|
||||
"Sat–Sun: {openingTime}–{closingTime}": "Sa–So: {openingTime}–{closingTime}",
|
||||
"Saturday–Sunday: Always open": "Samstag–Sonntag: Immer geöffnet",
|
||||
"Saturday–Sunday: {openingTime}–{closingTime}": "Samstag–Sonntag: {openingTime}–{closingTime}",
|
||||
"Sauna": "Sauna",
|
||||
"Sauna and gym": "Sauna and gym",
|
||||
"Save": "Speichern",
|
||||
|
||||
@@ -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}}",
|
||||
"Meetings & Conferences": "Meetings & Conferences",
|
||||
"Meetings, Conferences & Events": "Meetings, Conferences & Events",
|
||||
"Member Since: {value}": "Member Since: {value}",
|
||||
"Member discount": "Member discount",
|
||||
"Member no. {nr}": "Member no. {nr}",
|
||||
@@ -456,9 +457,9 @@
|
||||
"Modify dates": "Modify dates",
|
||||
"Modify guest details": "Modify guest details",
|
||||
"Monday": "Monday",
|
||||
"Monday–Friday: Always open": "Monday–Friday: Always open",
|
||||
"Monday–Friday: {openingTime}–{closingTime}": "Monday–Friday: {openingTime}–{closingTime}",
|
||||
"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 this booking code.": "Multi-room booking is not available with this booking code.",
|
||||
"Museum": "Museum",
|
||||
@@ -642,8 +643,8 @@
|
||||
"SAS EuroBonus": "SAS EuroBonus",
|
||||
"SF points to receive": "SF points to receive",
|
||||
"Saturday": "Saturday",
|
||||
"Sat–Sun: Always open": "Sat–Sun: Always open",
|
||||
"Sat–Sun: {openingTime}–{closingTime}": "Sat–Sun: {openingTime}–{closingTime}",
|
||||
"Saturday–Sunday: Always open": "Saturday–Sunday: Always open",
|
||||
"Saturday–Sunday: {openingTime}–{closingTime}": "Saturday–Sunday: {openingTime}–{closingTime}",
|
||||
"Sauna": "Sauna",
|
||||
"Sauna and gym": "Sauna and gym",
|
||||
"Save": "Save",
|
||||
|
||||
@@ -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} guest} other {{range} guests}}",
|
||||
"Meetings & Conferences": "Kokoukset & Konferenssit",
|
||||
"Meetings, Conferences & Events": "Tagungen, Konferenzen & Veranstaltungen",
|
||||
"Member Since: {value}": "Member Since: {value}",
|
||||
"Member discount": "Member discount",
|
||||
"Member no. {nr}": "Jäsenyysnumero {nr}",
|
||||
@@ -457,9 +458,9 @@
|
||||
"Modify dates": "Muuta päivämääriä",
|
||||
"Modify guest details": "Muuta vierailijoiden tietoja",
|
||||
"Monday": "Maanantai",
|
||||
"Monday–Friday: Always open": "Maanantai–Perjantai: Aina auki",
|
||||
"Monday–Friday: {openingTime}–{closingTime}": "Maanantai–Perjantai: {openingTime}-{closingTime}",
|
||||
"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 this booking code.": "Usean huoneen varaus ei ole käytettävissä tällä varauskoodilla.",
|
||||
"Museum": "Museo",
|
||||
@@ -643,8 +644,8 @@
|
||||
"SAS EuroBonus": "SAS EuroBonus",
|
||||
"SF points to receive": "SF points to receive",
|
||||
"Saturday": "Lauantai",
|
||||
"Sat–Sun: Always open": "La–Su: Aina auki",
|
||||
"Sat–Sun: {openingTime}–{closingTime}": "La–Su: {openingTime}–{closingTime}",
|
||||
"Saturday–Sunday: Always open": "Lauantai–Sunnuntai: Aina auki",
|
||||
"Saturday–Sunday: {openingTime}–{closingTime}": "Lauantai–Sunnuntai: {openingTime}–{closingTime}",
|
||||
"Sauna": "Sauna",
|
||||
"Sauna and gym": "Sauna and gym",
|
||||
"Save": "Tallenna",
|
||||
|
||||
@@ -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}}": "Max. {max, plural, one {{range} guest} other {{range} guests}}",
|
||||
"Meetings & Conferences": "Møter & Konferanser",
|
||||
"Meetings, Conferences & Events": "Møter, Konferanser & Arrangementer",
|
||||
"Member Since: {value}": "Member Since: {value}",
|
||||
"Member discount": "Member discount",
|
||||
"Member no. {nr}": "Medlemsnummer {nr}",
|
||||
@@ -456,9 +457,9 @@
|
||||
"Modify dates": "Endre datoer",
|
||||
"Modify guest details": "Endre gjestdetaljer",
|
||||
"Monday": "Mandag",
|
||||
"Monday–Friday: Always open": "Mandag–Fredag: Alltid åpen",
|
||||
"Monday–Friday: {openingTime}–{closingTime}": "Mandag–Fredag: {openingTime}–{closingTime}",
|
||||
"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 this booking code.": "Bestilling av flere rom er ikke tilgjengelig med denne bestillingskoden.",
|
||||
"Museum": "Museum",
|
||||
@@ -640,8 +641,8 @@
|
||||
"SAS EuroBonus": "SAS EuroBonus",
|
||||
"SF points to receive": "SF points to receive",
|
||||
"Saturday": "Lørdag",
|
||||
"Sat–Sun: Always open": "Lør–Søn: Alltid åpen",
|
||||
"Sat–Sun: {openingTime}–{closingTime}": "Lør–Søn: {openingTime}–{closingTime}",
|
||||
"Saturday–Sunday: Always open": "Lørdag–Søndag: Alltid åpen",
|
||||
"Saturday–Sunday: {openingTime}–{closingTime}": "Lørdag–Søndag: {openingTime}–{closingTime}",
|
||||
"Sauna": "Badstue",
|
||||
"Sauna and gym": "Sauna and gym",
|
||||
"Save": "Lagre",
|
||||
|
||||
@@ -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} guest} other {{range} guests}}",
|
||||
"Meetings & Conferences": "Möten & Konferenser",
|
||||
"Meetings, Conferences & Events": "Möten, Konferenser & Evenemang",
|
||||
"Member Since: {value}": "Member Since: {value}",
|
||||
"Member discount": "Member discount",
|
||||
"Member no. {nr}": "Medlemsnummer {nr}",
|
||||
@@ -456,9 +457,9 @@
|
||||
"Modify dates": "Ändra datum",
|
||||
"Modify guest details": "Ändra gästinformation",
|
||||
"Monday": "Måndag",
|
||||
"Monday–Friday: Always open": "Måndag–Fredag: Alltid öppet",
|
||||
"Monday–Friday: {openingTime}–{closingTime}": "Måndag–Fredag: {openingTime}–{closingTime}",
|
||||
"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 this booking code.": "Flerrumsbokning är inte tillgänglig med denna bokningskod.",
|
||||
"Museum": "Museum",
|
||||
@@ -641,8 +642,8 @@
|
||||
"SAS EuroBonus": "SAS EuroBonus",
|
||||
"SF points to receive": "SF points to receive",
|
||||
"Saturday": "Lördag",
|
||||
"Sat–Sun: Always open": "Lör–Sön: Alltid öppet",
|
||||
"Sat–Sun: {openingTime}–{closingTime}": "Lör–Sön: {openingTime}–{closingTime}",
|
||||
"Saturday–Sunday: Always open": "Lördag–Söndag: Alltid öppet",
|
||||
"Saturday–Sunday: {openingTime}–{closingTime}": "Lördag–Söndag: {openingTime}–{closingTime}",
|
||||
"Sauna": "Bastu",
|
||||
"Sauna and gym": "Sauna and gym",
|
||||
"Save": "Spara",
|
||||
|
||||
Reference in New Issue
Block a user