Track card media in data-link-name (#14400)

* Rename video -> youtube-video as this is only used for youtube videos.

This makes tracking the video context somewhat easier

* Adds an media field to the data link name array.

This field indicates what media type the card contains. If there is no media, this is resolved to `none`.

We set the link name during card enhancement but we do not know at this stage what the card's media is. This is because we do not know details such as card size, which can impact rendered media.

As a result of this, we potentially override the media section of the link name at the card level IF media is displayed on the card.

* Update naming convention of video -> youtube-video

* Rename CardImageType to CardMediaType and use shared type in the linkName setter

* Prefer an appender function to overwriting the media type

Author: abeddow91

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';
@@ -278,7 +279,7 @@ const getMedia = ({
 	}
 	if (mainMedia?.type === 'Video' && canPlayInline) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -550,6 +551,11 @@ export const Card = ({
 		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
@@ -734,7 +740,7 @@ export const Card = ({
 			<CardLink
 				linkTo={linkTo}
 				headlineText={headlineText}
-				dataLinkName={dataLinkName}
+				dataLinkName={resolvedDataLinkName}
 				isExternalLink={isExternalLink}
 			/>
 			{headlinePosition === 'outer' && (
@@ -879,7 +885,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';