Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Dec 17, 2024
+72 −23
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e45a594
Change ID in image galleries to avoid duplicates
rcantin-w Dec 17, 2024
09f53a6
Amend ID in image gallery story
rcantin-w Dec 17, 2024
ef28f5a
Update exhibitions tests to sort by end date
rcantin-w Dec 17, 2024
48aadaa
Merge branch 'main' into duplicate-ids
rcantin-w Dec 17, 2024
b316996
Simplify end date logic by instauring default value
rcantin-w Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cardigan/stories/components/ImageGallery/ImageGallery.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const meta: Meta<typeof ImageGallery> = {
),
args: {
items: images,
id: 1,
id: 'image-gallery',
isStandalone: false,
},
};
Expand Down
8 changes: 2 additions & 6 deletions common/views/slices/EditorialImageGallery/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 10 additions & 5 deletions content/webapp/components/ImageGallery/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -71,7 +72,7 @@ export type Props = {
comicPreviousNext?: ComicPreviousNextProps;
};

const ImageGallery: FunctionComponent<{ id: number } & Props> = ({
const ImageGallery: FunctionComponent<{ id: string } & Props> = ({
id,
title,
items,
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
70 changes: 59 additions & 11 deletions content/webapp/services/prismic/fetch/exhibitions.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Being Human ends in 2090". I'll be happy if I've made it that far

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') });
Expand All @@ -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
Expand Down
Loading