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

feat(SW-713): update styling for sidepeek

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-30 16:44:08 +01:00
parent 4106f9a91d
commit 5b3958e017
8 changed files with 114 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
components/SidePeeks/RoomSidePeek/index.tsx
View File

@@ -45,49 +45,65 @@ export default function RoomSidePeek({
isOpen={isSidePeekOpen}
handleClose={() => setIsSidePeekOpen(false)}
>
<Body color="baseTextMediumContrast">
{roomSize?.min === roomSize?.max
? roomSize?.min
: `${roomSize?.min} - ${roomSize?.max}`}
m².{" "}
{intl.formatMessage(
{ id: "booking.accommodatesUpTo" },
{ nrOfGuests: occupancy }
)}
</Body>
{images && (
<div className={styles.imageContainer}>
<ImageGallery images={images} title={selectedRoom.name} />
<div className={styles.wrapper}>
<div className={styles.mainContent}>
<Body color="baseTextMediumContrast">
{roomSize?.min === roomSize?.max
? roomSize?.min
: `${roomSize?.min} - ${roomSize?.max}`}
m².{" "}
{intl.formatMessage(
{ id: "booking.accommodatesUpTo" },
{ nrOfGuests: occupancy }
)}
</Body>
{images && (
<div className={styles.imageContainer}>
<ImageGallery images={images} title={selectedRoom.name} />
</div>
)}
<Body color="uiTextHighContrast">{roomDescription}</Body>
</div>
)}
<Body className={styles.description} color="uiTextHighContrast">
{roomDescription}
</Body>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
</Subtitle>
<ul className={styles.facilityList}>
{selectedRoom?.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = getFacilityIcon(facility.name)
return (
<li key={facility.name}>
{Icon && <Icon color="uiTextMediumContrast" />}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{facility.name}</span>
</Body>
</li>
)
})}
</ul>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
</Subtitle>
<ul className={styles.facilityList}>
{selectedRoom?.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = getFacilityIcon(facility.name)
return (
<li key={facility.name}>
{Icon && <Icon color="uiTextMediumContrast" />}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{facility.name}</span>
</Body>
</li>
)
})}
</ul>
</div>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({ id: "booking.bedOptions" })}
</Subtitle>
<Body color="grey">
{intl.formatMessage({ id: "booking.basedOnAvailability" })}
</Body>
{/* TODO: Get data for bed options */}
</div>
</div>
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="primary">
{intl.formatMessage({ id: "booking.selectRoom" })}
{/* TODO: Implement logic for select room */}
</Button>
</div>
</SidePeek>
</div>
)

43
components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
View File

@@ -4,20 +4,40 @@
text-decoration: none;
}
.imageContainer {
min-height: 185px;
.wrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
position: relative;
margin-bottom: calc(var(--Spacing-x4) * 2 + 20px);
}
.description {
margin-top: var(--Spacing-x-one-and-half);
margin-bottom: var(--Spacing-x2);
.mainContent,
.listContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-one-and-half);
}
.imageContainer {
min-height: 280px;
position: relative;
border-radius: var(--Corner-radius-Medium);
overflow: hidden;
}
.imageContainer img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.facilityList {
margin-top: var(--Spacing-x-one-and-half);
column-count: 2;
column-gap: var(--Spacing-x2);
}
.facilityList li {
display: flex;
gap: var(--Spacing-x1);
@@ -27,3 +47,16 @@
.noIcon {
margin-left: var(--Spacing-x4);
}
.buttonContainer {
background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x4) var(--Spacing-x2);
overflow: hidden;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
}

3
i18n/dictionaries/da.json
View File

@@ -384,10 +384,13 @@
"as of today": "pr. dags dato",
"booking.accommodatesUpTo": "Plads til {nrOfGuests, plural, one {# person} other {op til # personer}}",
"booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
"booking.basedOnAvailability": "Baseret på tilgængelighed",
"booking.bedOptions": "Sengemuligheder",
"booking.children": "{totalChildren, plural, one {# barn} other {# børn}}",
"booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
"booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
"booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
"booking.selectRoom": "Zimmer auswählen",
"booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
"booking.thisRoomIsEquippedWith": "Dette værelse er udstyret med",
"breakfast.price": "{amount} {currency}/nat",

3
i18n/dictionaries/de.json
View File

@@ -383,10 +383,13 @@
"as of today": "Stand heute",
"booking.accommodatesUpTo": "Bietet Platz für {nrOfGuests, plural, one {# Person } other {bis zu # Personen}}",
"booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}",
"booking.basedOnAvailability": "Abhängig von der Verfügbarkeit",
"booking.bedOptions": "Bettoptionen",
"booking.children": "{totalChildren, plural, one {# kind} other {# kinder}}",
"booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
"booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
"booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}",
"booking.selectRoom": "Vælg værelse",
"booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
"booking.thisRoomIsEquippedWith": "Dieses Zimmer ist ausgestattet mit",
"breakfast.price": "{amount} {currency}/Nacht",

3
i18n/dictionaries/en.json
View File

@@ -400,12 +400,15 @@
"as of today": "as of today",
"booking.accommodatesUpTo": "Accommodates up to {nrOfGuests, plural, one {# person} other {# people}}",
"booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
"booking.basedOnAvailability": "Based on availability",
"booking.bedOptions": "Bed options",
"booking.children": "{totalChildren, plural, one {# child} other {# children}}",
"booking.confirmation.text": "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please <emailLink>email us.</emailLink>",
"booking.confirmation.title": "Your booking is confirmed",
"booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
"booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
"booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
"booking.selectRoom": "Select room",
"booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
"booking.thisRoomIsEquippedWith": "This room is equipped with",
"breakfast.price": "{amount} {currency}/night",

3
i18n/dictionaries/fi.json
View File

@@ -383,10 +383,13 @@
"as of today": "tänään",
"booking.accommodatesUpTo": "Huoneeseen {nrOfGuests, plural, one {# person} other {mahtuu 2 henkilöä}}",
"booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
"booking.basedOnAvailability": "Saatavuuden mukaan",
"booking.bedOptions": "Vuodevaihtoehdot",
"booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}",
"booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
"booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
"booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}",
"booking.selectRoom": "Valitse huone",
"booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsLink>ehdot ja ehtoja</termsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyLink>Scandicin tietosuojavaltuuden</privacyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
"booking.thisRoomIsEquippedWith": "Tämä huone on varustettu",
"breakfast.price": "{amount} {currency}/yö",

3
i18n/dictionaries/no.json
View File

@@ -382,10 +382,13 @@
"as of today": "per i dag",
"booking.accommodatesUpTo": "Plass til {nrOfGuests, plural, one {# person} other {opptil # personer}}",
"booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
"booking.basedOnAvailability": "Basert på tilgjengelighet",
"booking.bedOptions": "Sengemuligheter",
"booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
"booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
"booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
"booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
"booking.selectRoom": "Velg rom",
"booking.thisRoomIsEquippedWith": "Dette rommet er utstyrt med",
"breakfast.price": "{amount} {currency}/natt",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/natt",

3
i18n/dictionaries/sv.json
View File

@@ -382,10 +382,13 @@
"as of today": "från och med idag",
"booking.accommodatesUpTo": "Rymmer {nrOfGuests, plural, one {# person} other {upp till # personer}}",
"booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
"booking.basedOnAvailability": "Baserat på tillgänglighet",
"booking.bedOptions": "Sängalternativ",
"booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
"booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
"booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
"booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}",
"booking.selectRoom": "Välj rum",
"booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsLink>Villkoren och villkoren</termsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyLink>Scandics integritetspolicy</privacyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
"booking.thisRoomIsEquippedWith": "Detta rum är utrustat med",
"breakfast.price": "{amount} {currency}/natt",