Skip to content

Commit 4320ee8

Browse files
domlanderdomlander
authored
Merge pull request #14108 from guardian/doml/hide-trails-experiment
Setup Hide Trails AB test
2 parents 7c2cf7c + 35f25f7 commit 4320ee8

17 files changed

+123
-17
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ export type Props = {
141141
trailTextSize?: TrailTextSize;
142142
/** A kicker image is seperate to the main media and renders as part of the kicker */
143143
showKickerImage?: boolean;
144+
isInHideTrailsAbTest?: boolean;
144145
};
145146

146147
const starWrapper = (cardHasImage: boolean) => css`
@@ -407,6 +408,7 @@ export const Card = ({
407408
showTopBarMobile = true,
408409
trailTextSize,
409410
showKickerImage = false,
411+
isInHideTrailsAbTest = false,
410412
}: Props) => {
411413
const hasSublinks = supportingContent && supportingContent.length > 0;
412414
const sublinkPosition = decideSublinkPosition(
@@ -1173,6 +1175,7 @@ export const Card = ({
11731175
trailTextSize={trailTextSize}
11741176
padTop={headlinePosition === 'inner'}
11751177
hideUntil={hideTrailTextUntil()}
1178+
isInHideTrailsAbTest={isInHideTrailsAbTest}
11761179
/>
11771180
)}
11781181

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

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,13 @@ import {
44
space,
55
textSans14,
66
textSans17,
7+
until,
78
} from '@guardian/source/foundations';
89
import { Hide } from '@guardian/source/react-components';
910
import { palette } from '../../../palette';
1011

1112
export type TrailTextSize = 'regular' | 'large';
1213

13-
type Props = {
14-
trailText: string;
15-
trailTextSize?: TrailTextSize;
16-
/** Optionally overrides the trail text colour */
17-
trailTextColour?: string;
18-
/** Controls visibility of trail text on various breakpoints */
19-
hideUntil?: 'tablet' | 'desktop';
20-
/** Defaults to `true`. Adds padding to the bottom of the trail text */
21-
padBottom?: boolean;
22-
/** Adds padding to the top of the trail text */
23-
padTop?: boolean;
24-
};
25-
2614
const trailTextStyles = css`
2715
display: flex;
2816
flex-direction: column;
@@ -46,13 +34,34 @@ const fontStyles = (trailTextSize: TrailTextSize) => css`
4634
}
4735
`;
4836

37+
const isInHideTrailsAbTestStyles = css`
38+
${until.tablet} {
39+
display: none;
40+
}
41+
`;
42+
43+
type Props = {
44+
trailText: string;
45+
trailTextSize?: TrailTextSize;
46+
/** Optionally overrides the trail text colour */
47+
trailTextColour?: string;
48+
/** Controls visibility of trail text on various breakpoints */
49+
hideUntil?: 'tablet' | 'desktop';
50+
/** Defaults to `true`. Adds padding to the bottom of the trail text */
51+
padBottom?: boolean;
52+
/** Adds padding to the top of the trail text */
53+
padTop?: boolean;
54+
isInHideTrailsAbTest?: boolean;
55+
};
56+
4957
export const TrailText = ({
5058
trailText: text,
5159
trailTextSize = 'regular',
5260
trailTextColour = palette('--card-trail-text'),
5361
hideUntil,
5462
padBottom = true,
5563
padTop = false,
64+
isInHideTrailsAbTest = false,
5665
}: Props) => {
5766
const trailText = (
5867
<div
@@ -64,6 +73,7 @@ export const TrailText = ({
6473
fontStyles(trailTextSize),
6574
padBottom && bottomPadding,
6675
padTop && topPadding,
76+
isInHideTrailsAbTest && isInHideTrailsAbTestStyles,
6777
]}
6878
>
6979
<div

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ type Props = {
4848
frontId?: string;
4949
collectionId: number;
5050
containerLevel?: DCRContainerLevel;
51+
isInHideTrailsAbTest?: boolean;
5152
};
5253

5354
export const DecideContainer = ({
@@ -63,6 +64,7 @@ export const DecideContainer = ({
6364
frontId,
6465
collectionId,
6566
containerLevel,
67+
isInHideTrailsAbTest,
6668
}: Props) => {
6769
// If you add a new container type which contains an MPU, you must also add it to
6870
switch (containerType) {
@@ -255,6 +257,7 @@ export const DecideContainer = ({
255257
absoluteServerTimes={absoluteServerTimes}
256258
imageLoading={imageLoading}
257259
aspectRatio={aspectRatio}
260+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
258261
/>
259262
);
260263
case 'flexible/general':
@@ -268,6 +271,7 @@ export const DecideContainer = ({
268271
aspectRatio={aspectRatio}
269272
containerLevel={containerLevel}
270273
collectionId={collectionId}
274+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
271275
/>
272276
);
273277
case 'scrollable/small':
@@ -282,6 +286,7 @@ export const DecideContainer = ({
282286
absoluteServerTimes={absoluteServerTimes}
283287
aspectRatio={aspectRatio}
284288
sectionId={sectionId}
289+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
285290
/>
286291
</Island>
287292
);
@@ -297,6 +302,7 @@ export const DecideContainer = ({
297302
absoluteServerTimes={absoluteServerTimes}
298303
aspectRatio={aspectRatio}
299304
sectionId={sectionId}
305+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
300306
/>
301307
</Island>
302308
);
@@ -309,6 +315,7 @@ export const DecideContainer = ({
309315
absoluteServerTimes={absoluteServerTimes}
310316
imageLoading={imageLoading}
311317
aspectRatio={aspectRatio}
318+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
312319
/>
313320
);
314321
case 'scrollable/feature':
@@ -321,6 +328,7 @@ export const DecideContainer = ({
321328
absoluteServerTimes={absoluteServerTimes}
322329
aspectRatio={aspectRatio}
323330
collectionId={collectionId}
331+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
324332
/>
325333
</Island>
326334
);
@@ -333,6 +341,7 @@ export const DecideContainer = ({
333341
imageLoading={imageLoading}
334342
aspectRatio={aspectRatio}
335343
collectionId={collectionId}
344+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
336345
/>
337346
);
338347
default:

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { css } from '@emotion/react';
2-
import { from, space } from '@guardian/source/foundations';
2+
import { from, space, until } from '@guardian/source/foundations';
33
import { Hide, SvgMediaControlsPlay } from '@guardian/source/react-components';
44
import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
55
import { secondsToDuration } from '../lib/formatTime';
@@ -203,6 +203,12 @@ const trailTextWrapper = css`
203203
margin-top: ${space[3]}px;
204204
`;
205205

206+
const isInHideTrailsAbTestStyles = css`
207+
${until.tablet} {
208+
display: none;
209+
}
210+
`;
211+
206212
const videoPillStyles = css`
207213
position: absolute;
208214
top: ${space[2]}px;
@@ -330,6 +336,7 @@ export type Props = {
330336
*/
331337
isImmersive?: boolean;
332338
showVideo?: boolean;
339+
isInHideTrailsAbTest?: boolean;
333340
};
334341

335342
export const FeatureCard = ({
@@ -367,6 +374,7 @@ export const FeatureCard = ({
367374
isNewsletter = false,
368375
isImmersive = false,
369376
showVideo = false,
377+
isInHideTrailsAbTest = false,
370378
}: Props) => {
371379
const hasSublinks = supportingContent && supportingContent.length > 0;
372380

@@ -459,6 +467,9 @@ export const FeatureCard = ({
459467
isImmersive={isImmersive}
460468
byline={byline}
461469
showByline={showByline}
470+
isInHideTrailsAbTest={
471+
isInHideTrailsAbTest
472+
}
462473
/>
463474
</Island>
464475
</div>
@@ -628,7 +639,13 @@ export const FeatureCard = ({
628639
) : null}
629640

630641
{!!trailText && (
631-
<div css={trailTextWrapper}>
642+
<div
643+
css={[
644+
trailTextWrapper,
645+
isInHideTrailsAbTest &&
646+
isInHideTrailsAbTestStyles,
647+
]}
648+
>
632649
<TrailText
633650
trailText={trailText}
634651
trailTextColour={palette(

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ type Props = {
3232
aspectRatio: AspectRatio;
3333
containerLevel?: DCRContainerLevel;
3434
collectionId: number;
35+
isInHideTrailsAbTest?: boolean;
3536
};
3637

3738
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -92,12 +93,14 @@ const ImmersiveCardLayout = ({
9293
absoluteServerTimes,
9394
imageLoading,
9495
collectionId,
96+
isInHideTrailsAbTest,
9597
}: {
9698
card: DCRFrontCard;
9799
containerPalette?: DCRContainerPalette;
98100
absoluteServerTimes: boolean;
99101
imageLoading: Loading;
100102
collectionId: number;
103+
isInHideTrailsAbTest?: boolean;
101104
}) => {
102105
const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
103106

@@ -134,6 +137,7 @@ const ImmersiveCardLayout = ({
134137
supportingContent={card.supportingContent}
135138
isImmersive={true}
136139
showVideo={card.showVideo}
140+
isInHideTrailsAbTest={isInHideTrailsAbTest}
137141
/>
138142
</LI>
139143
</UL>
@@ -229,7 +233,7 @@ const decideSplashCardProperties = (
229233
}
230234
};
231235

232-
export const SplashCardLayout = ({
236+
const SplashCardLayout = ({
233237
cards,
234238
containerPalette,
235239
showAge,
@@ -239,6 +243,7 @@ export const SplashCardLayout = ({
239243
isLastRow,
240244
containerLevel,
241245
collectionId,
246+
isInHideTrailsAbTest,
242247
}: {
243248
cards: DCRFrontCard[];
244249
imageLoading: Loading;
@@ -249,6 +254,7 @@ export const SplashCardLayout = ({
249254
isLastRow: boolean;
250255
containerLevel: DCRContainerLevel;
251256
collectionId: number;
257+
isInHideTrailsAbTest?: boolean;
252258
}) => {
253259
const card = cards[0];
254260
if (!card) return null;
@@ -262,6 +268,7 @@ export const SplashCardLayout = ({
262268
absoluteServerTimes={absoluteServerTimes}
263269
imageLoading={imageLoading}
264270
collectionId={collectionId}
271+
isInHideTrailsAbTest={isInHideTrailsAbTest}
265272
/>
266273
);
267274
}
@@ -329,6 +336,7 @@ export const SplashCardLayout = ({
329336
trailTextSize={trailTextSize}
330337
canPlayInline={true}
331338
showKickerImage={card.format.design === ArticleDesign.Audio}
339+
isInHideTrailsAbTest={isInHideTrailsAbTest}
332340
/>
333341
</LI>
334342
</UL>
@@ -391,6 +399,7 @@ const FullWidthCardLayout = ({
391399
isLastRow,
392400
containerLevel,
393401
collectionId,
402+
isInHideTrailsAbTest,
394403
}: {
395404
cards: DCRFrontCard[];
396405
imageLoading: Loading;
@@ -402,6 +411,7 @@ const FullWidthCardLayout = ({
402411
isLastRow: boolean;
403412
containerLevel: DCRContainerLevel;
404413
collectionId: number;
414+
isInHideTrailsAbTest?: boolean;
405415
}) => {
406416
const card = cards[0];
407417
if (!card) return null;
@@ -427,6 +437,7 @@ const FullWidthCardLayout = ({
427437
absoluteServerTimes={absoluteServerTimes}
428438
imageLoading={imageLoading}
429439
collectionId={collectionId}
440+
isInHideTrailsAbTest={isInHideTrailsAbTest}
430441
/>
431442
);
432443
}
@@ -474,6 +485,7 @@ const FullWidthCardLayout = ({
474485
liveUpdatesPosition={liveUpdatesPosition}
475486
canPlayInline={true}
476487
showKickerImage={card.format.design === ArticleDesign.Audio}
488+
isInHideTrailsAbTest={isInHideTrailsAbTest}
477489
/>
478490
</LI>
479491
</UL>
@@ -491,6 +503,7 @@ const HalfWidthCardLayout = ({
491503
aspectRatio,
492504
isLastRow,
493505
containerLevel,
506+
isInHideTrailsAbTest,
494507
}: {
495508
cards: DCRFrontCard[];
496509
imageLoading: Loading;
@@ -502,6 +515,7 @@ const HalfWidthCardLayout = ({
502515
aspectRatio: AspectRatio;
503516
isLastRow: boolean;
504517
containerLevel: DCRContainerLevel;
518+
isInHideTrailsAbTest?: boolean;
505519
}) => {
506520
if (cards.length === 0) return null;
507521

@@ -555,6 +569,7 @@ const HalfWidthCardLayout = ({
555569
trailText={undefined}
556570
headlineSizes={undefined}
557571
canPlayInline={false}
572+
isInHideTrailsAbTest={isInHideTrailsAbTest}
558573
/>
559574
</LI>
560575
);
@@ -572,6 +587,7 @@ export const FlexibleGeneral = ({
572587
aspectRatio,
573588
containerLevel = 'Primary',
574589
collectionId,
590+
isInHideTrailsAbTest,
575591
}: Props) => {
576592
const splash = [...groupedTrails.splash].slice(0, 1);
577593
const cards = [...groupedTrails.standard].slice(0, 19);
@@ -590,6 +606,7 @@ export const FlexibleGeneral = ({
590606
isLastRow={cards.length === 0}
591607
containerLevel={containerLevel}
592608
collectionId={collectionId}
609+
isInHideTrailsAbTest={isInHideTrailsAbTest}
593610
/>
594611
)}
595612

@@ -608,6 +625,7 @@ export const FlexibleGeneral = ({
608625
isLastRow={i === groupedCards.length - 1}
609626
containerLevel={containerLevel}
610627
collectionId={collectionId}
628+
isInHideTrailsAbTest={isInHideTrailsAbTest}
611629
/>
612630
);
613631

@@ -626,6 +644,7 @@ export const FlexibleGeneral = ({
626644
aspectRatio={aspectRatio}
627645
isLastRow={i === groupedCards.length - 1}
628646
containerLevel={containerLevel}
647+
isInHideTrailsAbTest={isInHideTrailsAbTest}
629648
/>
630649
);
631650
}

0 commit comments

Comments
 (0)