From bb820afd0eef18415a334d523e13aca211480dd6 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Mon, 26 Aug 2024 14:02:23 +0200
Subject: [PATCH] feat(SW-252): add icons

---
 .../HotelCard/hotelCard.module.css            | 16 ++++++++------
 .../HotelReservation/HotelCard/index.tsx      | 22 +++++++++++++------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index 3ffb34cde..72f6d2877 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -9,8 +9,7 @@
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
-  width: 100%;
-  max-width: 307px;
+  width: 307px;
 }
 
 .header {
@@ -39,6 +38,12 @@
 .facilities {
   display: flex;
   flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
   gap: var(--Spacing-x-half);
 }
 
@@ -71,17 +76,14 @@
       "image header"
       "image hotel"
       "image prices";
-    grid-template-columns: auto-fill;
     overflow: hidden;
-    width: 100%;
-    max-width: 1050px;
+    width: 1050px;
     padding: 0;
   }
 
   .image {
     max-height: 100%;
-    width: 100%;
-    max-width: 518px;
+    width: 518px;
   }
 
   .header {
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index ae5548bba..7ef9b14a3 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -1,13 +1,12 @@
+import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import {
   ChevronRightIcon,
   PriceTagIcon,
   ScandicLogoIcon,
 } from "@/components/Icons"
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -20,6 +19,11 @@ import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/
 
 export default async function HotelCard({ hotel }: HotelCardProps) {
   const intl = await getIntl()
+
+  const sortedAmenities = hotel.detailedFacilities
+    .sort((a, b) => b.sortOrder - a.sortOrder)
+    .slice(0, 5)
+
   return (
     <article className={styles.card}>
       <Image
@@ -39,11 +43,15 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
       </header>
       <section className={styles.hotel}>
         <div className={styles.facilities}>
-          {hotel.detailedFacilities.slice(0, 6).map((data) => (
-            <Caption key={data.id} color="textMediumContrast">
-              {data.name}
-            </Caption>
-          ))}
+          {sortedAmenities.map((facility) => {
+            const IconComponent = mapFacilityToIcon(facility.name)
+            return (
+              <div className={styles.facilitiesItem} key={facility.id}>
+                {IconComponent && <IconComponent color="grey80" />}
+                <Caption color="textMediumContrast">{facility.name}</Caption>
+              </div>
+            )
+          })}
         </div>
         <Link href="#" color="burgundy" className={styles.link}>
           {intl.formatMessage({ id: "See hotel details" })}