feat(SW-252): add icons

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 {

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" })}