Merge branch 'main' into guardian-eslint-config-typescript-v12

Author: JamieB-gu

apps-rendering/src/client/article.ts

@@ -85,26 +85,28 @@ function followToggle(
 		if (isFollowing) {
 			void bridgetClient.unfollow(topic).then((unfollow) => {
 				// unfollow will be true if the update was successful
-				unfollow &&
+				if (unfollow) {
 					ReactDOM.render(
 						h(followStatusComponent, {
 							isFollowing: false,
 							contributorName: topic.displayName,
 						}),
 						followStatus,
 					);
+				}
 			});
 		} else {
 			void bridgetClient.follow(topic).then((follow) => {
 				// follow will be true if the update was successful
-				follow &&
+				if (follow) {
 					ReactDOM.render(
 						h(followStatusComponent, {
 							isFollowing: true,
 							contributorName: topic.displayName,
 						}),
 						followStatus,
 					);
+				}
 			});
 		}
 	});
@@ -167,16 +169,19 @@ function conditionallyRenderFollowTagComponent(
 				isMyGuardianEnabled,
 				tagIsFollowingState,
 			]) => {
-				isBridgetCompatible &&
+				if (
+					isBridgetCompatible &&
 					isMyGuardianEnabled &&
-					followTagStatus &&
+					followTagStatus
+				) {
 					ReactDOM.render(
 						h(FollowTagStatus, {
 							isFollowing: tagIsFollowingState,
 							contributorName: topic.displayName,
 						}),
 						followTagStatus,
 					);
+				}
 
 				followTag?.addEventListener('click', followTagClick);
 				followTag?.setAttribute('aria-hidden', 'false');

apps-rendering/src/components/editions/galleryImage/index.tsx

@@ -94,9 +94,9 @@ const getCaptionDetails = (oDoc: Option<DocumentFragment>): CaptionDetails => {
 	): CaptionDetails => {
 		const detailsSection = details[section];
 
-		node.textContent &&
-			detailsSection.kind === OptionKind.Some &&
+		if (node.textContent && detailsSection.kind === OptionKind.Some) {
 			detailsSection.value.push(node.textContent);
+		}
 
 		return details;
 	};

dotcom-rendering/fixtures/manual/trails.ts

@@ -605,6 +605,49 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 	},
 ];
 
+export const newsletterTrails: [DCRFrontCard, DCRFrontCard] = [
+	{
+		format: { design: 0, display: 0, theme: 0 },
+		dataLinkName: 'news | group-0 | card-@4',
+		url: '/global/2022/sep/20/sign-up-for-the-guide-newsletter-our-free-pop-culture-email',
+		headline: 'Sign up for a weekly dose of pop culture',
+		trailText:
+			'The best new music, film, TV, podcasts and more direct to your inbox, plus hidden gems and reader recommendations',
+		webPublicationDate: '2022-09-20T10:57:04.000Z',
+		kickerText: 'The Guide',
+		isNewsletter: true,
+		image: {
+			src: 'https://media.guim.co.uk/ce2e59cfa2ab7db34cba24adbf20910976e55604/0_55_501_401/master/501.jpg',
+			altText: 'The Guide Newsletter Design',
+		},
+		showQuotedHeadline: false,
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		isExternalLink: false,
+		showLivePlayable: false,
+		isImmersive: false,
+	},
+	{
+		format: { design: 0, display: 0, theme: 0 },
+		dataLinkName: 'news | group-0 | card-@2',
+		url: '/info/2024/oct/10/sign-up-for-the-filter-newsletter-our-free-weekly-buying-advice',
+		headline: 'Sign up our free weekly buying advice newsletter',
+		trailText:
+			'Get smart, sustainable shopping advice from the Filter team straight to your inbox, every Sunday<br><br>The Guardian’s journalism is independent. We will earn a commission if you buy something through an affiliate link.',
+		webPublicationDate: '2024-10-10T10:30:16.000Z',
+		kickerText: 'The Filter',
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		isNewsletter: true,
+		image: {
+			src: 'https://media.guim.co.uk/e5269c957a8e19da44d76b53f349b8d5a3b6a98f/0_0_5000_3000/master/5000.jpg',
+			altText: 'The Filter',
+		},
+		showQuotedHeadline: false,
+		isExternalLink: false,
+		showLivePlayable: false,
+		isImmersive: false,
+	},
+];
+
 export const loopVideoCard: DCRFrontCard = {
 	...defaultCardProps,
 	dataLinkName: 'news | group-0 | card-@2',

dotcom-rendering/package.json

@@ -39,7 +39,7 @@
 		"@guardian/identity-auth-frontend": "8.1.0",
 		"@guardian/libs": "26.0.1",
 		"@guardian/ophan-tracker-js": "2.6.1",
-		"@guardian/react-crossword": "6.3.0",
+		"@guardian/react-crossword": "11.1.0",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "11.3.0",
 		"@guardian/source-development-kitchen": "18.1.1",

dotcom-rendering/src/components/ScrollableMedium.stories.tsx

@@ -2,6 +2,12 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
+import {
+	audioTrails,
+	galleryTrails,
+	newsletterTrails,
+	videoTrails,
+} from '../../fixtures/manual/trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableMedium } from './ScrollableMedium.importable';
@@ -42,11 +48,17 @@ export default meta;
 
 type Story = StoryObj<typeof ScrollableMedium>;
 
-export const WithMultipleCards = {} satisfies Story;
+export const WithEightCards = {} satisfies Story;
 
-export const WithOneCard = {
+export const WithFourCards = {
 	args: {
-		trails: trails.slice(0, 1),
+		trails: trails.slice(0, 4),
+	},
+} satisfies Story;
+
+export const WithThreeCards = {
+	args: {
+		trails: trails.slice(0, 3),
 	},
 } satisfies Story;
 
@@ -56,15 +68,21 @@ export const WithTwoCards = {
 	},
 } satisfies Story;
 
-export const WithThreeCards = {
+export const WithOneCard = {
 	args: {
-		trails: trails.slice(0, 3),
+		trails: trails.slice(0, 1),
 	},
 } satisfies Story;
 
-export const WithFourCards = {
+export const Media = {
+	name: 'With Media Cards',
 	args: {
-		trails: trails.slice(0, 4),
+		trails: [
+			audioTrails[0],
+			videoTrails[0],
+			galleryTrails[0],
+			newsletterTrails[0],
+		],
 	},
 } satisfies Story;
 

dotcom-rendering/src/components/ScrollableSmall.stories.tsx

@@ -2,6 +2,12 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
+import {
+	audioTrails,
+	galleryTrails,
+	newsletterTrails,
+	videoTrails,
+} from '../../fixtures/manual/trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableSmall } from './ScrollableSmall.importable';
@@ -66,6 +72,18 @@ export const WithOneCard = {
 	},
 };
 
+export const Media = {
+	name: 'With Media Cards',
+	args: {
+		trails: [
+			audioTrails[0],
+			videoTrails[0],
+			galleryTrails[0],
+			newsletterTrails[0],
+		],
+	},
+} satisfies Story;
+
 export const WithPrimaryContainer = {
 	render: (args) => (
 		<FrontSection

dotcom-rendering/src/components/StaticMediumFour.stories.tsx

@@ -1,7 +1,13 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
+import {
+	audioTrails,
+	galleryTrails,
+	newsletterTrails,
+	trails,
+	videoTrails,
+} from '../../fixtures/manual/trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { StaticMediumFour } from './StaticMediumFour';
@@ -42,36 +48,45 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Four = {
-	name: 'With four cards',
+	name: 'With Four Cards',
 	args: {
-		trails: trails.slice(0, 4).map((trail, index) => ({
-			...trail,
-			isNewsletter: index === 3, // Check that we see the Newsletter pill on a card.
-		})),
+		trails: trails.slice(0, 4),
 	},
 };
 
 export const Three: Story = {
-	name: 'With three cards',
+	name: 'With Three Cards',
 	args: {
 		trails: trails.slice(0, 3),
 	},
 };
 
 export const Two: Story = {
-	name: 'With two cards',
+	name: 'With Two Cards',
 	args: {
 		trails: trails.slice(0, 2),
 	},
 };
 
 export const One: Story = {
-	name: 'With one card',
+	name: 'With One Card',
 	args: {
 		trails: trails.slice(0, 1),
 	},
 };
 
+export const Media = {
+	name: 'With Media Cards',
+	args: {
+		trails: [
+			audioTrails[0],
+			videoTrails[0],
+			galleryTrails[0],
+			newsletterTrails[0],
+		],
+	},
+} satisfies Story;
+
 const containerPalettes = [
 	'InvestigationPalette',
 	'LongRunningPalette',

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -462,6 +462,7 @@
                     "enum": [
                         "cryptic",
                         "everyman",
+                        "mini",
                         "prize",
                         "quick",
                         "quick-cryptic",
@@ -4217,6 +4218,7 @@
                             "enum": [
                                 "cryptic",
                                 "everyman",
+                                "mini",
                                 "prize",
                                 "quick",
                                 "quick-cryptic",

dotcom-rendering/src/model/block-schema.json

@@ -3706,6 +3706,7 @@
                             "enum": [
                                 "cryptic",
                                 "everyman",
+                                "mini",
                                 "prize",
                                 "quick",
                                 "quick-cryptic",

dotcom-rendering/src/model/editions-crossword-schema.json

@@ -25,6 +25,7 @@
                         "enum": [
                             "cryptic",
                             "everyman",
+                            "mini",
                             "prize",
                             "quick",
                             "quick-cryptic",