Track card media in data-link-name

dotcom-rendering/src/components/Card/Card.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';
@@ -268,7 +269,7 @@ const getMedia = ({
 	}
 	if (mainMedia?.type === 'Video' && canPlayInline) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -566,6 +567,11 @@ export const Card = ({
 		isBetaContainer,
 	});
 
+	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
@@ -757,7 +763,7 @@ export const Card = ({
 			<CardLink
 				linkTo={linkTo}
 				headlineText={headlineText}
-				dataLinkName={dataLinkName}
+				dataLinkName={resolvedDataLinkName}
 				isExternalLink={isExternalLink}
 			/>
 			{headlinePosition === 'outer' && (
@@ -899,7 +905,7 @@ export const Card = ({
 								/>
 							</Island>
 						)}
-						{media.type === 'video' && (
+						{media.type === 'youtube-video' && (
 							<>
 								{showVideo ? (
 									<div

dotcom-rendering/src/components/Card/components/CardLayout.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/ContentWrapper.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;

dotcom-rendering/src/components/Card/components/ImageWrapper.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';
 
 const imageFixedSize = {
 	tiny: 86,
@@ -34,7 +34,7 @@ type Props = {
 	children: React.ReactNode;
 	imageSize: ImageSizeType;
 	imageFixedSizes?: ImageFixedSizeOptions;
-	imageType?: CardImageType;
+	imageType?: CardMediaType;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	/**
@@ -173,7 +173,7 @@ export const ImageWrapper = ({
 			css={[
 				(imageType === 'slideshow' ||
 					imageType === 'picture' ||
-					imageType === 'video' ||
+					imageType === 'youtube-video' ||
 					imageType === 'loop-video') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({

dotcom-rendering/src/lib/getDataLinkName.ts

@@ -1,5 +1,5 @@
 import type { FEFrontCardStyle } from '../frontend/feFront';
-import type { RichLinkCardType } from '../types/layout';
+import type { CardMediaType, RichLinkCardType } from '../types/layout';
 import {
 	ArticleDesign,
 	type ArticleFormat,
@@ -58,6 +58,7 @@ export type Group = `${number}` | `${number}+`;
  *
  * @see {JSX.IntrinsicAttributes}
  */
+
 export const getDataLinkNameCard = (
 	format: ArticleFormat,
 	group: Group,
@@ -69,3 +70,12 @@ export const getDataLinkNameCard = (
 		`group-${group}`,
 		`card-@${Math.max(index + 1, 1)}`,
 	].join(' | ');
+
+type MediaType = CardMediaType | 'none';
+
+export const appendLinkNameMedia = (
+	dataLinkName: string,
+	mediaType: MediaType,
+): string => {
+	return `${dataLinkName} | media-${mediaType}`;
+};

dotcom-rendering/src/types/layout.ts

@@ -21,12 +21,12 @@ export type RichLinkCardType =
 	| 'external'
 	| 'news';
 
-export type CardImageType =
+export type CardMediaType =
 	| 'picture'
 	| 'avatar'
 	| 'crossword'
 	| 'slideshow'
-	| 'video'
+	| 'youtube-video'
 	| 'loop-video'
 	| 'podcast';