feat(SW-96): Ship reusable desktop lightbox

2024-08-20 08:07:21 +02:00
parent 4274bdc220
commit 59615cef94
8 changed files with 937 additions and 17 deletions
--- a/components/ContentType/HotelPage/data.ts
+++ b/components/ContentType/HotelPage/data.ts
@@ -3,6 +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"

 const facilityToIconMap: { [key: string]: IconName } = {
  Bar: IconName.Bar,
@@ -21,3 +22,44 @@ export function mapFacilityToIcon(facilityName: string): FC<IconProps> | null {
  const iconName = facilityToIconMap[facilityName]
  return getIconByIconName(iconName) || null
 }
+
+/**
+ * NOTE:
+ * Images from the test API are hosted on test3.scandichotels.com,
+ * which can't be accessed unless on Scandic's Wifi or using Citrix.
+ * So I've added some placeholder images here for use when running the app locally.
+ */
+export const tempHotelLightboxImage: ImageItem[] = [
+  {
+    url: "https://www.scandichotels.com/imagevault/publishedmedia/kd4e35n41mrqinfrkzok/scandic-continental-entrance-vasagatan.jpg",
+    alt: "Hotel entrance",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/ip4a2rc93qda3aq9ph73/scandic-continental-room-standard.jpg",
+    alt: "Standard room",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/75y2b2x8uvma4s7zvy50/scandic-continental-room-juniorsuite-detail-1.jpg",
+    alt: "Junior suite",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/pwotq99pbr68djxnym4a/scandic-continental-diningroom-themarket.jpg",
+    alt: "Dining room, The Market",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/yc2cjoxq2j01gp0f80gt/scandic-continental-room-juniorsuite-bathroom-1.jpg",
+    alt: "Junior suite bathroom",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/xocam1f69h7lh57u8f9v/scandic-continental-themarket-detail.jpg",
+    alt: "The Market detail",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/0nnwt72vwzfvkkx5whf0/scandic-continental-caldo.jpg",
+    alt: "Caldo",
+  },
+  {
+    url: "https://www.scandichotels.com/imageVault/publishedmedia/mg9bbtbumfxbfjhovk2e/Scandic_Continental_Capitol_The_View_6.jpg",
+    alt: "Rooftop bar",
+  },
+]
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -1,8 +1,11 @@
 import { serverClient } from "@/lib/trpc/server"

 import { MOCK_FACILITIES } from "./Facilities/mockData"
-import AmenitiesList from "./AmenitiesList"
 import Facilities from "./Facilities"
+import { DesktopLightbox } from "@/components/Lightbox/Desktop"
+
+import AmenitiesList from "./AmenitiesList"
+import { tempHotelLightboxImage } from "./data"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
 import SidePeeks from "./SidePeeks"
@@ -21,6 +24,10 @@ export default async function HotelPage() {

  return (
    <div className={styles.pageContainer}>
+      <DesktopLightbox images={tempHotelLightboxImage}>
+        <button id="lightboxTrigger">Open Lightbox</button>
+        <button>noope</button>
+      </DesktopLightbox>
      <TabNavigation />
      <main className={styles.mainSection}>
        <div className={styles.introContainer}>
--- a/components/Lightbox/Desktop/desktopLightbox.module.css
+++ b/components/Lightbox/Desktop/desktopLightbox.module.css
@@ -0,0 +1,157 @@
+.content {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1090px;
+  height: 725px;
+  overflow: hidden;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.galleryContainer {
+  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: #f0f0f0;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+
+.mainImageContainer {
+  flex: 1;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.mainImageContainer img,
+.thumbnailContainer img {
+  border-radius: var(--Corner-radius-Small);
+  cursor: pointer;
+}
+
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.thumbnailContainer {
+  position: relative;
+  height: 125px;
+}
+
+.fullViewContainer {
+  background-color: var(--UI-Text-High-contrast);
+  color: #fff;
+  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;
+}
+
+.navigationButton:hover {
+  background-color: var(--Base-Button-Inverted-Fill-Hover);
+}
+
+.prevButton {
+  left: 10px;
+}
+
+.leftTransformIcon {
+  transform: scaleX(-1);
+}
+
+.nextButton {
+  right: 10px;
+}
+
+.portraitImage {
+  max-width: 548px;
+}
--- a/components/Lightbox/Desktop/index.tsx
+++ b/components/Lightbox/Desktop/index.tsx
@@ -0,0 +1,249 @@
+"use client"
+import * as Dialog from "@radix-ui/react-dialog"
+import { AnimatePresence, motion } from "framer-motion"
+import Image from "next/image"
+import React, { useState } from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import ArrowRightIcon from "@/components/Icons/ArrowRight"
+import CloseIcon from "@/components/Icons/Close"
+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 {
+  DesktopLightboxProps,
+  FullViewProps,
+  GalleryProps,
+} from "@/types/components/lightbox/desktopLightbox"
+
+export function DesktopLightbox({ images, children }: DesktopLightboxProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
+  const [isFullView, setIsFullView] = useState(false)
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setTimeout(() => {
+        setIsOpen(false)
+        setSelectedImageIndex(0)
+        setIsFullView(false)
+      }, 300) // 300ms delay
+    } else {
+      setIsOpen(true)
+    }
+  }
+
+  const handleNext = () => {
+    setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
+  }
+
+  const handlePrev = () => {
+    setSelectedImageIndex(
+      (prevIndex) => (prevIndex - 1 + images.length) % images.length
+    )
+  }
+
+  const triggerElement = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.props.id === "lightboxTrigger") {
+      return React.cloneElement(child, {
+        onClick: () => setIsOpen(true),
+      } as React.HTMLAttributes<HTMLElement>)
+    }
+    return child
+  })
+
+  return (
+    <>
+      {triggerElement}
+      <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
+        <AnimatePresence>
+          {isOpen && (
+            <Dialog.Portal forceMount>
+              <Dialog.Overlay asChild>
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className={styles.overlay}
+                />
+              </Dialog.Overlay>
+              <Dialog.Content className={styles.content}>
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                  }}
+                >
+                  {isFullView ? (
+                    <FullView
+                      image={images[selectedImageIndex]}
+                      onClose={() => setIsFullView(false)}
+                      onNext={handleNext}
+                      onPrev={handlePrev}
+                      currentIndex={selectedImageIndex}
+                      totalImages={images.length}
+                    />
+                  ) : (
+                    <Gallery
+                      images={images}
+                      onClose={() => setIsOpen(false)}
+                      onSelectImage={(image) => {
+                        setSelectedImageIndex(
+                          images.findIndex((img) => img.url === image.url)
+                        )
+                      }}
+                      onImageClick={() => setIsFullView(true)}
+                      selectedImage={images[selectedImageIndex]}
+                    />
+                  )}
+                </motion.div>
+              </Dialog.Content>
+            </Dialog.Portal>
+          )}
+        </AnimatePresence>
+      </Dialog.Root>
+    </>
+  )
+}
+
+function Gallery({
+  images,
+  onClose,
+  onSelectImage,
+  onImageClick,
+  selectedImage,
+}: GalleryProps) {
+  const mainImage = selectedImage || images[0]
+  const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)
+
+  function getThumbImages() {
+    const thumbs = []
+    for (let i = 1; i <= 5; i++) {
+      const index = (mainImageIndex + i) % images.length
+      thumbs.push(images[index])
+    }
+    return thumbs
+  }
+
+  return (
+    <div className={styles.galleryContainer}>
+      <Button
+        intent="text"
+        size="small"
+        theme="base"
+        className={styles.closeButton}
+        onClick={onClose}
+      >
+        <CloseIcon width={32} height={32} />
+      </Button>
+      <div className={styles.galleryHeader}>
+        <div className={styles.imageCaption}>
+          <Caption color="textMediumContrast">{mainImage.alt}</Caption>
+        </div>
+      </div>
+      <div className={styles.mainImageContainer}>
+        <Image
+          src={mainImage.url}
+          alt={mainImage.alt}
+          layout="fill"
+          objectFit="cover"
+          onClick={onImageClick}
+        />
+      </div>
+      <div className={styles.thumbnailGrid}>
+        {getThumbImages().map((image, index) => (
+          <motion.div
+            key={index}
+            className={styles.thumbnailContainer}
+            onClick={() => onSelectImage(image)}
+          >
+            <Image
+              src={image.url}
+              alt={image.alt}
+              layout="fill"
+              objectFit="cover"
+            />
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FullView({
+  image,
+  onClose,
+  onNext,
+  onPrev,
+  currentIndex,
+  totalImages,
+}: FullViewProps) {
+  return (
+    <div className={styles.fullViewContainer}>
+      <Button
+        intent="text"
+        size="small"
+        className={styles.backButton}
+        onClick={onClose}
+      >
+        <ChevronRightIcon
+          color="white"
+          width={32}
+          height={32}
+          className={styles.leftTransformIcon}
+        />
+      </Button>
+      <div className={styles.fullViewHeader}>
+        <span className={styles.imagePosition}>
+          <Caption color="white">
+            {`${currentIndex + 1} / ${totalImages}`}
+          </Caption>
+        </span>
+      </div>
+      <div className={styles.fullViewImageContainer}>
+        <AnimatePresence initial={false} custom={currentIndex}>
+          <motion.div
+            key={image.url}
+            custom={currentIndex}
+            initial={{ opacity: 0, x: 300 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -300 }}
+            transition={{ duration: 0.3 }}
+            className={styles.fullViewImage}
+          >
+            <Image
+              src={image.url}
+              alt={image.alt}
+              layout="fill"
+              objectFit="contain"
+            />
+          </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>
+    </div>
+  )
+}
--- a/next.config.js
+++ b/next.config.js
@@ -43,6 +43,14 @@ const nextConfig = {
        protocol: "https",
        hostname: "imagevault.scandichotels.com",
      },
+      {
+        protocol: "https",
+        hostname: "test3.scandichotels.com",
+      },
+      {
+        protocol: "https",
+        hostname: "www.scandichotels.com",
+      },
    ],
  },

--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "@netlify/plugin-nextjs": "^5.1.1",
        "@opentelemetry/api": "^1.9.0",
        "@opentelemetry/sdk-metrics": "^1.25.1",
+        "@radix-ui/react-dialog": "^1.1.1",
        "@radix-ui/react-slot": "^1.0.2",
        "@react-aria/ssr": "^3.9.5",
        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.8",
@@ -30,6 +31,7 @@
        "dayjs": "^1.11.10",
        "deepmerge": "^4.3.1",
        "fetch-retry": "^6.0.0",
+        "framer-motion": "^11.3.28",
        "graphql": "^16.8.1",
        "graphql-request": "^6.1.0",
        "graphql-tag": "^2.12.6",
@@ -2363,6 +2365,7 @@
      "version": "7.24.4",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
+      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -3697,16 +3700,18 @@
        "node": ">=14"
      }
    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
-      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
      "peerDependencies": {
        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
      },
      "peerDependenciesMeta": {
        "@types/react": {
@@ -3714,17 +3719,276 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
-      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
+      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
      },
      "peerDependencies": {
        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
      },
      "peerDependenciesMeta": {
        "@types/react": {
@@ -6142,7 +6406,7 @@
      "version": "18.2.24",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.24.tgz",
      "integrity": "sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/react": "*"
      }
@@ -6596,6 +6860,17 @@
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
      "dev": true
    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/aria-query": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -8591,6 +8866,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
    "node_modules/devtools-protocol": {
      "version": "0.0.1045489",
      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1045489.tgz",
@@ -9924,6 +10204,30 @@
        "node": ">= 0.12"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "11.3.28",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.28.tgz",
+      "integrity": "sha512-dqhoawipEAjqdv32zbv72sOMJZjol7dROWn7t/FOq23WXJ40O4OUybgnO2ldnuS+3YquSn8xO/KKRavZ+TBVOQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fresh": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -10065,6 +10369,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/get-package-type": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -10770,6 +11082,14 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -15749,6 +16069,51 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-stately": {
      "version": "3.30.1",
      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.30.1.tgz",
@@ -15783,6 +16148,28 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
      }
    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/readable-stream": {
      "version": "2.3.8",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -15888,7 +16275,8 @@
    "node_modules/regenerator-runtime": {
      "version": "0.14.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true
    },
    "node_modules/regenerator-transform": {
      "version": "0.15.2",
@@ -17898,6 +18286,47 @@
        "requires-port": "^1.0.0"
      }
    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/use-sync-external-store": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
    "@netlify/plugin-nextjs": "^5.1.1",
    "@opentelemetry/api": "^1.9.0",
    "@opentelemetry/sdk-metrics": "^1.25.1",
+    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-slot": "^1.0.2",
    "@react-aria/ssr": "^3.9.5",
    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.8",
@@ -46,6 +47,7 @@
    "dayjs": "^1.11.10",
    "deepmerge": "^4.3.1",
    "fetch-retry": "^6.0.0",
+    "framer-motion": "^11.3.28",
    "graphql": "^16.8.1",
    "graphql-request": "^6.1.0",
    "graphql-tag": "^2.12.6",
--- a/types/components/lightbox/desktopLightbox.ts
+++ b/types/components/lightbox/desktopLightbox.ts
@@ -0,0 +1,26 @@
+export interface ImageItem {
+  url: string
+  alt: string
+}
+
+export interface DesktopLightboxProps {
+  images: ImageItem[]
+  children: React.ReactNode
+}
+
+export interface GalleryProps {
+  images: ImageItem[]
+  onClose: () => void
+  onSelectImage: (image: ImageItem) => void
+  onImageClick: () => void
+  selectedImage: ImageItem | null
+}
+
+export interface FullViewProps {
+  image: ImageItem
+  onClose: () => void
+  onNext: () => void
+  onPrev: () => void
+  currentIndex: number
+  totalImages: number
+}