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/HotelCard/index.tsx

@@ -11,10 +11,11 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import ReadMore from "../ReadMore"
+import ImageGallery from "../SelectRate/ImageGallery"
 
 import styles from "./hotelCard.module.css"
 
-import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
+import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
 export default async function HotelCard({ hotel }: HotelCardProps) {
   const intl = await getIntl()
@@ -27,13 +28,15 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
   return (
     <article className={styles.card}>
       <section className={styles.imageContainer}>
-        <Image
-          src={hotelData.hotelContent.images.imageSizes.medium}
-          alt={hotelData.hotelContent.images.metaData.altText}
-          width={300}
-          height={200}
-          className={styles.image}
-        />
+        {hotelData.gallery && (
+          <ImageGallery
+            title={hotelData.name}
+            images={[
+              hotelData.hotelContent.images,
+              ...hotelData.gallery.heroImages,
+            ]}
+          />
+        )}
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />