Skip to content

Commit 2211f62

Browse files
deedeehdeedeeh
authored
Merge pull request #14672 from guardian/dina/fix-duplicated-branding-tag-pages
Fix duplicated branding in tag page containers
2 parents d22be99 + 20e9e7d commit 2211f62

File tree

3 files changed

+326
-9
lines changed

3 files changed

+326
-9
lines changed

‎dotcom-rendering/fixtures/manual/trails.ts‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
ArticleDesign,
33
ArticleDisplay,
44
type ArticleFormat,
5+
ArticleSpecial,
56
Pillar,
67
} from '../../src/lib/articleFormat';
78
import { enhanceSnaps } from '../../src/model/enhanceSnaps';
@@ -679,3 +680,252 @@ export const snapLink: DCRFrontCard = {
679680
headline: 'Headline for snap link',
680681
snapData: enhanceSnaps(snapDataEnriched),
681682
};
683+
684+
export const singleBrandedTrails: [
685+
DCRFrontCard,
686+
DCRFrontCard,
687+
DCRFrontCard,
688+
DCRFrontCard,
689+
DCRFrontCard,
690+
] = [
691+
{
692+
...defaultCardProps,
693+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-6-grand-finale-recap',
694+
headline:
695+
'RE/style recap: Ep6 – it’s the grand finale of Vinted’s fashion show',
696+
byline: 'Louis Staples',
697+
image: {
698+
src: 'https://media.guim.co.uk/fd838308b8572ad216d905ce2c04a09e23d74f86/627_0_2998_2400/master/2998.jpg',
699+
altText: 'Finalists Chiara and Emily.',
700+
},
701+
format: {
702+
theme: ArticleSpecial.Labs,
703+
design: ArticleDesign.Gallery,
704+
display: ArticleDisplay.Standard,
705+
},
706+
dataLinkName: 'labs | group-0 | card-@1',
707+
showQuotedHeadline: false,
708+
},
709+
{
710+
...defaultCardProps,
711+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-5-vip-week-and-penultimate-recap',
712+
headline:
713+
'RE/style recap: Ep5 – it’s VIP week in Vinted’s fashion show (and the penultimate episode!)',
714+
byline: 'Louis Staples',
715+
image: {
716+
src: 'https://media.guim.co.uk/b087d8b79a6367e14ffe61d8251463c484736ab3/500_0_3000_2400/master/3000.jpg',
717+
altText: "Collage of contestants' designs",
718+
},
719+
format: {
720+
theme: ArticleSpecial.Labs,
721+
design: ArticleDesign.Standard,
722+
display: ArticleDisplay.Standard,
723+
},
724+
dataLinkName: 'labs | group-0 | card-@2',
725+
showQuotedHeadline: false,
726+
},
727+
{
728+
...defaultCardProps,
729+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-4-adventure-week-looks-and-challenges',
730+
headline:
731+
'RE/style recap: Ep4 – it’s adventure week on Vinted’s fashion show',
732+
byline: 'Louis Staples',
733+
image: {
734+
src: 'https://media.guim.co.uk/8a415de51f74460c1962ab20292eeb46e8cd6be5/573_0_3000_2400/master/3000.jpg',
735+
altText: "Collage of contestants' designs",
736+
},
737+
format: {
738+
theme: ArticleSpecial.Labs,
739+
design: ArticleDesign.Standard,
740+
display: ArticleDisplay.Standard,
741+
},
742+
dataLinkName: 'labs | group-0 | card-@3',
743+
showQuotedHeadline: false,
744+
},
745+
{
746+
...defaultCardProps,
747+
url: 'https://www.theguardian.com/restyle-recapped/ng-interactive/2025/oct/13/restyle-episode-by-episode',
748+
headline: 'RE/style: episode by episode',
749+
image: {
750+
src: 'https://media.guim.co.uk/0a1b8c0c6e942fde40a0080592d45a9b2b7a586f/0_0_5000_4000/master/5000.jpg',
751+
altText: 'Vinted Re/style competitors',
752+
},
753+
format: {
754+
theme: ArticleSpecial.Labs,
755+
design: ArticleDesign.Standard,
756+
display: ArticleDisplay.Standard,
757+
},
758+
dataLinkName: 'labs | group-0 | card-@4',
759+
showQuotedHeadline: false,
760+
},
761+
{
762+
...defaultCardProps,
763+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-3-denim-week-style-moments',
764+
headline:
765+
'RE/style recap: Ep3 – it’s denim week on Vinted’s fashion show',
766+
format: {
767+
theme: ArticleSpecial.Labs,
768+
design: ArticleDesign.Video,
769+
display: ArticleDisplay.Standard,
770+
},
771+
dataLinkName: 'labs | group-0 | card-@5',
772+
showQuotedHeadline: false,
773+
},
774+
];
775+
776+
// Five different trail examples with varied branding data
777+
export const multipleBrandedTrails: [
778+
DCRFrontCard,
779+
DCRFrontCard,
780+
DCRFrontCard,
781+
DCRFrontCard,
782+
DCRFrontCard,
783+
] = [
784+
{
785+
...defaultCardProps,
786+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-6-grand-finale-recap',
787+
headline:
788+
'RE/style recap: Ep6 – it’s the grand finale of Vinted’s fashion show',
789+
byline: 'Louis Staples',
790+
image: {
791+
src: 'https://media.guim.co.uk/fd838308b8572ad216d905ce2c04a09e23d74f86/627_0_2998_2400/master/2998.jpg',
792+
altText: 'Finalists Chiara and Emily.',
793+
},
794+
format: {
795+
theme: ArticleSpecial.Labs,
796+
design: ArticleDesign.Gallery,
797+
display: ArticleDisplay.Standard,
798+
},
799+
dataLinkName: 'labs | group-0 | card-@1',
800+
showQuotedHeadline: false,
801+
branding: {
802+
brandingType: { name: 'paid-content' },
803+
sponsorName: 'Vinted',
804+
logo: {
805+
src: 'https://static.theguardian.com/commercial/sponsor/21/Jul/2025/bd012231-b67a-44cf-a208-9499714959b2-Vinted_green_280.png',
806+
dimensions: { width: 280, height: 180 },
807+
link: '/',
808+
label: 'Paid for by',
809+
},
810+
aboutThisLink:
811+
'https://www.theguardian.com/info/2016/jan/25/content-funding',
812+
},
813+
},
814+
{
815+
...defaultCardProps,
816+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-5-vip-week-and-penultimate-recap',
817+
headline:
818+
'RE/style recap: Ep5 – it’s VIP week in Vinted’s fashion show (and the penultimate episode!)',
819+
byline: 'Louis Staples',
820+
image: {
821+
src: 'https://media.guim.co.uk/b087d8b79a6367e14ffe61d8251463c484736ab3/500_0_3000_2400/master/3000.jpg',
822+
altText: "Collage of contestants' designs",
823+
},
824+
format: {
825+
theme: ArticleSpecial.Labs,
826+
design: ArticleDesign.Standard,
827+
display: ArticleDisplay.Standard,
828+
},
829+
dataLinkName: 'labs | group-0 | card-@2',
830+
showQuotedHeadline: false,
831+
branding: {
832+
brandingType: { name: 'paid-content' },
833+
sponsorName: 'Vinted',
834+
logo: {
835+
src: 'https://static.theguardian.com/commercial/sponsor/21/Jul/2025/bd012231-b67a-44cf-a208-9499714959b2-Vinted_green_280.png',
836+
dimensions: { width: 280, height: 180 },
837+
link: '/',
838+
label: 'Paid for by',
839+
},
840+
aboutThisLink:
841+
'https://www.theguardian.com/info/2016/jan/25/content-funding',
842+
},
843+
},
844+
{
845+
...defaultCardProps,
846+
url: 'https://www.theguardian.com/monash-university-leading-with-culture/2025/oct/13/meet-the-indigenous-leaders-driving-real-change-with-a-monash-masters-degree',
847+
headline:
848+
'Meet the Indigenous leaders driving real change with a Monash master’s degree',
849+
image: {
850+
src: 'https://media.guim.co.uk/c2ebe5543016330fed2b5b07f2ee18f83c3b1af4/375_0_3750_3000/master/3750.jpg',
851+
altText: 'Graduates throwing their hats in the air',
852+
},
853+
format: {
854+
theme: ArticleSpecial.Labs,
855+
design: ArticleDesign.Standard,
856+
display: ArticleDisplay.Standard,
857+
},
858+
dataLinkName: 'labs | group-0 | card-@3',
859+
showQuotedHeadline: false,
860+
branding: {
861+
brandingType: { name: 'paid-content' },
862+
sponsorName: 'Monash University',
863+
logo: {
864+
src: 'https://static.theguardian.com/commercial/sponsor/23/Sep/2025/9cba6258-2ee6-42cc-89ac-18b982c7c45a-Monash-Uni-Logo.png',
865+
dimensions: { width: 280, height: 180 },
866+
link: '/',
867+
label: 'Paid for by',
868+
},
869+
aboutThisLink:
870+
'https://www.theguardian.com/info/2016/jan/25/content-funding',
871+
},
872+
},
873+
{
874+
...defaultCardProps,
875+
url: 'https://www.theguardian.com/restyle-recapped/2025/oct/13/vinted-fashion-show-episode-4-adventure-week-looks-and-challenges',
876+
headline:
877+
'RE/style recap: Ep4 – it’s adventure week on Vinted’s fashion show',
878+
byline: 'Louis Staples',
879+
image: {
880+
src: 'https://media.guim.co.uk/8a415de51f74460c1962ab20292eeb46e8cd6be5/573_0_3000_2400/master/3000.jpg',
881+
altText: "Collage of contestants' designs",
882+
},
883+
format: {
884+
theme: ArticleSpecial.Labs,
885+
design: ArticleDesign.Standard,
886+
display: ArticleDisplay.Standard,
887+
},
888+
dataLinkName: 'labs | group-0 | card-@4',
889+
showQuotedHeadline: false,
890+
branding: {
891+
brandingType: { name: 'paid-content' },
892+
sponsorName: 'Vinted',
893+
logo: {
894+
src: 'https://static.theguardian.com/commercial/sponsor/21/Jul/2025/bd012231-b67a-44cf-a208-9499714959b2-Vinted_green_280.png',
895+
dimensions: { width: 280, height: 180 },
896+
link: '/',
897+
label: 'Paid for by',
898+
},
899+
aboutThisLink:
900+
'https://www.theguardian.com/info/2016/jan/25/content-funding',
901+
},
902+
},
903+
{
904+
...defaultCardProps,
905+
url: 'https://www.theguardian.com/restyle-recapped/ng-interactive/2025/oct/13/restyle-episode-by-episode',
906+
headline: 'RE/style: episode by episode',
907+
image: {
908+
src: 'https://media.guim.co.uk/0a1b8c0c6e942fde40a0080592d45a9b2b7a586f/0_0_5000_4000/master/5000.jpg',
909+
altText: 'Vinted Re/style competitors',
910+
},
911+
format: {
912+
theme: ArticleSpecial.Labs,
913+
design: ArticleDesign.Video,
914+
display: ArticleDisplay.Standard,
915+
},
916+
dataLinkName: 'labs | group-0 | card-@5',
917+
showQuotedHeadline: false,
918+
branding: {
919+
brandingType: { name: 'paid-content' },
920+
sponsorName: 'Vinted',
921+
logo: {
922+
src: 'https://static.theguardian.com/commercial/sponsor/21/Jul/2025/bd012231-b67a-44cf-a208-9499714959b2-Vinted_green_280.png',
923+
dimensions: { width: 280, height: 180 },
924+
link: '/',
925+
label: 'Paid for by',
926+
},
927+
aboutThisLink:
928+
'https://www.theguardian.com/info/2016/jan/25/content-funding',
929+
},
930+
},
931+
];

‎dotcom-rendering/src/components/DecideContainerByTrails.stories.tsx‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { breakpoints } from '@guardian/source/foundations';
22
import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
3-
import { trails } from '../../fixtures/manual/trails';
3+
import {
4+
multipleBrandedTrails,
5+
singleBrandedTrails,
6+
trails,
7+
} from '../../fixtures/manual/trails';
48
import { DecideContainerByTrails } from './DecideContainerByTrails';
59
import { FrontSection } from './FrontSection';
610

@@ -345,3 +349,64 @@ export const TwelveCardSlow = () => {
345349
);
346350
};
347351
TwelveCardSlow.storyName = 'Slow - Twelve cards';
352+
353+
export const FiveCardWithSingleBranding = () => {
354+
return (
355+
<FrontSection
356+
title="Five cards with single branding"
357+
discussionApiUrl={discussionApiUrl}
358+
editionId={'UK'}
359+
collectionBranding={{
360+
kind: 'paid-content',
361+
isFrontBranding: false,
362+
branding: {
363+
brandingType: {
364+
name: 'paid-content',
365+
},
366+
sponsorName: 'guardian.org',
367+
logo: {
368+
src: 'https://static.theguardian.com/commercial/sponsor/21/Jul/2025/bd012231-b67a-44cf-a208-9499714959b2-Vinted_green_280.png',
369+
dimensions: {
370+
width: 140,
371+
height: 90,
372+
},
373+
link: '/',
374+
label: 'Paid for by',
375+
},
376+
aboutThisLink:
377+
'https://www.theguardian.com/global-development/2021/feb/21/about-the-rights-and-freedom-series',
378+
},
379+
isContainerBranding: true,
380+
hasMultipleBranding: false,
381+
}}
382+
>
383+
<DecideContainerByTrails
384+
trails={singleBrandedTrails}
385+
speed="fast"
386+
imageLoading="eager"
387+
isTagPage={true}
388+
aspectRatio={ASPECT_RATIO}
389+
/>
390+
</FrontSection>
391+
);
392+
};
393+
FiveCardWithSingleBranding.storyName = 'Five cards with single branding';
394+
395+
export const FiveCardWithMultipleBranding = () => {
396+
return (
397+
<FrontSection
398+
title="Five cards with multiple branding"
399+
discussionApiUrl={discussionApiUrl}
400+
editionId={'UK'}
401+
>
402+
<DecideContainerByTrails
403+
trails={multipleBrandedTrails}
404+
speed="fast"
405+
imageLoading="eager"
406+
isTagPage={true}
407+
aspectRatio={ASPECT_RATIO}
408+
/>
409+
</FrontSection>
410+
);
411+
};
412+
FiveCardWithMultipleBranding.storyName = 'Five cards with multiple branding';

‎dotcom-rendering/src/server/handler.front.web.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,22 @@ export const getBadgeUrl = (tag: FETagType): string | undefined => {
8181
const enhanceTagPage = (body: unknown): TagPage => {
8282
const data: FETagPage = validateAsFETagPage(body);
8383

84+
const branding = data.commercialProperties[data.editionId].branding;
85+
86+
const tagPageBranding = branding
87+
? decideTagPageBranding({
88+
branding,
89+
})
90+
: undefined;
91+
8492
const enhancedCards = enhanceCards(data.contents, {
8593
cardInTagPage: true,
8694
pageId: data.pageId,
8795
discussionApiUrl: data.config.discussionApiUrl,
8896
editionId: data.editionId,
97+
stripBranding: !!tagPageBranding,
8998
});
99+
90100
const speed = getSpeedFromTrails(data.contents);
91101

92102
const groupedTrails = groupTrailsByDates(
@@ -95,14 +105,6 @@ const enhanceTagPage = (body: unknown): TagPage => {
95105
speed === 'slow' || data.forceDay,
96106
);
97107

98-
const branding = data.commercialProperties[data.editionId].branding;
99-
100-
const tagPageBranding = branding
101-
? decideTagPageBranding({
102-
branding,
103-
})
104-
: undefined;
105-
106108
return {
107109
...data,
108110
webTitle: tagPageWebTitle(data),

0 commit comments

Comments
 (0)