Merge pull request #11446 from wellcomecollection/duplicate-ids

Change ID in image galleries to avoid duplicates and fix exhibitions test

cardigan/stories/components/ImageGallery/ImageGallery.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<typeof ImageGallery> = {
   ),
   args: {
     items: images,
-    id: 1,
+    id: 'image-gallery',
     isStandalone: false,
   },
 };

common/views/slices/EditorialImageGallery/index.tsx

@@ -17,23 +17,19 @@ export type EditorialImageGalleryProps = SliceComponentProps<
 
 const EditorialImageGallerySlice: FunctionComponent<
   EditorialImageGalleryProps
-> = ({ slice, slices, context }) => {
+> = ({ slice, context }) => {
   const isStandalone = context.contentType === 'standalone-image-gallery';
   const transformedSlice = transformEditorialImageGallerySlice(
     slice,
     isStandalone
   );
   const options = { ...defaultContext, ...context };
-  const allImageGallerySlices = slices.filter(
-    slice => slice.slice_type === 'editorialImageGallery'
-  );
-  const index = allImageGallerySlices.findIndex(s => s.id === slice.id);
 
   return transformedSlice.value.items?.length ? (
     <SpacingComponent $sliceType={transformedSlice.type}>
       <ImageGallery
         {...transformedSlice.value}
-        id={index + 1}
+        id={slice.id}
         comicPreviousNext={options.comicPreviousNext}
       />
     </SpacingComponent>

content/webapp/components/ImageGallery/index.tsx

@@ -10,6 +10,7 @@ import { cross, gallery } from '@weco/common/icons';
 import { CaptionedImage as CaptionedImageProps } from '@weco/common/model/captioned-image';
 import { repeatingLsBlack } from '@weco/common/utils/backgrounds';
 import { font } from '@weco/common/utils/classnames';
+import { dasherize } from '@weco/common/utils/grammar';
 import Button from '@weco/common/views/components/Buttons';
 import Control from '@weco/common/views/components/Control';
 import Icon from '@weco/common/views/components/Icon/Icon';
@@ -71,7 +72,7 @@ export type Props = {
   comicPreviousNext?: ComicPreviousNextProps;
 };
 
-const ImageGallery: FunctionComponent<{ id: number } & Props> = ({
+const ImageGallery: FunctionComponent<{ id: string } & Props> = ({
   id,
   title,
   items,
@@ -140,14 +141,18 @@ const ImageGallery: FunctionComponent<{ id: number } & Props> = ({
             <Space as="span" $h={{ size: 's', properties: ['margin-right'] }}>
               <Icon icon={gallery} />
             </Space>
-            <h2 id={`gallery-${id}`} className={font('wb', 3)} ref={headingRef}>
+            <h2
+              id={title ? dasherize(title) : `gallery-${id}`}
+              className={font('wb', 3)}
+              ref={headingRef}
+            >
               {title || 'In pictures'}
             </h2>
           </GalleryTitle>
         </ContaineredLayout>
       )}
       <Gallery
-        id={`image-gallery-${id}`}
+        id={id}
         $isActive={isActive}
         $isStandalone={isStandalone || isFrames}
         $pageBackground={pageBackground}
@@ -187,7 +192,7 @@ const ImageGallery: FunctionComponent<{ id: number } & Props> = ({
                 <ControlContainer $isActive={isActive}>
                   <Control
                     tabIndex={-1}
-                    ariaControls={`image-gallery-${id}`}
+                    ariaControls={id}
                     ariaExpanded={isActive}
                     dataGtmTrigger="hide_image_gallery"
                     ref={closeButtonRef}
@@ -257,7 +262,7 @@ const ImageGallery: FunctionComponent<{ id: number } & Props> = ({
                 <Button
                   variant="ButtonSolid"
                   ref={openButtonRef}
-                  ariaControls={`image-gallery-${id}`}
+                  ariaControls={id}
                   ariaExpanded={isActive}
                   dataGtmTrigger={isActive ? undefined : 'show_image_gallery'}
                   icon={gallery}

content/webapp/services/prismic/fetch/exhibitions.test.ts

@@ -38,19 +38,49 @@ describe('fetchExhibitions', () => {
         .map(e => ({
           id: e.id,
           title: asText(e.data.title),
+          end: e.data.end || '2090-09-09T23:00:00+0000',
         }))
-        .sort((a, b) => (a.id > b.id ? 1 : -1))
+        .sort((a, b) => {
+          // Makes TS happy but this condition should never not work
+          // we always have an end date, even for permanent exhibitions
+          // e.g. Being Human ends in 2090
+          return a.end > b.end ? 1 : -1;
+        })
         .slice(0, 6); // Slicing so we don't have to keep adding new exhibitions.
 
       // Of these exhibitions, three closed on 23 April 2023:
       // Objects in Stereo, The Archive of an Unseen, and the Healing Pavilion
       expect(closingDayExhibitions).toStrictEqual([
-        { id: 'XNFfsxAAANwqbNWD', title: 'Being Human' },
-        { id: 'Y0QhIxEAAA__0sMb', title: 'Objects in Stereo' },
-        { id: 'Y3zI8hAAAGXXcMua', title: 'The Archive of an Unseen' },
-        { id: 'Y8VNbhEAAPJM-oki', title: 'Milk' },
-        { id: 'Yzv9ChEAABfUrkVp', title: 'The Healing Pavilion' },
-        { id: 'ZAW0PxQAACcG-pX8', title: 'Genetic Automata' },
+        {
+          id: 'Yzv9ChEAABfUrkVp',
+          title: 'The Healing Pavilion',
+          end: '2023-04-22T23:00:00+0000',
+        },
+        {
+          id: 'Y0QhIxEAAA__0sMb',
+          title: 'Objects in Stereo',
+          end: '2023-04-22T23:00:00+0000',
+        },
+        {
+          id: 'Y3zI8hAAAGXXcMua',
+          title: 'The Archive of an Unseen',
+          end: '2023-04-22T23:00:00+0000',
+        },
+        {
+          id: 'Y8VNbhEAAPJM-oki',
+          title: 'Milk',
+          end: '2023-09-09T23:00:00+0000',
+        },
+        {
+          id: 'ZAW0PxQAACcG-pX8',
+          title: 'Genetic Automata',
+          end: '2024-02-11T00:00:00+0000',
+        },
+        {
+          id: 'ZJ1zCxAAACMAczPA',
+          title: 'The Cult of Beauty',
+          end: '2024-04-27T23:00:00+0000',
+        },
       ]);
 
       mockToday({ as: new Date('2023-04-24T12:00:00Z') });
@@ -63,14 +93,32 @@ describe('fetchExhibitions', () => {
         .map(e => ({
           id: e.id,
           title: asText(e.data.title),
+          end: e.data.end || '2090-09-09T23:00:00+0000',
         }))
-        .sort((a, b) => (a.id > b.id ? 1 : -1))
+        .sort((a, b) => {
+          // Makes TS happy but this condition should never not work
+          // we always have an end date, even for permanent exhibitions
+          // e.g. Being Human ends in 2090
+          return a.end > b.end ? 1 : -1;
+        })
         .slice(0, 3); // Slicing so we don't have to keep adding new exhibitions.
 
       expect(nextDayExhibitions).toStrictEqual([
-        { id: 'XNFfsxAAANwqbNWD', title: 'Being Human' },
-        { id: 'Y8VNbhEAAPJM-oki', title: 'Milk' },
-        { id: 'ZAW0PxQAACcG-pX8', title: 'Genetic Automata' },
+        {
+          id: 'Y8VNbhEAAPJM-oki',
+          title: 'Milk',
+          end: '2023-09-09T23:00:00+0000',
+        },
+        {
+          id: 'ZAW0PxQAACcG-pX8',
+          title: 'Genetic Automata',
+          end: '2024-02-11T00:00:00+0000',
+        },
+        {
+          id: 'ZJ1zCxAAACMAczPA',
+          title: 'The Cult of Beauty',
+          end: '2024-04-27T23:00:00+0000',
+        },
       ]);
     },
     timeout