feat/SW-689-image-gallery-sizes (pull request #781)

Feat/SW-689 image gallery sizes

* feat(SW-689): initial gallery changes

* feat(SW-689): remove console.log

* feat(SW-689): remove unneccessary code

* feat(SW-689): change sizes

* feat(SW-689): change size

* feat(SW-689): add design for ipad for fullview

* feat(SW-689): fix import type

* feat(SW-689): fix tripAdvisor placement

* feat(SW-689): fix image gallery type

* feat(SW-689): fix check gallery length


Approved-by: Christian Andolf
Approved-by: Matilda Landström

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -3,7 +3,6 @@ import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
-import Image from "@/components/Image"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -29,14 +28,6 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            {hotelAttributes.ratings?.tripAdvisor && (
-              <div className={styles.tripAdvisor}>
-                <TripAdvisorIcon color="burgundy" />
-                <Caption color="burgundy">
-                  {hotelAttributes.ratings.tripAdvisor.rating}
-                </Caption>
-              </div>
-            )}
             {hotelAttributes.gallery && (
               <ImageGallery
                 title={hotelAttributes.name}
@@ -46,6 +37,14 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                 ]}
               />
             )}
+            {hotelAttributes.ratings?.tripAdvisor && (
+              <div className={styles.tripAdvisor}>
+                <TripAdvisorIcon color="burgundy" />
+                <Caption color="burgundy">
+                  {hotelAttributes.ratings.tripAdvisor.rating}
+                </Caption>
+              </div>
+            )}
           </div>
           <div className={styles.hotelContent}>
             <div className={styles.hotelInformation}>

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -9,14 +9,7 @@ import type { ImageGalleryProps } from "@/types/components/hotelReservation/sele
 
 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}
-    >
+    <Lightbox images={images} dialogTitle={title}>
       <div className={styles.triggerArea} id="lightboxTrigger">
         <Image
           src={images[0].imageSizes.medium}