Skip to content

Commit 5f8e3e3

Browse files
nitro-markynitro-marky
authored
Merge pull request #2378 from guardian/ma/decidePalette
Introduce `decidePalette` to DCR
2 parents c121635 + 39e75eb commit 5f8e3e3

18 files changed

+791
-562
lines changed

‎index.d.ts

Lines changed: 528 additions & 527 deletions
Large diffs are not rendered by default.

‎src/lib/pillars.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Special, Pillar, Theme } from '@guardian/types';
1+
import { Special, Pillar } from '@guardian/types';
2+
import type { Theme } from '@guardian/types';
23

34
import {
45
news as _news,

‎src/web/components/App.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ import { getCountryCode } from '@frontend/web/lib/getCountryCode';
4343
import { getUser } from '@root/src/web/lib/getUser';
4444

4545
import { FocusStyleManager } from '@guardian/src-foundations/utils';
46-
import { Display, Design, Format } from '@guardian/types';
46+
import { Display, Design } from '@guardian/types';
47+
import type { Format } from '@guardian/types';
4748
import { incrementAlreadyVisited } from '@root/src/web/lib/alreadyVisited';
4849
import { incrementDailyArticleCount } from '@frontend/web/lib/dailyArticleCount';
4950
import { getArticleCountConsent } from '@frontend/web/lib/contributions';

‎src/web/components/ArticleBody.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { headline } from '@guardian/src-foundations/typography';
66
import { between } from '@guardian/src-foundations/mq';
77
import { pillarMap, pillarPalette } from '@root/src/lib/pillars';
88
import { ArticleRenderer } from '@root/src/web/lib/ArticleRenderer';
9-
import { Display, Pillar, Format } from '@guardian/types';
9+
import { Display, Pillar } from '@guardian/types';
10+
import type { Format } from '@guardian/types';
1011

1112
type Props = {
1213
format: Format;

‎src/web/components/ArticleHeadline.stories.tsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ArticleContainer } from './ArticleContainer';
1010
import { MainMedia } from './MainMedia';
1111
import { Standfirst } from './Standfirst';
1212
import { mainMediaElements } from './ArticleHeadline.mocks';
13+
import { decidePalette } from '../lib/decidePalette';
1314

1415
export default {
1516
component: ArticleHeadline,
@@ -26,6 +27,11 @@ export const ArticleStory = () => (
2627
<ArticleHeadline
2728
headlineString="This is how the default headline looks"
2829
display={Display.Standard}
30+
palette={decidePalette({
31+
display: Display.Standard,
32+
design: Design.Article,
33+
theme: Pillar.News,
34+
})}
2935
design={Design.Article}
3036
pillar={Pillar.News}
3137
tags={[]}
@@ -46,6 +52,11 @@ export const oldHeadline = () => (
4652
<ArticleHeadline
4753
headlineString="This is an old headline"
4854
display={Display.Standard}
55+
palette={decidePalette({
56+
display: Display.Standard,
57+
design: Design.Article,
58+
theme: Pillar.News,
59+
})}
4960
design={Design.Article}
5061
pillar={Pillar.News}
5162
tags={[
@@ -73,6 +84,11 @@ export const Feature = () => (
7384
<ArticleHeadline
7485
headlineString="This is a Feature headline, it has colour applied based on pillar"
7586
display={Display.Standard}
87+
palette={decidePalette({
88+
display: Display.Standard,
89+
design: Design.Feature,
90+
theme: Pillar.Lifestyle,
91+
})}
7692
design={Design.Feature}
7793
pillar={Pillar.Lifestyle}
7894
tags={[]}
@@ -98,6 +114,11 @@ export const ShowcaseInterview = () => (
98114
<ArticleHeadline
99115
headlineString="This is an Interview headline. It has a black background, white text and overlays the image below it (as a sibling)"
100116
display={Display.Showcase}
117+
palette={decidePalette({
118+
display: Display.Showcase,
119+
design: Design.Interview,
120+
theme: Pillar.Culture,
121+
})}
101122
design={Design.Interview}
102123
pillar={Pillar.Culture}
103124
tags={[]}
@@ -133,6 +154,11 @@ export const ShowcaseInterviewNobyline = () => (
133154
<ArticleHeadline
134155
headlineString="This is an Interview headline. It has a black background, white text and overlays the image below it (as a sibling)"
135156
display={Display.Showcase}
157+
palette={decidePalette({
158+
display: Display.Showcase,
159+
design: Design.Interview,
160+
theme: Pillar.Culture,
161+
})}
136162
design={Design.Interview}
137163
pillar={Pillar.Culture}
138164
tags={[]}
@@ -165,6 +191,11 @@ export const Interview = () => (
165191
<ArticleHeadline
166192
headlineString="This is an Interview headline. It has a black background, white text and overlays the image below it (as a sibling)"
167193
display={Display.Standard}
194+
palette={decidePalette({
195+
display: Display.Standard,
196+
design: Design.Interview,
197+
theme: Pillar.Culture,
198+
})}
168199
design={Design.Interview}
169200
pillar={Pillar.Culture}
170201
tags={[]}
@@ -198,6 +229,11 @@ export const InterviewNoByline = () => (
198229
<ArticleHeadline
199230
headlineString="This is an Interview headline. It has a black background, white text and overlays the image below it (as a sibling)"
200231
display={Display.Standard}
232+
palette={decidePalette({
233+
display: Display.Standard,
234+
design: Design.Interview,
235+
theme: Pillar.Culture,
236+
})}
201237
design={Design.Interview}
202238
pillar={Pillar.Culture}
203239
tags={[]}
@@ -233,6 +269,11 @@ export const Comment = () => (
233269
<ArticleHeadline
234270
headlineString="Yes, the billionaire club is one we really need to shut down"
235271
display={Display.Standard}
272+
palette={decidePalette({
273+
display: Display.Showcase,
274+
design: Design.Comment,
275+
theme: Pillar.Opinion,
276+
})}
236277
design={Design.Comment}
237278
pillar={Pillar.Opinion}
238279
tags={[]}
@@ -253,6 +294,11 @@ export const Analysis = () => (
253294
<ArticleHeadline
254295
headlineString="This is an Analysis headline, it's underlined. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
255296
display={Display.Standard}
297+
palette={decidePalette({
298+
display: Display.Standard,
299+
design: Design.Analysis,
300+
theme: Pillar.News,
301+
})}
256302
design={Design.Analysis}
257303
pillar={Pillar.News}
258304
tags={[]}
@@ -273,6 +319,11 @@ export const Media = () => (
273319
<ArticleHeadline
274320
headlineString="This is the headline you see when design type is Media"
275321
display={Display.Standard}
322+
palette={decidePalette({
323+
display: Display.Standard,
324+
design: Design.Media,
325+
theme: Pillar.News,
326+
})}
276327
design={Design.Media}
277328
pillar={Pillar.News}
278329
tags={[]}
@@ -293,6 +344,11 @@ export const Review = () => (
293344
<ArticleHeadline
294345
headlineString="This is the headline you see when design type is Review"
295346
display={Display.Standard}
347+
palette={decidePalette({
348+
display: Display.Standard,
349+
design: Design.Review,
350+
theme: Pillar.News,
351+
})}
296352
design={Design.Review}
297353
pillar={Pillar.News}
298354
tags={[]}
@@ -313,6 +369,11 @@ export const PhotoEssay = () => (
313369
<ArticleHeadline
314370
headlineString="This is the headline you see when design type is PhotoEssay"
315371
display={Display.Standard}
372+
palette={decidePalette({
373+
display: Display.Standard,
374+
design: Design.PhotoEssay,
375+
theme: Pillar.News,
376+
})}
316377
design={Design.PhotoEssay}
317378
pillar={Pillar.News}
318379
tags={[]}
@@ -333,6 +394,11 @@ export const Quiz = () => (
333394
<ArticleHeadline
334395
headlineString="This is the headline you see when design type is Quiz"
335396
display={Display.Standard}
397+
palette={decidePalette({
398+
display: Display.Standard,
399+
design: Design.Quiz,
400+
theme: Pillar.News,
401+
})}
336402
design={Design.Quiz}
337403
pillar={Pillar.News}
338404
tags={[]}
@@ -353,6 +419,11 @@ export const Recipe = () => (
353419
<ArticleHeadline
354420
headlineString="This is the headline you see when design type is Recipe"
355421
display={Display.Standard}
422+
palette={decidePalette({
423+
display: Display.Standard,
424+
design: Design.Recipe,
425+
theme: Pillar.News,
426+
})}
356427
design={Design.Recipe}
357428
pillar={Pillar.News}
358429
tags={[]}
@@ -373,6 +444,11 @@ export const Immersive = () => (
373444
<ArticleHeadline
374445
headlineString="This is the headline you see when display type is Immersive"
375446
display={Display.Immersive}
447+
palette={decidePalette({
448+
display: Display.Immersive,
449+
design: Design.Article,
450+
theme: Pillar.News,
451+
})}
376452
design={Design.Article}
377453
pillar={Pillar.News}
378454
tags={[]}
@@ -393,6 +469,11 @@ export const ImmersiveNoMainMedia = () => (
393469
<ArticleHeadline
394470
headlineString="This is the headline you see when design type is PrintShop, which has no main media"
395471
display={Display.Immersive}
472+
palette={decidePalette({
473+
display: Display.Immersive,
474+
design: Design.Article,
475+
theme: Pillar.News,
476+
})}
396477
design={Design.PrintShop}
397478
pillar={Pillar.News}
398479
tags={[]}
@@ -417,6 +498,11 @@ export const ImmersiveComment = () => (
417498
<ArticleHeadline
418499
headlineString="This is the headline you see when display type is Immersive and design Comment"
419500
display={Display.Immersive}
501+
palette={decidePalette({
502+
display: Display.Immersive,
503+
design: Design.Comment,
504+
theme: Pillar.News,
505+
})}
420506
design={Design.Comment}
421507
pillar={Pillar.News}
422508
tags={[]}
@@ -437,6 +523,11 @@ export const GuardianView = () => (
437523
<ArticleHeadline
438524
headlineString="This is the headline you see when design type is GuardianView"
439525
display={Display.Standard}
526+
palette={decidePalette({
527+
display: Display.Standard,
528+
design: Design.GuardianView,
529+
theme: Pillar.News,
530+
})}
440531
design={Design.GuardianView}
441532
pillar={Pillar.News}
442533
tags={[]}
@@ -457,6 +548,11 @@ export const MatchReport = () => (
457548
<ArticleHeadline
458549
headlineString="This is the headline you see when design type is MatchReport"
459550
display={Display.Standard}
551+
palette={decidePalette({
552+
display: Display.Standard,
553+
design: Design.MatchReport,
554+
theme: Pillar.News,
555+
})}
460556
design={Design.MatchReport}
461557
pillar={Pillar.News}
462558
tags={[]}
@@ -477,6 +573,11 @@ export const SpecialReport = () => (
477573
<ArticleHeadline
478574
headlineString="This is the headline you see when pillar is SpecialReport"
479575
display={Display.Standard}
576+
palette={decidePalette({
577+
display: Display.Standard,
578+
design: Design.Article,
579+
theme: Pillar.News,
580+
})}
480581
design={Design.Article}
481582
pillar={Pillar.News}
482583
tags={[]}
@@ -497,6 +598,11 @@ export const Live = () => (
497598
<ArticleHeadline
498599
headlineString="This is the headline you see when design type is Live"
499600
display={Display.Standard}
601+
palette={decidePalette({
602+
display: Display.Standard,
603+
design: Design.Live,
604+
theme: Pillar.News,
605+
})}
500606
design={Design.Live}
501607
pillar={Pillar.News}
502608
tags={[]}

0 commit comments

Comments
 (0)