From cfc4aca5617809dc0f0d1631d94db945e215fd1d Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Fri, 5 Jul 2024 21:00:50 +0200 Subject: [PATCH] feat: add logic to map facilities to icons + responsive script positioning --- .../AmenitiesList/amenitiesList.module.css | 12 +++++++ .../HotelPage/AmenitiesList/index.tsx | 18 ++++++---- .../HotelPage/IntroSection/index.tsx | 10 +++--- .../IntroSection/introSection.module.css | 19 +++++++--- components/ContentType/HotelPage/data.ts | 22 ++++++++++++ .../HotelPage/hotelPage.module.css | 4 +-- components/Icons/People2.tsx | 36 +++++++++++++++++++ components/Icons/get-icon-by-icon-name.ts | 3 ++ components/Icons/index.tsx | 1 + types/components/icon.ts | 1 + 10 files changed, 110 insertions(+), 16 deletions(-) create mode 100644 components/ContentType/HotelPage/data.ts create mode 100644 components/Icons/People2.tsx diff --git a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css index aa57fee2d..2f0664441 100644 --- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css +++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css @@ -8,11 +8,23 @@ padding: var(--Spacing-x-one-and-half) var(--Spacing-x0) !important; } +.amenityItemList { + display: flex; + flex-direction: column; + gap: var(--Spacing-x1); +} + +.amenityItem { + display: inline-flex; + gap: var(--Spacing-x1); +} + @media screen and (min-width: 1367px) { .amenitiesContainer { background-color: var(--Scandic-Beige-10); padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-one-and-half) var(--Spacing-x3); border-radius: var(--Corner-radius-Large); + margin-top: var(--Spacing-x5); } } diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx index a7253df57..5bad0cfb7 100644 --- a/components/ContentType/HotelPage/AmenitiesList/index.tsx +++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx @@ -1,3 +1,4 @@ +import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" import { ChevronRightIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" @@ -17,13 +18,18 @@ export default function AmenitiesList({ .slice(0, 5) return (
+ {/*TODO: Update to "Subtitle 2" once we have the new tokens. */} At the hotel -
- {sortedAmenities.map((facility, index) => ( - - {facility.name} - - ))} +
+ {sortedAmenities.map((facility) => { + const IconComponent = mapFacilityToIcon(facility.name) + return ( +
+ {IconComponent && } + {facility.name} +
+ ) + })}