Merged in SW-2064-lightbox-updates (pull request #3347)

feat(SW-2064): Lightbox updates

* chore(SW-2064): add opacity to not selected images

* chore(SW-2064): set main image as the first image in thumbnail

* chore(SW-2064): disable navigation buttons on first and last image

* fix(SW-2064): use cx

* Revert "chore(SW-2064): disable navigation buttons on first and last image"

This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947.

* refactor(SW-2064): create ImageCounter component

* refactor(SW-2064)

* chore(SW-2064): add enter keu down on main image


Approved-by: Erik Tiekstra

packages/design-system/lib/components/ImageCounter/ImageCounter.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { ImageCounter } from "./index"
+
+const meta: Meta<typeof ImageCounter> = {
+  title: "Core Components/ImageCounter",
+  component: ImageCounter,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof ImageCounter>
+
+export const Large: Story = {
+  args: {
+    size: "Large",
+    leadingIcon: false,
+    number: "12/36",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: "Small",
+    leadingIcon: false,
+    number: "12/36",
+  },
+}
+
+export const LargeWithLeadingIcon: Story = {
+  args: {
+    size: "Large",
+    leadingIcon: true,
+    number: "10",
+  },
+}
+export const SmallWithLeadingIcon: Story = {
+  args: {
+    size: "Small",
+    leadingIcon: true,
+    number: 10,
+  },
+}

packages/design-system/lib/components/ImageCounter/imageCounter.module.css

@@ -0,0 +1,19 @@
+.imageCounter {
+  background-color: var(--Overlay-90);
+  border-radius: var(--Corner-radius-sm);
+  color: var(--Text-Inverted);
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--Space-x025);
+}
+
+.small {
+  padding: 0 var(--Space-x05);
+  height: 26px;
+}
+
+.large {
+  padding: 0 var(--Space-x1);
+  height: 32px;
+}

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

@@ -0,0 +1,29 @@
+import { VariantProps } from "class-variance-authority"
+import { Typography } from "../Typography"
+import { variants } from "./variants"
+import { MaterialIcon } from "../Icons/MaterialIcon"
+
+interface ImageCounterProps extends VariantProps<typeof variants> {
+  number: number | string
+  leadingIcon?: boolean
+  className?: string
+}
+
+export function ImageCounter({
+  number,
+  size,
+  leadingIcon = false,
+  className,
+}: ImageCounterProps) {
+  const classNames = variants({ className, size })
+  return (
+    <Typography variant="Tag/sm">
+      <span className={classNames}>
+        {leadingIcon && (
+          <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
+        )}
+        {number}
+      </span>
+    </Typography>
+  )
+}

packages/design-system/lib/components/ImageCounter/variants.ts

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./imageCounter.module.css"
+
+export const config = {
+  variants: {
+    size: {
+      Large: styles.large,
+      Small: styles.small,
+    },
+  },
+  defaultVariants: {
+    size: "Large",
+  },
+} as const
+
+export const variants = cva(styles.imageCounter, config)

packages/design-system/lib/components/ImageGallery/imageGallery.module.css

@@ -9,14 +9,6 @@
   position: absolute;
   bottom: var(--Space-x2);
   right: var(--Space-x2);
-  background-color: var(--Overlay-90);
-  padding: var(--Space-x025) var(--Space-x05);
-  border-radius: var(--Corner-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x025);
-  color: var(--Text-Inverted);
 }
 
 .imageCountBottom {

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

@@ -11,6 +11,8 @@ import Lightbox from "../Lightbox"
 import { Typography } from "../Typography"
 
 import styles from "./imageGallery.module.css"
+import { ImageCounter } from "../ImageCounter"
+import { cx } from "class-variance-authority"
 
 export interface GalleryImage {
   src: string
@@ -65,18 +67,16 @@ function ImageGallery({
           onError={() => setImageError(true)}
           {...imageProps}
         />
-        <Typography variant="Body/Supporting text (caption)/smRegular">
+        <ImageCounter
-          <span
+          className={cx(styles.imageCount, {
-            className={`${styles.imageCount} ${
+            [styles.imageCountTop]: imageCountPosition === "top",
-              imageCountPosition === "top"
+            [styles.imageCountBottom]: imageCountPosition === "bottom",
-                ? styles.imageCountTop
+          })}
-                : styles.imageCountBottom
+          number={images.length}
-            }`}
+          size="Large"
-          >
+          leadingIcon
-            <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
+        />
-            <span>{images.length}</span>
+
-          </span>
-        </Typography>
         <ButtonRAC
           className={styles.triggerArea}
           onPress={() => setIsOpen(true)}

packages/design-system/lib/components/Lightbox/FullView/fullView.module.css

@@ -26,13 +26,6 @@
   width: 100%;
 }
 
-.imageCount {
-  background-color: var(--Overlay-90);
-  padding: var(--Space-x025) var(--Space-x05);
-  border-radius: var(--Corner-radius-sm);
-  color: var(--Text-Inverted);
-}
-
 .content {
   position: relative;
   width: 100%;

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { AnimatePresence, motion } from "motion/react"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import Image from "../../Image"
@@ -11,6 +11,9 @@ import { Typography } from "../../Typography"
 
 import { LightboxImage } from "../index"
 import styles from "./fullView.module.css"
+import { cx } from "class-variance-authority"
+import { ImageCounter } from "../../ImageCounter"
+import { animationVariants, useKeyboardNavigation } from "../util"
 
 type FullViewProps = {
   image: LightboxImage
@@ -22,7 +25,7 @@ type FullViewProps = {
   hideLabel?: boolean
 }
 
-export default function FullView({
+export function FullView({
   image,
   onClose,
   onNext,
@@ -32,56 +35,28 @@ export default function FullView({
   hideLabel,
 }: FullViewProps) {
   const intl = useIntl()
-  const [animateLeft, setAnimateLeft] = useState(true)
+  const [slideDirection, setSlideDirection] = useState<"left" | "right">("left")
 
   function handleSwipe(offset: number) {
     if (offset > 30) {
-      setAnimateLeft(false)
+      setSlideDirection("right")
       onPrev()
     }
     if (offset < -30) {
-      setAnimateLeft(true)
+      setSlideDirection("left")
       onNext()
     }
   }
 
   function handleNext() {
-    setAnimateLeft(true)
+    setSlideDirection("left")
     onNext()
   }
-
   function handlePrev() {
-    setAnimateLeft(false)
+    setSlideDirection("right")
     onPrev()
   }
-
+  useKeyboardNavigation(handlePrev, handleNext)
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "ArrowLeft") {
-      handlePrev()
-    } else if (e.key === "ArrowRight") {
-      handleNext()
-    }
-  }
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown)
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown)
-    }
-  })
-
-  const variants = {
-    initial: (animateLeft: boolean) => ({
-      opacity: 0,
-      x: animateLeft ? 300 : -300,
-    }),
-    animate: { opacity: 1, x: 0 },
-    exit: (animateLeft: boolean) => ({
-      opacity: 0,
-      x: animateLeft ? -300 : 300,
-    }),
-  } as const
 
   return (
     <div className={styles.fullView}>
@@ -96,19 +71,14 @@ export default function FullView({
         iconName="close"
       />
       <div className={styles.header}>
-        <Typography variant="Tag/sm">
+        <ImageCounter number={`${currentIndex + 1} / ${totalImages}`} />
-          <span className={styles.imageCount}>
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {`${currentIndex + 1} / ${totalImages}`}
-          </span>
-        </Typography>
       </div>
       <div className={styles.content}>
-        <AnimatePresence initial={false} custom={animateLeft}>
+        <AnimatePresence initial={false} custom={slideDirection}>
           <motion.div
             key={image.src}
-            custom={animateLeft}
+            custom={slideDirection}
-            variants={variants}
+            variants={animationVariants}
             initial="initial"
             animate="animate"
             exit="exit"
@@ -137,14 +107,14 @@ export default function FullView({
 
       <IconButton
         variant="Muted"
-        className={`${styles.navigationButton} ${styles.prev}`}
         onPress={handlePrev}
+        className={cx(styles.navigationButton, styles.prev)}
         iconName="arrow_back"
       />
       <IconButton
         variant="Muted"
-        className={`${styles.navigationButton} ${styles.next}`}
         onPress={handleNext}
+        className={cx(styles.navigationButton, styles.next)}
         iconName="arrow_forward"
       />
     </div>

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

@@ -0,0 +1,57 @@
+"use client"
+import { motion } from "motion/react"
+
+import Image from "../../Image"
+import { LightboxImage } from ".."
+import styles from "./gallery.module.css"
+import { useIntl } from "react-intl"
+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
+import { memo } from "react"
+
+interface ThumbnailImage {
+  image: LightboxImage
+  index: number
+  onSelect: (image: LightboxImage) => void
+  isMainImage?: boolean
+  className?: string
+}
+export const ThumbnailImage = memo(function ThumbnailImage({
+  image,
+  index,
+  onSelect,
+  isMainImage = false,
+  className,
+}: ThumbnailImage) {
+  const intl = useIntl()
+  return (
+    <motion.div
+      key={image.src}
+      className={styles.thumbnailContainer}
+      initial={{ opacity: 0, x: 50 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: -50 }}
+      transition={{ duration: 0.2, delay: index * 0.05 }}
+    >
+      <ButtonRAC
+        className={styles.imageButton}
+        onPress={() => onSelect(image)}
+        aria-label={intl.formatMessage({
+          id: "lightbox.openImage",
+          defaultMessage: "Open image",
+        })}
+      >
+        <Image
+          src={image.src}
+          alt={image.alt}
+          fill
+          sizes="200px"
+          className={cx(styles.image, className, {
+            [styles.notActiveImage]: !isMainImage,
+            [styles.activeImage]: isMainImage,
+          })}
+        />
+      </ButtonRAC>
+    </motion.div>
+  )
+})

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

@@ -19,6 +19,13 @@
   height: 242px;
 }
 
+.thumbnail {
+  grid-column: 2 / span 5;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--Space-x15);
+}
+
 .fullWidthImage {
   grid-column: 1 / -1;
   height: 240px;
@@ -34,9 +41,11 @@
   cursor: pointer;
   overflow: hidden;
   z-index: 0;
+  border-radius: var(--Corner-radius-sm);
 
   &:focus-visible {
-    outline-offset: -2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
+    outline: 2px solid var(--Border-Interactive-Focus);
+    outline-offset: 2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
   }
 }
 
@@ -44,7 +53,21 @@
   transition: opacity 0.3s ease-in-out;
   object-fit: cover;
   z-index: -1;
-  border-radius: var(--Corner-radius-md);
+}
+
+.notActiveImage {
+  opacity: 0.5;
+}
+
+.activeImage {
+  border: 2px solid var(--Border-Interactive-Active);
+}
+
+.imageCounter {
+  position: absolute;
+  bottom: var(--Space-x1);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 @media screen and (max-width: 767px) {
@@ -81,7 +104,7 @@
 
   .desktopGallery {
     display: grid;
-    grid-template-rows: 28px 1fr 125px;
+    grid-template-rows: 28px 1fr 130px;
     row-gap: var(--Space-x15);
     background-color: var(--Background-Primary);
     height: 100%;
@@ -117,7 +140,7 @@
 
   .mainImage {
     object-fit: contain;
-    border-radius: var(--Corner-radius-Medium);
+    border-radius: var(--Corner-radius-sm);
     /* 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;
@@ -129,10 +152,9 @@
 
   .desktopThumbnailGrid {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: 0.2fr repeat(5, 1fr) 0.2fr;
-    gap: var(--Space-x1);
+    gap: var(--Space-x15);
     max-height: 7.8125rem;
-    overflow: hidden;
   }
 
   .thumbnailContainer {

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

@@ -1,6 +1,6 @@
 "use client"
 import { AnimatePresence, motion } from "motion/react"
-import { useEffect, useState } from "react"
+import { useMemo, useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
@@ -13,8 +13,12 @@ import { cx } from "class-variance-authority"
 import { useMediaQuery } from "usehooks-ts"
 import { LightboxImage } from ".."
 import styles from "./gallery.module.css"
+import { ImageCounter } from "../../ImageCounter"
+import { animationVariants, useKeyboardNavigation } from "../util"
+import { ThumbnailImage } from "./ThumnailImage"
+import { useThumbnail } from "./useThumbNail"
 
-type GalleryProps = {
+interface GalleryProps {
   images: LightboxImage[]
   onClose: () => void
   onSelectImage: (image: LightboxImage) => void
@@ -23,7 +27,7 @@ type GalleryProps = {
   hideLabel?: boolean
 }
 
-export default function Gallery({
+export function Gallery({
   images,
   onClose,
   onSelectImage,
@@ -32,59 +36,34 @@ export default function Gallery({
   hideLabel,
 }: GalleryProps) {
   const intl = useIntl()
-  const [animateLeft, setAnimateLeft] = useState(true)
+  const [slideDirection, setSlideDirection] = useState<"left" | "right">("left")
-  const mainImage = selectedImage || images[0]
-  const mainImageIndex = images.findIndex((img) => img === mainImage)
   const isMobile = useMediaQuery("(max-width: 767px)")
 
-  function getThumbImages() {
+  const mainImage = selectedImage || images[0]
-    const thumbs = []
+  const mainImageIndex = useMemo(
-    for (let i = 1; i <= Math.min(5, images.length); i++) {
+    () => images.findIndex((img) => img === mainImage),
-      const index = (mainImageIndex + i) % images.length
+    [images, mainImage]
-      thumbs.push(images[index])
+  )
-    }
+
-    return thumbs
+  const thumbnail = useThumbnail({
-  }
+    images: images,
+    mainImageIdx: mainImageIndex,
+  })
 
   function handleNext() {
-    setAnimateLeft(true)
+    setSlideDirection("left")
     const nextIndex = (mainImageIndex + 1) % images.length
     onSelectImage(images[nextIndex])
   }
-
   function handlePrev() {
-    setAnimateLeft(false)
+    setSlideDirection("right")
     const prevIndex = (mainImageIndex - 1 + images.length) % images.length
     onSelectImage(images[prevIndex])
   }
+  useKeyboardNavigation(handlePrev, handleNext)
 
-  const handleKeyDown = (e: KeyboardEvent) => {
+  const hasPrevImage = thumbnail.previous !== undefined
-    if (e.key === "ArrowLeft") {
+  const hasNextImage = thumbnail.next !== undefined
-      handlePrev()
-    } else if (e.key === "ArrowRight") {
-      handleNext()
-    }
-  }
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown)
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown)
-    }
-  })
-
-  const variants = {
-    initial: (animateLeft: boolean) => ({
-      opacity: 0,
-      x: animateLeft ? 300 : -300,
-    }),
-    animate: { opacity: 1, x: 0 },
-    exit: (animateLeft: boolean) => ({
-      opacity: 0,
-      x: animateLeft ? -300 : 300,
-    }),
-  } as const
 
   return (
     <div className={styles.gallery}>
@@ -110,12 +89,12 @@ export default function Gallery({
           </p>
         </Typography>
         <div className={styles.content}>
-          <AnimatePresence initial={false} custom={animateLeft}>
+          <AnimatePresence initial={false} custom={slideDirection}>
             <motion.div
               key={mainImage.src}
               className={styles.motionContainer}
-              custom={animateLeft}
+              custom={slideDirection}
-              variants={variants}
+              variants={animationVariants}
               initial="initial"
               animate="animate"
               exit="exit"
@@ -134,6 +113,11 @@ export default function Gallery({
                   defaultMessage: "Open image",
                 })}
                 role="button"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    onImageClick()
+                  }
+                }}
               />
             </motion.div>
           </AnimatePresence>
@@ -157,36 +141,37 @@ export default function Gallery({
             })}
             iconName="arrow_forward"
           />
+          <ImageCounter
+            number={`${mainImageIndex + 1} / ${images.length}`}
+            className={styles.imageCounter}
+          />
         </div>
         <div className={styles.desktopThumbnailGrid}>
           <AnimatePresence initial={false}>
-            {getThumbImages().map((image, index) => (
+            {hasPrevImage && (
-              <motion.div
+              <ThumbnailImage
-                key={image.src}
+                image={thumbnail.previous!}
-                className={styles.thumbnailContainer}
+                index={0}
-                initial={{ opacity: 0, x: 50 }}
+                onSelect={onSelectImage}
-                animate={{ opacity: 1, x: 0 }}
+              />
-                exit={{ opacity: 0, x: -50 }}
+            )}
-                transition={{ duration: 0.2, delay: index * 0.05 }}
+            <span className={styles.thumbnail}>
-              >
+              {thumbnail.images.map((image, index) => (
-                <ButtonRAC
+                <ThumbnailImage
-                  className={styles.imageButton}
+                  image={image}
-                  onPress={() => onSelectImage(image)}
+                  index={hasPrevImage ? index + 1 : index}
-                  aria-label={intl.formatMessage({
+                  onSelect={onSelectImage}
-                    id: "lightbox.openImage",
+                  isMainImage={mainImage === image}
-                    defaultMessage: "Open image",
+                />
-                  })}
+              ))}
-                >
+            </span>
-                  <Image
+            {hasNextImage && (
-                    src={image.src}
+              <ThumbnailImage
-                    alt={image.alt}
+                image={thumbnail.next!}
-                    fill
+                index={6}
-                    sizes="200px"
+                onSelect={onSelectImage}
-                    className={styles.image}
+              />
-                  />
+            )}
-                </ButtonRAC>
-              </motion.div>
-            ))}
           </AnimatePresence>
         </div>
       </div>
@@ -196,7 +181,9 @@ export default function Gallery({
         {images.map((image, index) => (
           <motion.div
             key={image.src}
-            className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
+            className={cx(styles.thumbnailContainer, {
+              [styles.fullWidthImage]: index % 3 === 0,
+            })}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.3, delay: index * 0.05 }}

packages/design-system/lib/components/Lightbox/Gallery/useThumbNail.ts

@@ -0,0 +1,39 @@
+"use client"
+
+import { useMemo } from "react"
+import { LightboxImage } from ".."
+
+export const THUMBNAIL_WINDOW = 5
+export const THUMBNAIL_OFFSET = Math.ceil(THUMBNAIL_WINDOW / 2)
+
+interface useThumbnailProps {
+  images: LightboxImage[]
+  mainImageIdx: number
+}
+/*
+ * Keep the main image in the center of the thumbnail, unless when it's one of the first or the last pictures.
+ */
+export function useThumbnail({ images, mainImageIdx }: useThumbnailProps) {
+  return useMemo(() => {
+    if (mainImageIdx < THUMBNAIL_OFFSET) {
+      return {
+        images: images.slice(0, THUMBNAIL_WINDOW),
+        next: images[THUMBNAIL_WINDOW + 1],
+      }
+    }
+    if (mainImageIdx >= images.length - THUMBNAIL_OFFSET) {
+      return {
+        previous: images[images.length - THUMBNAIL_WINDOW - 1],
+        images: images.slice(images.length - THUMBNAIL_WINDOW, images.length),
+      }
+    }
+    return {
+      previous: images[mainImageIdx - THUMBNAIL_OFFSET],
+      images: images.slice(
+        mainImageIdx - THUMBNAIL_OFFSET + 1,
+        mainImageIdx + THUMBNAIL_OFFSET
+      ),
+      next: images[mainImageIdx + THUMBNAIL_OFFSET],
+    }
+  }, [images, mainImageIdx])
+}

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

@@ -5,10 +5,11 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 
 import usePopStateHandler from "@scandic-hotels/common/hooks/usePopStateHandler"
 
-import FullView from "./FullView"
+import { FullView } from "./FullView"
-import Gallery from "./Gallery"
+import { Gallery } from "./Gallery"
 
 import styles from "./lightbox.module.css"
+import { cx } from "class-variance-authority"
 
 export type LightboxImage = {
   src: string

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

@@ -0,0 +1,30 @@
+import { useCallback, useEffect } from 'react'
+
+const ANIMATION_OFFSET = 300
+
+export const animationVariants = {
+  initial: (animateLeft: boolean) => ({
+    opacity: 0,
+    x: animateLeft ? ANIMATION_OFFSET : -ANIMATION_OFFSET,
+  }),
+  animate: { opacity: 1, x: 0 },
+  exit: (animateLeft: boolean) => ({
+    opacity: 0,
+    x: animateLeft ? -ANIMATION_OFFSET : ANIMATION_OFFSET,
+  }),
+} as const
+
+export function useKeyboardNavigation(onPrev: () => void, onNext: () => void) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') onPrev()
+      if (e.key === 'ArrowRight') onNext()
+    },
+    [onPrev, onNext]
+  )
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [handleKeyDown])
+}