Skip to content

Commit 8f446a1

Browse files
deedeehdeedeeh
authored
Merge pull request #14623 from guardian/dina/enable-branding-on-feature-cards
Enable branding on `FeatureCard`
2 parents e244e09 + 379f9d3 commit 8f446a1

File tree

6 files changed

+107
-24
lines changed

6 files changed

+107
-24
lines changed

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

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { css } from '@emotion/react';
22
import { from } from '@guardian/source/foundations';
33
import type { Meta, StoryObj } from '@storybook/react';
4-
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
4+
import {
5+
ArticleDesign,
6+
ArticleDisplay,
7+
ArticleSpecial,
8+
Pillar,
9+
} from '../lib/articleFormat';
510
import { type Props as CardProps, FeatureCard } from './FeatureCard';
611

712
const cardProps: CardProps = {
@@ -122,6 +127,48 @@ export const Immersive: Story = {
122127
},
123128
};
124129

130+
export const Labs: Story = {
131+
args: {
132+
byline: undefined,
133+
format: {
134+
...cardProps.format,
135+
theme: ArticleSpecial.Labs,
136+
},
137+
containerPalette: 'Branded',
138+
branding: {
139+
logo: {
140+
src: 'https://static.theguardian.com/commercial/sponsor/22/Aug/2025/52dc0276-c2d9-405c-a686-2577c12914d4-ecover_pos_280.png',
141+
link: '#',
142+
label: 'Paid for by',
143+
dimensions: {
144+
width: 120,
145+
height: 60,
146+
},
147+
},
148+
logoForDarkBackground: {
149+
src: 'https://static.theguardian.com/commercial/sponsor/22/Aug/2025/52dc0276-c2d9-405c-a686-2577c12914d4-ecover_pos_280.png',
150+
link: '#',
151+
label: 'Paid for by',
152+
dimensions: {
153+
width: 120,
154+
height: 60,
155+
},
156+
},
157+
sponsorName: 'Guardian Org',
158+
aboutThisLink: '#about',
159+
},
160+
showLabsRedesign: true,
161+
},
162+
};
163+
164+
export const LabsImmersive: Story = {
165+
args: {
166+
...Labs.args,
167+
...Immersive.args,
168+
trailText: undefined,
169+
},
170+
};
171+
125172
export const Review: Story = {
126173
args: {
127174
image: {
@@ -325,3 +372,11 @@ export const WithSublinksImmersive: Story = {
325372
...Immersive.args,
326373
},
327374
};
375+
376+
export const WithSublinksLabsImmersive: Story = {
377+
args: {
378+
...WithSublinks.args,
379+
...Labs.args,
380+
...Immersive.args,
381+
},
382+
};

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

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,17 @@ import {
66
until,
77
} from '@guardian/source/foundations';
88
import { Hide, SvgMediaControlsPlay } from '@guardian/source/react-components';
9-
import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
9+
import {
10+
ArticleDesign,
11+
type ArticleFormat,
12+
ArticleSpecial,
13+
} from '../lib/articleFormat';
1014
import { secondsToDuration } from '../lib/formatTime';
1115
import { getZIndex } from '../lib/getZIndex';
16+
import { getOphanComponents } from '../lib/labs';
1217
import { transparentColour } from '../lib/transparentColour';
1318
import { palette } from '../palette';
19+
import type { Branding } from '../types/branding';
1420
import type { StarRating as Rating } from '../types/content';
1521
import type {
1622
AspectRatio,
@@ -33,6 +39,7 @@ import { FormatBoundary } from './FormatBoundary';
3339
import { Island } from './Island';
3440
import { MediaDuration } from './MediaDuration';
3541
import { Pill } from './Pill';
42+
import { SponsoredContentLabel } from './SponsoredContentLabel';
3643
import { StarRating } from './StarRating/StarRating';
3744
import { SupportingContent } from './SupportingContent';
3845
import { WaveForm } from './WaveForm';
@@ -228,6 +235,10 @@ const waveformStyles = css`
228235
opacity: 0.3;
229236
`;
230237

238+
const wrapperStyles = css`
239+
padding-top: ${space[3]}px;
240+
`;
241+
231242
const getMedia = ({
232243
imageUrl,
233244
imageAltText,
@@ -310,7 +321,7 @@ export type Props = {
310321
/** Used for Ophan tracking */
311322
dataLinkName?: string;
312323
/** Only used on Labs cards */
313-
// branding?: Branding;
324+
branding?: Branding;
314325
/** Supporting content refers to sublinks */
315326
supportingContent?: DCRSupportingContent[];
316327
containerPalette?: DCRContainerPalette;
@@ -357,7 +368,7 @@ export const FeatureCard = ({
357368
kickerText,
358369
showPulsingDot,
359370
dataLinkName,
360-
// branding,
371+
branding,
361372
supportingContent,
362373
containerPalette,
363374
discussionApiUrl,
@@ -397,6 +408,15 @@ export const FeatureCard = ({
397408

398409
const showCommentCount = discussionId !== undefined;
399410

411+
const labsDataAttributes = branding
412+
? getOphanComponents({
413+
branding,
414+
locationPrefix: 'front-card',
415+
})
416+
: undefined;
417+
418+
const isLabs = format.theme === ArticleSpecial.Labs;
419+
400420
return (
401421
<FormatBoundary format={format}>
402422
<ContainerOverrides containerPalette={containerPalette}>
@@ -671,21 +691,6 @@ export const FeatureCard = ({
671691
/>
672692
) : undefined
673693
}
674-
/**TODO: Determine if this is needed */
675-
// cardBranding={
676-
// branding ? (
677-
// <CardBranding
678-
// branding={branding}
679-
// format={format}
680-
// onwardsSource={
681-
// onwardsSource
682-
// }
683-
// containerPalette={
684-
// containerPalette
685-
// }
686-
// />
687-
// ) : undefined
688-
// }
689694
showLivePlayable={false}
690695
mainMedia={mainMedia}
691696
isNewsletter={isNewsletter}
@@ -732,6 +737,22 @@ export const FeatureCard = ({
732737
fillBackgroundOnMobile={true}
733738
/>
734739
)}
740+
{isLabs && branding && showLabsRedesign && (
741+
<div css={wrapperStyles}>
742+
<SponsoredContentLabel
743+
branding={branding}
744+
containerPalette={containerPalette}
745+
orientation="horizontal"
746+
alignment="end"
747+
ophanComponentLink={
748+
labsDataAttributes?.ophanComponentLink
749+
}
750+
ophanComponentName={
751+
labsDataAttributes?.ophanComponentName
752+
}
753+
/>
754+
</div>
755+
)}
735756
</div>
736757
</ContainerOverrides>
737758
</FormatBoundary>

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ type ImmersiveCardLayoutProps = {
8989
absoluteServerTimes: boolean;
9090
imageLoading: Loading;
9191
collectionId: number;
92+
showLabsRedesign?: boolean;
9293
};
9394

9495
/**
@@ -103,6 +104,7 @@ const ImmersiveCardLayout = ({
103104
absoluteServerTimes,
104105
imageLoading,
105106
collectionId,
107+
showLabsRedesign,
106108
}: ImmersiveCardLayoutProps) => {
107109
const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
108110

@@ -127,7 +129,7 @@ const ImmersiveCardLayout = ({
127129
discussionId={card.discussionId}
128130
mainMedia={card.mainMedia}
129131
isExternalLink={card.isExternalLink}
130-
// branding={card.branding}
132+
branding={card.branding}
131133
containerPalette={containerPalette}
132134
trailText={card.trailText}
133135
absoluteServerTimes={absoluteServerTimes}
@@ -139,6 +141,7 @@ const ImmersiveCardLayout = ({
139141
supportingContent={card.supportingContent}
140142
isImmersive={true}
141143
showVideo={card.showVideo}
144+
showLabsRedesign={showLabsRedesign}
142145
/>
143146
</LI>
144147
</UL>
@@ -272,6 +275,7 @@ const SplashCardLayout = ({
272275
absoluteServerTimes={absoluteServerTimes}
273276
imageLoading={imageLoading}
274277
collectionId={collectionId}
278+
showLabsRedesign={showLabsRedesign}
275279
/>
276280
);
277281
}
@@ -444,6 +448,7 @@ const FullWidthCardLayout = ({
444448
absoluteServerTimes={absoluteServerTimes}
445449
imageLoading={imageLoading}
446450
collectionId={collectionId}
451+
showLabsRedesign={showLabsRedesign}
447452
/>
448453
);
449454
}

‎dotcom-rendering/src/components/ScrollableFeature.importable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const ScrollableFeature = ({
6666
discussionId={card.discussionId}
6767
mainMedia={card.mainMedia}
6868
isExternalLink={card.isExternalLink}
69-
// branding={card.branding}
69+
branding={card.branding}
7070
containerPalette={containerPalette}
7171
absoluteServerTimes={absoluteServerTimes}
7272
imageLoading={imageLoading}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const StaticFeatureTwo = ({
7070
discussionId={card.discussionId}
7171
mainMedia={card.mainMedia}
7272
isExternalLink={card.isExternalLink}
73-
// branding={card.branding}
73+
branding={card.branding}
7474
containerPalette={containerPalette}
7575
trailText={undefined}
7676
absoluteServerTimes={absoluteServerTimes}

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6144,7 +6144,6 @@ const editorialButtonText: PaletteFunction = (format: ArticleFormat) => {
61446144

61456145
const featureCardKickerText: PaletteFunction = ({ theme }) => {
61466146
switch (theme) {
6147-
case ArticleSpecial.Labs:
61486147
case ArticleSpecial.SpecialReport:
61496148
case ArticleSpecial.SpecialReportAlt:
61506149
return sourcePalette.neutral[86];
@@ -6155,11 +6154,12 @@ const featureCardKickerText: PaletteFunction = ({ theme }) => {
61556154
case Pillar.Culture:
61566155
case Pillar.Lifestyle:
61576156
return pillarPalette(theme, 600);
6157+
case ArticleSpecial.Labs:
6158+
return sourcePalette.labs[700];
61586159
}
61596160
};
61606161
const featureCardQuoteIcon: PaletteFunction = ({ theme }) => {
61616162
switch (theme) {
6162-
case ArticleSpecial.Labs:
61636163
case ArticleSpecial.SpecialReport:
61646164
case ArticleSpecial.SpecialReportAlt:
61656165
return sourcePalette.neutral[86];
@@ -6170,6 +6170,8 @@ const featureCardQuoteIcon: PaletteFunction = ({ theme }) => {
61706170
case Pillar.Culture:
61716171
case Pillar.Lifestyle:
61726172
return pillarPalette(theme, 600);
6173+
case ArticleSpecial.Labs:
6174+
return sourcePalette.labs[700];
61736175
}
61746176
};
61756177

0 commit comments

Comments
 (0)