Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)

components/HotelReservation/HotelCard/index.tsx

@@ -16,6 +16,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ReadMore from "../ReadMore"
@@ -66,6 +67,9 @@ function HotelCard({
   })
 
   const addressStr = `${hotelData.address.streetAddress}, ${hotelData.address.city}`
+  const galleryImages = mapApiImagesToGalleryImages(
+    hotelData.galleryImages || []
+  )
 
   return (
     <article
@@ -75,11 +79,7 @@ function HotelCard({
     >
       <div>
         <div className={styles.imageContainer}>
-          <ImageGallery
-            title={hotelData.name}
-            images={hotelData.galleryImages}
-            fill
-          />
+          <ImageGallery title={hotelData.name} images={galleryImages} fill />
           {hotelData.ratings?.tripAdvisor && (
             <TripAdvisorChip rating={hotelData.ratings.tripAdvisor.rating} />
           )}