Skip to content

Commit b60a526

Browse files
domlanderdomlander
authored
Merge pull request #14509 from guardian/doml/all-boosts
AB test: Every card on the network front is boosted
2 parents 45689e1 + 02c4565 commit b60a526

14 files changed

+344
-28
lines changed

‎dotcom-rendering/src/components/Avatar.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,19 @@ type Props = {
5757
alt: string;
5858
shape?: AvatarShape;
5959
imageSize?: MediaSizeType;
60+
isInAllBoostsTest?: boolean;
6061
};
6162

6263
const decideImageWidths = (
6364
imageSize: MediaSizeType,
65+
isInAllBoostsTest = false,
6466
): [ImageWidthType, ...ImageWidthType[]] => {
6567
switch (imageSize) {
6668
case 'small':
6769
return [
6870
{
6971
breakpoint: breakpoints.mobile,
70-
width: 80,
72+
width: isInAllBoostsTest ? 150 : 80,
7173
aspectRatio: '1:1',
7274
},
7375
];
@@ -142,9 +144,15 @@ const defaultImageSizes: [ImageWidthType, ...ImageWidthType[]] = [
142144
{ breakpoint: breakpoints.tablet, width: 140 },
143145
];
144146

145-
export const Avatar = ({ src, alt, shape = 'round', imageSize }: Props) => {
147+
export const Avatar = ({
148+
src,
149+
alt,
150+
shape = 'round',
151+
imageSize,
152+
isInAllBoostsTest,
153+
}: Props) => {
146154
const imageWidths = imageSize
147-
? decideImageWidths(imageSize)
155+
? decideImageWidths(imageSize, isInAllBoostsTest)
148156
: defaultImageSizes;
149157

150158
const sources = generateSources(getSourceImageUrl(src), imageWidths);

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@ export type Props = {
155155
trailTextSize?: TrailTextSize;
156156
/** A kicker image is seperate to the main media and renders as part of the kicker */
157157
showKickerImage?: boolean;
158+
isInAllBoostsTest?: boolean;
159+
fixImageWidth?: boolean;
158160
/** Determines if the headline should be positioned within the content or outside the content */
159161
headlinePosition?: 'inner' | 'outer';
160162
/** Feature flag for the labs redesign work */
@@ -395,6 +397,8 @@ export const Card = ({
395397
showTopBarMobile = true,
396398
trailTextSize,
397399
showKickerImage = false,
400+
fixImageWidth,
401+
isInAllBoostsTest = false,
398402
headlinePosition = 'inner',
399403
showLabsRedesign = false,
400404
}: Props) => {
@@ -581,12 +585,14 @@ export const Card = ({
581585
containerType === 'flexible/special' ||
582586
containerType === 'flexible/general';
583587

584-
const isSmallCard = containerType === 'scrollable/small';
588+
const isSmallCard =
589+
containerType === 'scrollable/small' ||
590+
containerType === 'scrollable/medium';
585591

586592
const mediaFixedSizeOptions = (): MediaFixedSizeOptions => {
587593
if (isSmallCard) {
588594
return {
589-
mobile: 'tiny',
595+
mobile: isInAllBoostsTest ? undefined : 'tiny',
590596
tablet: 'small',
591597
desktop: 'small',
592598
};
@@ -883,6 +889,11 @@ export const Card = ({
883889
mediaType={media.type}
884890
mediaPositionOnDesktop={mediaPositionOnDesktop}
885891
mediaPositionOnMobile={mediaPositionOnMobile}
892+
fixImageWidth={
893+
fixImageWidth ??
894+
(mediaPositionOnMobile === 'left' ||
895+
mediaPositionOnMobile === 'right')
896+
}
886897
hideImageOverlay={media.type === 'slideshow'}
887898
padMedia={isMediaCardOrNewsletter && isBetaContainer}
888899
isBetaContainer={isBetaContainer}
@@ -915,13 +926,15 @@ export const Card = ({
915926
imagePositionOnMobile={mediaPositionOnMobile}
916927
isBetaContainer={isBetaContainer}
917928
isFlexibleContainer={isFlexibleContainer}
929+
isInAllBoostsTest={isInAllBoostsTest}
918930
>
919931
<Avatar
920932
src={media.avatarUrl}
921933
alt={byline ?? ''}
922934
imageSize={
923935
isBetaContainer ? mediaSize : undefined
924936
}
937+
isInAllBoostsTest={isInAllBoostsTest}
925938
/>
926939
</AvatarContainer>
927940
)}
@@ -1042,6 +1055,9 @@ export const Card = ({
10421055
loading={imageLoading}
10431056
roundedCorners={isOnwardContent}
10441057
aspectRatio={aspectRatio}
1058+
isInAllBoostsTest={
1059+
isInAllBoostsTest
1060+
}
10451061
/>
10461062
</div>
10471063
)}
@@ -1056,6 +1072,7 @@ export const Card = ({
10561072
loading={imageLoading}
10571073
roundedCorners={isOnwardContent}
10581074
aspectRatio={aspectRatio}
1075+
isInAllBoostsTest={isInAllBoostsTest}
10591076
/>
10601077
{isVideoMainMedia && mainMedia.duration > 0 && (
10611078
<div
@@ -1102,6 +1119,7 @@ export const Card = ({
11021119
alt={media.trailImage.altText}
11031120
loading={imageLoading}
11041121
aspectRatio={aspectRatio}
1122+
isInAllBoostsTest={isInAllBoostsTest}
11051123
/>
11061124
)}
11071125
</>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ type Props = {
99
imagePositionOnMobile: MediaPositionType;
1010
isBetaContainer: boolean;
1111
isFlexibleContainer: boolean;
12+
isInAllBoostsTest?: boolean;
1213
};
1314

1415
const sideMarginStyles = css`
@@ -31,6 +32,7 @@ const sizingStyles = (
3132
isFlexibleContainer: boolean,
3233
isVerticalOnDesktop: boolean,
3334
isVerticalOnMobile: boolean,
35+
isInAllBoostsTest = false,
3436
) => {
3537
if (!isBetaContainer) {
3638
switch (imageSize) {
@@ -81,6 +83,26 @@ const sizingStyles = (
8183

8284
switch (imageSize) {
8385
case 'small':
86+
if (isInAllBoostsTest) {
87+
return isFlexibleContainer
88+
? css`
89+
width: 90px;
90+
height: 90px;
91+
${until.tablet} {
92+
height: 150px;
93+
width: 150px;
94+
}
95+
`
96+
: css`
97+
width: 80px;
98+
height: 80px;
99+
${until.tablet} {
100+
height: 150px;
101+
width: 150px;
102+
}
103+
`;
104+
}
105+
84106
return isFlexibleContainer
85107
? css`
86108
width: 90px;
@@ -137,6 +159,7 @@ export const AvatarContainer = ({
137159
imagePositionOnMobile,
138160
isBetaContainer,
139161
isFlexibleContainer,
162+
isInAllBoostsTest,
140163
}: Props) => {
141164
const isVerticalOnDesktop =
142165
imagePositionOnDesktop === 'top' || imagePositionOnDesktop === 'bottom';
@@ -155,6 +178,7 @@ export const AvatarContainer = ({
155178
isFlexibleContainer,
156179
isVerticalOnDesktop,
157180
isVerticalOnMobile,
181+
isInAllBoostsTest,
158182
),
159183
]}
160184
>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const mediaFixedSize = {
1212
type MediaFixedSize = keyof typeof mediaFixedSize;
1313

1414
export type MediaFixedSizeOptions = {
15-
mobile: MediaFixedSize;
15+
mobile?: MediaFixedSize;
1616
tablet?: MediaFixedSize;
1717
desktop?: MediaFixedSize;
1818
};
@@ -38,6 +38,7 @@ type Props = {
3838
mediaType?: CardMediaType;
3939
mediaPositionOnDesktop: MediaPositionType;
4040
mediaPositionOnMobile: MediaPositionType;
41+
fixImageWidth: boolean;
4142
/**
4243
* Forces hiding the image overlay added to pictures & slideshows on hover.
4344
* This is to allow hiding the overlay on slideshow carousels where we don't
@@ -166,7 +167,7 @@ const fixMediaWidth = ({
166167
desktop,
167168
}: MediaFixedSizeOptions) => css`
168169
${until.tablet} {
169-
${fixMediaWidthStyles(mediaFixedSize[mobile])}
170+
${mobile !== undefined && fixMediaWidthStyles(mediaFixedSize[mobile])}
170171
}
171172
${tablet &&
172173
css`
@@ -189,14 +190,13 @@ export const MediaWrapper = ({
189190
mediaType,
190191
mediaPositionOnDesktop,
191192
mediaPositionOnMobile,
193+
fixImageWidth,
192194
hideImageOverlay,
193195
isBetaContainer = false,
194196
padMedia,
195197
}: Props) => {
196198
const isHorizontalOnDesktop =
197199
mediaPositionOnDesktop === 'left' || mediaPositionOnDesktop === 'right';
198-
const isHorizontalOnMobile =
199-
mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right';
200200

201201
return (
202202
<div
@@ -222,7 +222,7 @@ export const MediaWrapper = ({
222222
display: none;
223223
}
224224
`,
225-
isHorizontalOnMobile && fixMediaWidth(mediaFixedSizes),
225+
fixImageWidth && fixMediaWidth(mediaFixedSizes),
226226
isHorizontalOnDesktop &&
227227
css`
228228
${from.tablet} {

‎dotcom-rendering/src/components/CardPicture.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export type Props = {
1818
isCircular?: boolean;
1919
aspectRatio?: AspectRatio;
2020
mobileAspectRatio?: AspectRatio;
21+
isInAllBoostsTest?: boolean;
2122
};
2223

2324
/**
@@ -29,6 +30,7 @@ export type Props = {
2930
const decideImageWidths = (
3031
imageSize: MediaSizeType,
3132
aspectRatio: AspectRatio,
33+
isInAllBoostsTest: boolean,
3234
): [ImageWidthType, ...ImageWidthType[]] => {
3335
switch (imageSize) {
3436
// @TODO missing image size option
@@ -52,7 +54,11 @@ const decideImageWidths = (
5254

5355
case 'small':
5456
return [
55-
{ breakpoint: breakpoints.mobile, width: 120, aspectRatio },
57+
{
58+
breakpoint: breakpoints.mobile,
59+
width: isInAllBoostsTest ? 465 : 120,
60+
aspectRatio,
61+
},
5662
{ breakpoint: breakpoints.tablet, width: 160, aspectRatio },
5763
{ breakpoint: breakpoints.desktop, width: 220, aspectRatio },
5864
];
@@ -210,14 +216,15 @@ export const CardPicture = ({
210216
isCircular,
211217
aspectRatio = '5:3',
212218
mobileAspectRatio,
219+
isInAllBoostsTest = false,
213220
}: Props) => {
214221
if (mainImage === '') {
215222
return null;
216223
}
217224

218225
const sources = generateSources(
219226
mainImage,
220-
decideImageWidths(imageSize, aspectRatio),
227+
decideImageWidths(imageSize, aspectRatio, isInAllBoostsTest),
221228
);
222229

223230
const fallbackSource = getFallbackSource(sources);

‎dotcom-rendering/src/components/DecideContainer.tsx‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ type Props = {
4646
sectionId: string;
4747
frontId?: string;
4848
collectionId: number;
49+
isInAllBoostsTest?: boolean;
4950
containerLevel?: DCRContainerLevel;
5051
/** Feature flag for the labs redesign work */
5152
showLabsRedesign?: boolean;
@@ -63,6 +64,7 @@ export const DecideContainer = ({
6364
sectionId,
6465
frontId,
6566
collectionId,
67+
isInAllBoostsTest,
6668
containerLevel,
6769
showLabsRedesign = false,
6870
}: Props) => {
@@ -246,6 +248,7 @@ export const DecideContainer = ({
246248
absoluteServerTimes={absoluteServerTimes}
247249
imageLoading={imageLoading}
248250
aspectRatio={aspectRatio}
251+
isInAllBoostsTest={!!isInAllBoostsTest}
249252
collectionId={collectionId}
250253
showLabsRedesign={!!showLabsRedesign}
251254
/>
@@ -260,39 +263,66 @@ export const DecideContainer = ({
260263
imageLoading={imageLoading}
261264
aspectRatio={aspectRatio}
262265
containerLevel={containerLevel}
266+
isInAllBoostsTest={!!isInAllBoostsTest}
263267
collectionId={collectionId}
264268
showLabsRedesign={!!showLabsRedesign}
265269
/>
266270
);
267271
case 'scrollable/small':
268-
return (
272+
return isInAllBoostsTest ? (
273+
<ScrollableSmall
274+
trails={trails}
275+
imageLoading={imageLoading}
276+
containerPalette={containerPalette}
277+
showAge={showAge}
278+
absoluteServerTimes={absoluteServerTimes}
279+
aspectRatio={aspectRatio}
280+
isInAllBoostsTest={true}
281+
sectionId={sectionId}
282+
showLabsRedesign={!!showLabsRedesign}
283+
/>
284+
) : (
269285
<Island priority="feature" defer={{ until: 'visible' }}>
270286
<ScrollableSmall
271287
trails={trails}
272288
imageLoading={imageLoading}
273-
containerType={'scrollable/small'}
274289
containerPalette={containerPalette}
275290
showAge={showAge}
276291
absoluteServerTimes={absoluteServerTimes}
277292
aspectRatio={aspectRatio}
293+
isInAllBoostsTest={false}
278294
sectionId={sectionId}
279295
showLabsRedesign={!!showLabsRedesign}
280296
/>
281297
</Island>
282298
);
283299
case 'scrollable/medium':
284-
return (
300+
return isInAllBoostsTest ? (
301+
<ScrollableMedium
302+
trails={trails}
303+
imageLoading={imageLoading}
304+
containerPalette={containerPalette}
305+
showAge={showAge}
306+
absoluteServerTimes={absoluteServerTimes}
307+
aspectRatio={aspectRatio}
308+
sectionId={sectionId}
309+
showLabsRedesign={!!showLabsRedesign}
310+
containerLevel={containerLevel}
311+
isInAllBoostsTest={true}
312+
/>
313+
) : (
285314
<Island priority="feature" defer={{ until: 'visible' }}>
286315
<ScrollableMedium
287316
trails={trails}
288317
imageLoading={imageLoading}
289-
containerType={'scrollable/small'}
290318
containerPalette={containerPalette}
291319
showAge={showAge}
292320
absoluteServerTimes={absoluteServerTimes}
293321
aspectRatio={aspectRatio}
294322
sectionId={sectionId}
295323
showLabsRedesign={!!showLabsRedesign}
324+
containerLevel={containerLevel}
325+
isInAllBoostsTest={isInAllBoostsTest}
296326
/>
297327
</Island>
298328
);
@@ -306,6 +336,7 @@ export const DecideContainer = ({
306336
imageLoading={imageLoading}
307337
aspectRatio={aspectRatio}
308338
showLabsRedesign={!!showLabsRedesign}
339+
isInAllBoostsTest={isInAllBoostsTest}
309340
/>
310341
);
311342
case 'scrollable/feature':

0 commit comments

Comments
 (0)