fix(SW-2029): Opening hours styling

Approved-by: Matilda Landström
2025-03-27 07:06:39 +00:00
parent d35a492c8d
commit 1429f7ec32
9 changed files with 67 additions and 51 deletions
--- 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"
      />
    )

--- 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 (
    <div className={styles.restaurantBarItem}>
      <div className={styles.stickyHeading}>
-        <Subtitle type="one" color="burgundy" asChild>
-          <h3>{name}</h3>
-        </Subtitle>
+        <Typography variant="Title/Subtitle/lg">
+          <h3 className={styles.heading}>{name}</h3>
+        </Typography>
      </div>
      {visibleImages.length ? (
        <div className={styles.imageWrapper}>
@@ -52,9 +53,11 @@ export default async function RestaurantBarItem({
      <Body>{content.texts.descriptions.short}</Body>
      {openingDetails.length ? (
        <div className={styles.content}>
-          <Subtitle type="two" asChild>
-            <h4>{intl.formatMessage({ id: "Opening hours" })}</h4>
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <h4 className={styles.text}>
+              {intl.formatMessage({ id: "Opening hours" })}
+            </h4>
+          </Typography>
          {openingDetails.map((details) => (
            <OpeningHours
              key={details.openingHours.name}
@@ -66,9 +69,11 @@ export default async function RestaurantBarItem({
      ) : null}
      {menus.length ? (
        <div className={styles.content}>
-          <Subtitle type="two" asChild>
-            <h4>{intl.formatMessage({ id: "Menus" })}</h4>
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <h4 className={styles.text}>
+              {intl.formatMessage({ id: "Menus" })}
+            </h4>
+          </Typography>
          <ul className={styles.menuList}>
            {menus.map(({ name, url }) => (
              <li key={name}>
--- 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);
 }
--- 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 (
-      <Typography
-        variant="Body/Supporting text (caption)/smRegular"
-        className={styles.caption}
-      >
-        <p>{alternateOpeningHours.name}</p>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.caption}>{alternateOpeningHours.name}</p>
      </Typography>
    )
  }

  return (
    <>
-      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
-        <h5>
+      <Divider color="Border/Divider/Default" />
+      <Typography variant="Body/Paragraph/mdBold">
+        <h5 className={styles.heading}>
          {intl.formatMessage(
            { id: "Alternate opening hours ({name})" },
            { name: alternateOpeningHours.name }
          )}
        </h5>
      </Typography>
-      {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
-        <Typography
-          variant="Body/Paragraph/mdRegular"
-          className={styles.text}
-          key={groupedOpeningHour}
-        >
-          <p>{groupedOpeningHour}</p>
-        </Typography>
-      ))}
+      <Typography variant="Body/Paragraph/mdRegular">
+        <div className={styles.text}>
+          {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
+            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
+          ))}
+        </div>
+      </Typography>
    </>
  )
 }
--- 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 (
-    <div className={type === "default" ? styles.wrapper : ""}>
-      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
-        <h5>{heading ?? openingHours.name}</h5>
+    <div className={styles.wrapper}>
+      <Typography variant="Title/Overline/sm">
+        <h5 className={styles.heading}>{heading ?? openingHours.name}</h5>
+      </Typography>
+      <Divider color="Border/Divider/Default" />
+
+      <Typography variant="Body/Paragraph/mdRegular">
+        <div className={styles.text}>
+          {groupedOpeningHours.map((groupedOpeningHour) => (
+            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
+          ))}
+        </div>
      </Typography>
-      {groupedOpeningHours.map((groupedOpeningHour) => {
-        return (
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.text}
-            key={groupedOpeningHour}
-          >
-            <p>{groupedOpeningHour}</p>
-          </Typography>
-        )
-      })}
      {alternateOpeningHours ? (
        <AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} />
      ) : null}
--- 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 {
--- 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);
+}
--- 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,
--- 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"
 }