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); font-family: var(--typography-Body-Regular-fontFamily);
border-bottom: 1px solid var(--Base-Border-Subtle); border-bottom: 1px solid var(--Base-Border-Subtle);
/* padding set to align with AccordionItem which has a different composition */ /* padding set to align with AccordionItem which has a different composition */
padding: var(--Spacing-x2) padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
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 { .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 Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"
import styles from "./hotelSidePeek.module.css" import styles from "./hotelSidePeek.module.css"
import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek" import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" 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) { function getAmenitiesList(hotel: Hotel) {
const detailedAmenities: Amenities = hotel.detailedFacilities.filter( const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
@@ -46,7 +49,10 @@ export default function HotelSidePeek({
<Accordion> <Accordion>
{/* parking */} {/* parking */}
{hotel.parking.length ? ( {hotel.parking.length ? (
<AccordionItem title={intl.formatMessage({ id: "Parking" })}> <AccordionItem
title={intl.formatMessage({ id: "Parking" })}
icon={IconName.Parking}
>
{hotel.parking.map((p) => ( {hotel.parking.map((p) => (
<Parking key={p.name} parking={p} /> <Parking key={p.name} parking={p} />
))} ))}
@@ -56,9 +62,19 @@ export default function HotelSidePeek({
{intl.formatMessage({ id: "Accessibility" })} {intl.formatMessage({ id: "Accessibility" })}
</div> </div>
{amenitiesList.map((amenity) => { {amenitiesList.map((amenity) => {
const Icon = getFacilityIcon(amenity.icon)
return ( return (
<div key={amenity.id} className={styles.amenity}> <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> </div>
) )
})} })}

10
components/SidePeeks/RoomSidePeek/index.tsx
View File

@@ -56,10 +56,16 @@ export default function RoomSidePeek({
{room.roomFacilities {room.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder) .sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => { .map((facility) => {
const Icon = getFacilityIcon(facility.name) const Icon = getFacilityIcon(facility.icon)
return ( return (
<li key={facility.name}> <li key={facility.name}>
{Icon && <Icon color="uiTextMediumContrast" />} {Icon && (
<Icon
width={24}
height={24}
color="uiTextMediumContrast"
/>
)}
<Body <Body
asChild asChild
className={!Icon ? styles.noIcon : undefined} className={!Icon ? styles.noIcon : undefined}

2
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
View File

@@ -10,7 +10,7 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-one-and-half) var(--Spacing-x2); gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
cursor: pointer; cursor: pointer;
color: var(--Base-Text-High-contrast); color: var(--Base-Text-High-contrast);
font-family: var(--typography-Body-Bold-fontFamily); font-family: var(--typography-Body-Bold-fontFamily);

1
server/routers/hotels/output.ts
View File

@@ -125,6 +125,7 @@ const detailedFacilitySchema = z.object({
public: z.boolean(), public: z.boolean(),
sortOrder: z.number(), sortOrder: z.number(),
filter: z.string().optional(), filter: z.string().optional(),
icon: z.string(),
}) })
export const facilitySchema = z.object({ export const facilitySchema = z.object({

1
server/routers/hotels/schemas/room.ts
View File

@@ -56,6 +56,7 @@ const roomFacilitiesSchema = z.object({
name: z.string(), name: z.string(),
isUniqueSellingPoint: z.boolean(), isUniqueSellingPoint: z.boolean(),
sortOrder: z.number(), sortOrder: z.number(),
icon: z.string(),
}) })
export const roomSchema = z export const roomSchema = z

1
types/components/hotelReservation/selectHotel/hotelFilters.ts
View File

@@ -15,6 +15,7 @@ export type Filter = {
public: boolean public: boolean
sortOrder: number sortOrder: number
filter?: string filter?: string
icon: string
} }
export type HotelFilterModalProps = { export type HotelFilterModalProps = {