feat: Add Image Slider component

packages/css/src/components/image-slider/image-slider.scss

@@ -2,6 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+@import "../../common/breakpoint";
 
 .ams-image-slider {
   display: grid;
@@ -47,6 +48,10 @@
   grid-column: 1/-1;
   grid-row: 1;
   justify-content: space-between;
+
+  @media (pointer: coarse) and (max-width: $ams-breakpoint-medium) {
+    display: none;
+  }
 }
 
 .ams-image-slider__control {

packages/react/src/ImageSlider/ImageSlider.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { ImageSlider, SlideProps } from './ImageSlider'
+import { ImageSlider, ImageSliderImageProps } from './ImageSlider'
 import '@testing-library/jest-dom'
 
 const observe = jest.fn()
@@ -20,7 +20,7 @@ window.IntersectionObserver = jest.fn(() => ({
 }))
 
 describe('Image slider', () => {
-  const slides: SlideProps[] = [
+  const images: ImageSliderImageProps[] = [
     {
       src: 'https://picsum.photos/id/122/320/180',
       alt: 'Bridge',
@@ -39,33 +39,32 @@ describe('Image slider', () => {
   ]
 
   it('renders', () => {
-    const { container } = render(<ImageSlider slides={slides} />)
+    const { container } = render(<ImageSlider images={images} />)
 
     const component = container.querySelector(':only-child')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
-  it('renders slides', () => {
-    const { container } = render(<ImageSlider slides={slides} />)
+  it('renders images', () => {
+    const { container } = render(<ImageSlider images={images} />)
 
-    const slideElements = container.querySelectorAll('.ams-image-slider__item')
-    const slideArray = Array.from(slideElements)
+    const slides = Array.from(container.querySelectorAll('.ams-image-slider__item'))
 
-    expect(slideArray).toHaveLength(3)
+    expect(slides).toHaveLength(3)
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<ImageSlider slides={slides} />)
+    const { container } = render(<ImageSlider images={images} />)
 
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-image-slider')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<ImageSlider slides={slides} className="extra" />)
+    const { container } = render(<ImageSlider images={images} className="extra" />)
 
     const component = container.querySelector(':only-child')
 
@@ -75,15 +74,15 @@ describe('Image slider', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    const { container } = render(<ImageSlider slides={slides} ref={ref} />)
+    const { container } = render(<ImageSlider images={images} ref={ref} />)
 
     const component = container.querySelector(':only-child')
 
     expect(ref.current).toBe(component)
   })
 
   it('renders thumbnails', () => {
-    const { container } = render(<ImageSlider slides={slides}></ImageSlider>)
+    const { container } = render(<ImageSlider images={images}></ImageSlider>)
 
     expect(container.querySelector('.ams-image-slider__thumbnail')).toBeInTheDocument()
   })

packages/react/src/ImageSlider/ImageSlider.tsx

@@ -3,29 +3,20 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { forwardRef, KeyboardEvent as ReactKeyboardEvent, useEffect, useRef, useState } from 'react'
+import { forwardRef, useEffect, useRef, useState } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { ImageSliderContext } from './ImageSliderContext'
+import { ImageSliderControls } from './ImageSliderControls'
 import { ImageSliderItem } from './ImageSliderItem'
 import { ImageSliderScroller } from './ImageSliderScroller'
 import { ImageSliderThumbnails } from './ImageSliderThumbnails'
 import { Ratio } from '../AspectRatio'
-import { IconButton } from '../IconButton'
-import { Image } from '../Image/Image'
+import { Image, ImageProps } from '../Image/Image'
 
-export type SlideProps = {
-  src: string
-  /** Prove a URL to the image */
+export type ImageSliderImageProps = ImageProps & {
+  /** Define an aspect ratio to use on the image */
   ratio: Ratio
-  /** Define an aspect ratio to use on all images */
-  alt: string
-  /** Describe to image */
-  srcSet?: string
-  /** Provide a src-set array to use responsive images */
-  sizes?: string
-  /** Provide a sizes attribute to each image */
 }
 
 export type ImageSliderProps = {
@@ -38,7 +29,7 @@ export type ImageSliderProps = {
   /** Label for the previous button */
   previousLabel?: string
   /** An array of images to display */
-  slides: SlideProps[]
+  images: ImageSliderImageProps[]
 } & HTMLAttributes<HTMLDivElement>
 
 export const ImageSliderRoot = forwardRef(
@@ -49,7 +40,7 @@ export const ImageSliderRoot = forwardRef(
       imageLabel = 'Afbeelding',
       nextLabel = 'Volgende',
       previousLabel = 'Vorige',
-      slides,
+      images,
       ...restProps
     }: ImageSliderProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -61,13 +52,12 @@ export const ImageSliderRoot = forwardRef(
     const hasIntersected = new Set<IntersectionObserverEntry>()
 
     const inView = (observations: IntersectionObserverEntry[]) => {
-      const slides = targetRef.current?.children || []
-      const slidesArray = Array.from(slides)
+      const images = Array.from(targetRef.current?.children || [])
 
       for (let observation of observations) {
         hasIntersected.add(observation)
         if (observation.isIntersecting) {
-          setCurrentSlideId(slidesArray.indexOf(observation.target as HTMLElement))
+          setCurrentSlideId(images.indexOf(observation.target as HTMLElement))
         }
       }
     }
@@ -92,8 +82,8 @@ export const ImageSliderRoot = forwardRef(
       }
 
       if (targetRef.current) {
-        const slides = Array.from(targetRef.current.children)
-        for (let slide of slides) observer.observe(slide)
+        const images = Array.from(targetRef.current.children)
+        for (let slide of images) observer.observe(slide)
 
         targetRef.current.addEventListener('scrollend', synchronise)
         targetRef.current.addEventListener('keydown', handleKeyDown)
@@ -111,32 +101,6 @@ export const ImageSliderRoot = forwardRef(
       updateControls()
     }
 
-    const handleThumbsKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {
-      const target = event.target as HTMLElement
-      const element = target.parentElement?.children[currentSlideId]
-
-      if (event.key === 'ArrowRight') {
-        const next = element?.nextElementSibling as HTMLElement | null
-
-        if (next === element) return
-
-        if (next) {
-          next.focus()
-          goToNextSlide()
-        }
-      }
-      if (event.key === 'ArrowLeft') {
-        const previous = element?.previousElementSibling as HTMLElement | null
-
-        if (previous === element) return
-
-        if (previous) {
-          previous.focus()
-          goToPreviousSlide()
-        }
-      }
-    }
-
     const goToSlide = (element: HTMLElement) => {
       const sliderScroller = targetRef.current
 
@@ -182,53 +146,31 @@ export const ImageSliderRoot = forwardRef(
     }
 
     return (
-      <ImageSliderContext.Provider value={{ currentSlide: currentSlideId, goToSlideId }}>
+      <ImageSliderContext.Provider
+        value={{ atStart, atEnd, currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId }}
+      >
         <div
           {...restProps}
           ref={ref}
           aria-roledescription="carousel"
           tabIndex={-1}
           className={clsx('ams-image-slider', controls && 'ams-image-slider--controls', className)}
         >
-          {controls && (
-            <div className="ams-image-slider__controls">
-              <IconButton
-                svg={ChevronLeftIcon}
-                label={previousLabel}
-                inverseColor={true}
-                className="ams-image-slider__control ams-image-slider__control--previous"
-                onClick={() => goToPreviousSlide()}
-                disabled={atStart}
-              />
-              <IconButton
-                svg={ChevronRightIcon}
-                label={nextLabel}
-                inverseColor={true}
-                className="ams-image-slider__control ams-image-slider__control--next"
-                onClick={() => goToNextSlide()}
-                disabled={atEnd}
-              />
-            </div>
-          )}
+          {controls && <ImageSliderControls previousLabel={previousLabel} nextLabel={nextLabel} />}
           <ImageSliderScroller tabIndex={0} ref={targetRef} aria-live="polite" role="group">
-            {slides.map((slide, index) => (
+            {images.map((image, index) => (
               <ImageSliderItem key={index} slideId={index}>
                 <Image
-                  src={slide.src}
-                  srcSet={slide.srcSet}
-                  sizes={slide.sizes}
-                  alt={slide.alt}
-                  className={`ams-aspect-ratio--${slide.ratio}`}
+                  src={image.src}
+                  srcSet={image.srcSet}
+                  sizes={image.sizes}
+                  alt={image.alt}
+                  className={`ams-aspect-ratio--${image.ratio}`}
                 />
               </ImageSliderItem>
             ))}
           </ImageSliderScroller>
-          <ImageSliderThumbnails
-            thumbnails={slides}
-            imageLabel={imageLabel}
-            currentSlide={currentSlideId}
-            onKeyDown={handleThumbsKeyDown}
-          />
+          <ImageSliderThumbnails thumbnails={images} imageLabel={imageLabel} />
         </div>
       </ImageSliderContext.Provider>
     )

packages/react/src/ImageSlider/ImageSliderContext.tsx

@@ -6,13 +6,21 @@
 import { createContext } from 'react'
 
 export type ImageSliderContextValue = {
-  currentSlide: number
+  atStart: boolean
+  atEnd: boolean
+  currentSlideId: number
+  goToNextSlide: () => void
+  goToPreviousSlide: () => void
   // eslint-disable-next-line no-unused-vars
   goToSlideId: (id: number) => void
 }
 
 const defaultValues: ImageSliderContextValue = {
-  currentSlide: 0,
+  atStart: true,
+  atEnd: false,
+  currentSlideId: 0,
+  goToNextSlide: () => {},
+  goToPreviousSlide: () => {},
   goToSlideId: () => {},
 }
 

packages/react/src/ImageSlider/ImageSliderControls.test.tsx

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { ImageSliderControls } from './ImageSliderControls'
+import '@testing-library/jest-dom'
+
+describe('Image slider controls', () => {
+  const nextLabel = 'Volgende'
+  const previousLabel = 'Vorige'
+  it('renders', () => {
+    const { container } = render(<ImageSliderControls nextLabel={nextLabel} previousLabel={previousLabel} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(<ImageSliderControls ref={ref} nextLabel={nextLabel} previousLabel={previousLabel} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/ImageSlider/ImageSliderControls.tsx

@@ -0,0 +1,47 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons'
+import clsx from 'clsx'
+import { forwardRef, useContext } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
+import { ImageSliderContext } from './ImageSliderContext'
+import { IconButton } from '../IconButton'
+
+export type ImageSliderControlsProps = {
+  previousLabel: string
+  nextLabel: string
+} & HTMLAttributes<HTMLDivElement>
+
+export const ImageSliderControls = forwardRef(
+  (
+    { previousLabel, nextLabel, className, ...restProps }: ImageSliderControlsProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const { atStart, atEnd, goToPreviousSlide, goToNextSlide } = useContext(ImageSliderContext)
+    return (
+      <div {...restProps} ref={ref} className={clsx('ams-image-slider__controls', className)}>
+        <IconButton
+          svg={ChevronLeftIcon}
+          label={previousLabel}
+          inverseColor={true}
+          className="ams-image-slider__control ams-image-slider__control--previous"
+          onClick={() => goToPreviousSlide()}
+          disabled={atStart}
+        />
+        <IconButton
+          svg={ChevronRightIcon}
+          label={nextLabel}
+          inverseColor={true}
+          className="ams-image-slider__control ams-image-slider__control--next"
+          onClick={() => goToNextSlide()}
+          disabled={atEnd}
+        />
+      </div>
+    )
+  },
+)
+
+ImageSliderControls.displayName = 'ImageSliderControls'

packages/react/src/ImageSlider/ImageSliderItem.tsx

@@ -15,8 +15,8 @@ export type ImageSliderItemProps = {
 
 export const ImageSliderItem = forwardRef(
   ({ children, slideId, className, ...restProps }: ImageSliderItemProps, ref: ForwardedRef<HTMLDivElement>) => {
-    const { currentSlide } = useContext(ImageSliderContext)
-    const isInView = currentSlide === slideId
+    const { currentSlideId } = useContext(ImageSliderContext)
+    const isInView = currentSlideId === slideId
 
     return (
       <div