From 5643bcc62a65651813cd764bc3056d2e43d37617 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Mon, 24 Mar 2025 11:04:20 +0000 Subject: [PATCH] Merged in feat/SW-1966-SW-1967-room-sidepeek (pull request #1603) 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 --- .../HotelPage/SidePeeks/Room/index.tsx | 64 +++++++++++-------- .../HotelPage/SidePeeks/Room/room.module.css | 18 +++++- 2 files changed, 52 insertions(+), 30 deletions(-) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx index 53739ba99..c845341ff 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx @@ -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({ >
- {totalOccupancy && ( - + +

{intl.formatMessage( { id: "Max. {max, plural, one {{range} guest} other {{range} guests}}", @@ -54,10 +57,7 @@ export default async function RoomSidePeek({ range: totalOccupancy.range, } )} - - )} - {roomSize && ( - + .{" "} {roomSize.min === roomSize.max ? intl.formatMessage( { id: "{roomSize} m²" }, @@ -74,8 +74,8 @@ export default async function RoomSidePeek({ roomSizeMax: roomSize.max, } )} - - )} +

+
- {roomDescription} + +

{roomDescription}

+
- +

{intl.formatMessage({ id: "Room amenities" })}

- +
    {room.roomFacilities .sort((a, b) => a.sortOrder - b.sortOrder) @@ -104,13 +106,14 @@ export default async function RoomSidePeek({ color="uiTextMediumContrast" /> )} - {facility.name} - + ) })} @@ -118,12 +121,14 @@ export default async function RoomSidePeek({
- -

{intl.formatMessage({ id: "Bed options" })}

- - - {intl.formatMessage({ id: "Based on availability" })} - +
+ +

{intl.formatMessage({ id: "Bed options" })}

+ + +

{intl.formatMessage({ id: "Based on availability" })}

+ +
    {room.roomTypes.map((roomType) => { const BedIcon = getBedIcon(roomType.mainBed.type) @@ -136,9 +141,14 @@ export default async function RoomSidePeek({ height={24} /> )} - + {roomType.mainBed.description} - + ) })} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css index a741b9fed..8067df657 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css @@ -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; +}