From 1429f7ec32afdaa33e0e4680140ffd1c84131999 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 27 Mar 2025 07:06:39 +0000 Subject: [PATCH] fix(SW-2029): Opening hours styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../AccordionAmenities/Breakfast/index.tsx | 1 - .../RestaurantBar/RestaurantBarItem/index.tsx | 25 +++++++++------- .../restaurantBarItem.module.css | 19 ++++++++---- .../AlternateOpeningHours/index.tsx | 29 +++++++++---------- .../components/OpeningHours/index.tsx | 29 +++++++++---------- .../OpeningHours/openingHours.module.css | 9 +++++- .../Divider/divider.module.css | 4 +++ .../TempDesignSystem/Divider/variants.ts | 1 + .../hotelPage/sidepeek/openingHours.ts | 1 - 9 files changed, 67 insertions(+), 51 deletions(-) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx index d6a65ff1a..cff521b52 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx @@ -22,7 +22,6 @@ export default async function BreakfastAmenity({ openingHours={openingHours!} alternateOpeningHours={alternateOpeningHours!} heading={intl.formatMessage({ id: "Opening hours" })} - type="amenities" /> ) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx index b7476ee4d..5d3b0c09d 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx @@ -1,10 +1,11 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + import ButtonLink from "@/components/ButtonLink" import { OpenInNewSmallIcon } from "@/components/Icons" import Image from "@/components/Image" import OpeningHours from "@/components/OpeningHours" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { getIntl } from "@/i18n" import styles from "./restaurantBarItem.module.css" @@ -31,9 +32,9 @@ export default async function RestaurantBarItem({ return (
- -

{name}

- + +

{name}

+
{visibleImages.length ? (
@@ -52,9 +53,11 @@ export default async function RestaurantBarItem({ {content.texts.descriptions.short} {openingDetails.length ? (
- -

{intl.formatMessage({ id: "Opening hours" })}

- + +

+ {intl.formatMessage({ id: "Opening hours" })} +

+ {openingDetails.map((details) => ( - -

{intl.formatMessage({ id: "Menus" })}

- + +

+ {intl.formatMessage({ id: "Menus" })} +

+
    {menus.map(({ name, url }) => (
  • diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css index 49f893fef..afeff635e 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/restaurantBarItem.module.css @@ -1,6 +1,6 @@ .restaurantBarItem { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); } .stickyHeading { @@ -11,7 +11,7 @@ .stickyHeading::before { content: ""; position: absolute; - margin-top: calc(-1 * var(--Spacing-x4)); + margin-top: calc(-1 * var(--Space-x4)); background-color: var(--Base-Background-Primary-Normal); z-index: -1; width: 100%; @@ -22,7 +22,7 @@ .imageWrapper { display: flex; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .image { @@ -34,16 +34,23 @@ .content { display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x15); } .menuList { list-style: none; display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .ctaWrapper { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); +} + +.text { + color: var(--Text-Default); +} +.heading { + color: var(--Text-Interactive-Default); } diff --git a/apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx b/apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx index f670e40b0..72750e273 100644 --- a/apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx +++ b/apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx @@ -1,5 +1,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography" +import Divider from "@/components/TempDesignSystem/Divider" import { getIntl } from "@/i18n" 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 (!groupedAlternateOpeningHours?.length) { return ( - -

    {alternateOpeningHours.name}

    + +

    {alternateOpeningHours.name}

     ) } return ( <> - -
    + + +
    {intl.formatMessage( { id: "Alternate opening hours ({name})" }, { name: alternateOpeningHours.name } )}
    - {groupedAlternateOpeningHours.map((groupedOpeningHour) => ( - -

    {groupedOpeningHour}

    -     - ))} + +
    + {groupedAlternateOpeningHours.map((groupedOpeningHour) => ( +

    {groupedOpeningHour}

    + ))} +
    +     ) } diff --git a/apps/scandic-web/components/OpeningHours/index.tsx b/apps/scandic-web/components/OpeningHours/index.tsx index 5a2a162d5..a7d9fadff 100644 --- a/apps/scandic-web/components/OpeningHours/index.tsx +++ b/apps/scandic-web/components/OpeningHours/index.tsx @@ -2,6 +2,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import { getIntl } from "@/i18n" +import Divider from "../TempDesignSystem/Divider" import AlternateOpeningHours from "./AlternateOpeningHours" import { getGroupedOpeningHours } from "./utils" @@ -13,28 +14,24 @@ export default async function OpeningHours({ openingHours, alternateOpeningHours, heading, - type = "default", }: OpeningHoursProps) { const intl = await getIntl() - const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl) return ( -
    - -
    {heading ?? openingHours.name}
    +
    + +
    {heading ?? openingHours.name}
    +     + + + +
    + {groupedOpeningHours.map((groupedOpeningHour) => ( +

    {groupedOpeningHour}

    + ))} +
    - {groupedOpeningHours.map((groupedOpeningHour) => { - return ( - -

    {groupedOpeningHour}

    -     - ) - })} {alternateOpeningHours ? ( ) : null} diff --git a/apps/scandic-web/components/OpeningHours/openingHours.module.css b/apps/scandic-web/components/OpeningHours/openingHours.module.css index 72dda16c1..1890af83b 100644 --- a/apps/scandic-web/components/OpeningHours/openingHours.module.css +++ b/apps/scandic-web/components/OpeningHours/openingHours.module.css @@ -1,6 +1,13 @@ .wrapper { 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 { diff --git a/apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css b/apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css index c992bc096..82134e4e9 100644 --- a/apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css @@ -55,3 +55,7 @@ .baseSurfaceSubtleHover { background-color: var(--Base-Surface-Subtle-Hover); } + +.Border-Divider-Default { + background-color: var(--Border-Divider-Default); +} diff --git a/apps/scandic-web/components/TempDesignSystem/Divider/variants.ts b/apps/scandic-web/components/TempDesignSystem/Divider/variants.ts index 06b683e94..733e88a0e 100644 --- a/apps/scandic-web/components/TempDesignSystem/Divider/variants.ts +++ b/apps/scandic-web/components/TempDesignSystem/Divider/variants.ts @@ -14,6 +14,7 @@ export const dividerVariants = cva(styles.divider, { subtle: styles.subtle, white: styles.white, baseSurfaceSubtleHover: styles.baseSurfaceSubtleHover, + "Border/Divider/Default": styles["Border-Divider-Default"], }, opacity: { 100: styles.opacity100, diff --git a/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts b/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts index f12f7dbb5..d3890c2a5 100644 --- a/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts +++ b/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts @@ -4,5 +4,4 @@ export interface OpeningHoursProps { openingHours: RestaurantOpeningHours alternateOpeningHours?: RestaurantOpeningHours heading?: string - type?: "amenities" | "default" }