Skip to content

Commit 6fa014f

Browse files
domlanderdomlander
authored
Merge pull request #14488 from guardian/doml/no-trails-desktop-test
Hide trail text when in hide-trails AB test
2 parents 906b0f2 + 83c6dbb commit 6fa014f

16 files changed

+100
-21
lines changed

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export type Props = {
153153
showKickerImage?: boolean;
154154
/** Determines if the headline should be positioned within the content or outside the content */
155155
headlinePosition?: 'inner' | 'outer';
156+
isInHideTrailsAbTest?: boolean;
156157
};
157158

158159
const starWrapper = (cardHasImage: boolean) => css`
@@ -390,6 +391,7 @@ export const Card = ({
390391
trailTextSize,
391392
showKickerImage = false,
392393
headlinePosition = 'inner',
394+
isInHideTrailsAbTest = false,
393395
}: Props) => {
394396
const hasSublinks = supportingContent && supportingContent.length > 0;
395397
const sublinkPosition = decideSublinkPosition(
@@ -1090,14 +1092,16 @@ export const Card = ({
10901092
</HeadlineWrapper>
10911093
)}
10921094

1093-
{!!trailText && media?.type !== 'podcast' && (
1094-
<TrailText
1095-
trailText={trailText}
1096-
trailTextSize={trailTextSize}
1097-
padTop={headlinePosition === 'inner'}
1098-
hideUntil={hideTrailTextUntil()}
1099-
/>
1100-
)}
1095+
{!!trailText &&
1096+
media?.type !== 'podcast' &&
1097+
!isInHideTrailsAbTest && (
1098+
<TrailText
1099+
trailText={trailText}
1100+
trailTextSize={trailTextSize}
1101+
padTop={headlinePosition === 'inner'}
1102+
hideUntil={hideTrailTextUntil()}
1103+
/>
1104+
)}
11011105

11021106
{!isOpinionCardWithAvatar && (
11031107
<>

‎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
collectionId: number;
4949
containerLevel?: DCRContainerLevel;
5050
isInOpinionNoAvatarVariant?: boolean;
51+
isInHideTrailsAbTest?: boolean;
5152
};
5253

5354
export const DecideContainer = ({
@@ -64,6 +65,7 @@ export const DecideContainer = ({
6465
collectionId,
6566
containerLevel,
6667
isInOpinionNoAvatarVariant,
68+
isInHideTrailsAbTest,
6769
}: Props) => {
6870
switch (containerType) {
6971
case 'dynamic/fast':
@@ -246,6 +248,7 @@ export const DecideContainer = ({
246248
imageLoading={imageLoading}
247249
aspectRatio={aspectRatio}
248250
collectionId={collectionId}
251+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
249252
/>
250253
);
251254
case 'flexible/general':
@@ -260,6 +263,7 @@ export const DecideContainer = ({
260263
containerLevel={containerLevel}
261264
collectionId={collectionId}
262265
isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
266+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
263267
/>
264268
);
265269
case 'scrollable/small':
@@ -274,6 +278,7 @@ export const DecideContainer = ({
274278
absoluteServerTimes={absoluteServerTimes}
275279
aspectRatio={aspectRatio}
276280
sectionId={sectionId}
281+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
277282
/>
278283
</Island>
279284
);
@@ -290,6 +295,7 @@ export const DecideContainer = ({
290295
aspectRatio={aspectRatio}
291296
sectionId={sectionId}
292297
isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
298+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
293299
/>
294300
</Island>
295301
);
@@ -302,6 +308,7 @@ export const DecideContainer = ({
302308
absoluteServerTimes={absoluteServerTimes}
303309
imageLoading={imageLoading}
304310
aspectRatio={aspectRatio}
311+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
305312
/>
306313
);
307314
case 'scrollable/feature':
@@ -314,6 +321,7 @@ export const DecideContainer = ({
314321
absoluteServerTimes={absoluteServerTimes}
315322
aspectRatio={aspectRatio}
316323
collectionId={collectionId}
324+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
317325
/>
318326
</Island>
319327
);
@@ -326,6 +334,7 @@ export const DecideContainer = ({
326334
imageLoading={imageLoading}
327335
aspectRatio={aspectRatio}
328336
collectionId={collectionId}
337+
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
329338
/>
330339
);
331340
default:

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

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,7 @@ export type Props = {
335335
*/
336336
isImmersive?: boolean;
337337
showVideo?: boolean;
338+
isInHideTrailsAbTest?: boolean;
338339
};
339340

340341
export const FeatureCard = ({
@@ -370,6 +371,7 @@ export const FeatureCard = ({
370371
isNewsletter = false,
371372
isImmersive = false,
372373
showVideo = false,
374+
isInHideTrailsAbTest = false,
373375
}: Props) => {
374376
const hasSublinks = supportingContent && supportingContent.length > 0;
375377

@@ -460,6 +462,9 @@ export const FeatureCard = ({
460462
isImmersive={isImmersive}
461463
byline={byline}
462464
showByline={showByline}
465+
isInHideTrailsAbTest={
466+
isInHideTrailsAbTest
467+
}
463468
/>
464469
</Island>
465470
</div>
@@ -623,18 +628,19 @@ export const FeatureCard = ({
623628
</div>
624629
) : null}
625630

626-
{!!trailText && (
627-
<div css={trailTextWrapper}>
628-
<TrailText
629-
trailText={trailText}
630-
trailTextColour={palette(
631-
'--feature-card-trail-text',
632-
)}
633-
trailTextSize="regular"
634-
padBottom={false}
635-
/>
636-
</div>
637-
)}
631+
{!!trailText &&
632+
!isInHideTrailsAbTest && (
633+
<div css={trailTextWrapper}>
634+
<TrailText
635+
trailText={trailText}
636+
trailTextColour={palette(
637+
'--feature-card-trail-text',
638+
)}
639+
trailTextSize="regular"
640+
padBottom={false}
641+
/>
642+
</div>
643+
)}
638644

639645
<CardFooter
640646
format={format}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ type Props = {
3333
containerLevel?: DCRContainerLevel;
3434
collectionId: number;
3535
isInOpinionNoAvatarVariant?: boolean;
36+
isInHideTrailsAbTest?: boolean;
3637
};
3738

3839
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -87,6 +88,7 @@ type ImmersiveCardLayoutProps = {
8788
absoluteServerTimes: boolean;
8889
imageLoading: Loading;
8990
collectionId: number;
91+
isInHideTrailsAbTest?: boolean;
9092
};
9193

9294
/**
@@ -101,6 +103,7 @@ const ImmersiveCardLayout = ({
101103
absoluteServerTimes,
102104
imageLoading,
103105
collectionId,
106+
isInHideTrailsAbTest,
104107
}: ImmersiveCardLayoutProps) => {
105108
const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
106109

@@ -137,6 +140,7 @@ const ImmersiveCardLayout = ({
137140
supportingContent={card.supportingContent}
138141
isImmersive={true}
139142
showVideo={card.showVideo}
143+
isInHideTrailsAbTest={isInHideTrailsAbTest}
140144
/>
141145
</LI>
142146
</UL>
@@ -242,6 +246,7 @@ type SplashCardLayoutProps = {
242246
isLastRow: boolean;
243247
containerLevel: DCRContainerLevel;
244248
collectionId: number;
249+
isInHideTrailsAbTest?: boolean;
245250
};
246251

247252
const SplashCardLayout = ({
@@ -254,6 +259,7 @@ const SplashCardLayout = ({
254259
isLastRow,
255260
containerLevel,
256261
collectionId,
262+
isInHideTrailsAbTest,
257263
}: SplashCardLayoutProps) => {
258264
const card = cards[0];
259265
if (!card) return null;
@@ -267,6 +273,7 @@ const SplashCardLayout = ({
267273
absoluteServerTimes={absoluteServerTimes}
268274
imageLoading={imageLoading}
269275
collectionId={collectionId}
276+
isInHideTrailsAbTest={isInHideTrailsAbTest}
270277
/>
271278
);
272279
}
@@ -335,6 +342,7 @@ const SplashCardLayout = ({
335342
canPlayInline={true}
336343
showKickerImage={card.format.design === ArticleDesign.Audio}
337344
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
345+
isInHideTrailsAbTest={isInHideTrailsAbTest}
338346
/>
339347
</LI>
340348
</UL>
@@ -397,6 +405,7 @@ type FullWidthCardLayoutProps = {
397405
isLastRow: boolean;
398406
containerLevel: DCRContainerLevel;
399407
collectionId: number;
408+
isInHideTrailsAbTest?: boolean;
400409
};
401410

402411
const FullWidthCardLayout = ({
@@ -410,6 +419,7 @@ const FullWidthCardLayout = ({
410419
isLastRow,
411420
containerLevel,
412421
collectionId,
422+
isInHideTrailsAbTest,
413423
}: FullWidthCardLayoutProps) => {
414424
const card = cards[0];
415425
if (!card) return null;
@@ -435,6 +445,7 @@ const FullWidthCardLayout = ({
435445
absoluteServerTimes={absoluteServerTimes}
436446
imageLoading={imageLoading}
437447
collectionId={collectionId}
448+
isInHideTrailsAbTest={isInHideTrailsAbTest}
438449
/>
439450
);
440451
}
@@ -482,6 +493,7 @@ const FullWidthCardLayout = ({
482493
liveUpdatesPosition={liveUpdatesPosition}
483494
canPlayInline={true}
484495
showKickerImage={card.format.design === ArticleDesign.Audio}
496+
isInHideTrailsAbTest={isInHideTrailsAbTest}
485497
/>
486498
</LI>
487499
</UL>
@@ -499,6 +511,7 @@ type HalfWidthCardLayoutProps = {
499511
aspectRatio: AspectRatio;
500512
isLastRow: boolean;
501513
containerLevel: DCRContainerLevel;
514+
isInHideTrailsAbTest?: boolean;
502515
};
503516

504517
const HalfWidthCardLayout = ({
@@ -512,6 +525,7 @@ const HalfWidthCardLayout = ({
512525
aspectRatio,
513526
isLastRow,
514527
containerLevel,
528+
isInHideTrailsAbTest,
515529
}: HalfWidthCardLayoutProps) => {
516530
if (cards.length === 0) return null;
517531

@@ -565,6 +579,7 @@ const HalfWidthCardLayout = ({
565579
trailText={undefined}
566580
headlineSizes={undefined}
567581
canPlayInline={false}
582+
isInHideTrailsAbTest={isInHideTrailsAbTest}
568583
/>
569584
</LI>
570585
);
@@ -583,6 +598,7 @@ export const FlexibleGeneral = ({
583598
containerLevel = 'Primary',
584599
collectionId,
585600
isInOpinionNoAvatarVariant,
601+
isInHideTrailsAbTest,
586602
}: Props) => {
587603
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
588604
...snap,
@@ -614,6 +630,7 @@ export const FlexibleGeneral = ({
614630
isLastRow={cards.length === 0}
615631
containerLevel={containerLevel}
616632
collectionId={collectionId}
633+
isInHideTrailsAbTest={isInHideTrailsAbTest}
617634
/>
618635
)}
619636
{groupedCards.map((row, i) => {
@@ -632,6 +649,7 @@ export const FlexibleGeneral = ({
632649
isLastRow={i === groupedCards.length - 1}
633650
containerLevel={containerLevel}
634651
collectionId={collectionId}
652+
isInHideTrailsAbTest={isInHideTrailsAbTest}
635653
/>
636654
);
637655

@@ -651,6 +669,7 @@ export const FlexibleGeneral = ({
651669
aspectRatio={aspectRatio}
652670
isLastRow={i === groupedCards.length - 1}
653671
containerLevel={containerLevel}
672+
isInHideTrailsAbTest={isInHideTrailsAbTest}
654673
/>
655674
);
656675
}

0 commit comments

Comments
 (0)