Merged in feat/sw-3231-move-lightbox-to-design-system (pull request #2619)

feat(SW-3231): Move Lightbox to design-system

* Move Lightbox to design-system

* Fix self-referencing imports

* Fix broken import


Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -4,9 +4,9 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import Image from "@scandic-hotels/design-system/Image"
+import Lightbox from "@scandic-hotels/design-system/Lightbox"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import Lightbox from "@/components/Lightbox"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./topImages.module.css"

apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -6,8 +6,8 @@ import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
 import Image from "@scandic-hotels/design-system/Image"
+import Lightbox from "@scandic-hotels/design-system/Lightbox"
 
-import Lightbox from "@/components/Lightbox/"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./previewImages.module.css"

apps/scandic-web/components/ImageGallery/index.tsx

@@ -7,10 +7,9 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
+import Lightbox from "@scandic-hotels/design-system/Lightbox"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Lightbox from "@/components/Lightbox"
-
 import styles from "./imageGallery.module.css"
 
 import type { ImageGalleryProps } from "@/types/components/imageGallery"

apps/scandic-web/types/components/lightbox/lightbox.ts

@@ -1,28 +0,0 @@
-import type { GalleryImage } from "../imageGallery"
-
-export interface LightboxProps {
-  images: GalleryImage[]
-  dialogTitle: string /* Accessible title for dialog screen readers */
-  onClose: () => void
-  activeIndex?: number
-  hideLabel?: boolean
-}
-
-export interface GalleryProps {
-  images: GalleryImage[]
-  onClose: () => void
-  onSelectImage: (image: GalleryImage) => void
-  onImageClick: () => void
-  selectedImage: GalleryImage | null
-  hideLabel?: boolean
-}
-
-export interface FullViewProps {
-  image: GalleryImage
-  onClose: () => void
-  onNext: () => void
-  onPrev: () => void
-  currentIndex: number
-  totalImages: number
-  hideLabel?: boolean
-}

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

@@ -1,17 +1,27 @@
-"use client"
+'use client'
 
-import { AnimatePresence, motion } from "motion/react"
+import { AnimatePresence, motion } from 'motion/react'
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import Image from '../../Image'
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Image from "@scandic-hotels/design-system/Image"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import styles from "./fullView.module.css"
+import { IconButton } from '../../IconButton'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
 
-import type { FullViewProps } from "@/types/components/lightbox/lightbox"
+import styles from './fullView.module.css'
+import { LightboxImage } from '../index'
+
+type FullViewProps = {
+  image: LightboxImage
+  onClose: () => void
+  onNext: () => void
+  onPrev: () => void
+  currentIndex: number
+  totalImages: number
+  hideLabel?: boolean
+}
 
 export default function FullView({
   image,
@@ -41,18 +51,18 @@ export default function FullView({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "ArrowLeft") {
+    if (e.key === 'ArrowLeft') {
       handlePrev()
-    } else if (e.key === "ArrowRight") {
+    } else if (e.key === 'ArrowRight') {
       handleNext()
     }
   }
 
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown)
+    window.addEventListener('keydown', handleKeyDown)
 
     return () => {
-      window.removeEventListener("keydown", handleKeyDown)
+      window.removeEventListener('keydown', handleKeyDown)
     }
   })
 
@@ -76,7 +86,7 @@ export default function FullView({
         className={styles.closeButton}
         onPress={onClose}
         aria-label={intl.formatMessage({
-          defaultMessage: "Close",
+          defaultMessage: 'Close',
         })}
       >
         <MaterialIcon icon="close" color="CurrentColor" size={24} />
@@ -84,7 +94,6 @@ export default function FullView({
       <div className={styles.header}>
         <Typography variant="Tag/sm">
           <span className={styles.imageCount}>
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             {`${currentIndex + 1} / ${totalImages}`}
           </span>
         </Typography>

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

@@ -1,17 +1,26 @@
-"use client"
+'use client'
-import { AnimatePresence, motion } from "motion/react"
+import { AnimatePresence, motion } from 'motion/react'
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'
-import { Button as ButtonRAC } from "react-aria-components"
+import { Button as ButtonRAC } from 'react-aria-components'
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import { IconButton } from '../../IconButton'
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { MaterialIcon } from '../../Icons/MaterialIcon'
-import Image from "@scandic-hotels/design-system/Image"
+import { Typography } from '../../Typography'
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import styles from "./gallery.module.css"
+import Image from '../../Image'
 
-import type { GalleryProps } from "@/types/components/lightbox/lightbox"
+import styles from './gallery.module.css'
+import { LightboxImage } from '..'
+
+type GalleryProps = {
+  images: LightboxImage[]
+  onClose: () => void
+  onSelectImage: (image: LightboxImage) => void
+  onImageClick: () => void
+  selectedImage: LightboxImage | null
+  hideLabel?: boolean
+}
 
 export default function Gallery({
   images,
@@ -48,18 +57,18 @@ export default function Gallery({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "ArrowLeft") {
+    if (e.key === 'ArrowLeft') {
       handlePrev()
-    } else if (e.key === "ArrowRight") {
+    } else if (e.key === 'ArrowRight') {
       handleNext()
     }
   }
 
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown)
+    window.addEventListener('keydown', handleKeyDown)
 
     return () => {
-      window.removeEventListener("keydown", handleKeyDown)
+      window.removeEventListener('keydown', handleKeyDown)
     }
   })
 
@@ -83,7 +92,7 @@ export default function Gallery({
         className={styles.closeButton}
         onPress={onClose}
         aria-label={intl.formatMessage({
-          defaultMessage: "Close",
+          defaultMessage: 'Close',
         })}
       >
         <MaterialIcon
@@ -125,7 +134,7 @@ export default function Gallery({
                 onPress={onImageClick}
                 className={styles.imageButton}
                 aria-label={intl.formatMessage({
-                  defaultMessage: "Open image",
+                  defaultMessage: 'Open image',
                 })}
               >
                 <Image
@@ -166,7 +175,7 @@ export default function Gallery({
                   className={styles.imageButton}
                   onPress={() => onSelectImage(image)}
                   aria-label={intl.formatMessage({
-                    defaultMessage: "Open image",
+                    defaultMessage: 'Open image',
                   })}
                 >
                   <Image
@@ -188,14 +197,14 @@ export default function Gallery({
         {images.map((image, index) => (
           <motion.div
             key={image.smallSrc || image.src}
-            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
+            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.3, delay: index * 0.05 }}
           >
             <ButtonRAC
               className={styles.imageButton}
-              aria-label={intl.formatMessage({ defaultMessage: "Open image" })}
+              aria-label={intl.formatMessage({ defaultMessage: 'Open image' })}
               onPress={() => {
                 onSelectImage(image)
                 onImageClick()

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

@@ -1,14 +1,27 @@
-"use client"
+'use client'
-import { AnimatePresence, motion } from "motion/react"
+import { AnimatePresence, motion } from 'motion/react'
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'
-import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 
-import FullView from "./FullView"
+import FullView from './FullView'
-import Gallery from "./Gallery"
+import Gallery from './Gallery'
 
-import styles from "./lightbox.module.css"
+import styles from './lightbox.module.css'
 
-import type { LightboxProps } from "@/types/components/lightbox/lightbox"
+export type LightboxImage = {
+  src: string
+  alt: string
+  caption?: string | null
+  smallSrc?: string | null
+}
+
+type LightboxProps = {
+  images: LightboxImage[]
+  dialogTitle: string /* Accessible title for dialog screen readers */
+  onClose: () => void
+  activeIndex?: number
+  hideLabel?: boolean
+}
 
 export default function Lightbox({
   images,
@@ -44,11 +57,11 @@ export default function Lightbox({
       handleClose()
     }
 
-    window.history.pushState(null, "", window.location.href)
+    window.history.pushState(null, '', window.location.href)
-    window.addEventListener("popstate", handlePopState)
+    window.addEventListener('popstate', handlePopState)
 
     return () => {
-      window.removeEventListener("popstate", handlePopState)
+      window.removeEventListener('popstate', handlePopState)
     }
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [])
@@ -67,7 +80,7 @@ export default function Lightbox({
               className={`${styles.content} ${
                 isFullView ? styles.fullViewContent : styles.galleryContent
               }`}
-              initial={{ opacity: 0, scale: 0.95, x: "-50%", y: "-50%" }}
+              initial={{ opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.95 }}
               transition={{ duration: 0.2 }}

packages/design-system/package.json

@@ -29,6 +29,7 @@
     "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",
     "./Label": "./lib/components/Label/index.tsx",
+    "./Lightbox": "./lib/components/Lightbox/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",
     "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
     "./OpeningHours": "./lib/components/OpeningHours/index.tsx",