From e1594d33d4a73998a0f6c1a8c2b8dac51adb774c Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Wed, 17 Sep 2025 11:35:00 +0100 Subject: [PATCH 1/4] Fix scrollable medium container type and refactor --- dotcom-rendering/src/components/DecideContainer.tsx | 2 -- .../src/components/ScrollableMedium.importable.tsx | 5 +---- dotcom-rendering/src/components/ScrollableMedium.stories.tsx | 1 - .../src/components/ScrollableSmall.importable.tsx | 5 +---- dotcom-rendering/src/components/ScrollableSmall.stories.tsx | 1 - 5 files changed, 2 insertions(+), 12 deletions(-) diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx index efc50b4fe62..5c99305267f 100644 --- a/dotcom-rendering/src/components/DecideContainer.tsx +++ b/dotcom-rendering/src/components/DecideContainer.tsx @@ -270,7 +270,6 @@ export const DecideContainer = ({ ( diff --git a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx index 89cfbf0bfb4..4d0bb86070f 100644 --- a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx @@ -1,7 +1,6 @@ import type { AspectRatio, DCRContainerPalette, - DCRContainerType, DCRFrontCard, } from '../types/front'; import { FrontCard } from './FrontCard'; @@ -13,7 +12,6 @@ type Props = { showAge?: boolean; absoluteServerTimes?: boolean; imageLoading: 'lazy' | 'eager'; - containerType: DCRContainerType; aspectRatio: AspectRatio; sectionId: string; /** Feature flag for the labs redesign work */ @@ -56,7 +54,6 @@ type Props = { export const ScrollableSmall = ({ trails, containerPalette, - containerType, absoluteServerTimes, imageLoading, showAge, @@ -87,7 +84,7 @@ export const ScrollableSmall = ({ imageLoading={imageLoading} absoluteServerTimes={!!absoluteServerTimes} containerPalette={containerPalette} - containerType={containerType} + containerType="scrollable/small" showAge={!!showAge} headlineSizes={{ desktop: 'xxsmall', diff --git a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx index 43bd9b9b3be..5ee5a5d5178 100644 --- a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx +++ b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx @@ -24,7 +24,6 @@ const meta = { showAge: true, absoluteServerTimes: true, imageLoading: 'eager', - containerType: 'scrollable/small', aspectRatio: '5:4', }, render: (args) => ( From 7ca9dea26747e057fa289893dbdaf0c78aa967e8 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Wed, 1 Oct 2025 15:13:09 +0100 Subject: [PATCH 2/4] All Boosts AB test --- dotcom-rendering/src/components/Avatar.tsx | 14 ++- dotcom-rendering/src/components/Card/Card.tsx | 18 ++- .../Card/components/AvatarContainer.tsx | 24 ++++ .../Card/components/MediaWrapper.tsx | 10 +- .../src/components/CardPicture.tsx | 11 +- .../src/components/DecideContainer.tsx | 37 +++++- .../src/components/FlexibleGeneral.tsx | 19 ++- .../src/components/FlexibleSpecial.tsx | 18 +++ .../ScrollableMedium.importable.tsx | 64 ++++++++++ .../components/ScrollableSmall.importable.tsx | 117 ++++++++++++++++++ .../src/components/StaticMediumFour.tsx | 17 ++- dotcom-rendering/src/layouts/FrontLayout.tsx | 5 + 12 files changed, 339 insertions(+), 15 deletions(-) diff --git a/dotcom-rendering/src/components/Avatar.tsx b/dotcom-rendering/src/components/Avatar.tsx index 6c69acb3e0e..9ebdef9fc43 100644 --- a/dotcom-rendering/src/components/Avatar.tsx +++ b/dotcom-rendering/src/components/Avatar.tsx @@ -57,17 +57,19 @@ type Props = { alt: string; shape?: AvatarShape; imageSize?: MediaSizeType; + isInAllBoostsTest?: boolean; }; const decideImageWidths = ( imageSize: MediaSizeType, + isInAllBoostsTest = false, ): [ImageWidthType, ...ImageWidthType[]] => { switch (imageSize) { case 'small': return [ { breakpoint: breakpoints.mobile, - width: 80, + width: isInAllBoostsTest ? 150 : 80, aspectRatio: '1:1', }, ]; @@ -142,9 +144,15 @@ const defaultImageSizes: [ImageWidthType, ...ImageWidthType[]] = [ { breakpoint: breakpoints.tablet, width: 140 }, ]; -export const Avatar = ({ src, alt, shape = 'round', imageSize }: Props) => { +export const Avatar = ({ + src, + alt, + shape = 'round', + imageSize, + isInAllBoostsTest, +}: Props) => { const imageWidths = imageSize - ? decideImageWidths(imageSize) + ? decideImageWidths(imageSize, isInAllBoostsTest) : defaultImageSizes; const sources = generateSources(getSourceImageUrl(src), imageWidths); diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 8657899d74e..f27e2bdf57a 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -151,6 +151,8 @@ export type Props = { trailTextSize?: TrailTextSize; /** A kicker image is seperate to the main media and renders as part of the kicker */ showKickerImage?: boolean; + isInAllBoostsTest?: boolean; + fixImageWidth?: boolean; /** Determines if the headline should be positioned within the content or outside the content */ headlinePosition?: 'inner' | 'outer'; /** Feature flag for the labs redesign work */ @@ -391,6 +393,8 @@ export const Card = ({ showTopBarMobile = true, trailTextSize, showKickerImage = false, + fixImageWidth, + isInAllBoostsTest = false, headlinePosition = 'inner', showLabsRedesign = false, }: Props) => { @@ -582,7 +586,7 @@ export const Card = ({ const mediaFixedSizeOptions = (): MediaFixedSizeOptions => { if (isSmallCard) { return { - mobile: 'tiny', + mobile: isInAllBoostsTest ? undefined : 'tiny', tablet: 'small', desktop: 'small', }; @@ -805,6 +809,11 @@ export const Card = ({ mediaType={media.type} mediaPositionOnDesktop={mediaPositionOnDesktop} mediaPositionOnMobile={mediaPositionOnMobile} + fixImageWidth={ + fixImageWidth ?? + (mediaPositionOnMobile === 'left' || + mediaPositionOnMobile === 'right') + } hideImageOverlay={media.type === 'slideshow'} padMedia={isMediaCardOrNewsletter && isBetaContainer} isBetaContainer={isBetaContainer} @@ -837,6 +846,7 @@ export const Card = ({ imagePositionOnMobile={mediaPositionOnMobile} isBetaContainer={isBetaContainer} isFlexibleContainer={isFlexibleContainer} + isInAllBoostsTest={isInAllBoostsTest} > )} @@ -964,6 +975,9 @@ export const Card = ({ loading={imageLoading} roundedCorners={isOnwardContent} aspectRatio={aspectRatio} + isInAllBoostsTest={ + isInAllBoostsTest + } /> )} @@ -978,6 +992,7 @@ export const Card = ({ loading={imageLoading} roundedCorners={isOnwardContent} aspectRatio={aspectRatio} + isInAllBoostsTest={isInAllBoostsTest} /> {isVideoMainMedia && mainMedia.duration > 0 && (
)} diff --git a/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx b/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx index 2087e894fb0..a620b768354 100644 --- a/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx +++ b/dotcom-rendering/src/components/Card/components/AvatarContainer.tsx @@ -9,6 +9,7 @@ type Props = { imagePositionOnMobile: MediaPositionType; isBetaContainer: boolean; isFlexibleContainer: boolean; + isInAllBoostsTest?: boolean; }; const sideMarginStyles = css` @@ -31,6 +32,7 @@ const sizingStyles = ( isFlexibleContainer: boolean, isVerticalOnDesktop: boolean, isVerticalOnMobile: boolean, + isInAllBoostsTest = false, ) => { if (!isBetaContainer) { switch (imageSize) { @@ -81,6 +83,26 @@ const sizingStyles = ( switch (imageSize) { case 'small': + if (isInAllBoostsTest) { + return isFlexibleContainer + ? css` + width: 90px; + height: 90px; + ${until.tablet} { + height: 150px; + width: 150px; + } + ` + : css` + width: 80px; + height: 80px; + ${until.tablet} { + height: 150px; + width: 150px; + } + `; + } + return isFlexibleContainer ? css` width: 90px; @@ -137,6 +159,7 @@ export const AvatarContainer = ({ imagePositionOnMobile, isBetaContainer, isFlexibleContainer, + isInAllBoostsTest, }: Props) => { const isVerticalOnDesktop = imagePositionOnDesktop === 'top' || imagePositionOnDesktop === 'bottom'; @@ -155,6 +178,7 @@ export const AvatarContainer = ({ isFlexibleContainer, isVerticalOnDesktop, isVerticalOnMobile, + isInAllBoostsTest, ), ]} > diff --git a/dotcom-rendering/src/components/Card/components/MediaWrapper.tsx b/dotcom-rendering/src/components/Card/components/MediaWrapper.tsx index ba22e96ad3a..a7a2b340fd4 100644 --- a/dotcom-rendering/src/components/Card/components/MediaWrapper.tsx +++ b/dotcom-rendering/src/components/Card/components/MediaWrapper.tsx @@ -12,7 +12,7 @@ const mediaFixedSize = { type MediaFixedSize = keyof typeof mediaFixedSize; export type MediaFixedSizeOptions = { - mobile: MediaFixedSize; + mobile?: MediaFixedSize; tablet?: MediaFixedSize; desktop?: MediaFixedSize; }; @@ -38,6 +38,7 @@ type Props = { mediaType?: CardMediaType; mediaPositionOnDesktop: MediaPositionType; mediaPositionOnMobile: MediaPositionType; + fixImageWidth: boolean; /** * Forces hiding the image overlay added to pictures & slideshows on hover. * This is to allow hiding the overlay on slideshow carousels where we don't @@ -166,7 +167,7 @@ const fixMediaWidth = ({ desktop, }: MediaFixedSizeOptions) => css` ${until.tablet} { - ${fixMediaWidthStyles(mediaFixedSize[mobile])} + ${mobile !== undefined && fixMediaWidthStyles(mediaFixedSize[mobile])} } ${tablet && css` @@ -189,14 +190,13 @@ export const MediaWrapper = ({ mediaType, mediaPositionOnDesktop, mediaPositionOnMobile, + fixImageWidth, hideImageOverlay, isBetaContainer = false, padMedia, }: Props) => { const isHorizontalOnDesktop = mediaPositionOnDesktop === 'left' || mediaPositionOnDesktop === 'right'; - const isHorizontalOnMobile = - mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right'; return (
{ switch (imageSize) { // @TODO missing image size option @@ -52,7 +54,11 @@ const decideImageWidths = ( case 'small': return [ - { breakpoint: breakpoints.mobile, width: 120, aspectRatio }, + { + breakpoint: breakpoints.mobile, + width: isInAllBoostsTest ? 465 : 120, + aspectRatio, + }, { breakpoint: breakpoints.tablet, width: 160, aspectRatio }, { breakpoint: breakpoints.desktop, width: 220, aspectRatio }, ]; @@ -210,6 +216,7 @@ export const CardPicture = ({ isCircular, aspectRatio = '5:3', mobileAspectRatio, + isInAllBoostsTest = false, }: Props) => { if (mainImage === '') { return null; @@ -217,7 +224,7 @@ export const CardPicture = ({ const sources = generateSources( mainImage, - decideImageWidths(imageSize, aspectRatio), + decideImageWidths(imageSize, aspectRatio, isInAllBoostsTest), ); const fallbackSource = getFallbackSource(sources); diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx index 5c99305267f..13e3de7656a 100644 --- a/dotcom-rendering/src/components/DecideContainer.tsx +++ b/dotcom-rendering/src/components/DecideContainer.tsx @@ -46,6 +46,7 @@ type Props = { sectionId: string; frontId?: string; collectionId: number; + isInAllBoostsTest?: boolean; containerLevel?: DCRContainerLevel; /** Feature flag for the labs redesign work */ showLabsRedesign?: boolean; @@ -63,6 +64,7 @@ export const DecideContainer = ({ sectionId, frontId, collectionId, + isInAllBoostsTest, containerLevel, showLabsRedesign = false, }: Props) => { @@ -246,6 +248,7 @@ export const DecideContainer = ({ absoluteServerTimes={absoluteServerTimes} imageLoading={imageLoading} aspectRatio={aspectRatio} + isInAllBoostsTest={!!isInAllBoostsTest} collectionId={collectionId} showLabsRedesign={!!showLabsRedesign} /> @@ -260,12 +263,25 @@ export const DecideContainer = ({ imageLoading={imageLoading} aspectRatio={aspectRatio} containerLevel={containerLevel} + isInAllBoostsTest={!!isInAllBoostsTest} collectionId={collectionId} showLabsRedesign={!!showLabsRedesign} /> ); case 'scrollable/small': - return ( + return isInAllBoostsTest ? ( + + ) : ( ); case 'scrollable/medium': - return ( + return isInAllBoostsTest ? ( + + ) : ( ); @@ -304,6 +336,7 @@ export const DecideContainer = ({ imageLoading={imageLoading} aspectRatio={aspectRatio} showLabsRedesign={!!showLabsRedesign} + isInAllBoostsTest={isInAllBoostsTest} /> ); case 'scrollable/feature': diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index f04077e888e..658b4aa2d9d 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -34,6 +34,7 @@ type Props = { collectionId: number; /** Feature flag for the labs redesign work */ showLabsRedesign?: boolean; + isInAllBoostsTest?: boolean; }; type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard'; @@ -507,6 +508,7 @@ type HalfWidthCardLayoutProps = { absoluteServerTimes: boolean; aspectRatio: AspectRatio; isLastRow: boolean; + isInAllBoostsTest?: boolean; containerLevel: DCRContainerLevel; /** Feature flag for the labs redesign work */ showLabsRedesign?: boolean; @@ -522,6 +524,7 @@ const HalfWidthCardLayout = ({ isFirstStandardRow, aspectRatio, isLastRow, + isInAllBoostsTest, containerLevel, showLabsRedesign, }: HalfWidthCardLayoutProps) => { @@ -557,6 +560,9 @@ const HalfWidthCardLayout = ({ image={card.image} imageLoading={imageLoading} mediaPositionOnDesktop="left" + mediaPositionOnMobile={ + isInAllBoostsTest ? 'bottom' : 'left' + } supportingContent={card.supportingContent?.slice( 0, 2, @@ -575,9 +581,18 @@ const HalfWidthCardLayout = ({ (containerLevel !== 'Primary' && cardIndex > 0) } trailText={undefined} - headlineSizes={undefined} + headlineSizes={ + isInAllBoostsTest + ? { + desktop: 'xsmall', + tablet: 'xxsmall', + mobile: 'small', + } + : undefined + } canPlayInline={false} showLabsRedesign={showLabsRedesign} + isInAllBoostsTest={isInAllBoostsTest} /> ); @@ -594,6 +609,7 @@ export const FlexibleGeneral = ({ imageLoading, aspectRatio, containerLevel = 'Primary', + isInAllBoostsTest = false, collectionId, showLabsRedesign, }: Props) => { @@ -661,6 +677,7 @@ export const FlexibleGeneral = ({ isFirstStandardRow={i === 0} aspectRatio={aspectRatio} isLastRow={i === groupedCards.length - 1} + isInAllBoostsTest={isInAllBoostsTest} containerLevel={containerLevel} showLabsRedesign={showLabsRedesign} /> diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index be17a259762..93d7721ce87 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -29,6 +29,7 @@ type Props = { absoluteServerTimes: boolean; aspectRatio: AspectRatio; containerLevel?: DCRContainerLevel; + isInAllBoostsTest?: boolean; collectionId: number; showLabsRedesign?: boolean; }; @@ -223,6 +224,7 @@ type TwoOrFourCardLayoutProps = { containerLevel: DCRContainerLevel; /** Feature flag for the labs redesign work */ showLabsRedesign?: boolean; + isInAllBoostsTest: boolean; }; const TwoOrFourCardLayout = ({ @@ -236,6 +238,7 @@ const TwoOrFourCardLayout = ({ isFirstRow, containerLevel, showLabsRedesign, + isInAllBoostsTest, }: TwoOrFourCardLayoutProps) => { if (cards.length === 0) return null; const hasTwoOrFewerCards = cards.length <= 2; @@ -263,6 +266,19 @@ const TwoOrFourCardLayout = ({ hasTwoOrFewerCards, isMediaCard(card.format) || !!card.isNewsletter, )} + mediaPositionOnMobile={ + isInAllBoostsTest ? 'bottom' : 'left' + } + headlineSizes={ + isInAllBoostsTest + ? { + desktop: 'xsmall', + tablet: 'xxsmall', + mobile: 'small', + } + : undefined + } + isInAllBoostsTest={isInAllBoostsTest} /* we don't want to support sublinks on standard cards here so we hard code to undefined */ supportingContent={undefined} mediaSize="small" @@ -293,6 +309,7 @@ export const FlexibleSpecial = ({ imageLoading, aspectRatio, containerLevel = 'Primary', + isInAllBoostsTest = false, collectionId, showLabsRedesign, }: Props) => { @@ -351,6 +368,7 @@ export const FlexibleSpecial = ({ isFirstRow={!isNonEmptyArray(snaps) && !isNonEmptyArray(splash)} containerLevel={containerLevel} showLabsRedesign={showLabsRedesign} + isInAllBoostsTest={isInAllBoostsTest} /> ); diff --git a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx index 2d30d8cc19c..77dc0c3cf7b 100644 --- a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx @@ -1,9 +1,13 @@ import { isMediaCard } from '../lib/cardHelpers'; +import { palette } from '../palette'; import type { AspectRatio, + DCRContainerLevel, DCRContainerPalette, DCRFrontCard, } from '../types/front'; +import { LI } from './Card/components/LI'; +import { UL } from './Card/components/UL'; import { FrontCard } from './FrontCard'; import { ScrollableCarousel } from './ScrollableCarousel'; @@ -15,8 +19,10 @@ type Props = { imageLoading: 'lazy' | 'eager'; aspectRatio: AspectRatio; sectionId: string; + containerLevel?: DCRContainerLevel; /** Feature flag for the labs redesign work */ showLabsRedesign?: boolean; + isInAllBoostsTest?: boolean; }; /** @@ -34,8 +40,66 @@ export const ScrollableMedium = ({ showAge, aspectRatio, sectionId, + containerLevel, showLabsRedesign, + isInAllBoostsTest = false, }: Props) => { + if (isInAllBoostsTest) { + return ( +
    + {trails.map((trail, index) => { + const imagePosition = isMediaCard(trail.format) + ? 'top' + : 'bottom'; + + return ( +
  • + 0) + } + isInAllBoostsTest={isInAllBoostsTest} + canPlayInline={false} + showLabsRedesign={showLabsRedesign} + /> +
    • + ); + })} +
+ ); + } + return ( { const mobileBottomCards = [1, 3]; const desktopBottomCards = [2, 3]; + if (isInAllBoostsTest) { + return ( + <> +
    + {trails.slice(0, 2).map((trail, index) => { + return ( +
  • + +
    • + ); + })} +
+
+
    + {trails.slice(2, 4).map((trail, index) => { + return ( +
  • + +
    • + ); + })} +
+ + ); + } + return ( { const cards = trails.slice(0, 4); @@ -55,7 +57,7 @@ export const StaticMediumFour = ({ return (
  • 0} @@ -72,6 +74,18 @@ export const StaticMediumFour = ({ card.format, !!card.isNewsletter, )} + mediaPositionOnMobile={ + isInAllBoostsTest ? 'bottom' : 'left' + } + headlineSizes={ + isInAllBoostsTest + ? { + desktop: 'xsmall', + tablet: 'xxsmall', + mobile: 'small', + } + : undefined + } /* we don't want to support sublinks on standard cards here so we hard code to undefined */ supportingContent={undefined} mediaSize="medium" @@ -86,6 +100,7 @@ export const StaticMediumFour = ({ } canPlayInline={false} showLabsRedesign={showLabsRedesign} + isInAllBoostsTest={isInAllBoostsTest} />
    • ); diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 76bd8ab93d5..d2e429b4618 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -105,6 +105,7 @@ export const FrontLayout = ({ front, NAV }: Props) => { isPaidContent, hasPageSkin: hasPageSkinConfig, pageId, + abTests, switches: { absoluteServerTimes = false }, }, editionId, @@ -601,6 +602,10 @@ export const FrontLayout = ({ front, NAV }: Props) => { } sectionId={ophanName} collectionId={index + 1} + isInAllBoostsTest={ + front.isNetworkFront && + abTests.allBoostsVariant !== 'variant' + } containerLevel={collection.containerLevel} showLabsRedesign={showLabsRedesign} /> From 26bddf45d98b0fd21eef10687c0c48655ea52782 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 2 Oct 2025 16:21:00 +0100 Subject: [PATCH 3/4] scrollable/medium has a small card in the Card component --- dotcom-rendering/src/components/Card/Card.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index f27e2bdf57a..5ccb21d2943 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -581,7 +581,9 @@ export const Card = ({ containerType === 'flexible/special' || containerType === 'flexible/general'; - const isSmallCard = containerType === 'scrollable/small'; + const isSmallCard = + containerType === 'scrollable/small' || + containerType === 'scrollable/medium'; const mediaFixedSizeOptions = (): MediaFixedSizeOptions => { if (isSmallCard) { From 5cb0e012263549cca7cff6cb858bfbb0a8afc615 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 2 Oct 2025 16:21:20 +0100 Subject: [PATCH 4/4] Invert boolean --- dotcom-rendering/src/layouts/FrontLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index d2e429b4618..cee6fa68b1c 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -604,7 +604,7 @@ export const FrontLayout = ({ front, NAV }: Props) => { collectionId={index + 1} isInAllBoostsTest={ front.isNetworkFront && - abTests.allBoostsVariant !== 'variant' + abTests.allBoostsVariant === 'variant' } containerLevel={collection.containerLevel} showLabsRedesign={showLabsRedesign}