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

feat(SW-914): update parking design

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-28 14:32:45 +01:00
parent 7b68bc7ac7
commit d2e214ed6c
10 changed files with 138 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
View File

@@ -1,6 +1,60 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import styles from "./parkingPrices.module.css"
import type { ParkingPricesProps } from "@/types/components/hotelPage/sidepeek/parking" import type { ParkingPricesProps } from "@/types/components/hotelPage/sidepeek/parking"
export default async function ParkingPrices({ data }: ParkingPricesProps) { export default async function ParkingPrices({
// TODO: Parking prices to be implemented. data,
return <div></div> currency,
}: ParkingPricesProps) {
const intl = await getIntl()
const day = intl.formatMessage({ id: "Price per day" })
const night = intl.formatMessage({ id: "Price per night" })
const allDay = intl.formatMessage({ id: "Price per 24 hours" })
function getPeriod(period: string | undefined) {
switch (period) {
case "Day":
return day
case "Night":
return night
case "AllDay":
return allDay
}
}
const filterdPeriods = data?.filter((filter) => filter.period !== "Hour")
console.log("Parking log:", data)
return (
<div className={styles.wrapper}>
{filterdPeriods?.map((parking) => {
return (
<div key={parking.period} className={styles.period}>
<div className={styles.information}>
<Body textTransform="bold" color="uiTextHighContrast">
{getPeriod(parking.period)}
</Body>
<Body color="uiTextHighContrast">
{`${parking.amount} ${currency}`}
</Body>
</div>
{parking.startTime && parking.endTime && (
<div className={styles.information}>
<Body color="uiTextHighContrast">
{intl.formatMessage({ id: "From" })}
</Body>
<Body color="uiTextHighContrast">
{parking.startTime}-{parking.endTime}
</Body>
</div>
)}
</div>
)
})}
</div>
)
} }

13
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css Normal file
View File

@@ -0,0 +1,13 @@
.wrapper {
display: grid;
row-gap: var(--Spacing-x1);
}
.period {
display: flex;
gap: var(--Spacing-x5);
}
.information {
flex: 1;
}

24
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
View File

@@ -1,5 +1,7 @@
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import ParkingPrices from "./ParkingPrices" import ParkingPrices from "./ParkingPrices"
@@ -21,9 +23,9 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
{parking.map((data) => ( {parking.map((data) => (
<div key={data.type} className={styles.information}> <div key={data.type} className={styles.information}>
<div className={styles.list}> <div className={styles.list}>
<Body textTransform="bold">{`${data.type} ${data.name}`}</Body> <Body textTransform="bold">{data.type}</Body>
<Body color="uiTextHighContrast" asChild> <Body color="uiTextHighContrast" asChild>
<ul> <ul className={styles.listStyling}>
{data.numberOfChargingSpaces ? ( {data.numberOfChargingSpaces ? (
<li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li> <li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li>
) : null} ) : null}
@@ -44,19 +46,21 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
<Body textTransform="bold"> <Body textTransform="bold">
{intl.formatMessage({ id: "Prices" })} {intl.formatMessage({ id: "Prices" })}
</Body> </Body>
<div> <div className={styles.weekday}>
<Body color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast" textTransform="uppercase">
{intl.formatMessage({ id: "Ordinary" })} {intl.formatMessage({ id: "Weekday prices" })}
</Body> </Caption>
<Divider color="baseSurfaceSutbleHover" />
<ParkingPrices <ParkingPrices
data={data.pricing.localCurrency.ordinary} data={data.pricing.localCurrency.ordinary}
currency={data.pricing.localCurrency.currency} currency={data.pricing.localCurrency.currency}
/> />
</div> </div>
<div> <div className={styles.weekend}>
<Body color="uiTextMediumContrast"> <Caption color="uiTextMediumContrast" textTransform="uppercase">
{intl.formatMessage({ id: "Weekday" })} {intl.formatMessage({ id: "Weekend prices" })}
</Body> </Caption>
<Divider color="baseSurfaceSutbleHover" />
<ParkingPrices <ParkingPrices
data={data.pricing.localCurrency.weekend} data={data.pricing.localCurrency.weekend}
currency={data.pricing.localCurrency.currency} currency={data.pricing.localCurrency.currency}

35
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css
View File

@@ -1,19 +1,32 @@
.wrapper { .wrapper {
display: flex; display: grid;
flex-direction: column;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
overflow: hidden;
} }
.information { .information,
display: flex; .list,
flex-direction: column; .prices {
display: grid;
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-one-and-half);
} }
.list, .listStyling {
.prices { list-style-type: none;
display: flex; }
flex-direction: column;
gap: var(--Spacing-x-half); .listStyling > li::before {
content: url("/_static/icons/heart.svg");
position: relative;
height: 8px;
top: 3px;
margin-right: var(--Spacing-x1);
}
.weekday,
.weekend {
background-color: var(--Base-Surface-Subtle-Normal);
border-radius: var(--Corner-radius-Medium);
padding: var(--Spacing-x2) var(--Spacing-x3);
display: grid;
gap: var(--Spacing-x1);
} }

5
i18n/dictionaries/da.json
View File

@@ -286,6 +286,9 @@
"Previous victories": "Tidligere sejre", "Previous victories": "Tidligere sejre",
"Price": "Pris", "Price": "Pris",
"Price details": "Prisoplysninger", "Price details": "Prisoplysninger",
"Price per 24 hours": "Pris per 24 timer",
"Price per day": "Pris per dag",
"Price per night": "Pris per nat",
"Prices": "Priser", "Prices": "Priser",
"Proceed to login": "Fortsæt til login", "Proceed to login": "Fortsæt til login",
"Proceed to payment method": "Fortsæt til betalingsmetode", "Proceed to payment method": "Fortsæt til betalingsmetode",
@@ -400,8 +403,10 @@
"We have sent a detailed confirmation of your booking to your email:": "Vi har sendt en detaljeret bekræftelse af din booking til din email:", "We have sent a detailed confirmation of your booking to your email:": "Vi har sendt en detaljeret bekræftelse af din booking til din email:",
"We look forward to your visit!": "Vi ser frem til dit besøg!", "We look forward to your visit!": "Vi ser frem til dit besøg!",
"Weekday": "Ugedag", "Weekday": "Ugedag",
"Weekday prices": "Ugedagspriser",
"Weekdays": "Hverdage", "Weekdays": "Hverdage",
"Weekend": "Weekend", "Weekend": "Weekend",
"Weekend prices": "Weekendpriser",
"Weekends": "Weekender", "Weekends": "Weekender",
"Welcome": "Velkommen", "Welcome": "Velkommen",
"Welcome to": "Velkommen til", "Welcome to": "Velkommen til",

5
i18n/dictionaries/de.json
View File

@@ -285,6 +285,9 @@
"Previous victories": "Bisherige Siege", "Previous victories": "Bisherige Siege",
"Price": "Preis", "Price": "Preis",
"Price details": "Preisdetails", "Price details": "Preisdetails",
"Price per 24 hours": "Preis pro 24 Stunden",
"Price per day": "Preis pro Tag",
"Price per night": "Preis pro Nacht",
"Prices": "Preise", "Prices": "Preise",
"Proceed to login": "Weiter zum Login", "Proceed to login": "Weiter zum Login",
"Proceed to payment method": "Weiter zur Zahlungsmethode", "Proceed to payment method": "Weiter zur Zahlungsmethode",
@@ -399,8 +402,10 @@
"We have sent a detailed confirmation of your booking to your email:": "Wir haben eine detaillierte Bestätigung Ihrer Buchung an Ihre E-Mail gesendet:", "We have sent a detailed confirmation of your booking to your email:": "Wir haben eine detaillierte Bestätigung Ihrer Buchung an Ihre E-Mail gesendet:",
"We look forward to your visit!": "Wir freuen uns auf Ihren Besuch!", "We look forward to your visit!": "Wir freuen uns auf Ihren Besuch!",
"Weekday": "Wochentag", "Weekday": "Wochentag",
"Weekday prices": "Wochentagspreise",
"Weekdays": "Wochentage", "Weekdays": "Wochentage",
"Weekend": "Wochenende", "Weekend": "Wochenende",
"Weekend prices": "Wochenendpreise",
"Weekends": "Wochenenden", "Weekends": "Wochenenden",
"Welcome": "Willkommen", "Welcome": "Willkommen",
"Welcome to": "Willkommen zu", "Welcome to": "Willkommen zu",

5
i18n/dictionaries/en.json
View File

@@ -309,6 +309,9 @@
"Price details": "Price details", "Price details": "Price details",
"Price excl VAT": "Price excl VAT", "Price excl VAT": "Price excl VAT",
"Price incl VAT": "Price incl VAT", "Price incl VAT": "Price incl VAT",
"Price per 24 hours": "Price per 24 hours",
"Price per day": "Price per day",
"Price per night": "Price per night",
"Prices": "Prices", "Prices": "Prices",
"Print confirmation": "Print confirmation", "Print confirmation": "Print confirmation",
"Proceed to login": "Proceed to login", "Proceed to login": "Proceed to login",
@@ -431,8 +434,10 @@
"We have sent a detailed confirmation of your booking to your email:": "We have sent a detailed confirmation of your booking to your email: ", "We have sent a detailed confirmation of your booking to your email:": "We have sent a detailed confirmation of your booking to your email: ",
"We look forward to your visit!": "We look forward to your visit!", "We look forward to your visit!": "We look forward to your visit!",
"Weekday": "Weekday", "Weekday": "Weekday",
"Weekday prices": "Weekday prices",
"Weekdays": "Weekdays", "Weekdays": "Weekdays",
"Weekend": "Weekend", "Weekend": "Weekend",
"Weekend prices": "Weekend prices",
"Weekends": "Weekends", "Weekends": "Weekends",
"Welcome": "Welcome", "Welcome": "Welcome",
"Welcome to": "Welcome to", "Welcome to": "Welcome to",

5
i18n/dictionaries/fi.json
View File

@@ -286,6 +286,9 @@
"Previous victories": "Edelliset voitot", "Previous victories": "Edelliset voitot",
"Price": "Hinta", "Price": "Hinta",
"Price details": "Hintatiedot", "Price details": "Hintatiedot",
"Price per 24 hours": "Hinta per 24 tuntia",
"Price per day": "Hinta per päivä",
"Price per night": "Hinta per yö",
"Prices": "Hinnat", "Prices": "Hinnat",
"Proceed to login": "Jatka kirjautumiseen", "Proceed to login": "Jatka kirjautumiseen",
"Proceed to payment method": "Siirry maksutavalle", "Proceed to payment method": "Siirry maksutavalle",
@@ -400,8 +403,10 @@
"We have sent a detailed confirmation of your booking to your email:": "Olemme lähettäneet yksityiskohtaisen varausvahvistuksen sähköpostiisi:", "We have sent a detailed confirmation of your booking to your email:": "Olemme lähettäneet yksityiskohtaisen varausvahvistuksen sähköpostiisi:",
"We look forward to your visit!": "Odotamme innolla vierailuasi!", "We look forward to your visit!": "Odotamme innolla vierailuasi!",
"Weekday": "Arkipäivä", "Weekday": "Arkipäivä",
"Weekday prices": "Arkisin hinnat",
"Weekdays": "Arkisin", "Weekdays": "Arkisin",
"Weekend": "Viikonloppu", "Weekend": "Viikonloppu",
"Weekend prices": "Viikonlopun hinnat",
"Weekends": "Viikonloppuisin", "Weekends": "Viikonloppuisin",
"Welcome": "Tervetuloa", "Welcome": "Tervetuloa",
"Welcome to": "Tervetuloa", "Welcome to": "Tervetuloa",

5
i18n/dictionaries/no.json
View File

@@ -284,6 +284,9 @@
"Previous victories": "Tidligere seire", "Previous victories": "Tidligere seire",
"Price": "Pris", "Price": "Pris",
"Price details": "Prisdetaljer", "Price details": "Prisdetaljer",
"Price per 24 hours": "Pris per 24 timer",
"Price per day": "Pris per dag",
"Price per night": "Pris per natt",
"Prices": "Priser", "Prices": "Priser",
"Proceed to login": "Fortsett til innlogging", "Proceed to login": "Fortsett til innlogging",
"Proceed to payment method": "Fortsett til betalingsmetode", "Proceed to payment method": "Fortsett til betalingsmetode",
@@ -397,8 +400,10 @@
"We have sent a detailed confirmation of your booking to your email:": "Vi har sendt en detaljert bekreftelse av din bestilling til din e-post:", "We have sent a detailed confirmation of your booking to your email:": "Vi har sendt en detaljert bekreftelse av din bestilling til din e-post:",
"We look forward to your visit!": "Vi ser frem til ditt besøk!", "We look forward to your visit!": "Vi ser frem til ditt besøk!",
"Weekday": "Ukedag", "Weekday": "Ukedag",
"Weekday prices": "Ukedagspriser",
"Weekdays": "Hverdager", "Weekdays": "Hverdager",
"Weekend": "Helg", "Weekend": "Helg",
"Weekend prices": "Helgepriser",
"Weekends": "Helger", "Weekends": "Helger",
"Welcome": "Velkommen", "Welcome": "Velkommen",
"Welcome to": "Velkommen til", "Welcome to": "Velkommen til",

5
i18n/dictionaries/sv.json
View File

@@ -284,6 +284,9 @@
"Previous victories": "Tidigare segrar", "Previous victories": "Tidigare segrar",
"Price": "Pris", "Price": "Pris",
"Price details": "Prisdetaljer", "Price details": "Prisdetaljer",
"Price per 24 hours": "Pris per 24 timmar",
"Price per day": "Pris per dag",
"Price per night": "Pris per natt",
"Prices": "Priser", "Prices": "Priser",
"Proceed to login": "Fortsätt till inloggning", "Proceed to login": "Fortsätt till inloggning",
"Proceed to payment method": "Gå vidare till betalningsmetod", "Proceed to payment method": "Gå vidare till betalningsmetod",
@@ -397,8 +400,10 @@
"We have sent a detailed confirmation of your booking to your email:": "Vi har skickat en detaljerad bekräftelse av din bokning till din e-post:", "We have sent a detailed confirmation of your booking to your email:": "Vi har skickat en detaljerad bekräftelse av din bokning till din e-post:",
"We look forward to your visit!": "Vi ser fram emot ditt besök!", "We look forward to your visit!": "Vi ser fram emot ditt besök!",
"Weekday": "Vardag", "Weekday": "Vardag",
"Weekday prices": "Vardagspriser",
"Weekdays": "Vardagar", "Weekdays": "Vardagar",
"Weekend": "Helg", "Weekend": "Helg",
"Weekend prices": "Helgpriser",
"Weekends": "Helger", "Weekends": "Helger",
"Welcome": "Välkommen", "Welcome": "Välkommen",
"Welcome to": "Välkommen till", "Welcome to": "Välkommen till",