feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox

* feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox
* feat(BOOK-144): Make image clickable instead of a button to avoid being able to click outside of the image area

Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Lightbox/Gallery/gallery.module.css

@@ -1,4 +1,4 @@
-.galleryContainer {
+.gallery {
   display: grid;
   gap: var(--Space-x2);
   padding: var(--Space-x2);
@@ -32,7 +32,6 @@
   border-width: 0;
   background-color: transparent;
   cursor: pointer;
-  border-radius: var(--Corner-radius-md);
   overflow: hidden;
   z-index: 0;
 
@@ -45,6 +44,7 @@
   transition: opacity 0.3s ease-in-out;
   object-fit: cover;
   z-index: -1;
+  border-radius: var(--Corner-radius-md);
 }
 
 @media screen and (max-width: 767px) {
@@ -53,7 +53,7 @@
     display: none;
   }
 
-  .galleryContainer {
+  .gallery {
     align-content: start;
   }
 
@@ -68,8 +68,8 @@
     display: none;
   }
 
-  .galleryContainer {
-    padding: var(--Spacing-x5) var(--Spacing-x6);
+  .gallery {
+    padding: var(--Space-x5) var(--Space-x6);
   }
 
   .closeButton {
@@ -81,42 +81,56 @@
 
   .desktopGallery {
     display: grid;
-    grid-template-rows: 28px 1fr 7.8125rem;
-    row-gap: var(--Spacing-x-one-and-half);
+    grid-template-rows: 28px 1fr 125px;
+    row-gap: var(--Space-x15);
     background-color: var(--Background-Primary);
     height: 100%;
     position: relative;
     overflow: hidden;
   }
 
-  .galleryHeader {
+  .header {
     display: flex;
-    align-items: center;
+    justify-content: center;
   }
 
-  .imageCaption {
+  .caption {
     background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x-half) var(--Spacing-x1);
+    padding: var(--Space-x05) var(--Space-x1);
     border-radius: var(--Corner-radius-sm);
     color: var(--Text-Secondary);
   }
 
-  .mainImageWrapper {
+  .content {
     position: relative;
     width: 100%;
+    height: 100%;
   }
 
-  .mainImageContainer {
-    width: 100%;
-    height: 100%;
-    will-change: transform;
+  .motionContainer {
     position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mainImage {
+    object-fit: contain;
+    border-radius: var(--Corner-radius-Medium);
+    /* Override Next.js Image styles, we can't set width/height on the image as we don't know the aspect ratio of the image */
+    width: auto !important;
+    height: auto !important;
+    position: relative !important;
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
   }
 
   .desktopThumbnailGrid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: var(--Spacing-x1);
+    gap: var(--Space-x1);
     max-height: 7.8125rem;
     overflow: hidden;
   }
@@ -155,10 +169,10 @@
   }
 
   .galleryPrevButton {
-    left: var(--Spacing-x2);
+    left: var(--Space-x2);
   }
 
   .galleryNextButton {
-    right: var(--Spacing-x2);
+    right: var(--Space-x2);
   }
 }

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -85,7 +85,7 @@ export default function Gallery({
   }
 
   return (
-    <div className={styles.galleryContainer}>
+    <div className={styles.gallery}>
       <IconButton
         theme="Black"
         style="Muted"
@@ -112,17 +112,17 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p className={styles.galleryHeader}>
+          <p className={styles.header}>
             {mainImage.caption && !hideLabel && (
-              <span className={styles.imageCaption}>{mainImage.caption}</span>
+              <span className={styles.caption}>{mainImage.caption}</span>
             )}
           </p>
         </Typography>
-        <div className={styles.mainImageWrapper}>
+        <div className={styles.content}>
           <AnimatePresence initial={false} custom={animateLeft}>
             <motion.div
               key={mainImage.src}
-              className={styles.mainImageContainer}
+              className={styles.motionContainer}
               custom={animateLeft}
               variants={variants}
               initial="initial"
@@ -130,21 +130,19 @@ export default function Gallery({
               exit="exit"
               transition={{ duration: 0.3 }}
             >
-              <ButtonRAC
-                onPress={onImageClick}
-                className={styles.imageButton}
+              <Image
+                src={mainImage.src}
+                alt={mainImage.alt}
+                fill
+                sizes="(min-width: 1000px) 1000px, 100vw"
+                className={styles.mainImage}
+                onClick={onImageClick}
+                tabIndex={0}
                 aria-label={intl.formatMessage({
                   defaultMessage: 'Open image',
                 })}
-              >
-                <Image
-                  src={mainImage.src}
-                  alt={mainImage.alt}
-                  fill
-                  sizes="(min-width: 1000px) 1000px, 100vw"
-                  className={styles.image}
-                />
-              </ButtonRAC>
+                role="button"
+              />
             </motion.div>
           </AnimatePresence>
           <motion.button