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/ContentType/HotelPage/PreviewImages/index.tsx

@@ -21,9 +21,9 @@ export default async function PreviewImages({
         {images.slice(0, 3).map((image, index) => (
           <Image
             key={index}
-            src={image.url}
-            alt={image.alt}
-            title={image.title}
+            src={image.imageSizes.medium}
+            alt={image.metaData.altText}
+            title={image.metaData.title}
             width={index === 0 ? 752 : 292}
             height={index === 0 ? 540 : 266}
             className={styles.image}

components/ContentType/HotelPage/index.tsx

@@ -63,7 +63,9 @@ export default async function HotelPage() {
   return (
     <div className={styles.pageContainer}>
       <div className={styles.hotelImages}>
-        <PreviewImages images={hotelImages} hotelName={hotelName} />
+        {hotelImages?.length && (
+          <PreviewImages images={hotelImages} hotelName={hotelName} />
+        )}
       </div>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}

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}

components/Lightbox/FullView.tsx

@@ -40,7 +40,7 @@ export default function FullView({
       <div className={styles.fullViewImageContainer}>
         <AnimatePresence initial={false} custom={currentIndex}>
           <motion.div
-            key={image.url}
+            key={image.imageSizes.medium}
             custom={currentIndex}
             initial={{ opacity: 0, x: 300 }}
             animate={{ opacity: 1, x: 0 }}
@@ -49,14 +49,16 @@ export default function FullView({
             className={styles.fullViewImage}
           >
             <Image
-              alt={image.alt}
+              alt={image.metaData.altText}
               fill
-              src={image.url}
+              src={image.imageSizes.medium}
               style={{ objectFit: "cover" }}
             />
 
             <div className={styles.fullViewFooter}>
-              {image.title && <Body color="white">{image.title}</Body>}
+              {image.metaData.title && (
+                <Body color="white">{image.metaData.title}</Body>
+              )}
             </div>
           </motion.div>
         </AnimatePresence>

components/Lightbox/Gallery.tsx

@@ -20,7 +20,7 @@ export default function Gallery({
   selectedImage,
 }: GalleryProps) {
   const mainImage = selectedImage || images[0]
-  const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)
+  const mainImageIndex = images.findIndex((img) => img === mainImage)
 
   function getThumbImages() {
     const thumbs = []
@@ -55,16 +55,18 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <div className={styles.galleryHeader}>
-          {mainImage.title && (
+          {mainImage.metaData.title && (
             <div className={styles.imageCaption}>
-              <Caption color="textMediumContrast">{mainImage.title}</Caption>
+              <Caption color="textMediumContrast">
+                {mainImage.metaData.title}
+              </Caption>
             </div>
           )}
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} mode="wait">
             <motion.div
-              key={mainImage.url}
+              key={mainImage.imageSizes.medium}
               className={styles.mainImageContainer}
               initial={{ opacity: 0, x: 300 }}
               animate={{ opacity: 1, x: 0 }}
@@ -72,10 +74,10 @@ export default function Gallery({
               transition={{ duration: 0.3 }}
             >
               <Image
-                src={mainImage.url}
-                alt={mainImage.alt}
-                layout="fill"
-                objectFit="cover"
+                src={mainImage.imageSizes.medium}
+                alt={mainImage.metaData.altText}
+                fill
+                className={styles.image}
                 onClick={onImageClick}
               />
             </motion.div>
@@ -100,7 +102,7 @@ export default function Gallery({
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div
-                key={image.url}
+                key={image.imageSizes.tiny}
                 className={styles.thumbnailContainer}
                 onClick={() => onSelectImage(image)}
                 initial={{ opacity: 0, x: 50 }}
@@ -109,10 +111,10 @@ export default function Gallery({
                 transition={{ duration: 0.2, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.url}
-                  alt={image.alt}
-                  layout="fill"
-                  objectFit="cover"
+                  src={image.imageSizes.tiny}
+                  alt={image.metaData.altText}
+                  fill
+                  className={styles.image}
                 />
               </motion.div>
             ))}
@@ -139,7 +141,7 @@ export default function Gallery({
           <div className={styles.thumbnailGrid}>
             {images.map((image, index) => (
               <motion.div
-                key={image.url}
+                key={image.imageSizes.small}
                 className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
                 onClick={() => {
                   onSelectImage(image)
@@ -150,10 +152,10 @@ export default function Gallery({
                 transition={{ duration: 0.3, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.url}
-                  alt={image.alt}
-                  layout="fill"
-                  objectFit="cover"
+                  src={image.imageSizes.small}
+                  alt={image.metaData.altText}
+                  fill
+                  className={styles.image}
                 />
               </motion.div>
             ))}

components/Lightbox/Lightbox.module.css

@@ -184,6 +184,25 @@
   max-width: 548px;
 }
 
+.image {
+  object-fit: cover;
+}
+
+@media (min-width: 768px) and (max-width: 1367px) {
+  .fullViewContainer {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    padding: var(--Spacing-x5);
+  }
+
+  .fullViewImageContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-height: 35rem;
+  }
+}
+
 @media (min-width: 1367px) {
   .mobileGallery,
   .thumbnailGrid {

components/Lightbox/index.tsx

@@ -97,7 +97,7 @@ export default function Lightbox({
                       onClose={() => setIsOpen(false)}
                       onSelectImage={(image) => {
                         setSelectedImageIndex(
-                          images.findIndex((img) => img.url === image.url)
+                          images.findIndex((img) => img === image)
                         )
                       }}
                       onImageClick={() => setIsFullView(true)}