From 2fee29f3f9fe05da6a718910f1ca4536818ad113 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Thu, 10 Jul 2025 14:13:47 +0000
Subject: [PATCH] Merged in fix/SW-1561-hotelpage-ui (pull request #2542)

Fix(SW-1561): Hotelpage design and token update

* fix(SW-1561): fix sidepeek subtitle

* fix(SW-1561): update mapCard to new tokens and update styling

* fix(SW-1561): correct Typography lowcase titles


Approved-by: Anton Gunnarsson
---
 .../components/Blocks/Essentials/index.tsx    |  2 +-
 .../CampaignPage/CampaignPageSkeleton.tsx     |  2 +-
 .../HotelPage/Map/MapCard/index.tsx           | 81 ++++++++++---------
 .../HotelPage/Map/MapCard/mapCard.module.css  | 31 +++++--
 .../MeetingsAndConferences/index.tsx          | 28 ++++---
 .../meetingsAndConferences.module.css         |  4 +
 .../HotelReservation/MyStay/Promo/index.tsx   |  2 +-
 .../MyStay/Rooms/MultiRoom/Room.tsx           |  2 +-
 .../components/MyPages/Surprises/Card.tsx     |  2 +-
 .../Typography/Typography.stories.tsx         | 12 +--
 .../Typography/typography.module.css          | 13 +--
 .../lib/components/Typography/variants.ts     |  4 +-
 12 files changed, 105 insertions(+), 78 deletions(-)

diff --git a/apps/scandic-web/components/Blocks/Essentials/index.tsx b/apps/scandic-web/components/Blocks/Essentials/index.tsx
index 3141c2bd0..4d6a91926 100644
--- a/apps/scandic-web/components/Blocks/Essentials/index.tsx
+++ b/apps/scandic-web/components/Blocks/Essentials/index.tsx
@@ -18,7 +18,7 @@ export default async function Essentials({ content }: EssentialsProps) {
   return (
     <section className={styles.essentialsSection}>
       <header className={styles.header}>
-        <Typography variant="Title/smRegular">
+        <Typography variant="Title/smLowCase">
           <h3 className={styles.heading}>{title}</h3>
         </Typography>
         {preamble ? (
diff --git a/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx b/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
index 525fbe979..1b0fffdb6 100644
--- a/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
+++ b/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
@@ -34,7 +34,7 @@ export default function CampaignPageSkeleton() {
         </Typography>
       </div>
       <div>
-        <Typography variant="Title/smRegular">
+        <Typography variant="Title/smLowCase">
           <SkeletonShimmer width="30ch" />
         </Typography>
         <SkeletonShimmer width="100%" height="110px" />
diff --git a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
index ffb4f8d23..1bc5a1f14 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
@@ -1,15 +1,12 @@
 "use client"
 
-import Link from "next/link"
 import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import ButtonLink from "@/components/ButtonLink"
 import PoiMarker from "@/components/Maps/Markers/Poi"
 import { trackHotelMapClick } from "@/utils/tracking"
 
@@ -30,24 +27,18 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
 
   return (
     <div className={styles.mapCard}>
-      <Caption
-        color="textMediumContrast"
-        textTransform="uppercase"
-        textAlign="center"
-      >
-        {intl.formatMessage({
-          defaultMessage: "Nearby",
-        })}
-      </Caption>
-      <Title
-        color="burgundy"
-        level="h3"
-        as="h4"
-        textAlign="center"
-        textTransform="capitalize"
-      >
-        {hotelName}
-      </Title>
+      <span className={styles.heading}>
+        <Typography variant="Title/Overline/sm" className={styles.nearby}>
+          <span>
+            {intl.formatMessage({
+              defaultMessage: "Nearby",
+            })}
+          </span>
+        </Typography>
+        <Typography variant="Title/smLowCase" className={styles.hotelName}>
+          <h3>{hotelName}</h3>
+        </Typography>
+      </span>
       <ul className={styles.poiList}>
         {pois.map((poi) => (
           <li key={poi.name} className={styles.poiItem}>
@@ -57,27 +48,39 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
               skipBackground
               size={20}
             />
-            <Body color="black">{poi.name}</Body>
-            <Caption>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "{distanceInKm} km",
-                },
-                { distanceInKm: poi.distance }
-              )}
-            </Caption>
+            <Typography>
+              <span>{poi.name} </span>
+            </Typography>
+            <Typography
+              variant="Body/Supporting text (caption)/smRegular"
+              className={styles.distance}
+            >
+              <span>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "{distanceInKm} km",
+                  },
+                  { distanceInKm: poi.distance }
+                )}
+              </span>
+            </Typography>
           </li>
         ))}
       </ul>
 
       {mapUrl ? (
-        <Button theme="base" intent="secondary" size="small" fullWidth asChild>
-          <Link href={mapUrl} scroll={true} onClick={trackHotelMapClick}>
-            {intl.formatMessage({
-              defaultMessage: "See map",
-            })}
-          </Link>
-        </Button>
+        <ButtonLink
+          variant="Secondary"
+          color="Primary"
+          size="Small"
+          href={mapUrl}
+          scroll={true}
+          onClick={trackHotelMapClick}
+        >
+          {intl.formatMessage({
+            defaultMessage: "See map",
+          })}
+        </ButtonLink>
       ) : null}
     </div>
   )
diff --git a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css
index 98ac4ce9a..30465a18a 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css
@@ -4,23 +4,40 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2);
+  background-color: var(--Surface-Primary-Default);
+  padding: var(--Space-x3);
   border-top-left-radius: var(--Corner-radius-md);
   border-top-right-radius: var(--Corner-radius-md);
 }
 
 .poiList {
   list-style: none;
-  margin-top: var(--Spacing-x1);
-  margin-bottom: var(--Spacing-x2);
+  margin-top: var(--Space-x1);
+  margin-bottom: var(--Space-x2);
 }
 
 .poiItem {
   display: grid;
   grid-template-columns: max-content 1fr max-content;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x1);
   align-items: center;
-  padding: var(--Spacing-x2) 0;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Space-x2) 0;
+  border-bottom: 1px solid var(--Border-Divider-Default);
+}
+
+.heading {
+  text-align: center;
+}
+
+.distance {
+  color: var(--Text-Secondary);
+}
+
+.nearby {
+  color: var(--Text-Interactive-Secondary);
+}
+
+.hotelName {
+  color: var(--Text-Heading);
+  text-transform: capitalize;
 }
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
index 244c481f4..f2c753e59 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
@@ -1,6 +1,4 @@
-import Body from "@scandic-hotels/design-system/Body"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -30,25 +28,29 @@ export default async function MeetingsAndConferencesSidePeek({
   return (
     <SidePeek contentKey={SidepeekSlugs.meetings} title={heading}>
       <div className={styles.wrapper}>
-        <Subtitle color="burgundy" asChild>
-          <Title level="h3">
+        <Typography variant="Title/Subtitle/lg">
+          <h3>
             {intl.formatMessage({
               defaultMessage: "Creative spaces for meetings",
             })}
-          </Title>
-        </Subtitle>
+          </h3>
+        </Typography>
         {visibleImages?.length ? (
           <SidePeekImages images={visibleImages} />
         ) : null}
         {descriptions?.medium && (
-          <Body color="uiTextHighContrast">{descriptions.medium}</Body>
+          <Typography>
+            <p>{descriptions.medium}</p>
+          </Typography>
         )}
         {roomText || seatingText ? (
-          <Body color="uiTextMediumContrast">
-            {roomText}
-            {roomText && seatingText && <br />}
-            {seatingText}
-          </Body>
+          <Typography className={styles.capacityDetails}>
+            <span>
+              {roomText}
+              {roomText && seatingText && <br />}
+              {seatingText}
+            </span>
+          </Typography>
         ) : null}
 
         {meetingPageHref ? (
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css
index 9953ac005..0bfd52ced 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css
@@ -15,3 +15,7 @@
   left: 0;
   bottom: 0;
 }
+
+.capacityDetails {
+  color: var(--Text-Secondary);
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
index 241ee87db..ea0962dbe 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
@@ -30,7 +30,7 @@ export default function Promo({
         )}
         <div className={styles.overlay} />
         <div className={styles.content}>
-          <Typography variant="Title/smRegular">
+          <Typography variant="Title/smLowCase">
             <p>{title}</p>
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
index 77f12330e..55a2418d8 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
@@ -114,7 +114,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
 
   return (
     <article className={styles.multiRoom}>
-      <Typography variant="Title/smRegular">
+      <Typography variant="Title/smLowCase">
         <h3 className={styles.roomName}>{roomName}</h3>
       </Typography>
       <div className={styles.roomHeader}>
diff --git a/apps/scandic-web/components/MyPages/Surprises/Card.tsx b/apps/scandic-web/components/MyPages/Surprises/Card.tsx
index 52709406d..fc512f993 100644
--- a/apps/scandic-web/components/MyPages/Surprises/Card.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/Card.tsx
@@ -22,7 +22,7 @@ export default function Card({ title, children }: CardProps) {
         })}
       />
       <header>
-        <Typography variant="Title/smRegular">
+        <Typography variant="Title/smLowCase">
           <h4 className={styles.title}>{title}</h4>
         </Typography>
       </header>
diff --git a/packages/design-system/lib/components/Typography/Typography.stories.tsx b/packages/design-system/lib/components/Typography/Typography.stories.tsx
index fbe9d87c5..1ee7b9590 100644
--- a/packages/design-system/lib/components/Typography/Typography.stories.tsx
+++ b/packages/design-system/lib/components/Typography/Typography.stories.tsx
@@ -40,10 +40,10 @@ export const TitleMd: Story = {
     children: <h1>The quick brown fox jumps over the lazy dog</h1>,
   },
 }
-export const TitleMdRegular: Story = {
-  name: 'Title/mdRegular',
+export const TitleMdLowCase: Story = {
+  name: 'Title/mdLowCase',
   args: {
-    variant: 'Title/mdRegular',
+    variant: 'Title/mdLowCase',
     children: <h1>The quick brown fox jumps over the lazy dog</h1>,
   },
 }
@@ -54,10 +54,10 @@ export const TitleSm: Story = {
     children: <h1>The quick brown fox jumps over the lazy dog</h1>,
   },
 }
-export const TitleSmRegular: Story = {
-  name: 'Title/smRegular',
+export const TitleSmLowCase: Story = {
+  name: 'Title/smLowCase',
   args: {
-    variant: 'Title/smRegular',
+    variant: 'Title/smLowCase',
     children: <h1>The quick brown fox jumps over the lazy dog</h1>,
   },
 }
diff --git a/packages/design-system/lib/components/Typography/typography.module.css b/packages/design-system/lib/components/Typography/typography.module.css
index dbaaafa9e..d2836d7e2 100644
--- a/packages/design-system/lib/components/Typography/typography.module.css
+++ b/packages/design-system/lib/components/Typography/typography.module.css
@@ -18,12 +18,13 @@
   text-decoration: none;
 }
 
-.Title-mdRegular {
-  font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback);
+.Title-mdLowCase {
+  font-family:
+    var(--Title-md-LowCase-Font-family), var(--Title-md-LowCase-Font-fallback);
   font-size: var(--Title-md-Size);
-  font-weight: 700;
-  letter-spacing: var(--Title-md-Letter-spacing);
-  text-transform: var(--Title-md-Text-Transform);
+  font-weight: var(--Title-md-LowCase-Font-weight);
+  letter-spacing: var(--Title-md-LowCase-Letter-spacing);
+  text-transform: var(--Title-md-LowCase-Text-Transform);
   line-height: 1.1;
   text-decoration: none;
 }
@@ -38,7 +39,7 @@
   text-decoration: none;
 }
 
-.Title-smRegular {
+.Title-smLowcase {
   font-family:
     var(--Title-sm-LowCase-Font-family), var(--Title-sm-LowCase-Font-fallback);
   font-size: var(--Title-sm-LowCase-Size);
diff --git a/packages/design-system/lib/components/Typography/variants.ts b/packages/design-system/lib/components/Typography/variants.ts
index 18db4cda4..c065e678b 100644
--- a/packages/design-system/lib/components/Typography/variants.ts
+++ b/packages/design-system/lib/components/Typography/variants.ts
@@ -8,9 +8,9 @@ export const config = {
     variant: {
       'Title/lg': styles['Title-lg'],
       'Title/md': styles['Title-md'],
-      'Title/mdRegular': styles['Title-mdRegular'],
+      'Title/mdLowCase': styles['Title-mdLowCase'],
       'Title/sm': styles['Title-sm'],
-      'Title/smRegular': styles['Title-smRegular'],
+      'Title/smLowCase': styles['Title-smLowCase'],
       'Title/xs': styles['Title-xs'],
       'Title/Decorative/lg': styles['Title-Decorative-lg'],
       'Title/Decorative/md': styles['Title-Decorative-md'],