Prefer an appender function to overwriting the media type

Author: abeddow91

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

@@ -13,7 +13,7 @@ import {
 } from '../../lib/articleFormat';
 import { isMediaCard } from '../../lib/cardHelpers';
 import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
-import { replaceLinkNameMedia } from '../../lib/getDataLinkName';
+import { appendLinkNameMedia } from '../../lib/getDataLinkName';
 import { getZIndex } from '../../lib/getZIndex';
 import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
 import { BETA_CONTAINERS } from '../../model/enhanceCollections';
@@ -569,7 +569,7 @@ export const Card = ({
 
 	const resolvedDataLinkName =
 		media && dataLinkName
-			? replaceLinkNameMedia(dataLinkName, media.type)
+			? appendLinkNameMedia(dataLinkName, media.type)
 			: dataLinkName;
 
 	/**

dotcom-rendering/src/lib/decideTrail.ts

@@ -16,11 +16,6 @@ export const decideTrail = (trail: FETrailType, index = 0): TrailType => {
 		...trail,
 		image,
 		format,
-		dataLinkName: getDataLinkNameCard(
-			format,
-			'0',
-			index,
-			image ? 'picture' : 'none',
-		),
+		dataLinkName: getDataLinkNameCard(format, '0', index),
 	};
 };

dotcom-rendering/src/lib/getDataLinkName.ts

@@ -59,25 +59,23 @@ export type Group = `${number}` | `${number}+`;
  * @see {JSX.IntrinsicAttributes}
  */
 
-type MediaType = CardMediaType | 'none';
-
 export const getDataLinkNameCard = (
 	format: ArticleFormat,
 	group: Group,
 	index: number,
-	mediaType: MediaType = 'none',
 	cardStyle?: FEFrontCardStyle,
 ): string =>
 	[
 		getLinkType(format, cardStyle),
 		`group-${group}`,
 		`card-@${Math.max(index + 1, 1)}`,
-		`media-${mediaType}`,
 	].join(' | ');
 
-export const replaceLinkNameMedia = (
+type MediaType = CardMediaType | 'none';
+
+export const appendLinkNameMedia = (
 	dataLinkName: string,
 	mediaType: MediaType,
 ): string => {
-	return dataLinkName.replace(/media-none/, `media-${mediaType}`);
+	return `${dataLinkName} | media-${mediaType}`;
 };

dotcom-rendering/src/model/enhanceCards.ts

@@ -326,7 +326,6 @@ export const enhanceCards = (
 			format,
 			group,
 			offset + index,
-			'none', // we don't know the media type for the card yet, so we set it to none and overwrite at the card level.
 			faciaCard.card.cardStyle.type,
 		);