diff --git a/ab-testing/config/abTests.ts b/ab-testing/config/abTests.ts index c7f337583ea..29e77bd616b 100644 --- a/ab-testing/config/abTests.ts +++ b/ab-testing/config/abTests.ts @@ -107,19 +107,6 @@ const ABTests: ABTest[] = [ groups: ["control", "variant"], shouldForceMetricsCollection: true, }, - { - name: "fronts-and-curation-loop-click-through", - description: - "Test impact of click to article via loop videos on fronts", - owners: ["fronts.and.curation@guardian.co.uk"], - status: "ON", - expirationDate: "2026-09-19", - type: "server", - audienceSize: 5 / 100, - audienceSpace: "A", - groups: ["control", "variant"], - shouldForceMetricsCollection: false, - }, { name: "fronts-and-curation-click-to-play", description: "Test click to play longform videos vs autoplay", diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index c85c10761d2..2f21259b2a7 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -12,7 +12,6 @@ import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime'; import { appendLinkNameMedia } from '../../lib/getDataLinkName'; import { getZIndex } from '../../lib/getZIndex'; import { getOphanComponents } from '../../lib/labs'; -import { useAB } from '../../lib/useAB'; import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount'; import { palette } from '../../palette'; import type { Branding } from '../../types/branding'; @@ -411,20 +410,6 @@ export const Card = ({ articleMedia, contentSpacing, }: Props) => { - const ab = useAB(); - const isInLoopClickTestControl = Boolean( - ab?.isUserInTestGroup( - 'fronts-and-curation-loop-click-through', - 'control', - ), - ); - const isInLoopClickTestVariant = Boolean( - ab?.isUserInTestGroup( - 'fronts-and-curation-loop-click-through', - 'variant', - ), - ); - const hasSublinks = supportingContent && supportingContent.length > 0; const sublinkPosition = decideSublinkPosition( supportingContent, @@ -801,15 +786,6 @@ export const Card = ({ ); }; - const isLoopAndInLoopClickTestControl = Boolean( - media?.type === 'loop-video' && isInLoopClickTestControl, - ); - const isLoopAndInLoopClickTestVariant = Boolean( - media?.type === 'loop-video' && isInLoopClickTestVariant, - ); - const isLoopAndInLoopClickTest = - isLoopAndInLoopClickTestControl || isLoopAndInLoopClickTestVariant; - return ( {headlinePosition === 'outer' && (
{media.type === 'slideshow' && ( )} diff --git a/dotcom-rendering/src/components/Card/components/CardLink.tsx b/dotcom-rendering/src/components/Card/components/CardLink.tsx index f182ec75b3d..8638b95d7e4 100644 --- a/dotcom-rendering/src/components/Card/components/CardLink.tsx +++ b/dotcom-rendering/src/components/Card/components/CardLink.tsx @@ -19,40 +19,26 @@ const zIndexStyles = css` z-index: ${getZIndex('card-link')}; `; -const abTestZIndexStyles = css` - z-index: ${getZIndex('video-card-link')}; -`; - type Props = { linkTo: string; headlineText: string; dataLinkName?: string; isExternalLink: boolean; - isLoopAndInLoopClickTest: boolean; - /** - * Refers to the AB test with name: fronts-and-curation-loop-click-through - */ - shouldRaiseZIndexForAbTest: boolean; }; const InternalLink = ({ linkTo, headlineText, dataLinkName, - shouldRaiseZIndexForAbTest, }: { linkTo: string; headlineText: string; dataLinkName?: string; - shouldRaiseZIndexForAbTest: boolean; }) => { return ( @@ -63,20 +49,15 @@ const ExternalLink = ({ linkTo, headlineText, dataLinkName, - shouldRaiseZIndexForAbTest, }: { linkTo: string; headlineText: string; dataLinkName?: string; - shouldRaiseZIndexForAbTest: boolean; }) => { return ( { - /** - * If we are in the loop click through test, we add a unique string to the data link name - * tracking so clicks to article can be diffrentiated from other clicks on the card - */ - const clickThroughLinkName = isLoopAndInLoopClickTest - ? `${dataLinkName} | card-link-clickthrough` - : dataLinkName; - return ( <> {isExternalLink && ( )} {!isExternalLink && ( )} diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx index 3c98f802988..ad64d4e7e39 100644 --- a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx +++ b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx @@ -13,7 +13,6 @@ type Props = { showTopBarMobile: boolean; containerPalette?: DCRContainerPalette; topBarColour?: string; - isLoopAndInLoopClickTestVariant?: boolean; }; const baseCardStyles = css` @@ -42,7 +41,7 @@ const baseCardStyles = css` text-decoration: none; `; -const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css` +const hoverStyles = css` :hover .media-overlay { width: 100%; height: 100%; @@ -50,6 +49,7 @@ const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css` } /* Only underline the headline element we want to target (not kickers/sublink headlines) */ + :hover .card-headline .show-underline { text-decoration: underline; } @@ -58,19 +58,17 @@ const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css` * We want to prevent the general hover styles applying when * a click won't result in navigating to the main article */ + :has( ul.sublinks:hover, - .video-container:not( - ${isLoopAndInLoopClickTestVariant - ? `.cinemagraph, .loop` - : `.cinemagraph`} - ):hover, + .video-container:not(.cinemagraph):hover, .slideshow-carousel-footer:hover, .branding-logo:hover ) { .card-headline .show-underline { text-decoration: none; } + .media-overlay { background-color: transparent; } @@ -105,7 +103,6 @@ export const CardWrapper = ({ showTopBarMobile, containerPalette, topBarColour = palette('--card-border-top'), - isLoopAndInLoopClickTestVariant, }: Props) => { return ( @@ -113,7 +110,7 @@ export const CardWrapper = ({
{ const isHorizontalOnMobile = mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right'; @@ -239,9 +237,7 @@ export const MediaWrapper = ({ <> {children} {/* This overlay is styled when the CardLink is hovered */} - {(mediaType === 'picture' || - mediaType === 'cinemagraph' || - isLoopAndInLoopClickTestVariant == true) && ( + {(mediaType === 'picture' || mediaType === 'cinemagraph') && (
css` +const hoverStyles = css` :hover .media-overlay { position: absolute; top: 0; @@ -91,8 +90,6 @@ const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css` width: 100%; height: 100%; background-color: ${palette('--card-background-hover')}; - - ${isLoopAndInLoopClickTestVariant && loopClickThroughOverlayStyles} } ${underlineOnHoverStyles} @@ -108,12 +105,6 @@ const hoverStyles = (isLoopAndInLoopClickTestVariant: boolean) => css` } `; -const loopClickThroughOverlayStyles = css` - z-index: ${getZIndex('mediaOverlay')}; - cursor: pointer; - pointer-events: none; -`; - const contentStyles = css` display: flex; flex-basis: 100%; @@ -446,20 +437,6 @@ export const FeatureCard = ({ starRatingSize, articleMedia, }: Props) => { - const ab = useAB(); - const isInLoopClickTestControl = Boolean( - ab?.isUserInTestGroup( - 'fronts-and-curation-loop-click-through', - 'control', - ), - ); - const isInLoopClickTestVariant = Boolean( - ab?.isUserInTestGroup( - 'fronts-and-curation-loop-click-through', - 'variant', - ), - ); - const hasSublinks = supportingContent && supportingContent.length > 0; /** @@ -477,15 +454,6 @@ export const FeatureCard = ({ return null; } - const isLoopAndInLoopClickTestControl = Boolean( - media.style === 'loop-video' && isInLoopClickTestControl, - ); - const isLoopAndInLoopClickTestVariant = Boolean( - media.style === 'loop-video' && isInLoopClickTestVariant, - ); - const isLoopAndInLoopClickTest = - isLoopAndInLoopClickTestControl || isLoopAndInLoopClickTestVariant; - const mediaType = media.type === 'self-hosted-video' ? media.style : media.type; @@ -521,19 +489,14 @@ export const FeatureCard = ({ * - loops in the loop click test variant group * */ const allowLinkThroughOverlay = - media.style === 'cinemagraph' || - media.type === 'picture' || - isLoopAndInLoopClickTestVariant; - + media.style === 'cinemagraph' || media.type === 'picture'; return (
{!isYoutubeVideo && !isSelfHostedVideoWithControls && ( @@ -542,10 +505,6 @@ export const FeatureCard = ({ headlineText={headlineText} dataLinkName={resolvedDataLinkName} isExternalLink={isExternalLink} - isLoopAndInLoopClickTest={isLoopAndInLoopClickTest} - shouldRaiseZIndexForAbTest={ - isLoopAndInLoopClickTestVariant - } /> )}
@@ -655,15 +614,6 @@ export const FeatureCard = ({ minAspectRatio={aspectRatioNumber} maxAspectRatio={aspectRatioNumber} preventAutoplay={false} - cardLink={{ - headlineText, - dataLinkName: - resolvedDataLinkName, - isExternalLink, - }} - isInLoopClickTestVariant={ - isInLoopClickTestVariant - } /> )} @@ -708,8 +658,7 @@ export const FeatureCard = ({ )} {/* This overlay is styled when the CardLink is hovered */} - {(!isSelfHostedVideoWithControls || - isLoopAndInLoopClickTestVariant) && ( + {!isSelfHostedVideoWithControls && (
)}
)} diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index 57279975859..a57480555dc 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -61,17 +61,21 @@ const container = css` ${until.mobileMedium} { min-height: 174px; } + ${between.mobileMedium.and.tablet} { min-height: 194px; } + ${from.tablet} { width: 160px; padding: 10px 10px 0 10px; } + ${from.tablet} { width: 280px; flex-direction: row; } + ${from.desktop} { width: 300px; } @@ -90,11 +94,13 @@ const hoverStyles = css` width: 100%; background-color: ${palette('--card-background-hover')}; } + :hover .circular { border-radius: 100%; } /* Only underline the headline element we want to target (not kickers/sublink headlines) */ + :hover .card-headline .show-underline { text-decoration: underline; } @@ -113,6 +119,7 @@ const content = css` * We're deliberately using a font-size that is not in Source so that * the headline doesn't exceed three lines across all mobile breakpoints */ + ${between.mobileMedium.and.mobileLandscape} { .headline-text { font-size: 1rem; @@ -152,8 +159,6 @@ export const HighlightsCard = ({ headlineText={headlineText} dataLinkName={dataLinkName} isExternalLink={isExternalLink} - isLoopAndInLoopClickTest={false} - shouldRaiseZIndexForAbTest={false} />
diff --git a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx index 615a6c94c7a..73bac86a327 100644 --- a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx +++ b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx @@ -313,12 +313,6 @@ type Props = { role?: RoleType; preventAutoplay: boolean; restrictHeightOnDesktop?: boolean; - cardLink?: { - headlineText: string; - dataLinkName?: string; - isExternalLink: boolean; - }; - isInLoopClickTestVariant?: boolean; }; export const SelfHostedVideo = ({ @@ -349,8 +343,6 @@ export const SelfHostedVideo = ({ role, preventAutoplay, restrictHeightOnDesktop = false, - cardLink, - isInLoopClickTestVariant, }: Props) => { const adapted = useShouldAdapt(); const { renderingTarget } = useConfig(); @@ -395,9 +387,6 @@ export const SelfHostedVideo = ({ const isWeb = renderingTarget === 'Web'; const isApps = renderingTarget === 'Apps'; - const isLoopClickThroughTestVariant = - videoStyle === 'Loop' && isInLoopClickTestVariant; - /** * The video will autoplay if all of the following are true: * - the style of video allows autoplay @@ -1165,11 +1154,6 @@ export const SelfHostedVideo = ({ isInteractive={videoStyleSettings.isInteractive} isFullscreen={isFullscreen} isWebKitFullscreen={isWebKitFullscreen} - linkTo={linkTo} - cardLink={cardLink} - isLoopAndInLoopClickTestVariant={Boolean( - isLoopClickThroughTestVariant, - )} />
diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx index 03c26082f7e..7bccbe62be6 100644 --- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx +++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx @@ -7,11 +7,9 @@ import { } from '@guardian/source/foundations'; import type { ReactElement, SyntheticEvent } from 'react'; import { forwardRef } from 'react'; -import { getZIndex } from '../lib/getZIndex'; import type { ActiveCue } from '../lib/useSubtitles'; import type { Source } from '../lib/video'; import { palette } from '../palette'; -import { CardLink } from './Card/components/CardLink'; import { AudioIcon as AudioIconComponent, FullscreenIcon, @@ -50,10 +48,6 @@ const videoControlsStyles = css` } `; -const videoControlsZIndexStyles = css` - z-index: ${getZIndex('video-controls-container')}; -`; - const interactiveStyles = css` cursor: pointer; `; @@ -156,14 +150,6 @@ export type Props = { subtitlesPosition: SubtitlesPosition; isFullscreen: boolean; isWebKitFullscreen: boolean; - /* used by the card link component for click through to article functionality */ - linkTo: string; - cardLink?: { - headlineText: string; - dataLinkName?: string; - isExternalLink: boolean; - }; - isLoopAndInLoopClickTestVariant: boolean; }; /** @@ -221,9 +207,6 @@ export const SelfHostedVideoPlayer = forwardRef( subtitlesPosition, isFullscreen, isWebKitFullscreen, - linkTo, - cardLink, - isLoopAndInLoopClickTestVariant, }: Props, ref: React.ForwardedRef, ) => { @@ -234,16 +217,6 @@ export const SelfHostedVideoPlayer = forwardRef( return ( <> - {cardLink && isLoopAndInLoopClickTestVariant && ( - - )}