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

fix(SW-2029): Opening hours styling

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-03-27 07:06:39 +00:00
parent d35a492c8d
commit 1429f7ec32
9 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
View File

@@ -22,7 +22,6 @@ export default async function BreakfastAmenity({
openingHours={openingHours!} openingHours={openingHours!}
alternateOpeningHours={alternateOpeningHours!} alternateOpeningHours={alternateOpeningHours!}
heading={intl.formatMessage({ id: "Opening hours" })} heading={intl.formatMessage({ id: "Opening hours" })}
type="amenities"
/> />
) )

25
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx
View File

@@ -1,10 +1,11 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import ButtonLink from "@/components/ButtonLink" import ButtonLink from "@/components/ButtonLink"
import { OpenInNewSmallIcon } from "@/components/Icons" import { OpenInNewSmallIcon } from "@/components/Icons"
import Image from "@/components/Image" import Image from "@/components/Image"
import OpeningHours from "@/components/OpeningHours" import OpeningHours from "@/components/OpeningHours"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./restaurantBarItem.module.css" import styles from "./restaurantBarItem.module.css"
@@ -31,9 +32,9 @@ export default async function RestaurantBarItem({
return ( return (
<div className={styles.restaurantBarItem}> <div className={styles.restaurantBarItem}>
<div className={styles.stickyHeading}> <div className={styles.stickyHeading}>
<Subtitle type="one" color="burgundy" asChild> <Typography variant="Title/Subtitle/lg">
<h3>{name}</h3> <h3 className={styles.heading}>{name}</h3>
</Subtitle> </Typography>
</div> </div>
{visibleImages.length ? ( {visibleImages.length ? (
<div className={styles.imageWrapper}> <div className={styles.imageWrapper}>
@@ -52,9 +53,11 @@ export default async function RestaurantBarItem({
<Body>{content.texts.descriptions.short}</Body> <Body>{content.texts.descriptions.short}</Body>
{openingDetails.length ? ( {openingDetails.length ? (
<div className={styles.content}> <div className={styles.content}>
<Subtitle type="two" asChild> <Typography variant="Title/Subtitle/md">
<h4>{intl.formatMessage({ id: "Opening hours" })}</h4> <h4 className={styles.text}>
</Subtitle> {intl.formatMessage({ id: "Opening hours" })}
</h4>
</Typography>
{openingDetails.map((details) => ( {openingDetails.map((details) => (
<OpeningHours <OpeningHours
key={details.openingHours.name} key={details.openingHours.name}
@@ -66,9 +69,11 @@ export default async function RestaurantBarItem({
) : null} ) : null}
{menus.length ? ( {menus.length ? (
<div className={styles.content}> <div className={styles.content}>
<Subtitle type="two" asChild> <Typography variant="Title/Subtitle/md">
<h4>{intl.formatMessage({ id: "Menus" })}</h4> <h4 className={styles.text}>
</Subtitle> {intl.formatMessage({ id: "Menus" })}
</h4>
</Typography>
<ul className={styles.menuList}> <ul className={styles.menuList}>
{menus.map(({ name, url }) => ( {menus.map(({ name, url }) => (
<li key={name}> <li key={name}>

19
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css
View File

@@ -1,6 +1,6 @@
.restaurantBarItem { .restaurantBarItem {
display: grid; display: grid;
gap: var(--Spacing-x3); gap: var(--Space-x3);
} }
.stickyHeading { .stickyHeading {
@@ -11,7 +11,7 @@
.stickyHeading::before { .stickyHeading::before {
content: ""; content: "";
position: absolute; position: absolute;
margin-top: calc(-1 * var(--Spacing-x4)); margin-top: calc(-1 * var(--Space-x4));
background-color: var(--Base-Background-Primary-Normal); background-color: var(--Base-Background-Primary-Normal);
z-index: -1; z-index: -1;
width: 100%; width: 100%;
@@ -22,7 +22,7 @@
.imageWrapper { .imageWrapper {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x2); gap: var(--Space-x2);
} }
.image { .image {
@@ -34,16 +34,23 @@
.content { .content {
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x15);
} }
.menuList { .menuList {
list-style: none; list-style: none;
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x1);
} }
.ctaWrapper { .ctaWrapper {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Space-x2);
}
.text {
color: var(--Text-Default);
}
.heading {
color: var(--Text-Interactive-Default);
} }

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

@@ -1,5 +1,6 @@
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getGroupedOpeningHours } from "../utils" import { getGroupedOpeningHours } from "../utils"
@@ -23,34 +24,30 @@ export default async function AlternateOpeningHours({
// If there are alternate hours but no grouped hours with length, we return the name of the alternate hours // If there are alternate hours but no grouped hours with length, we return the name of the alternate hours
if (!groupedAlternateOpeningHours?.length) { if (!groupedAlternateOpeningHours?.length) {
return ( return (
<Typography <Typography variant="Body/Supporting text (caption)/smRegular">
variant="Body/Supporting text (caption)/smRegular" <p className={styles.caption}>{alternateOpeningHours.name}</p>
className={styles.caption}
>
<p>{alternateOpeningHours.name}</p>
</Typography> </Typography>
) )
} }
return ( return (
<> <>
<Typography variant="Body/Paragraph/mdBold" className={styles.text}> <Divider color="Border/Divider/Default" />
<h5> <Typography variant="Body/Paragraph/mdBold">
<h5 className={styles.heading}>
{intl.formatMessage( {intl.formatMessage(
{ id: "Alternate opening hours ({name})" }, { id: "Alternate opening hours ({name})" },
{ name: alternateOpeningHours.name } { name: alternateOpeningHours.name }
)} )}
</h5> </h5>
</Typography> </Typography>
<Typography variant="Body/Paragraph/mdRegular">
<div className={styles.text}>
{groupedAlternateOpeningHours.map((groupedOpeningHour) => ( {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
<Typography <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
variant="Body/Paragraph/mdRegular"
className={styles.text}
key={groupedOpeningHour}
>
<p>{groupedOpeningHour}</p>
</Typography>
))} ))}
</div>
</Typography>
</> </>
) )
} }

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

@@ -2,6 +2,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import Divider from "../TempDesignSystem/Divider"
import AlternateOpeningHours from "./AlternateOpeningHours" import AlternateOpeningHours from "./AlternateOpeningHours"
import { getGroupedOpeningHours } from "./utils" import { getGroupedOpeningHours } from "./utils"
@@ -13,28 +14,24 @@ export default async function OpeningHours({
openingHours, openingHours,
alternateOpeningHours, alternateOpeningHours,
heading, heading,
type = "default",
}: OpeningHoursProps) { }: OpeningHoursProps) {
const intl = await getIntl() const intl = await getIntl()
const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl) const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl)
return ( return (
<div className={type === "default" ? styles.wrapper : ""}> <div className={styles.wrapper}>
<Typography variant="Body/Paragraph/mdBold" className={styles.text}> <Typography variant="Title/Overline/sm">
<h5>{heading ?? openingHours.name}</h5> <h5 className={styles.heading}>{heading ?? openingHours.name}</h5>
</Typography> </Typography>
{groupedOpeningHours.map((groupedOpeningHour) => { <Divider color="Border/Divider/Default" />
return (
<Typography <Typography variant="Body/Paragraph/mdRegular">
variant="Body/Paragraph/mdRegular" <div className={styles.text}>
className={styles.text} {groupedOpeningHours.map((groupedOpeningHour) => (
key={groupedOpeningHour} <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
> ))}
<p>{groupedOpeningHour}</p> </div>
</Typography> </Typography>
)
})}
{alternateOpeningHours ? ( {alternateOpeningHours ? (
<AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} /> <AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} />
) : null} ) : null}

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

@@ -1,6 +1,13 @@
.wrapper { .wrapper {
display: grid; display: grid;
gap: var(--Spacing-x-half); padding: var(--Space-x2) var(--Space-x3);
gap: var(--Space-x1);
border-radius: var(--Corner-radius-Medium);
background: var(--Surface-Secondary-Default);
}
.heading {
color: var(--Text-Secondary);
} }
.caption { .caption {

4
apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css
View File

@@ -55,3 +55,7 @@
.baseSurfaceSubtleHover { .baseSurfaceSubtleHover {
background-color: var(--Base-Surface-Subtle-Hover); background-color: var(--Base-Surface-Subtle-Hover);
} }
.Border-Divider-Default {
background-color: var(--Border-Divider-Default);
}

1
apps/scandic-web/components/TempDesignSystem/Divider/variants.ts
View File

@@ -14,6 +14,7 @@ export const dividerVariants = cva(styles.divider, {
subtle: styles.subtle, subtle: styles.subtle,
white: styles.white, white: styles.white,
baseSurfaceSubtleHover: styles.baseSurfaceSubtleHover, baseSurfaceSubtleHover: styles.baseSurfaceSubtleHover,
"Border/Divider/Default": styles["Border-Divider-Default"],
}, },
opacity: { opacity: {
100: styles.opacity100, 100: styles.opacity100,

1
apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts
View File

@@ -4,5 +4,4 @@ export interface OpeningHoursProps {
openingHours: RestaurantOpeningHours openingHours: RestaurantOpeningHours
alternateOpeningHours?: RestaurantOpeningHours alternateOpeningHours?: RestaurantOpeningHours
heading?: string heading?: string
type?: "amenities" | "default"
} }