Merge branch 'main' into editions-crossword-renderer

dotcom-rendering/scripts/test-data/gen-fixtures.js

@@ -8,7 +8,6 @@ const { config } = require('../../fixtures/config');
 const { configOverrides } = require('../../fixtures/config-overrides');
 const { switchOverrides } = require('../../fixtures/switch-overrides');
 const { validateAsArticleType } = require('../../src/model/validate');
-const { enhanceArticleType } = require('../../src/types/article');
 
 const root = resolve(__dirname, '..', '..');
 
@@ -174,44 +173,23 @@ const requests = articles.map((article) => {
 			}
 
 			const frontendData = validateAsArticleType(frontendJson);
-			const dcrArticle = enhanceArticleType(frontendData);
-
-			// manual hack for Video articles
-			if (article.name === 'Video') {
-				dcrArticle.frontendData.config.source = 'TMN';
-			}
-
-			// Write the new DCR fixture data
-			const dcrContents = `${HEADER}
-				import type { Article } from '../../../src/types/article';
-
-				export const ${article.name}: Article = ${JSON.stringify(dcrArticle, null, 4)}
-			`;
-
-			const dcrTypeFile = fs.writeFile(
-				`${root}/fixtures/generated/dcr-articles/${article.name}.ts`,
-				dcrContents,
-				'utf8',
-			);
 
 			// Write the new frontend fixture data
 			const frontendContents = `${HEADER}
 				import type { FEArticleType } from '../../../src/types/frontend';
 
 				export const ${article.name}: FEArticleType = ${JSON.stringify(
-					frontendJson,
+					frontendData,
 					null,
 					4,
 				)}
 			`;
 
-			const frontendTypeFile = fs.writeFile(
+			return fs.writeFile(
 				`${root}/fixtures/generated/fe-articles/${article.name}.ts`,
 				frontendContents,
 				'utf8',
 			);
-
-			return Promise.all([frontendTypeFile, dcrTypeFile]);
 		})
 		.then(() => `${article.name}.ts`)
 		.catch((err) => {

dotcom-rendering/src/components/ArticleBody.tsx

@@ -14,8 +14,8 @@ import { ArticleRenderer } from '../lib/ArticleRenderer';
 import type { EditionId } from '../lib/edition';
 import { decideLanguage, decideLanguageDirection } from '../lib/lang';
 import { revealStyles } from '../lib/revealStyles';
+import type { TableOfContentsItem } from '../model/enhanceTableOfContents';
 import { palette as themePalette } from '../palette';
-import type { TableOfContentsItem } from '../types/article';
 import type { Block } from '../types/blocks';
 import type { ServerSideTests, Switches } from '../types/config';
 import type { TagType } from '../types/tag';

dotcom-rendering/src/components/Card/Card.tsx

@@ -33,6 +33,7 @@ import { LatestLinks } from '../LatestLinks.importable';
 import { MediaDuration } from '../MediaDuration';
 import { MediaMeta } from '../MediaMeta';
 import { Slideshow } from '../Slideshow';
+import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
 import { SnapCssSandbox } from '../SnapCssSandbox';
 import { StarRating } from '../StarRating/StarRating';
@@ -604,14 +605,35 @@ export const Card = ({
 						imagePositionOnDesktop={imagePositionOnDesktop}
 						imagePositionOnMobile={imagePositionOnMobile}
 						showPlayIcon={showPlayIcon}
+						hideImageOverlay={
+							media.type === 'slideshow' && isFlexibleContainer
+						}
 					>
-						{media.type === 'slideshow' && (
-							<Slideshow
-								images={media.slideshowImages}
-								imageSize={imageSize}
-								isDynamo={isDynamo}
-							/>
-						)}
+						{media.type === 'slideshow' &&
+							(isFlexibleContainer ? (
+								<div
+									css={css`
+										position: relative;
+										${getZIndex('card-nested-link')}
+									`}
+								>
+									<Island
+										priority="feature"
+										defer={{ until: 'visible' }}
+									>
+										<SlideshowCarousel
+											images={media.slideshowImages}
+											imageSize={imageSize}
+										/>
+									</Island>
+								</div>
+							) : (
+								<Slideshow
+									images={media.slideshowImages}
+									imageSize={imageSize}
+									isDynamo={isDynamo}
+								/>
+							))}
 						{media.type === 'avatar' && (
 							<AvatarContainer
 								imageSize={imageSize}

dotcom-rendering/src/components/Card/components/ImageWrapper.tsx

@@ -36,6 +36,12 @@ type Props = {
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	showPlayIcon: boolean;
+	/**
+	 * Forces hiding the image overlay added to pictures & slideshows on hover.
+	 * This is to allow hiding the overlay on slideshow carousels where we don't
+	 * want it to be shown whilst retaining it for existing slideshows.
+	 */
+	hideImageOverlay?: boolean;
 };
 
 /**
@@ -117,6 +123,7 @@ export const ImageWrapper = ({
 	imagePositionOnDesktop,
 	imagePositionOnMobile,
 	showPlayIcon,
+	hideImageOverlay,
 }: Props) => {
 	const isHorizontalOnDesktop =
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
@@ -168,9 +175,8 @@ export const ImageWrapper = ({
 			<>
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
-				{(imageType === 'picture' || imageType === 'slideshow') && (
-					<div className="image-overlay" />
-				)}
+				{(imageType === 'picture' || imageType === 'slideshow') &&
+					!hideImageOverlay && <div className="image-overlay" />}
 				{imageType === 'picture' && showPlayIcon && (
 					<PlayIcon
 						imageSize={imageSize}

dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx

@@ -1,3 +1,4 @@
+import type { ABTestAPI } from '@guardian/ab-core';
 import { getCookie } from '@guardian/libs';
 import { useEffect, useState } from 'react';
 import type { DailyArticle } from '../lib/dailyArticleCount';
@@ -8,6 +9,69 @@ import { ExpandableMarketingCard } from './ExpandableMarketingCard';
 import { ExpandableMarketingCardSwipeable } from './ExpandableMarketingCardSwipeable';
 import { Hide } from './Hide';
 
+type VariantName = 'variant-free' | 'variant-bubble' | 'variant-billionaire';
+type Variant = {
+	heading: string;
+	kicker: string;
+};
+const variantFree: Variant = {
+	heading: 'Yes, this story is free',
+	kicker: 'Why the Guardian has no paywall',
+};
+const variantBubble: Variant = {
+	heading: 'Pop your US news bubble',
+	kicker: 'How the Guardian is different',
+};
+const variantBillionaire: Variant = {
+	heading: 'No billionaire approved this',
+	kicker: 'How the Guardian is different',
+};
+
+const getVariant = (abTestAPI: ABTestAPI | undefined): VariantName | null => {
+	if (!abTestAPI) {
+		return null;
+	}
+
+	const isInVariantFree = abTestAPI.isUserInVariant(
+		'UsaExpandableMarketingCard',
+		'variant-free',
+	);
+	const isInVariantBubble = abTestAPI.isUserInVariant(
+		'UsaExpandableMarketingCard',
+		'variant-bubble',
+	);
+	const isInVariantBillionaire = abTestAPI.isUserInVariant(
+		'UsaExpandableMarketingCard',
+		'variant-billionaire',
+	);
+
+	if (isInVariantFree) {
+		return 'variant-free';
+	}
+
+	if (isInVariantBubble) {
+		return 'variant-bubble';
+	}
+
+	if (isInVariantBillionaire) {
+		return 'variant-billionaire';
+	}
+
+	return null;
+};
+
+const getVariantCopy = (variant: VariantName): Variant => {
+	if (variant === 'variant-free') {
+		return variantFree;
+	}
+
+	if (variant === 'variant-bubble') {
+		return variantBubble;
+	}
+
+	return variantBillionaire;
+};
+
 const isFirstOrSecondArticle = () => {
 	const [dailyCount = {} as DailyArticle] = getDailyArticleCount() ?? [];
 	return Object.keys(dailyCount).length === 0 || dailyCount.count <= 1;
@@ -40,15 +104,7 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => {
 	const [isApplicableUser, setIsApplicableUser] = useState(false);
 
 	const abTestAPI = useAB()?.api;
-	const isInVariantFree = !!abTestAPI?.isUserInVariant(
-		'UsaExpandableMarketingCard',
-		'variant-free',
-	);
-	const isInVariantBubble = !!abTestAPI?.isUserInVariant(
-		'UsaExpandableMarketingCard',
-		'variant-bubble',
-	);
-	const isInEitherVariant = isInVariantFree || isInVariantBubble;
+	const abTestVariant = getVariant(abTestAPI);
 
 	useEffect(() => {
 		void isNewUSUser().then((show) => {
@@ -58,12 +114,11 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => {
 		});
 	}, []);
 
-	if (!isInEitherVariant || !isApplicableUser || isClosed) {
+	if (!abTestVariant || !isApplicableUser || isClosed) {
 		return null;
 	}
 
-	const heading = 'No billionaire approved this';
-	const kicker = 'How the Guardian is different';
+	const { heading, kicker } = getVariantCopy(abTestVariant);
 
 	return (
 		<>

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -363,7 +363,10 @@ export const StandardCardLayout = ({
 							image={showImage ? card.image : undefined}
 							imageLoading={imageLoading}
 							imagePositionOnDesktop={'left'}
-							supportingContent={card.supportingContent}
+							supportingContent={card.supportingContent?.slice(
+								0,
+								2,
+							)}
 							supportingContentAlignment="vertical"
 							supportingContentPosition="outer"
 							imageSize={'medium'}

dotcom-rendering/src/components/GetMatchNav.importable.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { isObject } from '@guardian/libs';
 import { from } from '@guardian/source/foundations';
 import type { SWRConfiguration } from 'swr';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
@@ -36,6 +37,36 @@ const fallbackData = {
 	awayTeam: fallbackTeam,
 } satisfies MatchData;
 
+const validateMatchData = (data: unknown): data is MatchData => {
+	if (!isObject(data)) {
+		return false;
+	}
+
+	const homeTeam = data.homeTeam;
+	if (
+		!isObject(homeTeam) ||
+		typeof homeTeam.name !== 'string' ||
+		homeTeam.name.length === 0 ||
+		typeof homeTeam.score !== 'number' ||
+		isNaN(homeTeam.score)
+	) {
+		return false;
+	}
+
+	const awayTeam = data.awayTeam;
+	if (
+		!isObject(awayTeam) ||
+		typeof awayTeam.name !== 'string' ||
+		awayTeam.name.length === 0 ||
+		typeof awayTeam.score !== 'number' ||
+		isNaN(awayTeam.score)
+	) {
+		return false;
+	}
+
+	return true;
+};
+
 /**
  * Wrapper around `MatchNav` with loading and fallback.
  *
@@ -97,7 +128,14 @@ export const GetMatchNav = ({
 			);
 		}
 	}
-	if (data) {
+
+	if (!data) {
+		// this should never happen because we pass fallback data to SWR
+		return null;
+	}
+
+	const isDataValid = validateMatchData(data);
+	if (isDataValid) {
 		return (
 			<MatchNav
 				homeTeam={data.homeTeam}
@@ -107,6 +145,6 @@ export const GetMatchNav = ({
 		);
 	}
 
-	// this should never happen because we pass fallback data to SWR
+	// Invalid data indicates that we do not have the data for this fixture, likely because the match is old.
 	return null;
 };