refactor(SW-96): unify lightbox to handle mobile and desktop

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -1,11 +1,11 @@
 import Image from "@/components/Image"
-import { DesktopLightbox } from "@/components/Lightbox/Desktop"
+import { Lightbox } from "@/components/Lightbox"
 import Button from "@/components/TempDesignSystem/Button"
 import { getIntl } from "@/i18n"
 
 import styles from "./previewImages.module.css"
 
-import { ImageItem } from "@/types/components/lightbox/desktopLightbox"
+import { ImageItem } from "@/types/components/lightbox/lightbox"
 
 export default async function PreviewImages({
   images,
@@ -14,7 +14,7 @@ export default async function PreviewImages({
 }) {
   const intl = await getIntl()
   return (
-    <DesktopLightbox images={images}>
+    <Lightbox images={images}>
       <div className={styles.desktopGrid}>
         {/*TODO: Replace with images from API once SW-189 is merged. */}
         {images.slice(0, 3).map((image, index) => (
@@ -38,6 +38,6 @@ export default async function PreviewImages({
           {intl.formatMessage({ id: "See all photos" })}
         </Button>
       </div>
-    </DesktopLightbox>
+    </Lightbox>
   )
 }

components/ContentType/HotelPage/data.ts

@@ -3,7 +3,7 @@ import { FC } from "react"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
 import { IconName, IconProps } from "@/types/components/icon"
-import { ImageItem } from "@/types/components/lightbox/desktopLightbox"
+import { ImageItem } from "@/types/components/lightbox/lightbox"
 
 const facilityToIconMap: { [key: string]: IconName } = {
   Bar: IconName.Bar,

components/Lightbox/Desktop/desktopLightbox.module.css

@@ -1,165 +0,0 @@
-.content {
-  border-radius: var(--Corner-radius-Large);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  width: 1090px;
-  height: 725px;
-  overflow: hidden;
-  z-index: 10;
-}
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 10;
-}
-
-.galleryContainer {
-  background-color: var(--Base-Background-Primary-Normal);
-  padding: var(--Spacing-x5) var(--Spacing-x6);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.closeButton {
-  position: absolute;
-  top: var(--Spacing-x-one-and-half);
-  right: var(--Spacing-x-half);
-}
-
-.backButton {
-  position: absolute;
-  top: var(--Spacing-x-one-and-half);
-  left: var(--Spacing-x-half);
-}
-
-.galleryHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--Spacing-x1);
-}
-
-.imageCaption {
-  background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Small);
-}
-
-.mainImageWrapper {
-  position: relative;
-  flex: 1;
-  margin-bottom: var(--Spacing-x2);
-}
-
-.mainImageContainer {
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-  overflow: hidden;
-}
-
-.mainImageContainer img,
-.thumbnailContainer img {
-  border-radius: var(--Corner-radius-Small);
-  cursor: pointer;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.thumbnailGrid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--Spacing-x1);
-  max-height: 125px;
-  overflow: hidden;
-}
-
-.thumbnailContainer {
-  position: relative;
-  height: 125px;
-}
-
-.fullViewContainer {
-  background-color: var(--UI-Text-High-contrast);
-  height: 100%;
-  padding: var(--Spacing-x5);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.fullViewHeader {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--Spacing-x5);
-  width: 100%;
-}
-
-.fullViewImageContainer {
-  position: relative;
-  width: 100%;
-  max-width: 1054px;
-  height: 700px;
-  margin-bottom: var(--Spacing-x5);
-}
-
-.fullViewImage {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.fullViewFooter {
-  width: 100%;
-  max-width: 1054px;
-  text-align: left;
-  padding-left: 116px;
-}
-
-.imagePosition {
-  background-color: var(--UI-Grey-90);
-  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
-}
-
-.fullViewImageContainer img {
-  border-radius: var(--Corner-radius-Medium);
-  cursor: pointer;
-}
-
-.navigationButton {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: var(--Base-Button-Inverted-Fill-Normal);
-  border-radius: 50%;
-  padding: var(--Spacing-x1);
-  cursor: pointer;
-  border: none;
-  display: flex;
-  z-index: 1;
-}
-
-.navigationButton:hover {
-  background-color: var(--Base-Button-Inverted-Fill-Hover);
-}
-
-.prevButton {
-  left: var(--Spacing-x2);
-}
-
-.leftTransformIcon {
-  transform: scaleX(-1);
-}
-
-.nextButton {
-  right: var(--Spacing-x2);
-}
-
-.portraitImage {
-  max-width: 548px;
-}

components/Lightbox/Lightbox.module.css

@@ -0,0 +1,272 @@
+.desktopGallery {
+  display: none;
+}
+
+.mobileGallery {
+  margin-top: 70.047px;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.mobileGalleryContent {
+  display: block;
+}
+
+.fullViewCloseButton {
+  position: absolute;
+  top: var(--Spacing-x-one-and-half);
+  left: var(--Spacing-x-half);
+  z-index: 1;
+}
+
+.leftTransformIcon {
+  transform: scaleX(-1);
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
+.galleryContainer {
+  background-color: var(--Base-Background-Primary-Normal);
+  padding: var(--Spacing-x2);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.galleryHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--Spacing-x1);
+}
+
+.imageCaption {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.mainImageWrapper {
+  position: relative;
+  flex: 1;
+  margin-bottom: var(--Spacing-x2);
+}
+
+.mainImageContainer {
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+  overflow: hidden;
+}
+
+.mainImageContainer img,
+.thumbnailContainer img {
+  border-radius: var(--Corner-radius-Small);
+  cursor: pointer;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Spacing-x1);
+  max-height: none;
+}
+
+.thumbnailContainer {
+  position: relative;
+  height: 242px;
+}
+
+.fullWidthImage {
+  grid-column: 1 / -1;
+  height: 240px;
+}
+
+.thumbnailContainer img {
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.fullViewContainer {
+  margin-top: 70.047px;
+  background-color: var(--UI-Text-High-contrast);
+  height: 100%;
+  padding: var(--Spacing-x2);
+  position: relative;
+  align-items: center;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  place-content: center;
+}
+
+.fullViewHeader {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--Spacing-x5);
+  width: 100%;
+}
+
+.fullViewImageContainer {
+  position: relative;
+  width: 358px;
+  height: 240px;
+  margin-bottom: var(--Spacing-x5);
+}
+
+.fullViewImage {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.fullViewImageContainer img {
+  border-radius: var(--Corner-radius-Medium);
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.fullViewFooter {
+  position: absolute;
+  bottom: calc(-1 * var(--Spacing-x5));
+}
+
+.imagePosition {
+  background-color: var(--UI-Grey-90);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.navigationButton {
+  display: none;
+}
+
+.portraitImage {
+  max-width: 548px;
+}
+
+@media (min-width: 1367px) {
+  .content {
+    border-radius: var(--Corner-radius-Large);
+    width: 1090px;
+    height: 725px;
+    overflow: hidden;
+  }
+
+  .galleryContainer {
+    padding: var(--Spacing-x5) var(--Spacing-x6);
+  }
+
+  .desktopGallery {
+    display: flex;
+    background-color: var(--Base-Background-Primary-Normal);
+    height: 100%;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .desktopGalleryCloseButton {
+    position: absolute;
+    top: var(--Spacing-x-one-and-half);
+    right: var(--Spacing-x-half);
+  }
+
+  .mobileGallery {
+    display: none;
+  }
+
+  .thumbnailGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: var(--Spacing-x1);
+    max-height: 125px;
+    overflow: hidden;
+  }
+
+  .thumbnailContainer {
+    height: 125px;
+  }
+
+  .fullViewCloseButton {
+    position: fixed;
+  }
+
+  .fullWidthImage {
+    grid-column: auto;
+    height: auto;
+  }
+
+  .thumbnailContainer img {
+    border-radius: var(--Corner-radius-Small);
+  }
+
+  .fullViewContainer {
+    margin-top: 0;
+    padding: var(--Spacing-x5);
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .fullViewImageContainer {
+    position: relative;
+    max-width: 1054px;
+    width: 80%;
+    height: 85%;
+    margin-bottom: var(--Spacing-x5);
+  }
+
+  .navigationButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--Base-Button-Inverted-Fill-Normal);
+    border-radius: 50%;
+    padding: var(--Spacing-x1);
+    cursor: pointer;
+    border: none;
+    display: flex;
+    z-index: 1;
+  }
+
+  .galleryPrevButton {
+    left: var(--Spacing-x2);
+  }
+
+  .galleryNextButton {
+    right: var(--Spacing-x2);
+  }
+
+  .fullViewNextButton {
+    right: var(--Spacing-x5);
+  }
+
+  .fullViewPrevButton {
+    left: var(--Spacing-x5);
+  }
+
+  .fullViewFooter {
+    text-align: left;
+  }
+}

components/Lightbox/index.tsx

@@ -11,15 +11,15 @@ import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import styles from "./desktopLightbox.module.css"
+import styles from "./Lightbox.module.css"
 
 import {
-  DesktopLightboxProps,
   FullViewProps,
   GalleryProps,
-} from "@/types/components/lightbox/desktopLightbox"
+  LightboxProps,
+} from "@/types/components/lightbox/lightbox"
 
-export function DesktopLightbox({ images, children }: DesktopLightboxProps) {
+export function Lightbox({ images, children }: LightboxProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [selectedImageIndex, setSelectedImageIndex] = useState(0)
   const [isFullView, setIsFullView] = useState(false)
@@ -155,72 +155,108 @@ function Gallery({
         intent="text"
         size="small"
         theme="base"
-        className={styles.closeButton}
+        className={styles.desktopGalleryCloseButton}
         onClick={onClose}
       >
         <CloseIcon width={32} height={32} />
       </Button>
-      <div className={styles.galleryHeader}>
-        <div className={styles.imageCaption}>
-          <Caption color="textMediumContrast">{mainImage.alt}</Caption>
+      {/* Desktop Gallery */}
+      <div className={styles.desktopGallery}>
+        <div className={styles.galleryHeader}>
+          <div className={styles.imageCaption}>
+            <Caption color="textMediumContrast">{mainImage.alt}</Caption>
+          </div>
         </div>
-      </div>
-      <div className={styles.mainImageWrapper}>
-        <AnimatePresence initial={false} mode="wait">
-          <motion.div
-            key={mainImage.url}
-            className={styles.mainImageContainer}
-            initial={{ opacity: 0, x: 300 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -300 }}
-            transition={{ duration: 0.3 }}
-          >
-            <Image
-              src={mainImage.url}
-              alt={mainImage.alt}
-              layout="fill"
-              objectFit="cover"
-              onClick={onImageClick}
-            />
-          </motion.div>
-        </AnimatePresence>
-        <motion.button
-          className={`${styles.navigationButton} ${styles.prevButton}`}
-          onClick={handlePrev}
-        >
-          <ArrowRightIcon
-            color="burgundy"
-            className={styles.leftTransformIcon}
-          />
-        </motion.button>
-        <motion.button
-          className={`${styles.navigationButton} ${styles.nextButton}`}
-          onClick={handleNext}
-        >
-          <ArrowRightIcon color="burgundy" />
-        </motion.button>
-      </div>
-      <div className={styles.thumbnailGrid}>
-        <AnimatePresence initial={false}>
-          {getThumbImages().map((image, index) => (
+        <div className={styles.mainImageWrapper}>
+          <AnimatePresence initial={false} mode="wait">
             <motion.div
-              key={image.url}
-              className={styles.thumbnailContainer}
-              onClick={() => onSelectImage(image)}
-              initial={{ opacity: 0, x: 50 }}
+              key={mainImage.url}
+              className={styles.mainImageContainer}
+              initial={{ opacity: 0, x: 300 }}
               animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -50 }}
-              transition={{ duration: 0.2, delay: index * 0.05 }}
+              exit={{ opacity: 0, x: -300 }}
+              transition={{ duration: 0.3 }}
             >
               <Image
-                src={image.url}
-                alt={image.alt}
+                src={mainImage.url}
+                alt={mainImage.alt}
                 layout="fill"
                 objectFit="cover"
+                onClick={onImageClick}
               />
             </motion.div>
-          ))}
-        </AnimatePresence>
+          </AnimatePresence>
+          <motion.button
+            className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
+            onClick={handlePrev}
+          >
+            <ArrowRightIcon
+              color="burgundy"
+              className={styles.leftTransformIcon}
+            />
+          </motion.button>
+          <motion.button
+            className={`${styles.navigationButton} ${styles.galleryNextButton}`}
+            onClick={handleNext}
+          >
+            <ArrowRightIcon color="burgundy" />
+          </motion.button>
+        </div>
+        <div className={styles.thumbnailGrid}>
+          <AnimatePresence initial={false}>
+            {getThumbImages().map((image, index) => (
+              <motion.div
+                key={image.url}
+                className={styles.thumbnailContainer}
+                onClick={() => onSelectImage(image)}
+                initial={{ opacity: 0, x: 50 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -50 }}
+                transition={{ duration: 0.2, delay: index * 0.05 }}
+              >
+                <Image
+                  src={image.url}
+                  alt={image.alt}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Mobile Gallery */}
+      <div className={styles.mobileGallery}>
+        <Button intent="text" size="small" onClick={onClose}>
+          <ChevronRightIcon
+            color="black"
+            width={32}
+            height={32}
+            className={styles.leftTransformIcon}
+          />
+        </Button>
+        <div className={styles.mobileGalleryContent}>
+          <div className={styles.thumbnailGrid}>
+            {images.map((image, index) => (
+              <motion.div
+                key={image.url}
+                className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
+                onClick={() => onImageClick()}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+              >
+                <Image
+                  src={image.url}
+                  alt={image.alt}
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </motion.div>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   )
@@ -239,7 +275,7 @@ function FullView({
       <Button
         intent="text"
         size="small"
-        className={styles.backButton}
+        className={styles.fullViewCloseButton}
         onClick={onClose}
       >
         <ChevronRightIcon
@@ -271,29 +307,28 @@ function FullView({
               src={image.url}
               alt={image.alt}
               layout="fill"
-              objectFit="contain"
+              objectFit="cover"
             />
+
+            <div className={styles.fullViewFooter}>
+              <Body color="white">{image.alt}</Body>
+            </div>
           </motion.div>
         </AnimatePresence>
-        <motion.button
-          className={`${styles.navigationButton} ${styles.prevButton}`}
-          onClick={onPrev}
-        >
-          <ArrowRightIcon
-            color="burgundy"
-            className={styles.leftTransformIcon}
-          />
-        </motion.button>
-        <motion.button
-          className={`${styles.navigationButton} ${styles.nextButton}`}
-          onClick={onNext}
-        >
-          <ArrowRightIcon color="burgundy" />
-        </motion.button>
-      </div>
-      <div className={styles.fullViewFooter}>
-        <Body color="white">{image.alt}</Body>
       </div>
+
+      <motion.button
+        className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
+        onClick={onPrev}
+      >
+        <ArrowRightIcon color="burgundy" className={styles.leftTransformIcon} />
+      </motion.button>
+      <motion.button
+        className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
+        onClick={onNext}
+      >
+        <ArrowRightIcon color="burgundy" />
+      </motion.button>
     </div>
   )
 }

i18n/dictionaries/da.json

@@ -144,6 +144,7 @@
   "Save": "Gemme",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "See all photos": "Se alle billeder",
   "See hotel details": "Se hoteloplysninger",
   "See rooms": "Se værelser",
   "Select a country": "Vælg et land",

i18n/dictionaries/de.json

@@ -139,6 +139,7 @@
   "Save": "Speichern",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "See all photos": "Alle Fotos ansehen",
   "See hotel details": "Hotelinformationen ansehen",
   "See rooms": "Zimmer ansehen",
   "Select a country": "Wähle ein Land",

i18n/dictionaries/en.json

@@ -150,6 +150,7 @@
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
   "See hotel details": "See hotel details",
+  "See all photos": "See all photos",
   "See room details": "See room details",
   "See rooms": "See rooms",
   "Select a country": "Select a country",

i18n/dictionaries/fi.json

@@ -144,6 +144,7 @@
   "Save": "Tallentaa",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "See all photos": "Katso kaikki kuvat",
   "See hotel details": "Katso hotellin tiedot",
   "See rooms": "Katso huoneet",
   "Select a country": "Valitse maa",

i18n/dictionaries/no.json

@@ -144,6 +144,7 @@
   "Save": "Lagre",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "See all photos": "Se alle bilder",
   "See hotel details": "Se hotellinformasjon",
   "See rooms": "Se rom",
   "Select a country": "Velg et land",

i18n/dictionaries/sv.json

@@ -146,6 +146,7 @@
   "Save": "Spara",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "See all photos": "Se alla foton",
   "See hotel details": "Se hotellinformation",
   "See room details": "Se rumsdetaljer",
   "See rooms": "Se rum",

types/components/lightbox/lightbox.ts

@@ -3,7 +3,7 @@ export interface ImageItem {
   alt: string
 }
 
-export interface DesktopLightboxProps {
+export interface LightboxProps {
   images: ImageItem[]
   children: React.ReactNode
 }