Merge branch 'main' into al-test-geolocation-0825

Author: akinsola-guardian

.github/dependabot.yml

@@ -10,11 +10,6 @@ updates:
     schedule:
       interval: 'daily'
     ignore:
-      # The version of the aws-cdk[-lib] & constructs dependencies should match
-      # exactly the version specified by @guardian/cdk
-      - dependency-name: 'aws-cdk'
-      - dependency-name: 'aws-cdk-lib'
-      - dependency-name: 'constructs'
       # The `check-node-versions` script enforces that this package is kept in
       # sync with our Node major version, so we want dependabot to ignore major
       # version updates, but still allow smaller updates.
@@ -29,6 +24,12 @@ updates:
       babel:
         patterns:
           - '*babel*'
+      cdk:
+        patterns:
+          - '@guardian/cdk'
+          - 'aws-cdk'
+          - 'aws-cdk-lib'
+          - 'constructs'
       eslint:
         patterns:
           - '*eslint*'

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -102,6 +102,14 @@ export const getListenToArticleClient: BridgetApi<
 	isAvailable: async () => true,
 	isPlaying: async () => false,
 });
+
+export const getNativeABTestingClient: BridgetApi<
+	'getNativeABTestingClient'
+> = () => ({
+	getParticipations: async () =>
+		new Map(Object.entries({ 'test-id': 'variant' })),
+});
+
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -119,6 +127,7 @@ export const ensure_all_exports_are_present = {
 	getInteractionClient,
 	getInteractivesClient,
 	getListenToArticleClient,
+	getNativeABTestingClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

dotcom-rendering/fixtures/manual/trails.ts

@@ -28,7 +28,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.6.0",
+		"@guardian/bridget": "8.7.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial-core": "27.1.0",
@@ -46,8 +46,7 @@
 		"@guardian/support-dotcom-components": "7.7.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
-		"@sentry/browser": "7.75.1",
-		"@sentry/integrations": "7.75.1",
+		"@sentry/browser": "10.3.0",
 		"@storybook/addon-essentials": "8.6.14",
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-webpack5-compiler-swc": "3.0.0",

dotcom-rendering/package.json

@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/browser';
 import type { BrowserOptions } from '@sentry/browser';
-import { CaptureConsole } from '@sentry/integrations';
 import { BUILD_VARIANT, dcrJavascriptBundle } from '../../../webpack/bundles';
 import type { ReportError } from '../../types/sentry';
 
@@ -44,7 +43,7 @@ Sentry.init({
 	allowUrls,
 	dsn: dcrSentryDsn,
 	environment: stage || 'DEV',
-	integrations: [new CaptureConsole({ levels: ['error'] })],
+	integrations: [Sentry.captureConsoleIntegration({ levels: ['error'] })],
 	maxBreadcrumbs: 50,
 	// sampleRate: // We use Math.random in init.ts to sample errors
 });

dotcom-rendering/src/client/sentryLoader/sentry.ts

@@ -51,7 +51,7 @@ export const CalloutBlockComponent = ({
 	const id = formId.toString();
 
 	return (
-		<>
+		<div data-gu-name="callout">
 			{!isNonCollapsible ? (
 				<aside>
 					<ExpandingWrapper
@@ -116,6 +116,6 @@ export const CalloutBlockComponent = ({
 					pageId={pageId}
 				/>
 			)}
-		</>
+		</div>
 	);
 };

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

@@ -48,6 +48,7 @@ const basicCardProps: CardProps = {
 	discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
 	showVideo: true,
 	absoluteServerTimes: true,
+	headlinePosition: 'inner',
 };
 
 const aBasicLink = {

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

@@ -13,6 +13,7 @@ import {
 } from '../../lib/articleFormat';
 import { isMediaCard } from '../../lib/cardHelpers';
 import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
+import { appendLinkNameMedia } from '../../lib/getDataLinkName';
 import { getZIndex } from '../../lib/getZIndex';
 import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
 import { BETA_CONTAINERS } from '../../model/enhanceCollections';
@@ -128,7 +129,6 @@ export type Props = {
 	liveUpdatesAlignment?: Alignment;
 	liveUpdatesPosition?: Position;
 	onwardsSource?: OnwardsSource;
-	pauseOffscreenVideo?: boolean;
 	showVideo?: boolean;
 	isTagPage?: boolean;
 	/** Allows the consumer to set an aspect ratio on the image of 5:3, 5:4, 4:5 or 1:1 */
@@ -147,6 +147,10 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
+	/** Determines if the headline should be positioned within the content or outside the content */
+	headlinePosition?: 'inner' | 'outer';
+	isInLoopingVideoTestVariant?: boolean;
+	isInLoopingVideoTestControl?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -250,6 +254,7 @@ const getMedia = ({
 	mainMedia,
 	canPlayInline,
 	isBetaContainer,
+	isInLoopingVideoTestControl,
 }: {
 	imageUrl?: string;
 	imageAltText?: string;
@@ -259,16 +264,21 @@ const getMedia = ({
 	mainMedia?: MainMedia;
 	canPlayInline?: boolean;
 	isBetaContainer: boolean;
+	isInLoopingVideoTestControl: boolean;
 }) => {
-	if (mainMedia?.type === 'LoopVideo' && canPlayInline) {
+	if (
+		mainMedia?.type === 'LoopVideo' &&
+		!isInLoopingVideoTestControl &&
+		canPlayInline
+	) {
 		return {
 			type: 'loop-video',
 			mainMedia,
 		} as const;
 	}
 	if (mainMedia?.type === 'Video' && canPlayInline) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -318,36 +328,6 @@ const decideSublinkPosition = (
 	return alignment === 'vertical' ? 'inner' : 'outer';
 };
 
-const getHeadlinePosition = ({
-	isFlexSplash,
-	containerType,
-	showLivePlayable,
-	isMediaCardOrNewsletter,
-}: {
-	containerType?: DCRContainerType;
-	isFlexSplash?: boolean;
-	showLivePlayable: boolean;
-	isMediaCardOrNewsletter: boolean;
-}) => {
-	if (isMediaCardOrNewsletter) {
-		return 'inner';
-	}
-
-	if (containerType === 'flexible/special' && isFlexSplash) {
-		return 'outer';
-	}
-
-	if (
-		containerType === 'flexible/general' &&
-		isFlexSplash &&
-		showLivePlayable
-	) {
-		return 'outer';
-	}
-
-	return 'inner';
-};
-
 const liveBulletStyles = css`
 	width: 9px;
 	height: 9px;
@@ -400,7 +380,6 @@ export const Card = ({
 	liveUpdatesAlignment = 'vertical',
 	liveUpdatesPosition = 'inner',
 	onwardsSource,
-	pauseOffscreenVideo = false,
 	showVideo = true,
 	absoluteServerTimes,
 	isTagPage = false,
@@ -412,6 +391,9 @@ export const Card = ({
 	showTopBarMobile = true,
 	trailTextSize,
 	showKickerImage = false,
+	headlinePosition = 'inner',
+	isInLoopingVideoTestVariant = false,
+	isInLoopingVideoTestControl = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -564,8 +546,14 @@ export const Card = ({
 		mainMedia,
 		canPlayInline,
 		isBetaContainer,
+		isInLoopingVideoTestControl,
 	});
 
+	const resolvedDataLinkName =
+		media && dataLinkName
+			? appendLinkNameMedia(dataLinkName, media.type)
+			: dataLinkName;
+
 	/**
 	 * For opinion type cards with avatars (which aren't onwards content)
 	 * we render the footer in a different location
@@ -605,13 +593,6 @@ export const Card = ({
 		return { mobile: 'medium' };
 	};
 
-	const headlinePosition = getHeadlinePosition({
-		containerType,
-		isFlexSplash,
-		showLivePlayable,
-		isMediaCardOrNewsletter,
-	});
-
 	const hideTrailTextUntil = () => {
 		if (isFlexibleContainer) {
 			return undefined;
@@ -757,7 +738,7 @@ export const Card = ({
 			<CardLink
 				linkTo={linkTo}
 				headlineText={headlineText}
-				dataLinkName={dataLinkName}
+				dataLinkName={resolvedDataLinkName}
 				isExternalLink={isExternalLink}
 			/>
 			{headlinePosition === 'outer' && (
@@ -895,10 +876,14 @@ export const Card = ({
 									fallbackImageLoading={imageLoading}
 									fallbackImageAlt={media.imageAltText}
 									fallbackImageAspectRatio="5:4"
+									linkTo={linkTo}
+									isInLoopingVideoTestVariant={
+										isInLoopingVideoTestVariant
+									}
 								/>
 							</Island>
 						)}
-						{media.type === 'video' && (
+						{media.type === 'youtube-video' && (
 							<>
 								{showVideo ? (
 									<div
@@ -943,9 +928,6 @@ export const Card = ({
 												hideCaption={true}
 												stickyVideos={false}
 												kickerText={kickerText}
-												pauseOffscreenVideo={
-													pauseOffscreenVideo
-												}
 												/*
 												 * TODO: IMPROVE THIS MAPPING
 												 *
@@ -1011,6 +993,9 @@ export const Card = ({
 									loading={imageLoading}
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
+									isInLoopingVideoTestControl={
+										isInLoopingVideoTestControl
+									}
 								/>
 								{isVideoMainMedia && mainMedia.duration > 0 && (
 									<div

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
 import { from, space } from '@guardian/source/foundations';
-import type { CardImageType } from '../../../types/layout';
+import type { CardMediaType } from '../../../types/layout';
 import type { ImagePositionType } from './ImageWrapper';
 
 export type GapSize = 'none' | 'tiny' | 'small' | 'medium' | 'large';
@@ -11,7 +11,7 @@ export type GapSizes = { row: GapSize; column: GapSize };
 type Props = {
 	children: React.ReactNode;
 	cardBackgroundColour: string;
-	imageType: CardImageType | undefined;
+	imageType: CardMediaType | undefined;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	minWidthInPixels?: number;

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

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
-import type { CardImageType } from '../../../types/layout';
+import type { CardMediaType } from '../../../types/layout';
 import type { ImagePositionType, ImageSizeType } from './ImageWrapper';
 
 const sizingStyles = css`
@@ -21,7 +21,7 @@ const flexBasisStyles = ({
 	isBetaContainer,
 }: {
 	imageSize: ImageSizeType;
-	imageType?: CardImageType;
+	imageType?: CardMediaType;
 	isBetaContainer: boolean;
 }): SerializedStyles => {
 	if (imageType === 'avatar') {
@@ -115,7 +115,7 @@ const getImageDirection = (
 
 type Props = {
 	children: React.ReactNode;
-	imageType?: CardImageType;
+	imageType?: CardMediaType;
 	imageSize: ImageSizeType;
 	isBetaContainer: boolean;
 	imagePositionOnDesktop: ImagePositionType;