Merge pull request #3430 from ONEARMY/fix/hide-thumbnails-for-single-…

…image fix: hide thumbnail for single image
ONEARMY · Apr 8, 2024 · ca8ddc9 · ca8ddc9
2 parents 4b95f4d + a10e9d8
commit ca8ddc9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/components/src/ImageGallery/ImageGallery.stories.tsx b/packages/components/src/ImageGallery/ImageGallery.stories.tsx
@@ -54,6 +54,12 @@ export const NoThumbnails: StoryFn<typeof ImageGallery> = (
   return <ImageGallery images={testImages} {...props} hideThumbnails />
 }
 
+export const HideThumbnailForSingleImage: StoryFn<typeof ImageGallery> = (
+  props: Omit<ImageGalleryProps, 'images'>,
+) => {
+  return <ImageGallery images={[testImages[0]]} {...props} />
+}
+
 export const ShowNextPrevButtons: StoryFn<typeof ImageGallery> = (
   props: Omit<ImageGalleryProps, 'images'>,
 ) => {

diff --git a/packages/components/src/ImageGallery/ImageGallery.test.tsx b/packages/components/src/ImageGallery/ImageGallery.test.tsx
@@ -6,6 +6,7 @@ import { ImageGallery } from './ImageGallery'
 import {
   Default,
   DoNotShowNextPrevButtons,
+  HideThumbnailForSingleImage,
   NoThumbnails,
   ShowNextPrevButtons,
   testImages,
@@ -153,6 +154,18 @@ describe('ImageGallery', () => {
     expect(image?.getAttribute('src')).toEqual(testImages[0].downloadUrl)
   })
 
+  it('hides thumbnail for single image', async () => {
+    const { getAllByTestId } = render(
+      <HideThumbnailForSingleImage
+        {...(HideThumbnailForSingleImage.args as ImageGalleryProps)}
+      />,
+    )
+
+    expect(() => {
+      getAllByTestId('thumbnail')
+    }).toThrow()
+  })
+
   it('supports no thumbnail option', async () => {
     const { getAllByTestId } = render(
       <NoThumbnails {...(NoThumbnails.args as ImageGalleryProps)} />,

diff --git a/packages/components/src/ImageGallery/ImageGallery.tsx b/packages/components/src/ImageGallery/ImageGallery.tsx
@@ -126,7 +126,7 @@ export const ImageGallery = (props: ImageGalleryProps) => {
   const activeImageIndex = state.activeImageIndex
   const activeImage = images[activeImageIndex]
   const imageNumber = images.length
-  const showThumbnails = !props.hideThumbnails && images.length >= 1
+  const showThumbnails = !props.hideThumbnails && images.length > 1
   const showNextPrevButton = !!props.showNextPrevButton && images.length > 1
 
   return activeImage ? (