Merged in feat/SW-673-galleryicon-hotel-lightbox (pull request #734)

Feat/SW-673 galleryicon hotel lightbox

* feat(SW-673): add galleryChip to trigger lightbox

* feat(SW-673): add updated design galleryIcon

* feat(SW-673): add first image from hotelContent and heroImages

* feat(SW-673): fix import type

* feat(SW-673): fix css variables

* feat(SW-673): change component to include image that trigger lightbox

* feat(SW-673): refactor name to imageGallery


Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -10,6 +10,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../../ReadMore"
+import ImageGallery from "../ImageGallery"
 
 import styles from "./hotelInfoCard.module.css"
 
@@ -28,12 +29,6 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            <Image
-              src={hotelAttributes.hotelContent.images.imageSizes.medium}
-              alt={hotelAttributes.hotelContent.images.metaData.altText}
-              className={styles.image}
-              fill
-            />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>
                 <TripAdvisorIcon color="burgundy" />
@@ -42,7 +37,15 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                 </Caption>
               </div>
             )}
-            {/* TODO: gallery icon and image carousel */}
+            {hotelAttributes.gallery && (
+              <ImageGallery
+                title={hotelAttributes.name}
+                images={[
+                  hotelAttributes.hotelContent.images,
+                  ...hotelAttributes.gallery.heroImages,
+                ]}
+              />
+            )}
           </div>
           <div className={styles.hotelContent}>
             <div className={styles.hotelInformation}>