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

@@ -0,0 +1,36 @@
+import { GalleryIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Lightbox from "@/components/Lightbox"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./imageGallery.module.css"
+
+import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
+
+export default function ImageGallery({ images, title }: ImageGalleryProps) {
+  return (
+    <Lightbox
+      images={images.map((image) => ({
+        url: image.imageSizes.small,
+        alt: image.metaData.altText,
+        title: image.metaData.title,
+      }))}
+      dialogTitle={title}
+    >
+      <div className={styles.triggerArea} id="lightboxTrigger">
+        <Image
+          src={images[0].imageSizes.medium}
+          alt={images[0].metaData.altText}
+          className={styles.image}
+          fill
+        />
+        <div className={styles.galleryIcon}>
+          <GalleryIcon color="white" />
+          <Footnote color="white" type="label">
+            {images.length}
+          </Footnote>
+        </div>
+      </div>
+    </Lightbox>
+  )
+}