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
2025-07-10 14:13:47 +00:00
parent 04a495b536
commit 2fee29f3f9
12 changed files with 105 additions and 78 deletions
--- 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 ? (
--- 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" />
--- 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>
  )
--- 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;
 }
--- 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 ? (
--- 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);
+}
--- 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">
--- 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}>
--- 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>
--- 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>,
  },
 }
--- 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);
--- 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'],