fix(SW-2029): Opening hours styling

Approved-by: Matilda Landström

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>
     </>
   )
 }

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}

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 {