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

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

@@ -1,19 +1,32 @@
.wrapper {
display: flex;
flex-direction: column;
display: grid;
gap: var(--Spacing-x3);
overflow: hidden;
}
.information {
display: flex;
flex-direction: column;
.information,
.list,
.prices {
display: grid;
gap: var(--Spacing-x-one-and-half);
}
.list,
.prices {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
.listStyling {
list-style-type: none;
}
.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);
}