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:
Matilda Landström
@@ -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;
|
||||
|
||||
+4
-4
@@ -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,
|
||||
|
||||
+8
@@ -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>
|
||||
)
|
||||
|
||||
+30
-24
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user