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/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()
   }
-
-  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
+  useKeyboardNavigation(handlePrev, handleNext)
 
   return (
     <div className={styles.fullView}>
@@ -96,19 +71,14 @@ export default function FullView({
         iconName="close"
       />
       <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>
+        <ImageCounter number={`${currentIndex + 1} / ${totalImages}`} />
       </div>
       <div className={styles.content}>
-        <AnimatePresence initial={false} custom={animateLeft}>
+        <AnimatePresence initial={false} custom={slideDirection}>
           <motion.div
             key={image.src}
-            custom={animateLeft}
-            variants={variants}
+            custom={slideDirection}
+            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>