Merge branch 'main' into ei/skimlinks-xcust-app

Author: emma-imber

dotcom-rendering/package.json

@@ -43,7 +43,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.5.0",
+		"@guardian/support-dotcom-components": "7.6.2",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "7.75.1",

dotcom-rendering/src/components/FrontSection.tsx

@@ -98,6 +98,40 @@ type Props = {
 const width = (columns: number, columnWidth: number, columnGap: number) =>
 	`width: ${columns * columnWidth + (columns - 1) * columnGap}px;`;
 
+const borderColourStyles = (title?: string): string => {
+	switch (title) {
+		case 'News':
+			return schemePalette('--section-border-news');
+		case 'Opinion':
+			return schemePalette('--section-border-opinion');
+		case 'Sport':
+			return schemePalette('--section-border-sport');
+		case 'Lifestyle':
+			return schemePalette('--section-border-lifestyle');
+		case 'Culture':
+			return schemePalette('--section-border-culture');
+		default:
+			return schemePalette('--section-border-primary');
+	}
+};
+
+const articleSectionTitleStyles = (title?: string): string => {
+	switch (title) {
+		case 'News':
+			return schemePalette('--article-section-title-news');
+		case 'Opinion':
+			return schemePalette('--article-section-title-opinion');
+		case 'Sport':
+			return schemePalette('--article-section-title-sport');
+		case 'Lifestyle':
+			return schemePalette('--article-section-title-lifestyle');
+		case 'Culture':
+			return schemePalette('--article-section-title-culture');
+		default:
+			return schemePalette('--article-section-title');
+	}
+};
+
 /** Not all browsers support CSS grid, so we set explicit width as a fallback */
 const fallbackStyles = css`
 	@supports not (display: grid) {
@@ -401,10 +435,10 @@ const bottomPaddingBetaContainer = (
 	}
 `;
 
-const primaryLevelTopBorder = css`
+const primaryLevelTopBorder = (title?: string) => css`
 	grid-row: 1;
 	grid-column: 1 / -1;
-	border-top: 2px solid ${schemePalette('--section-border-primary')};
+	border-top: 2px solid ${borderColourStyles(title)};
 	/** Ensures the top border sits above the side borders */
 	z-index: 1;
 	height: fit-content;
@@ -590,7 +624,7 @@ export const FrontSection = ({
 						css={[
 							containerLevel === 'Secondary'
 								? secondaryLevelTopBorder
-								: primaryLevelTopBorder,
+								: primaryLevelTopBorder(title),
 						]}
 					/>
 				)}
@@ -629,9 +663,7 @@ export const FrontSection = ({
 										? schemePalette(
 												'--article-section-secondary-title',
 										  )
-										: schemePalette(
-												'--article-section-title',
-										  )
+										: articleSectionTitleStyles(title)
 								}
 								// On paid fronts the title is not treated as a link
 								url={!isOnPaidContentFront ? url : undefined}

dotcom-rendering/src/components/FrontsAdSlots.tsx

@@ -64,7 +64,6 @@ export const MerchandisingSlot = ({
 		renderAds && (
 			<Section
 				fullWidth={true}
-				data-print-layout="hide"
 				padSides={false}
 				showTopBorder={false}
 				showSideBorders={false}

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

@@ -1,9 +1,10 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { LoopVideo } from './LoopVideo.importable';
 
-export default {
+const meta = {
 	component: LoopVideo,
 	title: 'Components/LoopVideo',
 	decorators: [centreColumnDecorator],
@@ -15,7 +16,10 @@ export default {
 	},
 } satisfies Meta<typeof LoopVideo>;
 
-export const Default = {
+export default meta;
+type Story = StoryObj<typeof LoopVideo>;
+
+export const Default: Story = {
 	name: 'Default',
 	args: {
 		src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
@@ -26,14 +30,84 @@ export const Default = {
 		image: 'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImage: '',
 	},
-} satisfies StoryObj<typeof LoopVideo>;
+};
 
-export const Without5to4Ratio = {
+export const Without5to4Ratio: Story = {
 	name: 'Without 5:4 aspect ratio',
 	args: {
 		...Default.args,
 		src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
 		height: 1080,
 		width: 1920,
 	},
-} satisfies StoryObj<typeof LoopVideo>;
+};
+
+export const PausePlay: Story = {
+	...Default,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const videoEl = canvas.getByTestId('loop-video');
+
+		await userEvent.click(videoEl, {
+			delay: 300, // Allow video to start playing.
+		});
+		await canvas.findByTestId('play-icon');
+
+		const progressBar = await canvas.findByRole('progressbar');
+		await expect(Number(progressBar.ariaValueNow)).toBeGreaterThan(0);
+
+		// Play Video
+		await userEvent.click(videoEl);
+		await expect(canvas.queryByTestId('play-icon')).not.toBeInTheDocument();
+	},
+};
+
+export const UnmuteMute: Story = {
+	...Default,
+	parameters: {
+		test: {
+			// The following error is received without this flag: "TypeError: ophan.trackClickComponentEvent is not a function"
+			dangerouslyIgnoreUnhandledErrors: true,
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await canvas.findByTestId('unmute-icon');
+
+		await userEvent.click(canvas.getByTestId('unmute-icon'));
+		await canvas.findByTestId('mute-icon');
+
+		await userEvent.click(canvas.getByTestId('mute-icon'));
+		await canvas.findByTestId('unmute-icon');
+	},
+};
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const InteractionObserver: Story = {
+	...Default,
+	render: (args) => (
+		<div data-testid="test-container">
+			<LoopVideo {...args} />
+			<div style={{ height: '100vh' }}></div>
+			<p data-testid="page-end">End of page</p>
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await sleep(500); // Allow enough time for the autoplay video to start.
+		canvas.getByTestId('page-end').scrollIntoView();
+
+		const progressBar = await canvas.findByRole('progressbar');
+		const progress = Number(progressBar.ariaValueNow);
+
+		await sleep(500); // Allow enough time to be confident that the video is paused.
+		await expect(Number(progressBar.ariaValueNow)).toEqual(progress);
+		await expect(canvas.queryByTestId('play-icon')).not.toBeInTheDocument();
+	},
+};

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -137,8 +137,8 @@ export const LoopVideoPlayer = forwardRef(
 					id={loopVideoId}
 					css={videoStyles(width, height)}
 					ref={ref}
-					role="button"
 					tabIndex={0}
+					data-testid="loop-video"
 					height={height}
 					width={width}
 					data-link-name={`gu-video-loop-${
@@ -180,6 +180,7 @@ export const LoopVideoPlayer = forwardRef(
 								onClick={handlePlayPauseClick}
 								css={playIconStyles}
 								data-link-name={`gu-video-loop-play-${atomId}`}
+								data-testid="play-icon"
 							>
 								<PlayIcon iconWidth="narrow" />
 							</button>
@@ -199,7 +200,12 @@ export const LoopVideoPlayer = forwardRef(
 								isMuted ? 'unmute' : 'mute'
 							}-${atomId}`}
 						>
-							<div css={audioIconContainerStyles}>
+							<div
+								css={audioIconContainerStyles}
+								data-testId={`${
+									isMuted ? 'unmute' : 'mute'
+								}-icon`}
+							>
 								<AudioIcon
 									size="xsmall"
 									theme={{

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -30,7 +30,7 @@ import {
 } from '../../../../lib/useMatchMedia';
 import { getChoiceCards } from '../../lib/choiceCards';
 import type { ReactComponent } from '../../lib/ReactComponent';
-import { addChoiceCardsProductParams } from '../../lib/tracking';
+import { getChoiceCardUrl } from '../../lib/tracking';
 import { ThreeTierChoiceCards } from '../../shared/ThreeTierChoiceCards';
 import { bannerWrapper, validatedBannerWrapper } from '../common/BannerWrapper';
 import type { BannerRenderProps } from '../common/types';
@@ -108,19 +108,6 @@ const buildChoiceCardSettings = (
 	return undefined;
 };
 
-const buildUrlForThreeTierChoiceCards = (
-	baseUrl: string,
-	selectedProduct: ChoiceCard['product'],
-) => {
-	return selectedProduct.supportTier === 'OneOff'
-		? baseUrl
-		: addChoiceCardsProductParams(
-				baseUrl,
-				selectedProduct.supportTier,
-				selectedProduct.ratePlan,
-		  );
-};
-
 const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	content,
 	onCloseClick,
@@ -160,11 +147,11 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 	}, [iosAppBannerPresent, submitComponentEvent]);
 
 	const choiceCards = getChoiceCards(isTabletOrAbove, choiceCardsSettings);
-	const defaultProduct = choiceCards?.find((cc) => cc.isDefault)?.product;
-	const [
-		threeTierChoiceCardSelectedProduct,
-		setThreeTierChoiceCardSelectedProduct,
-	] = useState<ChoiceCard['product'] | undefined>(defaultProduct);
+	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
+
+	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
+		ChoiceCard | undefined
+	>(defaultChoiceCard);
 
 	// We can't render anything without a design
 	if (!design) {
@@ -379,7 +366,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 					</div>
 				)}
 
-				{!threeTierChoiceCardSelectedProduct && (
+				{!selectedChoiceCard && (
 					<div css={styles.outerImageCtaContainer}>
 						<div css={styles.innerImageCtaContainer}>
 							<DesignableBannerCtas
@@ -405,25 +392,21 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 				</div>
 
 				{choiceCards &&
-					threeTierChoiceCardSelectedProduct &&
+					selectedChoiceCard &&
 					mainOrMobileContent.primaryCta && (
 						<div css={styles.threeTierChoiceCardsContainer}>
 							<ThreeTierChoiceCards
-								selectedProduct={
-									threeTierChoiceCardSelectedProduct
-								}
-								setSelectedProduct={
-									setThreeTierChoiceCardSelectedProduct
-								}
+								selectedChoiceCard={selectedChoiceCard}
+								setSelectedChoiceCard={setSelectedChoiceCard}
 								choices={choiceCards}
 								id={'banner'}
 							/>
 
 							<div css={styles.ctaContainer}>
 								<LinkButton
-									href={buildUrlForThreeTierChoiceCards(
+									href={getChoiceCardUrl(
+										selectedChoiceCard,
 										mainOrMobileContent.primaryCta.ctaUrl,
-										threeTierChoiceCardSelectedProduct,
 									)}
 									onClick={onCtaClick}
 									priority="tertiary"

dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx

@@ -5,7 +5,11 @@ import type {
 } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { Meta, StoryObj } from '@storybook/react';
 import lzstring from 'lz-string';
-import { choiceCardsSettings } from '../../../lib/storybook';
+import {
+	choiceCardsSettings,
+	choiceCardsWithDestinationUrl,
+	choiceCardsWithDestinationUrlTwoCards,
+} from '../../../lib/storybook';
 import {
 	contentNoHeading,
 	design,
@@ -281,3 +285,57 @@ export const NoChoiceCardOrImage: Story = {
 		},
 	},
 };
+
+export const WithDestinationUrlAllCards: Story = {
+	name: 'With destinationUrl on all choice cards',
+	args: {
+		...meta.args,
+		design: {
+			...design,
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('E5E5E5'),
+			},
+		},
+		tracking: {
+			...tracking,
+			abTestVariant: 'THREE_TIER_CHOICE_CARDS',
+		},
+		choiceCardAmounts: regularChoiceCardAmounts,
+		choiceCardsSettings: choiceCardsWithDestinationUrl,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'All choice cards have a destinationUrl configured. The banner should use these custom URLs instead of constructing URLs with product parameters.',
+			},
+		},
+	},
+};
+
+export const WithDestinationUrlTwoCards: Story = {
+	name: 'With destinationUrl in two choice cards',
+	args: {
+		...meta.args,
+		design: {
+			...design,
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('E5E5E5'),
+			},
+		},
+		tracking: {
+			...tracking,
+			abTestVariant: 'THREE_TIER_CHOICE_CARDS',
+		},
+		choiceCardAmounts: regularChoiceCardAmounts,
+		choiceCardsSettings: choiceCardsWithDestinationUrlTwoCards,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'All choice cards have a destinationUrl configured. The banner should use these custom URLs instead of constructing URLs with product parameters.',
+			},
+		},
+	},
+};