AB Test: Apply hover styles to loop videos in click through variant

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

@@ -821,6 +821,7 @@ export const Card = ({
 					? palette('--onward-content-top-border')
 					: undefined
 			}
+			isLoopAndInLoopClickTestVariant={isLoopAndInLoopClickTestVariant}
 		>
 			<CardLink
 				linkTo={linkTo}
@@ -893,6 +894,9 @@ export const Card = ({
 						mediaPositionOnMobile={mediaPositionOnMobile}
 						padMedia={isMediaCardOrNewsletter && !isOnwardsContent}
 						isSmallCard={isSmallCard}
+						isLoopAndInLoopClickTestVariant={
+							isLoopAndInLoopClickTestVariant
+						}
 					>
 						{media.type === 'slideshow' && (
 							<Island

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

@@ -13,6 +13,7 @@ type Props = {
 	showTopBarMobile: boolean;
 	containerPalette?: DCRContainerPalette;
 	topBarColour?: string;
+	isLoopAndInLoopClickTestVariant?: boolean;
 };
 
 const baseCardStyles = css`
@@ -41,7 +42,7 @@ const baseCardStyles = css`
 	text-decoration: none;
 `;
 
-const hoverStyles = css`
+const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css`
 	:hover .media-overlay {
 		width: 100%;
 		height: 100%;
@@ -59,7 +60,11 @@ const hoverStyles = css`
 	*/
 	:has(
 		ul.sublinks:hover,
-		.video-container:not(.cinemagraph):hover,
+		.video-container:not(
+				${isLoopAndInLoopClickTestVariant
+					? `.cinemagraph, .loop`
+					: `.cinemagraph`}
+			):hover,
 		.slideshow-carousel-footer:hover,
 		.branding-logo:hover
 	) {
@@ -100,14 +105,15 @@ export const CardWrapper = ({
 	showTopBarMobile,
 	containerPalette,
 	topBarColour = palette('--card-border-top'),
+	isLoopAndInLoopClickTestVariant,
 }: Props) => {
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
 				<div
 					css={[
 						baseCardStyles,
-						hoverStyles,
+						hoverStyles(isLoopAndInLoopClickTestVariant === true),
 						showTopBarDesktop && desktopTopBarStyles(topBarColour),
 						showTopBarMobile && mobileTopBarStyles(topBarColour),
 					]}

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

@@ -35,6 +35,7 @@ type Props = {
 	mediaPositionOnMobile: MediaPositionType;
 	isSmallCard: boolean;
 	padMedia?: boolean;
+	isLoopAndInLoopClickTestVariant?: boolean;
 };
 
 const mediaOverlayContainerStyles = css`
@@ -72,6 +73,7 @@ const mediaPaddingStyles = (
 		padding-top: ${mediaPositionOnMobile !== 'bottom' && `${space[2]}px`};
 		padding-bottom: ${mediaPositionOnMobile !== 'top' && `${space[2]}px`};
 	}
+
 	${from.tablet} {
 		padding-left: ${mediaPositionOnDesktop !== 'right' && `${space[2]}px`};
 		padding-right: ${mediaPositionOnDesktop !== 'left' && `${space[2]}px`};
@@ -96,6 +98,7 @@ const flexBasisStyles = ({
 	if (mediaType === 'podcast' && !isSmallCard) {
 		return css`
 			flex-basis: 120px;
+
 			${from.desktop} {
 				flex-basis: 168px;
 			}
@@ -114,6 +117,7 @@ const flexBasisStyles = ({
 				${from.tablet} {
 					flex-basis: 460px;
 				}
+
 				${from.desktop} {
 					flex-basis: 620px;
 				}
@@ -123,6 +127,7 @@ const flexBasisStyles = ({
 				${from.tablet} {
 					flex-basis: 520px;
 				}
+
 				${from.desktop} {
 					flex-basis: 700px;
 				}
@@ -172,6 +177,7 @@ export const MediaWrapper = ({
 	mediaPositionOnMobile,
 	isSmallCard,
 	padMedia,
+	isLoopAndInLoopClickTestVariant,
 }: Props) => {
 	const isHorizontalOnMobile =
 		mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right';
@@ -209,6 +215,7 @@ export const MediaWrapper = ({
 				css`
 					/* position relative is required here to bound the image overlay */
 					position: relative;
+
 					img {
 						width: 100%;
 						display: block;
@@ -232,7 +239,9 @@ export const MediaWrapper = ({
 			<>
 				{children}
 				{/* This overlay is styled when the CardLink is hovered */}
-				{(mediaType === 'picture' || mediaType === 'cinemagraph') && (
+				{(mediaType === 'picture' ||
+					mediaType === 'cinemagraph' ||
+					isLoopAndInLoopClickTestVariant == true) && (
 					<div
 						css={[
 							mediaOverlayContainerStyles,

dotcom-rendering/src/components/FeatureCard.tsx

@@ -83,14 +83,16 @@ const underlineOnHoverStyles = css`
 	}
 `;
 
-const hoverStyles = css`
+const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css`
 	:hover .media-overlay {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		background-color: ${palette('--card-background-hover')};
+
+		${isLoopAndInLoopClickTestVariant && loopClickThroughOverlayStyles}
 	}
 
 	${underlineOnHoverStyles}
@@ -106,6 +108,12 @@ const hoverStyles = css`
 	}
 `;
 
+const loopClickThroughOverlayStyles = css`
+	z-index: ${getZIndex('mediaOverlay')};
+	cursor: pointer;
+	pointer-events: none;
+`;
+
 const contentStyles = css`
 	display: flex;
 	flex-basis: 100%;
@@ -507,17 +515,25 @@ export const FeatureCard = ({
 
 	const aspectRatioNumber = isImmersive ? 5 / 3 : 4 / 5;
 
-	/* The whole card is clickable on cinemagraphs and pictures */
+	/** The whole card is clickable for:
+	 * - cinemagraphs
+	 * - pictures
+	 * - loops in the loop click test variant group
+	 * */
 	const allowLinkThroughOverlay =
-		media.style === 'cinemagraph' || media.type === 'picture';
+		media.style === 'cinemagraph' ||
+		media.type === 'picture' ||
+		isLoopAndInLoopClickTestVariant;
 
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
 				<div
 					css={[
 						baseCardStyles,
-						!isSelfHostedVideoWithControls && hoverStyles,
+						(!isSelfHostedVideoWithControls ||
+							isLoopAndInLoopClickTestVariant) &&
+							hoverStyles(isLoopAndInLoopClickTestVariant),
 					]}
 				>
 					{!isYoutubeVideo && !isSelfHostedVideoWithControls && (
@@ -692,7 +708,8 @@ export const FeatureCard = ({
 								)}
 
 								{/* This overlay is styled when the CardLink is hovered */}
-								{!isSelfHostedVideoWithControls && (
+								{(!isSelfHostedVideoWithControls ||
+									isLoopAndInLoopClickTestVariant) && (
 									<div className="media-overlay" />
 								)}
 								<div