Skip to content

Commit fcd7e2d

Browse files
domlanderdomlander
authored
Merge pull request #14359 from guardian/doml/scrollable-highlights-quotes
Scrollable highlights: Use colour for quote icon
2 parents 8a12175 + fa05f9a commit fcd7e2d

File tree

7 files changed

+171
-4
lines changed

7 files changed

+171
-4
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ type Props = {
4848
headlineColour?: string;
4949
/** Optional override of the standard card kicker colour */
5050
kickerColour?: string;
51+
quoteColour?: string;
5152
kickerImage?: PodcastSeriesImage;
5253
};
5354

@@ -190,6 +191,7 @@ export const CardHeadline = ({
190191
isExternalLink,
191192
headlineColour = palette('--card-headline'),
192193
kickerColour = palette('--card-kicker-text'),
194+
quoteColour = palette('--card-quote-icon'),
193195
kickerImage,
194196
}: Props) => {
195197
// The link is only applied directly to the headline if it is a sublink
@@ -220,7 +222,7 @@ export const CardHeadline = ({
220222
image={kickerImage}
221223
/>
222224
)}
223-
{showQuotes && <QuoteIcon colour={kickerColour} />}
225+
{showQuotes && <QuoteIcon colour={quoteColour} />}
224226
<span
225227
css={css`
226228
color: ${headlineColour};

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

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@ const cardKickerTextLight: ContainerFunction = (containerPalette) => {
136136
return sourcePalette.labs[200];
137137
}
138138
};
139-
140139
const cardKickerTextDark: ContainerFunction = (containerPalette) => {
141140
switch (containerPalette) {
142141
case 'InvestigationPalette':
@@ -162,6 +161,55 @@ const cardKickerTextDark: ContainerFunction = (containerPalette) => {
162161
}
163162
};
164163

164+
const cardQuoteIconLight: ContainerFunction = (containerPalette) => {
165+
switch (containerPalette) {
166+
case 'InvestigationPalette':
167+
return sourcePalette.brandAlt[400];
168+
case 'LongRunningPalette':
169+
return sourcePalette.news[400];
170+
case 'LongRunningAltPalette':
171+
return sourcePalette.news[400];
172+
case 'SombrePalette':
173+
return sourcePalette.brand[800];
174+
case 'SombreAltPalette':
175+
return sourcePalette.news[500];
176+
case 'BreakingPalette':
177+
return sourcePalette.news[600];
178+
case 'EventPalette':
179+
return sourcePalette.specialReportAlt[200];
180+
case 'EventAltPalette':
181+
return sourcePalette.news[400];
182+
case 'SpecialReportAltPalette':
183+
return sourcePalette.specialReportAlt[100];
184+
case 'Branded':
185+
return sourcePalette.labs[200];
186+
}
187+
};
188+
const cardQuoteIconDark: ContainerFunction = (containerPalette) => {
189+
switch (containerPalette) {
190+
case 'InvestigationPalette':
191+
return cardKickerTextLight(containerPalette);
192+
case 'LongRunningPalette':
193+
return sourcePalette.news[600];
194+
case 'LongRunningAltPalette':
195+
return sourcePalette.news[550];
196+
case 'SombrePalette':
197+
return sourcePalette.brand[800];
198+
case 'SombreAltPalette':
199+
return sourcePalette.news[500];
200+
case 'BreakingPalette':
201+
return sourcePalette.news[600];
202+
case 'EventPalette':
203+
return sourcePalette.specialReportAlt[300];
204+
case 'EventAltPalette':
205+
return sourcePalette.news[600];
206+
case 'SpecialReportAltPalette':
207+
return sourcePalette.specialReportAlt[700];
208+
case 'Branded':
209+
return sourcePalette.labs[400];
210+
}
211+
};
212+
165213
const kickerTextLiveLight: ContainerFunction = (containerPalette) => {
166214
switch (containerPalette) {
167215
case 'InvestigationPalette':
@@ -953,6 +1001,10 @@ const containerColours = {
9531001
light: cardKickerTextLight,
9541002
dark: cardKickerTextDark,
9551003
},
1004+
'--card-quote-icon': {
1005+
light: cardQuoteIconLight,
1006+
dark: cardQuoteIconDark,
1007+
},
9561008
'--card-media-background': {
9571009
light: cardMediaBackgroundLight,
9581010
dark: cardMediaBackgroundDark,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -607,6 +607,9 @@ export const FeatureCard = ({
607607
kickerColour={palette(
608608
'--feature-card-kicker-text',
609609
)}
610+
quoteColour={palette(
611+
'--feature-card-quote-icon',
612+
)}
610613
/>
611614
</div>
612615

‎dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,37 @@ const CardWrapper = ({ children }: { children: React.ReactNode }) => {
6262

6363
export const Default = {};
6464

65+
export const WithQuotes: Story = {
66+
name: 'With Quotes',
67+
args: {
68+
showQuotedHeadline: true,
69+
},
70+
render: (args) => {
71+
const Card = ({ pillar }: { pillar: Pillar }) => (
72+
<CardWrapper>
73+
<HighlightsCard
74+
{...args}
75+
format={{
76+
display: ArticleDisplay.Standard,
77+
design: ArticleDesign.Standard,
78+
theme: pillar,
79+
}}
80+
/>
81+
</CardWrapper>
82+
);
83+
84+
return (
85+
<>
86+
<Card pillar={Pillar.News} />
87+
<Card pillar={Pillar.Opinion} />
88+
<Card pillar={Pillar.Sport} />
89+
<Card pillar={Pillar.Culture} />
90+
<Card pillar={Pillar.Lifestyle} />
91+
</>
92+
);
93+
},
94+
};
95+
6596
export const WithAvatar: Story = {
6697
args: {
6798
avatarUrl:

‎dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ export const HighlightsCard = ({
157157
showQuotes={showQuotedHeadline}
158158
headlineColour={palette('--highlights-card-headline')}
159159
kickerColour={palette('--highlights-card-kicker-text')}
160+
quoteColour={palette('--highlights-card-quote-icon')}
160161
/>
161162

162163
{!isUndefined(starRating) && (

‎dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
226226
fontSizes={headlineSizes}
227227
headlineColour={palette('--feature-card-headline')}
228228
kickerColour={palette('--feature-card-kicker-text')}
229+
quoteColour={palette('--feature-card-quote-icon')}
229230
byline={byline}
230231
showByline={showByline}
231232
/>

‎dotcom-rendering/src/paletteDeclarations.ts

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2603,7 +2603,6 @@ const cardKickerTextLight: PaletteFunction = (format) => {
26032603
return sourcePalette.specialReportAlt[200];
26042604
}
26052605
};
2606-
26072606
const cardKickerTextDark: PaletteFunction = ({ theme }) => {
26082607
switch (theme) {
26092608
case Pillar.News:
@@ -2621,6 +2620,40 @@ const cardKickerTextDark: PaletteFunction = ({ theme }) => {
26212620
}
26222621
};
26232622

2623+
const cardQuoteIconLight: PaletteFunction = (format) => {
2624+
switch (format.theme) {
2625+
case Pillar.Opinion:
2626+
return pillarPalette(format.theme, 300);
2627+
case Pillar.Sport:
2628+
case Pillar.Culture:
2629+
case Pillar.Lifestyle:
2630+
case Pillar.News:
2631+
return pillarPalette(format.theme, 400);
2632+
case ArticleSpecial.Labs:
2633+
return sourcePalette.labs[200];
2634+
case ArticleSpecial.SpecialReport:
2635+
return sourcePalette.news[400];
2636+
case ArticleSpecial.SpecialReportAlt:
2637+
return sourcePalette.specialReportAlt[200];
2638+
}
2639+
};
2640+
const cardQuoteIconDark: PaletteFunction = ({ theme }) => {
2641+
switch (theme) {
2642+
case Pillar.News:
2643+
case Pillar.Lifestyle:
2644+
case Pillar.Sport:
2645+
case Pillar.Culture:
2646+
case Pillar.Opinion:
2647+
return pillarPalette(theme, 500);
2648+
case ArticleSpecial.Labs:
2649+
return sourcePalette.labs[400];
2650+
case ArticleSpecial.SpecialReport:
2651+
return sourcePalette.news[500];
2652+
case ArticleSpecial.SpecialReportAlt:
2653+
return sourcePalette.specialReportAlt[200];
2654+
}
2655+
};
2656+
26242657
const cardBackgroundHover: PaletteFunction = () =>
26252658
transparentColour(sourcePalette.neutral[7], 0.1);
26262659

@@ -5797,10 +5830,28 @@ const highlightsCardHeadlineLight: PaletteFunction = (format) => {
57975830
return sourcePalette.specialReportAlt[200];
57985831
}
57995832
};
5800-
58015833
const highlightsCardHeadlineDark: PaletteFunction = () =>
58025834
sourcePalette.neutral[86];
58035835

5836+
const highlightsCardQuoteIconLight: PaletteFunction = (format) => {
5837+
switch (format.theme) {
5838+
case Pillar.News:
5839+
case Pillar.Opinion:
5840+
case Pillar.Sport:
5841+
case Pillar.Culture:
5842+
case Pillar.Lifestyle:
5843+
return pillarPalette(format.theme, 400);
5844+
case ArticleSpecial.Labs:
5845+
return sourcePalette.labs[200];
5846+
case ArticleSpecial.SpecialReport:
5847+
return sourcePalette.news[400];
5848+
case ArticleSpecial.SpecialReportAlt:
5849+
return sourcePalette.specialReportAlt[200];
5850+
}
5851+
};
5852+
const highlightsCardQuoteIconDark: PaletteFunction = () =>
5853+
sourcePalette.neutral[86];
5854+
58045855
const highlightContainerStartLight: PaletteFunction = () =>
58055856
sourcePalette.neutral[100];
58065857
const highlightContainerStartDark: PaletteFunction = () =>
@@ -6045,6 +6096,20 @@ const featureCardKickerText: PaletteFunction = ({ theme }) => {
60456096
return pillarPalette(theme, 600);
60466097
}
60476098
};
6099+
const featureCardQuoteIcon: PaletteFunction = ({ theme }) => {
6100+
switch (theme) {
6101+
case ArticleSpecial.Labs:
6102+
case ArticleSpecial.SpecialReport:
6103+
case ArticleSpecial.SpecialReportAlt:
6104+
return sourcePalette.neutral[86];
6105+
case Pillar.News:
6106+
case Pillar.Opinion:
6107+
case Pillar.Sport:
6108+
case Pillar.Culture:
6109+
case Pillar.Lifestyle:
6110+
return pillarPalette(theme, 600);
6111+
}
6112+
};
60486113

60496114
const pillText: PaletteFunction = () => sourcePalette.neutral[100];
60506115
const pillBackground: PaletteFunction = () =>
@@ -6437,6 +6502,10 @@ const paletteColours = {
64376502
light: cardMediaWaveformLight,
64386503
dark: cardMediaWaveformDark,
64396504
},
6505+
'--card-quote-icon': {
6506+
light: cardQuoteIconLight,
6507+
dark: cardQuoteIconDark,
6508+
},
64406509
'--card-sublinks-background': {
64416510
light: cardSublinksBackgroundLight,
64426511
dark: cardSublinksBackgroundDark,
@@ -6845,6 +6914,10 @@ const paletteColours = {
68456914
light: featureCardKickerText,
68466915
dark: featureCardKickerText,
68476916
},
6917+
'--feature-card-quote-icon': {
6918+
light: featureCardQuoteIcon,
6919+
dark: featureCardQuoteIcon,
6920+
},
68486921
'--feature-card-trail-text': {
68496922
light: () => sourcePalette.neutral[86],
68506923
dark: () => sourcePalette.neutral[20],
@@ -6958,6 +7031,10 @@ const paletteColours = {
69587031
light: highlightsCardKickerTextLight,
69597032
dark: highlightsCardKickerTextDark,
69607033
},
7034+
'--highlights-card-quote-icon': {
7035+
light: highlightsCardQuoteIconLight,
7036+
dark: highlightsCardQuoteIconDark,
7037+
},
69617038
'--highlights-container-background': {
69627039
light: highlightsContainerBackgroundLight,
69637040
dark: highlightsContainerBackgroundDark,

0 commit comments

Comments
 (0)