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

feat(SW-938) Added icon to roomFacilitiesSchema and detailedFacilitySchema

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-20 14:32:33 +01:00
parent 43a44e31ad
commit c71c8af35a
7 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
View File

@@ -13,8 +13,14 @@
font-family: var(--typography-Body-Regular-fontFamily);
border-bottom: 1px solid var(--Base-Border-Subtle);
/* padding set to align with AccordionItem which has a different composition */
padding: var(--Spacing-x2)
calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half));
padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
var(--Spacing-x3);
display: flex;
gap: var(--Spacing-x1);
}
.noIcon {
margin-left: var(--Spacing-x4);
}
.list {

26
components/SidePeeks/HotelSidePeek/index.tsx
View File

@@ -8,12 +8,15 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"
import styles from "./hotelSidePeek.module.css"
import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import { Amenities, Hotel } from "@/types/hotel"
import { IconName } from "@/types/components/icon"
import type { Amenities, Hotel } from "@/types/hotel"
function getAmenitiesList(hotel: Hotel) {
const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
@@ -46,7 +49,10 @@ export default function HotelSidePeek({
<Accordion>
{/* parking */}
{hotel.parking.length ? (
<AccordionItem title={intl.formatMessage({ id: "Parking" })}>
<AccordionItem
title={intl.formatMessage({ id: "Parking" })}
icon={IconName.Parking}
>
{hotel.parking.map((p) => (
<Parking key={p.name} parking={p} />
))}
@@ -56,9 +62,19 @@ export default function HotelSidePeek({
{intl.formatMessage({ id: "Accessibility" })}
</div>
{amenitiesList.map((amenity) => {
const Icon = getFacilityIcon(amenity.icon)
return (
<div key={amenity.id} className={styles.amenity}>
{amenity.name}
{Icon && (
<Icon width={24} height={24} color="uiTextMediumContrast" />
)}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{amenity.name}</span>
</Body>
</div>
)
})}