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

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

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