Skip to content

Commit 2ab44e2

Browse files
dskamiotiscemms1
dskamiotis
and
cemms1
authored
update card headline font for labs when the feature switch is on (#14563)
Co-authored-by: Charlotte <[email protected]>
1 parent 78c302b commit 2ab44e2

File tree

11 files changed

+148
-7
lines changed

11 files changed

+148
-7
lines changed

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1266,7 +1266,7 @@ export const WithBranding = () => {
12661266
>
12671267
<Section title={containerPalette ?? 'Standard'}>
12681268
<UL direction="row" padBottom={true}>
1269-
<LI percentage={'33.333%'} padSides={true}>
1269+
<LI percentage={'25%'} padSides={true}>
12701270
<Card
12711271
{...basicCardProps}
12721272
format={{
@@ -1284,7 +1284,7 @@ export const WithBranding = () => {
12841284
branding={branding}
12851285
/>
12861286
</LI>
1287-
<LI percentage={'33.333%'} padSides={true}>
1287+
<LI percentage={'25%'} padSides={true}>
12881288
<Card
12891289
{...basicCardProps}
12901290
format={{
@@ -1303,7 +1303,7 @@ export const WithBranding = () => {
13031303
branding={branding}
13041304
/>
13051305
</LI>
1306-
<LI percentage={'33.333%'} padSides={true}>
1306+
<LI percentage={'25%'} padSides={true}>
13071307
<Card
13081308
{...basicCardProps}
13091309
format={{
@@ -1321,6 +1321,25 @@ export const WithBranding = () => {
13211321
branding={branding}
13221322
/>
13231323
</LI>
1324+
<LI percentage={'25%'} padSides={true}>
1325+
<Card
1326+
{...basicCardProps}
1327+
format={{
1328+
display: ArticleDisplay.Standard,
1329+
design: ArticleDesign.Standard,
1330+
theme: ArticleSpecial.Labs,
1331+
}}
1332+
headlineText="Redesigned Labs card"
1333+
kickerText="Kicker"
1334+
trailText=""
1335+
mediaPositionOnDesktop="top"
1336+
mediaPositionOnMobile="left"
1337+
mediaSize="small"
1338+
containerPalette={containerPalette}
1339+
branding={branding}
1340+
showLabsRedesign={true}
1341+
/>
1342+
</LI>
13241343
</UL>
13251344
</Section>
13261345
</ContainerOverrides>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,8 @@ export type Props = {
154154
/** Determines if the headline should be positioned within the content or outside the content */
155155
headlinePosition?: 'inner' | 'outer';
156156
isInHideTrailsAbTest?: boolean;
157+
/** Feature flag for the labs redesign work */
158+
showLabsRedesign?: boolean;
157159
};
158160

159161
const starWrapper = (cardHasImage: boolean) => css`
@@ -392,6 +394,7 @@ export const Card = ({
392394
showKickerImage = false,
393395
headlinePosition = 'inner',
394396
isInHideTrailsAbTest = false,
397+
showLabsRedesign = false,
395398
}: Props) => {
396399
const hasSublinks = supportingContent && supportingContent.length > 0;
397400
const sublinkPosition = decideSublinkPosition(
@@ -763,6 +766,7 @@ export const Card = ({
763766
byline={byline}
764767
showByline={showByline}
765768
isExternalLink={isExternalLink}
769+
showLabsRedesign={showLabsRedesign}
766770
/>
767771
{!isUndefined(starRating) ? (
768772
<StarRatingComponent
@@ -1082,6 +1086,7 @@ export const Card = ({
10821086
? media.podcastImage
10831087
: undefined
10841088
}
1089+
showLabsRedesign={showLabsRedesign}
10851090
/>
10861091
{!isUndefined(starRating) ? (
10871092
<StarRatingComponent

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,40 @@ liveStory.decorators = [
218218
]),
219219
];
220220

221+
export const labsHeaderStyle: StoryObj = ({ format }: StoryProps) => (
222+
<>
223+
<Section fullWidth={true} showTopBorder={false} showSideBorders={false}>
224+
<h4>Labs redesign on</h4>
225+
<CardHeadline
226+
headlineText="This is how a card headline in labs looks"
227+
format={format}
228+
kickerText="Labs"
229+
showLabsRedesign={true}
230+
/>
231+
</Section>
232+
233+
<Section fullWidth={true} showTopBorder={false} showSideBorders={false}>
234+
<h4>Labs redesign off</h4>
235+
<CardHeadline
236+
headlineText="This is how a card headline in labs looks"
237+
format={format}
238+
kickerText="Labs"
239+
showLabsRedesign={false}
240+
/>
241+
</Section>
242+
</>
243+
);
244+
labsHeaderStyle.storyName = 'Labs Headline';
245+
labsHeaderStyle.decorators = [
246+
splitTheme([
247+
{
248+
display: ArticleDisplay.Standard,
249+
design: ArticleDesign.Standard,
250+
theme: ArticleSpecial.Labs,
251+
},
252+
]),
253+
];
254+
221255
export const noLineBreak: StoryObj = ({ format }: StoryProps) => (
222256
<Section fullWidth={true} showTopBorder={false} showSideBorders={false}>
223257
<CardHeadline

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

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import {
1616
textSans15,
1717
textSans17,
1818
textSans20,
19+
textSansBold12,
20+
textSansBold15,
21+
textSansBold17,
22+
textSansBold20,
1923
until,
2024
} from '@guardian/source/foundations';
2125
import { Link, SvgExternal } from '@guardian/source/react-components';
@@ -50,6 +54,8 @@ type Props = {
5054
kickerColour?: string;
5155
quoteColour?: string;
5256
kickerImage?: PodcastSeriesImage;
57+
/** Feature flag for the labs redesign work */
58+
showLabsRedesign?: boolean;
5359
};
5460

5561
const sublinkStyles = css`
@@ -91,7 +97,26 @@ const fontFamilies = {
9197
xxxsmall: headlineMedium15,
9298
tiny: headlineMedium14,
9399
},
94-
/** Line height for sans style headlines for labs is overridden to match that of other headlines (1.15) */
100+
/**
101+
* Labs styles
102+
* Line height for sans style headlines for labs is overridden to match that of other headlines (1.15)
103+
*/
104+
textSansBold: {
105+
xxxlarge: `${textSansBold20}\n\tline-height: 1.15;\n`,
106+
xxlarge: `${textSansBold20}\n\tline-height: 1.15;\n`,
107+
xlarge: `${textSansBold20}\n\tline-height: 1.15;\n`,
108+
large: `${textSansBold20}\n\tline-height: 1.15;\n`,
109+
medium: `${textSansBold20}\n\tline-height: 1.15;\n`,
110+
small: `${textSansBold20}\n\tline-height: 1.15;\n`,
111+
xsmall: `${textSansBold20}\n\tline-height: 1.15;\n`,
112+
xxsmall: `${textSansBold17}\n\tline-height: 1.15;\n`,
113+
xxxsmall: `${textSansBold15}\n\tline-height: 1.15;\n`,
114+
tiny: `${textSansBold12}\n\tline-height: 1.15;\n`,
115+
},
116+
/**
117+
* Labs legacy styles
118+
* Line height for sans style headlines for labs is overridden to match that of other headlines (1.15)
119+
*/
95120
textSans: {
96121
xxxlarge: `${textSans20}\n\tline-height: 1.15;\n`,
97122
xxlarge: `${textSans20}\n\tline-height: 1.15;\n`,
@@ -108,6 +133,7 @@ const fontFamilies = {
108133

109134
export enum FontFamily {
110135
HeadlineMedium = 'headlineMedium',
136+
TextSansBold = 'textSansBold',
111137
TextSans = 'textSans',
112138
}
113139

@@ -151,9 +177,15 @@ const getFontSize = (sizes: ResponsiveFontSize, family: FontFamily) => {
151177
`;
152178
};
153179

154-
const getFonts = (format: ArticleFormat, fontSizes: ResponsiveFontSize) => {
180+
const getFonts = (
181+
format: ArticleFormat,
182+
fontSizes: ResponsiveFontSize,
183+
showLabsRedesign: boolean,
184+
) => {
155185
if (format.theme === ArticleSpecial.Labs) {
156-
return getFontSize(fontSizes, FontFamily.TextSans);
186+
return showLabsRedesign
187+
? getFontSize(fontSizes, FontFamily.TextSansBold)
188+
: getFontSize(fontSizes, FontFamily.TextSans);
157189
}
158190

159191
return getFontSize(fontSizes, FontFamily.HeadlineMedium);
@@ -193,11 +225,12 @@ export const CardHeadline = ({
193225
kickerColour = palette('--card-kicker-text'),
194226
quoteColour = palette('--card-quote-icon'),
195227
kickerImage,
228+
showLabsRedesign = false,
196229
}: Props) => {
197230
// The link is only applied directly to the headline if it is a sublink
198231
const isSublink = !!linkTo;
199232

200-
const fontStyles = getFonts(format, fontSizes);
233+
const fontStyles = getFonts(format, fontSizes, showLabsRedesign);
201234

202235
return (
203236
<WithLink linkTo={linkTo}>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ type Props = {
4848
collectionId: number;
4949
containerLevel?: DCRContainerLevel;
5050
isInHideTrailsAbTest?: boolean;
51+
/** Feature flag for the labs redesign work */
52+
showLabsRedesign?: boolean;
5153
};
5254

5355
export const DecideContainer = ({
@@ -64,6 +66,7 @@ export const DecideContainer = ({
6466
collectionId,
6567
containerLevel,
6668
isInHideTrailsAbTest,
69+
showLabsRedesign = false,
6770
}: Props) => {
6871
switch (containerType) {
6972
case 'dynamic/fast':
@@ -247,6 +250,7 @@ export const DecideContainer = ({
247250
aspectRatio={aspectRatio}
248251
collectionId={collectionId}
249252
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
253+
showLabsRedesign={!!showLabsRedesign}
250254
/>
251255
);
252256
case 'flexible/general':
@@ -261,6 +265,7 @@ export const DecideContainer = ({
261265
containerLevel={containerLevel}
262266
collectionId={collectionId}
263267
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
268+
showLabsRedesign={!!showLabsRedesign}
264269
/>
265270
);
266271
case 'scrollable/small':
@@ -276,6 +281,7 @@ export const DecideContainer = ({
276281
aspectRatio={aspectRatio}
277282
sectionId={sectionId}
278283
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
284+
showLabsRedesign={!!showLabsRedesign}
279285
/>
280286
</Island>
281287
);
@@ -292,6 +298,7 @@ export const DecideContainer = ({
292298
aspectRatio={aspectRatio}
293299
sectionId={sectionId}
294300
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
301+
showLabsRedesign={!!showLabsRedesign}
295302
/>
296303
</Island>
297304
);
@@ -305,6 +312,7 @@ export const DecideContainer = ({
305312
imageLoading={imageLoading}
306313
aspectRatio={aspectRatio}
307314
isInHideTrailsAbTest={!!isInHideTrailsAbTest}
315+
showLabsRedesign={!!showLabsRedesign}
308316
/>
309317
);
310318
case 'scrollable/feature':

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ type Props = {
3333
containerLevel?: DCRContainerLevel;
3434
collectionId: number;
3535
isInHideTrailsAbTest?: boolean;
36+
/** Feature flag for the labs redesign work */
37+
showLabsRedesign?: boolean;
3638
};
3739

3840
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -246,6 +248,8 @@ type SplashCardLayoutProps = {
246248
containerLevel: DCRContainerLevel;
247249
collectionId: number;
248250
isInHideTrailsAbTest?: boolean;
251+
/** Feature flag for the labs redesign work */
252+
showLabsRedesign?: boolean;
249253
};
250254

251255
const SplashCardLayout = ({
@@ -259,6 +263,7 @@ const SplashCardLayout = ({
259263
containerLevel,
260264
collectionId,
261265
isInHideTrailsAbTest,
266+
showLabsRedesign,
262267
}: SplashCardLayoutProps) => {
263268
const card = cards[0];
264269
if (!card) return null;
@@ -342,6 +347,7 @@ const SplashCardLayout = ({
342347
showKickerImage={card.format.design === ArticleDesign.Audio}
343348
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
344349
isInHideTrailsAbTest={isInHideTrailsAbTest}
350+
showLabsRedesign={showLabsRedesign}
345351
/>
346352
</LI>
347353
</UL>
@@ -405,6 +411,8 @@ type FullWidthCardLayoutProps = {
405411
containerLevel: DCRContainerLevel;
406412
collectionId: number;
407413
isInHideTrailsAbTest?: boolean;
414+
/** Feature flag for the labs redesign work */
415+
showLabsRedesign?: boolean;
408416
};
409417

410418
const FullWidthCardLayout = ({
@@ -419,6 +427,7 @@ const FullWidthCardLayout = ({
419427
containerLevel,
420428
collectionId,
421429
isInHideTrailsAbTest,
430+
showLabsRedesign,
422431
}: FullWidthCardLayoutProps) => {
423432
const card = cards[0];
424433
if (!card) return null;
@@ -493,6 +502,7 @@ const FullWidthCardLayout = ({
493502
canPlayInline={true}
494503
showKickerImage={card.format.design === ArticleDesign.Audio}
495504
isInHideTrailsAbTest={isInHideTrailsAbTest}
505+
showLabsRedesign={showLabsRedesign}
496506
/>
497507
</LI>
498508
</UL>
@@ -511,6 +521,8 @@ type HalfWidthCardLayoutProps = {
511521
isLastRow: boolean;
512522
containerLevel: DCRContainerLevel;
513523
isInHideTrailsAbTest?: boolean;
524+
/** Feature flag for the labs redesign work */
525+
showLabsRedesign?: boolean;
514526
};
515527

516528
const HalfWidthCardLayout = ({
@@ -525,6 +537,7 @@ const HalfWidthCardLayout = ({
525537
isLastRow,
526538
containerLevel,
527539
isInHideTrailsAbTest,
540+
showLabsRedesign,
528541
}: HalfWidthCardLayoutProps) => {
529542
if (cards.length === 0) return null;
530543

@@ -579,6 +592,7 @@ const HalfWidthCardLayout = ({
579592
headlineSizes={undefined}
580593
canPlayInline={false}
581594
isInHideTrailsAbTest={isInHideTrailsAbTest}
595+
showLabsRedesign={showLabsRedesign}
582596
/>
583597
</LI>
584598
);
@@ -597,6 +611,7 @@ export const FlexibleGeneral = ({
597611
containerLevel = 'Primary',
598612
collectionId,
599613
isInHideTrailsAbTest,
614+
showLabsRedesign,
600615
}: Props) => {
601616
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
602617
...snap,
@@ -645,6 +660,7 @@ export const FlexibleGeneral = ({
645660
containerLevel={containerLevel}
646661
collectionId={collectionId}
647662
isInHideTrailsAbTest={isInHideTrailsAbTest}
663+
showLabsRedesign={showLabsRedesign}
648664
/>
649665
);
650666

@@ -665,6 +681,7 @@ export const FlexibleGeneral = ({
665681
isLastRow={i === groupedCards.length - 1}
666682
containerLevel={containerLevel}
667683
isInHideTrailsAbTest={isInHideTrailsAbTest}
684+
showLabsRedesign={showLabsRedesign}
668685
/>
669686
);
670687
}

0 commit comments

Comments
 (0)