Skip to content

AB test: Every card on the network front is boosted #14509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
domlander merged 5 commits into from
Oct 6, 2025
Merged

AB test: Every card on the network front is boosted #14509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1594d3
Fix scrollable medium container type and refactor
domlander Sep 17, 2025
7ca9dea
All Boosts AB test
domlander Oct 1, 2025
26bddf4
scrollable/medium has a small card in the Card component
domlander Oct 2, 2025
5cb0e01
Invert boolean
domlander Oct 2, 2025
02c4565
Merge branch 'main' into doml/all-boosts
domlander Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions dotcom-rendering/src/components/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
];
Expand Down Expand Up @@ -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);
Expand Down
22 changes: 20 additions & 2 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,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 */
Expand Down Expand Up @@ -395,6 +397,8 @@ export const Card = ({
showTopBarMobile = true,
trailTextSize,
showKickerImage = false,
fixImageWidth,
isInAllBoostsTest = false,
headlinePosition = 'inner',
showLabsRedesign = false,
}: Props) => {
Expand Down Expand Up @@ -581,12 +585,14 @@ 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) {
return {
mobile: 'tiny',
mobile: isInAllBoostsTest ? undefined : 'tiny',
tablet: 'small',
desktop: 'small',
};
Expand Down Expand Up @@ -883,6 +889,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}
Expand Down Expand Up @@ -915,13 +926,15 @@ export const Card = ({
imagePositionOnMobile={mediaPositionOnMobile}
isBetaContainer={isBetaContainer}
isFlexibleContainer={isFlexibleContainer}
isInAllBoostsTest={isInAllBoostsTest}
>
<Avatar
src={media.avatarUrl}
alt={byline ?? ''}
imageSize={
isBetaContainer ? mediaSize : undefined
}
isInAllBoostsTest={isInAllBoostsTest}
/>
</AvatarContainer>
)}
Expand Down Expand Up @@ -1042,6 +1055,9 @@ export const Card = ({
loading={imageLoading}
roundedCorners={isOnwardContent}
aspectRatio={aspectRatio}
isInAllBoostsTest={
isInAllBoostsTest
}
/>
</div>
)}
Expand All @@ -1056,6 +1072,7 @@ export const Card = ({
loading={imageLoading}
roundedCorners={isOnwardContent}
aspectRatio={aspectRatio}
isInAllBoostsTest={isInAllBoostsTest}
/>
{isVideoMainMedia && mainMedia.duration > 0 && (
<div
Expand Down Expand Up @@ -1102,6 +1119,7 @@ export const Card = ({
alt={media.trailImage.altText}
loading={imageLoading}
aspectRatio={aspectRatio}
isInAllBoostsTest={isInAllBoostsTest}
/>
)}
</>
Expand Down
24 changes: 24 additions & 0 deletions dotcom-rendering/src/components/Card/components/AvatarContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type Props = {
imagePositionOnMobile: MediaPositionType;
isBetaContainer: boolean;
isFlexibleContainer: boolean;
isInAllBoostsTest?: boolean;
};

const sideMarginStyles = css`
Expand All @@ -31,6 +32,7 @@ const sizingStyles = (
isFlexibleContainer: boolean,
isVerticalOnDesktop: boolean,
isVerticalOnMobile: boolean,
isInAllBoostsTest = false,
) => {
if (!isBetaContainer) {
switch (imageSize) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -137,6 +159,7 @@ export const AvatarContainer = ({
imagePositionOnMobile,
isBetaContainer,
isFlexibleContainer,
isInAllBoostsTest,
}: Props) => {
const isVerticalOnDesktop =
imagePositionOnDesktop === 'top' || imagePositionOnDesktop === 'bottom';
Expand All @@ -155,6 +178,7 @@ export const AvatarContainer = ({
isFlexibleContainer,
isVerticalOnDesktop,
isVerticalOnMobile,
isInAllBoostsTest,
),
]}
>
Expand Down
10 changes: 5 additions & 5 deletions dotcom-rendering/src/components/Card/components/MediaWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const mediaFixedSize = {
type MediaFixedSize = keyof typeof mediaFixedSize;

export type MediaFixedSizeOptions = {
mobile: MediaFixedSize;
mobile?: MediaFixedSize;
tablet?: MediaFixedSize;
desktop?: MediaFixedSize;
};
Expand All @@ -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
Expand Down Expand Up @@ -166,7 +167,7 @@ const fixMediaWidth = ({
desktop,
}: MediaFixedSizeOptions) => css`
${until.tablet} {
${fixMediaWidthStyles(mediaFixedSize[mobile])}
${mobile !== undefined && fixMediaWidthStyles(mediaFixedSize[mobile])}
}
${tablet &&
css`
Expand All @@ -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 (
<div
Expand All @@ -222,7 +222,7 @@ export const MediaWrapper = ({
display: none;
}
`,
isHorizontalOnMobile && fixMediaWidth(mediaFixedSizes),
fixImageWidth && fixMediaWidth(mediaFixedSizes),
isHorizontalOnDesktop &&
css`
${from.tablet} {
Expand Down
11 changes: 9 additions & 2 deletions dotcom-rendering/src/components/CardPicture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export type Props = {
isCircular?: boolean;
aspectRatio?: AspectRatio;
mobileAspectRatio?: AspectRatio;
isInAllBoostsTest?: boolean;
};

/**
Expand All @@ -29,6 +30,7 @@ export type Props = {
const decideImageWidths = (
imageSize: MediaSizeType,
aspectRatio: AspectRatio,
isInAllBoostsTest: boolean,
): [ImageWidthType, ...ImageWidthType[]] => {
switch (imageSize) {
// @TODO missing image size option
Expand All @@ -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 },
];
Expand Down Expand Up @@ -210,14 +216,15 @@ export const CardPicture = ({
isCircular,
aspectRatio = '5:3',
mobileAspectRatio,
isInAllBoostsTest = false,
}: Props) => {
if (mainImage === '') {
return null;
}

const sources = generateSources(
mainImage,
decideImageWidths(imageSize, aspectRatio),
decideImageWidths(imageSize, aspectRatio, isInAllBoostsTest),
);

const fallbackSource = getFallbackSource(sources);
Expand Down
39 changes: 35 additions & 4 deletions dotcom-rendering/src/components/DecideContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -63,6 +64,7 @@ export const DecideContainer = ({
sectionId,
frontId,
collectionId,
isInAllBoostsTest,
containerLevel,
showLabsRedesign = false,
}: Props) => {
Expand Down Expand Up @@ -246,6 +248,7 @@ export const DecideContainer = ({
absoluteServerTimes={absoluteServerTimes}
imageLoading={imageLoading}
aspectRatio={aspectRatio}
isInAllBoostsTest={!!isInAllBoostsTest}
collectionId={collectionId}
showLabsRedesign={!!showLabsRedesign}
/>
Expand All @@ -260,39 +263,66 @@ export const DecideContainer = ({
imageLoading={imageLoading}
aspectRatio={aspectRatio}
containerLevel={containerLevel}
isInAllBoostsTest={!!isInAllBoostsTest}
collectionId={collectionId}
showLabsRedesign={!!showLabsRedesign}
/>
);
case 'scrollable/small':
return (
return isInAllBoostsTest ? (
<ScrollableSmall
trails={trails}
imageLoading={imageLoading}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
isInAllBoostsTest={true}
sectionId={sectionId}
showLabsRedesign={!!showLabsRedesign}
/>
) : (
<Island priority="feature" defer={{ until: 'visible' }}>
<ScrollableSmall
trails={trails}
imageLoading={imageLoading}
containerType={'scrollable/small'}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
isInAllBoostsTest={false}
sectionId={sectionId}
showLabsRedesign={!!showLabsRedesign}
/>
</Island>
Comment on lines +272 to 297
Copy link
Contributor

@Fweddi Fweddi Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why no island?

Copy link
Contributor Author

@domlander domlander Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not have carousels when in the AB test, so we don't need the javascript that comes with carousels.

);
case 'scrollable/medium':
return (
return isInAllBoostsTest ? (
<ScrollableMedium
trails={trails}
imageLoading={imageLoading}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
sectionId={sectionId}
showLabsRedesign={!!showLabsRedesign}
containerLevel={containerLevel}
isInAllBoostsTest={true}
/>
) : (
<Island priority="feature" defer={{ until: 'visible' }}>
<ScrollableMedium
trails={trails}
imageLoading={imageLoading}
containerType={'scrollable/small'}
containerPalette={containerPalette}
showAge={showAge}
absoluteServerTimes={absoluteServerTimes}
aspectRatio={aspectRatio}
sectionId={sectionId}
showLabsRedesign={!!showLabsRedesign}
containerLevel={containerLevel}
isInAllBoostsTest={isInAllBoostsTest}
/>
</Island>
);
Expand All @@ -306,6 +336,7 @@ export const DecideContainer = ({
imageLoading={imageLoading}
aspectRatio={aspectRatio}
showLabsRedesign={!!showLabsRedesign}
isInAllBoostsTest={isInAllBoostsTest}
/>
);
case 'scrollable/feature':
Expand Down
Loading
Loading