From e45a59418d1bcbd71f5a05700896161e8e61ecdb Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 17 Dec 2024 09:43:24 +0000
Subject: [PATCH 1/4] Change ID in image galleries to avoid duplicates

---
 .../views/slices/EditorialImageGallery/index.tsx  |  8 ++------
 content/webapp/components/ImageGallery/index.tsx  | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/common/views/slices/EditorialImageGallery/index.tsx b/common/views/slices/EditorialImageGallery/index.tsx
index 9026149b99..f52ffda261 100644
--- a/common/views/slices/EditorialImageGallery/index.tsx
+++ b/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>
diff --git a/content/webapp/components/ImageGallery/index.tsx b/content/webapp/components/ImageGallery/index.tsx
index a879594d53..8d67a05296 100644
--- a/content/webapp/components/ImageGallery/index.tsx
+++ b/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}

From 09f53a66ccd50e444b77864e462ddb96f45c4743 Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 17 Dec 2024 09:47:29 +0000
Subject: [PATCH 2/4] Amend ID in image gallery story

---
 .../stories/components/ImageGallery/ImageGallery.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cardigan/stories/components/ImageGallery/ImageGallery.stories.tsx b/cardigan/stories/components/ImageGallery/ImageGallery.stories.tsx
index af42ab879e..8091467915 100644
--- a/cardigan/stories/components/ImageGallery/ImageGallery.stories.tsx
+++ b/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,
   },
 };

From ef28f5aaad27955fc08fa7a967d7b385b76e2060 Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 17 Dec 2024 13:04:05 +0000
Subject: [PATCH 3/4] Update exhibitions tests to sort by end date

---
 .../prismic/fetch/exhibitions.test.ts         | 76 ++++++++++++++++---
 1 file changed, 65 insertions(+), 11 deletions(-)

diff --git a/content/webapp/services/prismic/fetch/exhibitions.test.ts b/content/webapp/services/prismic/fetch/exhibitions.test.ts
index 1cfbf5f3d8..caafce8bdb 100644
--- a/content/webapp/services/prismic/fetch/exhibitions.test.ts
+++ b/content/webapp/services/prismic/fetch/exhibitions.test.ts
@@ -38,19 +38,52 @@ describe('fetchExhibitions', () => {
         .map(e => ({
           id: e.id,
           title: asText(e.data.title),
+          end: e.data.end,
         }))
-        .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
+          if (a.end && b.end) {
+            return a.end > b.end ? 1 : -1;
+          }
+          return 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 +96,35 @@ describe('fetchExhibitions', () => {
         .map(e => ({
           id: e.id,
           title: asText(e.data.title),
+          end: e.data.end,
         }))
-        .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
+          if (a.end && b.end) {
+            return a.end > b.end ? 1 : -1;
+          }
+          return 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

From b316996e4b2ff4745c5a6e84912eaa156eab0381 Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 17 Dec 2024 14:59:33 +0000
Subject: [PATCH 4/4] Simplify end date logic by instauring default value

---
 .../services/prismic/fetch/exhibitions.test.ts     | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/content/webapp/services/prismic/fetch/exhibitions.test.ts b/content/webapp/services/prismic/fetch/exhibitions.test.ts
index caafce8bdb..1a45a9b184 100644
--- a/content/webapp/services/prismic/fetch/exhibitions.test.ts
+++ b/content/webapp/services/prismic/fetch/exhibitions.test.ts
@@ -38,16 +38,13 @@ describe('fetchExhibitions', () => {
         .map(e => ({
           id: e.id,
           title: asText(e.data.title),
-          end: e.data.end,
+          end: e.data.end || '2090-09-09T23:00:00+0000',
         }))
         .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
-          if (a.end && b.end) {
-            return a.end > b.end ? 1 : -1;
-          }
-          return 1;
+          return a.end > b.end ? 1 : -1;
         })
         .slice(0, 6); // Slicing so we don't have to keep adding new exhibitions.
 
@@ -96,16 +93,13 @@ describe('fetchExhibitions', () => {
         .map(e => ({
           id: e.id,
           title: asText(e.data.title),
-          end: e.data.end,
+          end: e.data.end || '2090-09-09T23:00:00+0000',
         }))
         .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
-          if (a.end && b.end) {
-            return a.end > b.end ? 1 : -1;
-          }
-          return 1;
+          return a.end > b.end ? 1 : -1;
         })
         .slice(0, 3); // Slicing so we don't have to keep adding new exhibitions.