scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-1561-hotelpage-ui (pull request #2542)

Browse Source 
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
This commit is contained in:
Matilda Landström
2025-07-10 14:13:47 +00:00
parent 04a495b536
commit 2fee29f3f9
12 changed files with 105 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/Blocks/Essentials/index.tsx
View File

@@ -18,7 +18,7 @@ export default async function Essentials({ content }: EssentialsProps) {
return ( return (
<section className={styles.essentialsSection}> <section className={styles.essentialsSection}>
<header className={styles.header}> <header className={styles.header}>
<Typography variant="Title/smRegular"> <Typography variant="Title/smLowCase">
<h3 className={styles.heading}>{title}</h3> <h3 className={styles.heading}>{title}</h3>
</Typography> </Typography>
{preamble ? ( {preamble ? (

2
apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
View File

@@ -34,7 +34,7 @@ export default function CampaignPageSkeleton() {
</Typography> </Typography>
</div> </div>
<div> <div>
<Typography variant="Title/smRegular"> <Typography variant="Title/smLowCase">
<SkeletonShimmer width="30ch" /> <SkeletonShimmer width="30ch" />
</Typography> </Typography>
<SkeletonShimmer width="100%" height="110px" /> <SkeletonShimmer width="100%" height="110px" />

81
apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx
View File

@@ -1,15 +1,12 @@
"use client" "use client"
import Link from "next/link"
import { useParams } from "next/navigation" import { useParams } from "next/navigation"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body" import { Typography } from "@scandic-hotels/design-system/Typography"
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 ButtonLink from "@/components/ButtonLink"
import PoiMarker from "@/components/Maps/Markers/Poi" import PoiMarker from "@/components/Maps/Markers/Poi"
import { trackHotelMapClick } from "@/utils/tracking" import { trackHotelMapClick } from "@/utils/tracking"
@@ -30,24 +27,18 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
return ( return (
<div className={styles.mapCard}> <div className={styles.mapCard}>
<Caption <span className={styles.heading}>
color="textMediumContrast" <Typography variant="Title/Overline/sm" className={styles.nearby}>
textTransform="uppercase" <span>
textAlign="center" {intl.formatMessage({
> defaultMessage: "Nearby",
{intl.formatMessage({ })}
defaultMessage: "Nearby", </span>
})} </Typography>
</Caption> <Typography variant="Title/smLowCase" className={styles.hotelName}>
<Title <h3>{hotelName}</h3>
color="burgundy" </Typography>
level="h3" </span>
as="h4"
textAlign="center"
textTransform="capitalize"
>
{hotelName}
</Title>
<ul className={styles.poiList}> <ul className={styles.poiList}>
{pois.map((poi) => ( {pois.map((poi) => (
<li key={poi.name} className={styles.poiItem}> <li key={poi.name} className={styles.poiItem}>
@@ -57,27 +48,39 @@ export default function MapCard({ hotelName, pois }: MapCardProps) {
skipBackground skipBackground
size={20} size={20}
/> />
<Body color="black">{poi.name}</Body> <Typography>
<Caption> <span>{poi.name} </span>
{intl.formatMessage( </Typography>
{ <Typography
defaultMessage: "{distanceInKm} km", variant="Body/Supporting text (caption)/smRegular"
}, className={styles.distance}
{ distanceInKm: poi.distance } >
)} <span>
</Caption> {intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{ distanceInKm: poi.distance }
)}
</span>
</Typography>
</li> </li>
))} ))}
</ul> </ul>
{mapUrl ? ( {mapUrl ? (
<Button theme="base" intent="secondary" size="small" fullWidth asChild> <ButtonLink
<Link href={mapUrl} scroll={true} onClick={trackHotelMapClick}> variant="Secondary"
{intl.formatMessage({ color="Primary"
defaultMessage: "See map", size="Small"
})} href={mapUrl}
</Link> scroll={true}
</Button> onClick={trackHotelMapClick}
>
{intl.formatMessage({
defaultMessage: "See map",
})}
</ButtonLink>
) : null} ) : null}
</div> </div>
) )

31
apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css
View File

@@ -4,23 +4,40 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Surface-Primary-Default);
padding: var(--Spacing-x2); padding: var(--Space-x3);
border-top-left-radius: var(--Corner-radius-md); border-top-left-radius: var(--Corner-radius-md);
border-top-right-radius: var(--Corner-radius-md); border-top-right-radius: var(--Corner-radius-md);
} }
.poiList { .poiList {
list-style: none; list-style: none;
margin-top: var(--Spacing-x1); margin-top: var(--Space-x1);
margin-bottom: var(--Spacing-x2); margin-bottom: var(--Space-x2);
} }
.poiItem { .poiItem {
display: grid; display: grid;
grid-template-columns: max-content 1fr max-content; grid-template-columns: max-content 1fr max-content;
gap: var(--Spacing-x-half); gap: var(--Space-x1);
align-items: center; align-items: center;
padding: var(--Spacing-x2) 0; padding: var(--Space-x2) 0;
border-bottom: 1px solid var(--Base-Border-Subtle); 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;
} }

28
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx
View File

@@ -1,6 +1,4 @@
import Body from "@scandic-hotels/design-system/Body" import { Typography } from "@scandic-hotels/design-system/Typography"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import Title from "@scandic-hotels/design-system/Title"
import ButtonLink from "@/components/ButtonLink" import ButtonLink from "@/components/ButtonLink"
import SidePeek from "@/components/TempDesignSystem/SidePeek" import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -30,25 +28,29 @@ export default async function MeetingsAndConferencesSidePeek({
return ( return (
<SidePeek contentKey={SidepeekSlugs.meetings} title={heading}> <SidePeek contentKey={SidepeekSlugs.meetings} title={heading}>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<Subtitle color="burgundy" asChild> <Typography variant="Title/Subtitle/lg">
<Title level="h3"> <h3>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Creative spaces for meetings", defaultMessage: "Creative spaces for meetings",
})} })}
</Title> </h3>
</Subtitle> </Typography>
{visibleImages?.length ? ( {visibleImages?.length ? (
<SidePeekImages images={visibleImages} /> <SidePeekImages images={visibleImages} />
) : null} ) : null}
{descriptions?.medium && ( {descriptions?.medium && (
<Body color="uiTextHighContrast">{descriptions.medium}</Body> <Typography>
<p>{descriptions.medium}</p>
</Typography>
)} )}
{roomText || seatingText ? ( {roomText || seatingText ? (
<Body color="uiTextMediumContrast"> <Typography className={styles.capacityDetails}>
{roomText} <span>
{roomText && seatingText && <br />} {roomText}
{seatingText} {roomText && seatingText && <br />}
</Body> {seatingText}
</span>
</Typography>
) : null} ) : null}
{meetingPageHref ? ( {meetingPageHref ? (

4
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css
View File

@@ -15,3 +15,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
.capacityDetails {
color: var(--Text-Secondary);
}

2
apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
View File

@@ -30,7 +30,7 @@ export default function Promo({
)} )}
<div className={styles.overlay} /> <div className={styles.overlay} />
<div className={styles.content}> <div className={styles.content}>
<Typography variant="Title/smRegular"> <Typography variant="Title/smLowCase">
<p>{title}</p> <p>{title}</p>
</Typography> </Typography>
<Typography variant="Body/Paragraph/mdRegular"> <Typography variant="Body/Paragraph/mdRegular">

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
View File

@@ -114,7 +114,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
return ( return (
<article className={styles.multiRoom}> <article className={styles.multiRoom}>
<Typography variant="Title/smRegular"> <Typography variant="Title/smLowCase">
<h3 className={styles.roomName}>{roomName}</h3> <h3 className={styles.roomName}>{roomName}</h3>
</Typography> </Typography>
<div className={styles.roomHeader}> <div className={styles.roomHeader}>

2
apps/scandic-web/components/MyPages/Surprises/Card.tsx
View File

@@ -22,7 +22,7 @@ export default function Card({ title, children }: CardProps) {
})} })}
/> />
<header> <header>
<Typography variant="Title/smRegular"> <Typography variant="Title/smLowCase">
<h4 className={styles.title}>{title}</h4> <h4 className={styles.title}>{title}</h4>
</Typography> </Typography>
</header> </header>

12
packages/design-system/lib/components/Typography/Typography.stories.tsx
View File

@@ -40,10 +40,10 @@ export const TitleMd: Story = {
children: <h1>The quick brown fox jumps over the lazy dog</h1>, children: <h1>The quick brown fox jumps over the lazy dog</h1>,
}, },
} }
export const TitleMdRegular: Story = { export const TitleMdLowCase: Story = {
name: 'Title/mdRegular', name: 'Title/mdLowCase',
args: { args: {
variant: 'Title/mdRegular', variant: 'Title/mdLowCase',
children: <h1>The quick brown fox jumps over the lazy dog</h1>, 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>, children: <h1>The quick brown fox jumps over the lazy dog</h1>,
}, },
} }
export const TitleSmRegular: Story = { export const TitleSmLowCase: Story = {
name: 'Title/smRegular', name: 'Title/smLowCase',
args: { args: {
variant: 'Title/smRegular', variant: 'Title/smLowCase',
children: <h1>The quick brown fox jumps over the lazy dog</h1>, children: <h1>The quick brown fox jumps over the lazy dog</h1>,
}, },
} }

13
packages/design-system/lib/components/Typography/typography.module.css
View File

@@ -18,12 +18,13 @@
text-decoration: none; text-decoration: none;
} }
.Title-mdRegular { .Title-mdLowCase {
font-family: var(--Title-md-Font-family), var(--Title-md-Font-fallback); font-family:
var(--Title-md-LowCase-Font-family), var(--Title-md-LowCase-Font-fallback);
font-size: var(--Title-md-Size); font-size: var(--Title-md-Size);
font-weight: 700; font-weight: var(--Title-md-LowCase-Font-weight);
letter-spacing: var(--Title-md-Letter-spacing); letter-spacing: var(--Title-md-LowCase-Letter-spacing);
text-transform: var(--Title-md-Text-Transform); text-transform: var(--Title-md-LowCase-Text-Transform);
line-height: 1.1; line-height: 1.1;
text-decoration: none; text-decoration: none;
} }
@@ -38,7 +39,7 @@
text-decoration: none; text-decoration: none;
} }
.Title-smRegular { .Title-smLowcase {
font-family: font-family:
var(--Title-sm-LowCase-Font-family), var(--Title-sm-LowCase-Font-fallback); var(--Title-sm-LowCase-Font-family), var(--Title-sm-LowCase-Font-fallback);
font-size: var(--Title-sm-LowCase-Size); font-size: var(--Title-sm-LowCase-Size);

4
packages/design-system/lib/components/Typography/variants.ts
View File

@@ -8,9 +8,9 @@ export const config = {
variant: { variant: {
'Title/lg': styles['Title-lg'], 'Title/lg': styles['Title-lg'],
'Title/md': styles['Title-md'], 'Title/md': styles['Title-md'],
'Title/mdRegular': styles['Title-mdRegular'], 'Title/mdLowCase': styles['Title-mdLowCase'],
'Title/sm': styles['Title-sm'], 'Title/sm': styles['Title-sm'],
'Title/smRegular': styles['Title-smRegular'], 'Title/smLowCase': styles['Title-smLowCase'],
'Title/xs': styles['Title-xs'], 'Title/xs': styles['Title-xs'],
'Title/Decorative/lg': styles['Title-Decorative-lg'], 'Title/Decorative/lg': styles['Title-Decorative-lg'],
'Title/Decorative/md': styles['Title-Decorative-md'], 'Title/Decorative/md': styles['Title-Decorative-md'],