Add data-fronts-test-uuid to card links with an active headline test

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

@@ -164,6 +164,7 @@ export type Props = {
 	headlinePosition?: 'inner' | 'outer';
 	starRatingSize?: RatingSizeType;
 	contentSpacing?: 'small' | 'large';
+	headlineTestUuid?: string;
 };
 
 const waveformWrapper = (
@@ -410,6 +411,7 @@ export const Card = ({
 	starRatingSize = 'small',
 	articleMedia,
 	contentSpacing,
+	headlineTestUuid,
 }: Props) => {
 	const ab = useAB();
 	const isInLoopClickTestControl = Boolean(
@@ -830,6 +832,7 @@ export const Card = ({
 				isExternalLink={isExternalLink}
 				isLoopAndInLoopClickTest={isLoopAndInLoopClickTest}
 				shouldRaiseZIndexForAbTest={false} // The z-index is raised in a new CardLink in the SelfHostedVideo island.
+				headlineTestUuid={headlineTestUuid}
 			/>
 			{headlinePosition === 'outer' && (
 				<div

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

@@ -33,18 +33,21 @@ type Props = {
 	 * Refers to the AB test with name: fronts-and-curation-loop-click-through
 	 */
 	shouldRaiseZIndexForAbTest: boolean;
+	headlineTestUuid?: string;
 };
 
 const InternalLink = ({
 	linkTo,
 	headlineText,
 	dataLinkName,
 	shouldRaiseZIndexForAbTest,
+	headlineTestUuid,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
 	shouldRaiseZIndexForAbTest: boolean;
+	headlineTestUuid?: string;
 }) => {
 	return (
 		<a
@@ -54,6 +57,7 @@ const InternalLink = ({
 				shouldRaiseZIndexForAbTest ? abTestZIndexStyles : zIndexStyles,
 			]}
 			data-link-name={dataLinkName}
+			data-fronts-test-uuid={headlineTestUuid}
 			aria-label={headlineText}
 		/>
 	);
@@ -64,11 +68,13 @@ const ExternalLink = ({
 	headlineText,
 	dataLinkName,
 	shouldRaiseZIndexForAbTest,
+	headlineTestUuid,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
 	shouldRaiseZIndexForAbTest: boolean;
+	headlineTestUuid?: string;
 }) => {
 	return (
 		<a
@@ -78,6 +84,7 @@ const ExternalLink = ({
 				shouldRaiseZIndexForAbTest ? abTestZIndexStyles : zIndexStyles,
 			]}
 			data-link-name={dataLinkName}
+			data-fronts-test-uuid={headlineTestUuid}
 			aria-label={headlineText + ' (opens in new tab)'}
 			target="_blank"
 			rel="noreferrer"
@@ -92,6 +99,7 @@ export const CardLink = ({
 	isExternalLink,
 	isLoopAndInLoopClickTest,
 	shouldRaiseZIndexForAbTest,
+	headlineTestUuid,
 }: Props) => {
 	/**
 	 * If we are in the loop click through test, we add a unique string to the data link name
@@ -109,6 +117,7 @@ export const CardLink = ({
 					headlineText={headlineText}
 					dataLinkName={clickThroughLinkName}
 					shouldRaiseZIndexForAbTest={shouldRaiseZIndexForAbTest}
+					headlineTestUuid={headlineTestUuid}
 				/>
 			)}
 			{!isExternalLink && (
@@ -117,6 +126,7 @@ export const CardLink = ({
 					headlineText={headlineText}
 					dataLinkName={clickThroughLinkName}
 					shouldRaiseZIndexForAbTest={shouldRaiseZIndexForAbTest}
+					headlineTestUuid={headlineTestUuid}
 				/>
 			)}
 		</>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -407,6 +407,7 @@ export type Props = {
 	 */
 	isImmersive?: boolean;
 	starRatingSize: RatingSizeType;
+	headlineTestUuid?: string;
 };
 
 export const FeatureCard = ({
@@ -445,6 +446,7 @@ export const FeatureCard = ({
 	isImmersive = false,
 	starRatingSize,
 	articleMedia,
+	headlineTestUuid,
 }: Props) => {
 	const ab = useAB();
 	const isInLoopClickTestControl = Boolean(
@@ -546,6 +548,7 @@ export const FeatureCard = ({
 							shouldRaiseZIndexForAbTest={
 								isLoopAndInLoopClickTestVariant
 							}
+							headlineTestUuid={headlineTestUuid}
 						/>
 					)}
 					<div css={contentStyles}>
@@ -769,6 +772,9 @@ export const FeatureCard = ({
 												shouldRaiseZIndexForAbTest={
 													isLoopAndInLoopClickTestVariant
 												}
+												headlineTestUuid={
+													headlineTestUuid
+												}
 											/>
 										)}
 

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -141,6 +141,7 @@ const ImmersiveCardLayout = ({
 					isImmersive={true}
 					starRatingSize="medium"
 					articleMedia={card.articleMedia}
+					headlineTestUuid={card.headlineTestUuid}
 				/>
 			</LI>
 		</UL>

dotcom-rendering/src/components/FrontCard.tsx

@@ -59,6 +59,7 @@ export const FrontCard = (props: Props) => {
 		starRating: trail.starRating,
 		uniqueId: trail.uniqueId,
 		webPublicationDate: trail.webPublicationDate,
+		headlineTestUuid: trail.headlineTestUuid,
 	};
 
 	return Card({ ...defaultProps, ...cardProps });

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -37,6 +37,7 @@ export type HighlightsCardProps = {
 	byline?: string;
 	isExternalLink: boolean;
 	starRating?: Rating;
+	headlineTestUuid?: string;
 };
 
 const container = css`
@@ -135,6 +136,7 @@ export const HighlightsCard = ({
 	isExternalLink,
 	starRating,
 	articleMedia,
+	headlineTestUuid,
 }: HighlightsCardProps) => {
 	const isMediaCard = isMedia(format);
 
@@ -154,6 +156,7 @@ export const HighlightsCard = ({
 					isExternalLink={isExternalLink}
 					isLoopAndInLoopClickTest={false}
 					shouldRaiseZIndexForAbTest={false}
+					headlineTestUuid={headlineTestUuid}
 				/>
 
 				<div css={[content, shouldJustifyContent && spaceBetween]}>

dotcom-rendering/src/components/ScrollableFeature.island.tsx

@@ -91,6 +91,7 @@ export const ScrollableFeature = ({
 						showQuotes={card.showQuotedHeadline}
 						starRatingSize={'small'}
 						articleMedia={card.articleMedia}
+						headlineTestUuid={card.headlineTestUuid}
 					/>
 				</ScrollableCarousel.Item>
 			))}

dotcom-rendering/src/components/ScrollableHighlights.island.tsx

@@ -341,6 +341,7 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 									mainMedia={trail.mainMedia}
 									starRating={trail.starRating}
 									articleMedia={trail.articleMedia}
+									headlineTestUuid={trail.headlineTestUuid}
 								/>
 							)}
 						</li>

dotcom-rendering/src/components/StaticFeatureTwo.tsx

@@ -80,6 +80,7 @@ export const StaticFeatureTwo = ({
 							showQuotes={card.showQuotedHeadline}
 							starRatingSize={'medium'}
 							articleMedia={card.articleMedia}
+							headlineTestUuid={card.headlineTestUuid}
 						/>
 					</LI>
 				);

dotcom-rendering/src/components/SupportingContent.tsx

@@ -186,6 +186,7 @@ export const SupportingContent = ({
 								: verticalSublinkStyles,
 						]}
 						data-link-name={`sublinks | ${index + 1}`}
+						data-fronts-test-uuid={subLink.headlineTestUuid}
 					>
 						<FormatBoundary format={subLinkFormat}>
 							<ContainerOverrides