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

Merged in feat/SW-1512-selectrateenterdetails-room- (pull request #2407)

Browse Source 
feat: SW-1512 Moved room description below amenities & bed options in sidepeek

* feat: SW-1512 Moved room description below amenities & bed options in sidepeek

* feat: SW-1512 Added sub-title for room description

* feat: SW-1512 Optimized styles


Approved-by: Erik Tiekstra
This commit is contained in:
Hrishikesh Vaipurkar
2025-06-25 11:04:44 +00:00
parent d4894c1647
commit c0efbd17ff
2 changed files with 99 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx
View File

@@ -1,11 +1,10 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BED_TYPE_ICONS, type BedTypes } from "@/constants/booking" import { BED_TYPE_ICONS, type BedTypes } from "@/constants/booking"
import ImageGallery from "@/components/ImageGallery" import ImageGallery from "@/components/ImageGallery"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { FacilityIcon } from "../facilityIcon" import { FacilityIcon } from "../facilityIcon"
@@ -30,64 +29,69 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.mainContent}> <div className={styles.mainContent}>
{totalOccupancy && ( {totalOccupancy && (
<Caption color="uiTextMediumContrast"> <Typography variant="Body/Supporting text (caption)/smRegular">
{intl.formatMessage( <p>
{ {intl.formatMessage(
defaultMessage: {
"Max. {max, plural, one {{range} guest} other {{range} guests}}", defaultMessage:
}, "Max. {max, plural, one {{range} guest} other {{range} guests}}",
{ },
max: totalOccupancy.max, {
range: totalOccupancy.range, max: totalOccupancy.max,
} range: totalOccupancy.range,
)} }
</Caption> )}
</p>
</Typography>
)} )}
{roomSize && ( {roomSize && (
<Caption color="uiTextMediumContrast"> <Typography variant="Body/Supporting text (caption)/smRegular">
{roomSize.min === roomSize.max <p>
? intl.formatMessage( {roomSize.min === roomSize.max
{ ? intl.formatMessage(
defaultMessage: "{roomSize} m²", {
}, defaultMessage: "{roomSize} m²",
{ },
roomSize: roomSize.min, {
} roomSize: roomSize.min,
) }
: intl.formatMessage( )
{ : intl.formatMessage(
defaultMessage: "{roomSizeMin}–{roomSizeMax} m²", {
}, defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
{ },
roomSizeMin: roomSize.min, {
roomSizeMax: roomSize.max, roomSizeMin: roomSize.min,
} roomSizeMax: roomSize.max,
)} }
</Caption> )}
</p>
</Typography>
)} )}
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<ImageGallery images={galleryImages} title={room.name} height={280} /> <ImageGallery images={galleryImages} title={room.name} height={280} />
</div> </div>
<Body color="uiTextHighContrast">{roomDescription}</Body>
</div> </div>
<div className={styles.listContainer}> <div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage({ <p>
defaultMessage: "Room amenities", {intl.formatMessage({
})} defaultMessage: "Room amenities",
</Subtitle> })}
<ul className={styles.facilityList}> </p>
{room.roomFacilities </Typography>
.sort((a, b) => a.sortOrder - b.sortOrder) <Typography variant="Body/Paragraph/mdRegular">
.map((facility) => { <ul className={styles.facilityList}>
return ( {room.roomFacilities
<li key={facility.name}> .sort((a, b) => a.sortOrder - b.sortOrder)
<FacilityIcon .map((facility) => {
name={facility.icon} return (
size={24} <li key={facility.name}>
color="Icon/Default" <FacilityIcon
/> name={facility.icon}
<Body asChild color="uiTextMediumContrast"> size={24}
color="Icon/Default"
/>
<span> <span>
{facility.availableInAllRooms {facility.availableInAllRooms
? facility.name ? facility.name
@@ -101,23 +105,27 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
} }
)} )}
</span> </span>
</Body> </li>
</li> )
) })}
})} </ul>
</ul> </Typography>
</div> </div>
<div className={styles.listContainer}> <div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast"> <Typography variant="Title/Subtitle/md">
{intl.formatMessage({ <p>
defaultMessage: "Bed options", {intl.formatMessage({
})} defaultMessage: "Bed options",
</Subtitle> })}
<Body color="grey"> </p>
{intl.formatMessage({ </Typography>
defaultMessage: "Subject to availability", <Typography variant="Body/Paragraph/mdRegular">
})} <p>
</Body> {intl.formatMessage({
defaultMessage: "Subject to availability",
})}
</p>
</Typography>
<ul className={styles.bedOptions}> <ul className={styles.bedOptions}>
{room.roomTypes.map((roomType) => { {room.roomTypes.map((roomType) => {
const description = const description =
@@ -131,14 +139,26 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
<li key={roomType.code}> <li key={roomType.code}>
{MainBedIcon ? <MainBedIcon height={24} width={24} /> : null} {MainBedIcon ? <MainBedIcon height={24} width={24} /> : null}
{ExtraBedIcon ? <ExtraBedIcon height={24} width={30} /> : null} {ExtraBedIcon ? <ExtraBedIcon height={24} width={30} /> : null}
<Body color="uiTextMediumContrast" asChild> <Typography variant="Body/Paragraph/mdRegular">
<span>{description}</span> <span>{description}</span>
</Body> </Typography>
</li> </li>
) )
})} })}
</ul> </ul>
</div> </div>
<div className={styles.listContainer}>
<Typography variant="Title/Subtitle/md">
<p>
{intl.formatMessage({
defaultMessage: "About the hotel",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{roomDescription}</p>
</Typography>
</div>
</div> </div>
) )
} }

29
apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
View File

@@ -1,9 +1,3 @@
.button {
margin-left: auto;
padding: 0 0 0 var(--Spacing-x-half);
text-decoration: none;
}
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -14,6 +8,10 @@
); /* Creates space between the wrapper and buttonContainer */ ); /* Creates space between the wrapper and buttonContainer */
} }
.mainContent {
color: var(--Text-Secondary);
}
.mainContent, .mainContent,
.listContainer { .listContainer {
display: flex; display: flex;
@@ -36,6 +34,7 @@
.facilityList { .facilityList {
column-count: 2; column-count: 2;
column-gap: var(--Spacing-x2); column-gap: var(--Spacing-x2);
color: var(--Text-Secondary);
} }
.facilityList li { .facilityList li {
@@ -44,6 +43,10 @@
margin-bottom: var(--Spacing-x-half); margin-bottom: var(--Spacing-x-half);
} }
.bedOptions {
color: var(--Text-Secondary);
}
.bedOptions li { .bedOptions li {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
@@ -53,17 +56,3 @@
.facilityList li svg { .facilityList li svg {
flex-shrink: 0; flex-shrink: 0;
} }
.noIcon {
margin-left: var(--Spacing-x4);
}
.buttonContainer {
background-color: var(--Background-Primary);
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x4) var(--Spacing-x2);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}