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

Merged in feat/SW-1966-SW-1967-room-sidepeek (pull request #1603)

Browse Source 
feat(SW-1966) feat(SW-1967): hotelroom sidepeek UI fixes

* feat(SW-1966) feat(SW-1967): hotelroom sidepeek UI fixex


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2025-03-24 11:04:20 +00:00
parent b7d7408bce
commit 5643bcc62a
2 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
View File

@@ -1,5 +1,8 @@
import { cx } from "class-variance-authority"
import Link from "next/link" import Link from "next/link"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { selectRateWithParams } from "@/constants/routes/hotelReservation" import { selectRateWithParams } from "@/constants/routes/hotelReservation"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
@@ -8,9 +11,6 @@ import { getBedIcon } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon" import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek" import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -43,8 +43,11 @@ export default async function RoomSidePeek({
> >
<div className={styles.content}> <div className={styles.content}>
<div className={styles.innerContent}> <div className={styles.innerContent}>
{totalOccupancy && ( <Typography
<Caption color="uiTextMediumContrast" className={styles.guests}> variant="Body/Paragraph/mdRegular"
className={styles.guests}
>
<p>
{intl.formatMessage( {intl.formatMessage(
{ {
id: "Max. {max, plural, one {{range} guest} other {{range} guests}}", id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
@@ -54,10 +57,7 @@ export default async function RoomSidePeek({
range: totalOccupancy.range, range: totalOccupancy.range,
} }
)} )}
</Caption> .{" "}
)}
{roomSize && (
<Caption color="uiTextMediumContrast">
{roomSize.min === roomSize.max {roomSize.min === roomSize.max
? intl.formatMessage( ? intl.formatMessage(
{ id: "{roomSize} m²" }, { id: "{roomSize} m²" },
@@ -74,8 +74,8 @@ export default async function RoomSidePeek({
roomSizeMax: roomSize.max, roomSizeMax: roomSize.max,
} }
)} )}
</Caption> </p>
)} </Typography>
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<ImageGallery <ImageGallery
images={galleryImages} images={galleryImages}
@@ -83,13 +83,15 @@ export default async function RoomSidePeek({
height={280} height={280}
/> />
</div> </div>
<Body color="uiTextHighContrast">{roomDescription}</Body> <Typography variant="Body/Paragraph/mdRegular">
<p>{roomDescription}</p>
</Typography>
</div> </div>
<div className={styles.innerContent}> <div className={styles.innerContent}>
<Subtitle type="two" color="uiTextHighContrast" asChild> <Typography variant="Title/Subtitle/md">
<h3>{intl.formatMessage({ id: "Room amenities" })}</h3> <h3>{intl.formatMessage({ id: "Room amenities" })}</h3>
</Subtitle> </Typography>
<ul className={styles.facilityList}> <ul className={styles.facilityList}>
{room.roomFacilities {room.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder) .sort((a, b) => a.sortOrder - b.sortOrder)
@@ -104,13 +106,14 @@ export default async function RoomSidePeek({
color="uiTextMediumContrast" color="uiTextMediumContrast"
/> />
)} )}
<Body <Typography
asChild variant="Body/Paragraph/mdRegular"
className={!Icon ? styles.noIcon : undefined} className={cx(styles.iconText, {
color="uiTextMediumContrast" [styles.noIcon]: !Icon,
})}
> >
<span>{facility.name}</span> <span>{facility.name}</span>
</Body> </Typography>
</li> </li>
) )
})} })}
@@ -118,12 +121,14 @@ export default async function RoomSidePeek({
</div> </div>
<div className={styles.innerContent}> <div className={styles.innerContent}>
<Subtitle type="two" color="uiTextHighContrast" asChild> <div className={styles.bedOptions}>
<h3>{intl.formatMessage({ id: "Bed options" })}</h3> <Typography variant="Title/Subtitle/md">
</Subtitle> <h3>{intl.formatMessage({ id: "Bed options" })}</h3>
<Body color="grey"> </Typography>
{intl.formatMessage({ id: "Based on availability" })} <Typography variant="Body/Paragraph/mdRegular">
</Body> <p>{intl.formatMessage({ id: "Based on availability" })}</p>
</Typography>
</div>
<ul className={styles.bedOptions}> <ul className={styles.bedOptions}>
{room.roomTypes.map((roomType) => { {room.roomTypes.map((roomType) => {
const BedIcon = getBedIcon(roomType.mainBed.type) const BedIcon = getBedIcon(roomType.mainBed.type)
@@ -136,9 +141,14 @@ export default async function RoomSidePeek({
height={24} height={24}
/> />
)} )}
<Body color="uiTextMediumContrast" asChild> <Typography
variant="Body/Paragraph/mdRegular"
className={cx(styles.iconText, {
[styles.noIcon]: !BedIcon,
})}
>
<span>{roomType.mainBed.description}</span> <span>{roomType.mainBed.description}</span>
</Body> </Typography>
</li> </li>
) )
})} })}

18
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
View File

@@ -6,14 +6,18 @@
var(--Spacing-x4) * 2 + 80px var(--Spacing-x4) * 2 + 80px
); /* Creates space between the wrapper and buttonContainer */ ); /* Creates space between the wrapper and buttonContainer */
} }
.innerContent { .innerContent {
display: grid; display: grid;
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-one-and-half);
} }
.innerContent .guests { .innerContent .guests {
border-right: 1px solid var(--Base-Border-Subtle); color: var(--Text-Accent-Secondary);
padding-right: var(--Spacing-x1); }
.bedOptions {
gap: var(--Spacing-x-half);
} }
.imageContainer { .imageContainer {
@@ -33,9 +37,12 @@
} }
.listItem { .listItem {
display: flex; display: grid;
grid-auto-flow: column;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
margin-bottom: var(--Spacing-x-half); margin-bottom: var(--Spacing-x-half);
align-items: self-start;
justify-content: flex-start;
} }
.noIcon { .noIcon {
@@ -51,3 +58,8 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
.iconText {
color: var(--Text-Secondary);
flex-grow: 1;
}