From c71c8af35af4b57b6f91984eb0669e363532c78b Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Wed, 20 Nov 2024 14:32:33 +0100 Subject: [PATCH] feat(SW-938) Added icon to roomFacilitiesSchema and detailedFacilitySchema --- .../HotelSidePeek/hotelSidePeek.module.css | 10 +++++-- components/SidePeeks/HotelSidePeek/index.tsx | 26 +++++++++++++++---- components/SidePeeks/RoomSidePeek/index.tsx | 10 +++++-- .../AccordionItem/accordionItem.module.css | 2 +- server/routers/hotels/output.ts | 1 + server/routers/hotels/schemas/room.ts | 1 + .../selectHotel/hotelFilters.ts | 1 + 7 files changed, 41 insertions(+), 10 deletions(-) diff --git a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css index 57bb78db4..37fb3aeab 100644 --- a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css +++ b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css @@ -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 { diff --git a/components/SidePeeks/HotelSidePeek/index.tsx b/components/SidePeeks/HotelSidePeek/index.tsx index 06ac3e5f2..259c8d16c 100644 --- a/components/SidePeeks/HotelSidePeek/index.tsx +++ b/components/SidePeeks/HotelSidePeek/index.tsx @@ -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({ {/* parking */} {hotel.parking.length ? ( - + {hotel.parking.map((p) => ( ))} @@ -56,9 +62,19 @@ export default function HotelSidePeek({ {intl.formatMessage({ id: "Accessibility" })} {amenitiesList.map((amenity) => { + const Icon = getFacilityIcon(amenity.icon) return (
- {amenity.name} + {Icon && ( + + )} + + {amenity.name} +
) })} diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx index da46a6f42..175eb14a0 100644 --- a/components/SidePeeks/RoomSidePeek/index.tsx +++ b/components/SidePeeks/RoomSidePeek/index.tsx @@ -56,10 +56,16 @@ export default function RoomSidePeek({ {room.roomFacilities .sort((a, b) => a.sortOrder - b.sortOrder) .map((facility) => { - const Icon = getFacilityIcon(facility.name) + const Icon = getFacilityIcon(facility.icon) return (
  • - {Icon && } + {Icon && ( + + )}