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} isOpen={isSidePeekOpen}
handleClose={() => setIsSidePeekOpen(false)} handleClose={() => setIsSidePeekOpen(false)}
> >
<Body color="baseTextMediumContrast"> <div className={styles.wrapper}>
{roomSize?.min === roomSize?.max <div className={styles.mainContent}>
? roomSize?.min <Body color="baseTextMediumContrast">
: `${roomSize?.min} - ${roomSize?.max}`} {roomSize?.min === roomSize?.max
m².{" "} ? roomSize?.min
{intl.formatMessage( : `${roomSize?.min} - ${roomSize?.max}`}
{ id: "booking.accommodatesUpTo" }, m².{" "}
{ nrOfGuests: occupancy } {intl.formatMessage(
)} { id: "booking.accommodatesUpTo" },
</Body> { nrOfGuests: occupancy }
)}
{images && ( </Body>
<div className={styles.imageContainer}> {images && (
<ImageGallery images={images} title={selectedRoom.name} /> <div className={styles.imageContainer}>
<ImageGallery images={images} title={selectedRoom.name} />
</div>
)}
<Body color="uiTextHighContrast">{roomDescription}</Body>
</div> </div>
)} <div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
<Body className={styles.description} color="uiTextHighContrast"> {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
{roomDescription} </Subtitle>
</Body> <ul className={styles.facilityList}>
<Subtitle type="two" color="uiTextHighContrast"> {selectedRoom?.roomFacilities
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })} .sort((a, b) => a.sortOrder - b.sortOrder)
</Subtitle> .map((facility) => {
<ul className={styles.facilityList}> const Icon = getFacilityIcon(facility.name)
{selectedRoom?.roomFacilities return (
.sort((a, b) => a.sortOrder - b.sortOrder) <li key={facility.name}>
.map((facility) => { {Icon && <Icon color="uiTextMediumContrast" />}
const Icon = getFacilityIcon(facility.name) <Body
asChild
return ( className={!Icon ? styles.noIcon : undefined}
<li key={facility.name}> color="uiTextMediumContrast"
{Icon && <Icon color="uiTextMediumContrast" />} >
<Body <span>{facility.name}</span>
asChild </Body>
className={!Icon ? styles.noIcon : undefined} </li>
color="uiTextMediumContrast" )
> })}
<span>{facility.name}</span> </ul>
</Body> </div>
</li> <div className={styles.listContainer}>
) <Subtitle type="two" color="uiTextHighContrast">
})} {intl.formatMessage({ id: "booking.bedOptions" })}
</ul> </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> </SidePeek>
</div> </div>
) )

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

@@ -4,20 +4,40 @@
text-decoration: none; text-decoration: none;
} }
.imageContainer { .wrapper {
min-height: 185px; display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
position: relative; position: relative;
margin-bottom: calc(var(--Spacing-x4) * 2 + 20px);
} }
.description { .mainContent,
margin-top: var(--Spacing-x-one-and-half); .listContainer {
margin-bottom: var(--Spacing-x2); 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 { .facilityList {
margin-top: var(--Spacing-x-one-and-half); margin-top: var(--Spacing-x-one-and-half);
column-count: 2; column-count: 2;
column-gap: var(--Spacing-x2); column-gap: var(--Spacing-x2);
} }
.facilityList li { .facilityList li {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
@@ -27,3 +47,16 @@
.noIcon { .noIcon {
margin-left: var(--Spacing-x4); 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", "as of today": "pr. dags dato",
"booking.accommodatesUpTo": "Plads til {nrOfGuests, plural, one {# person} other {op til # personer}}", "booking.accommodatesUpTo": "Plads til {nrOfGuests, plural, one {# person} other {op til # personer}}",
"booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}", "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.children": "{totalChildren, plural, one {# barn} other {# børn}}",
"booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}", "booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
"booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}", "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
"booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}", "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.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", "booking.thisRoomIsEquippedWith": "Dette værelse er udstyret med",
"breakfast.price": "{amount} {currency}/nat", "breakfast.price": "{amount} {currency}/nat",

3
i18n/dictionaries/de.json
View File

@@ -383,10 +383,13 @@
"as of today": "Stand heute", "as of today": "Stand heute",
"booking.accommodatesUpTo": "Bietet Platz für {nrOfGuests, plural, one {# Person } other {bis zu # Personen}}", "booking.accommodatesUpTo": "Bietet Platz für {nrOfGuests, plural, one {# Person } other {bis zu # Personen}}",
"booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}", "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.children": "{totalChildren, plural, one {# kind} other {# kinder}}",
"booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}", "booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
"booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}", "booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
"booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}", "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.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", "booking.thisRoomIsEquippedWith": "Dieses Zimmer ist ausgestattet mit",
"breakfast.price": "{amount} {currency}/Nacht", "breakfast.price": "{amount} {currency}/Nacht",

3
i18n/dictionaries/en.json
View File

@@ -400,12 +400,15 @@
"as of today": "as of today", "as of today": "as of today",
"booking.accommodatesUpTo": "Accommodates up to {nrOfGuests, plural, one {# person} other {# people}}", "booking.accommodatesUpTo": "Accommodates up to {nrOfGuests, plural, one {# person} other {# people}}",
"booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}", "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.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.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.confirmation.title": "Your booking is confirmed",
"booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}", "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
"booking.nights": "{totalNights, plural, one {# night} other {# nights}}", "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
"booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}", "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.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", "booking.thisRoomIsEquippedWith": "This room is equipped with",
"breakfast.price": "{amount} {currency}/night", "breakfast.price": "{amount} {currency}/night",

3
i18n/dictionaries/fi.json
View File

@@ -383,10 +383,13 @@
"as of today": "tänään", "as of today": "tänään",
"booking.accommodatesUpTo": "Huoneeseen {nrOfGuests, plural, one {# person} other {mahtuu 2 henkilöä}}", "booking.accommodatesUpTo": "Huoneeseen {nrOfGuests, plural, one {# person} other {mahtuu 2 henkilöä}}",
"booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}", "booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
"booking.basedOnAvailability": "Saatavuuden mukaan",
"booking.bedOptions": "Vuodevaihtoehdot",
"booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}", "booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}",
"booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}", "booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
"booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}", "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
"booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}", "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.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", "booking.thisRoomIsEquippedWith": "Tämä huone on varustettu",
"breakfast.price": "{amount} {currency}/yö", "breakfast.price": "{amount} {currency}/yö",

3
i18n/dictionaries/no.json
View File

@@ -382,10 +382,13 @@
"as of today": "per i dag", "as of today": "per i dag",
"booking.accommodatesUpTo": "Plass til {nrOfGuests, plural, one {# person} other {opptil # personer}}", "booking.accommodatesUpTo": "Plass til {nrOfGuests, plural, one {# person} other {opptil # personer}}",
"booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}", "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.children": "{totalChildren, plural, one {# barn} other {# barn}}",
"booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}", "booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
"booking.nights": "{totalNights, plural, one {# natt} other {# netter}}", "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
"booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}", "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
"booking.selectRoom": "Velg rom",
"booking.thisRoomIsEquippedWith": "Dette rommet er utstyrt med", "booking.thisRoomIsEquippedWith": "Dette rommet er utstyrt med",
"breakfast.price": "{amount} {currency}/natt", "breakfast.price": "{amount} {currency}/natt",
"breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/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", "as of today": "från och med idag",
"booking.accommodatesUpTo": "Rymmer {nrOfGuests, plural, one {# person} other {upp till # personer}}", "booking.accommodatesUpTo": "Rymmer {nrOfGuests, plural, one {# person} other {upp till # personer}}",
"booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}", "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.children": "{totalChildren, plural, one {# barn} other {# barn}}",
"booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}", "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
"booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}", "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
"booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}", "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.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", "booking.thisRoomIsEquippedWith": "Detta rum är utrustat med",
"breakfast.price": "{amount} {currency}/natt", "breakfast.price": "{amount} {currency}/natt",