Skip to content

Commit 61ec643

Browse files
juabarajuabara
authored
Merge pull request #14677 from guardian/jm/banner-colour-palettes
apply colour palette to designable banner
2 parents 398c180 + 1636192 commit 61ec643

File tree

8 files changed

+441
-783
lines changed

8 files changed

+441
-783
lines changed

‎dotcom-rendering/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"@guardian/shimport": "1.0.2",
4444
"@guardian/source": "11.3.0",
4545
"@guardian/source-development-kitchen": "18.1.1",
46-
"@guardian/support-dotcom-components": "7.9.0",
46+
"@guardian/support-dotcom-components": "7.10.1",
4747
"@guardian/tsconfig": "0.2.0",
4848
"@playwright/test": "1.52.0",
4949
"@sentry/browser": "10.19.0",

‎dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ import type {
4747
BannerTemplateSettings,
4848
ChoiceCardSettings,
4949
CtaSettings,
50-
CtaStateSettings,
5150
} from './settings';
5251
import { buttonStyles, buttonThemes } from './styles/buttonStyles';
5352
import { templateSpacing } from './styles/templateStyles';
@@ -92,6 +91,9 @@ const buildChoiceCardSettings = (
9291
buttonSelectColour,
9392
buttonSelectTextColour,
9493
buttonSelectBorderColour,
94+
buttonSelectMarkerColour,
95+
pillTextColour,
96+
pillBackgroundColour,
9597
} = design.visual;
9698
return {
9799
buttonColour: buttonColour
@@ -112,6 +114,15 @@ const buildChoiceCardSettings = (
112114
buttonSelectBorderColour: buttonSelectBorderColour
113115
? hexColourToString(buttonSelectBorderColour)
114116
: undefined,
117+
buttonSelectMarkerColour: buttonSelectMarkerColour
118+
? hexColourToString(buttonSelectMarkerColour)
119+
: undefined,
120+
pillTextColour: pillTextColour
121+
? hexColourToString(pillTextColour)
122+
: undefined,
123+
pillBackgroundColour: pillBackgroundColour
124+
? hexColourToString(pillBackgroundColour)
125+
: undefined,
115126
};
116127
}
117128
return undefined;
@@ -195,15 +206,6 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
195206
? 'main-image'
196207
: '.';
197208

198-
// TODO: I assume we're planning on making this adjustable in RRCP in future.
199-
const choiceCardButtonCtaStateSettings: CtaStateSettings = {
200-
backgroundColour: palette.brandAlt[400],
201-
textColour: 'inherit',
202-
};
203-
const choiceCardButtonSettings: CtaSettings = {
204-
default: choiceCardButtonCtaStateSettings,
205-
};
206-
207209
const templateSettings: BannerTemplateSettings = {
208210
containerSettings: {
209211
backgroundColour: hexColourToString(basic.background),
@@ -431,8 +433,10 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
431433
onClick={() =>
432434
handleSetIsCollapsed(!isCollapsed)
433435
}
434-
cssOverrides={styles.iconOverrides}
435-
priority="tertiary"
436+
cssOverrides={styles.iconOverrides(
437+
templateSettings.closeButtonSettings,
438+
)}
439+
priority="secondary"
436440
icon={
437441
isCollapsed ? (
438442
<SvgChevronUpSingle />
@@ -442,14 +446,8 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
442446
}
443447
size="small"
444448
theme={buttonThemes(
445-
{
446-
default: {
447-
backgroundColour:
448-
palette.brand[400],
449-
textColour: 'inherit',
450-
},
451-
},
452-
'tertiary',
449+
templateSettings.closeButtonSettings,
450+
'secondary',
453451
)}
454452
hideLabel={true}
455453
/>
@@ -478,6 +476,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
478476
choices={choiceCards}
479477
id={'banner'}
480478
submitComponentEvent={submitComponentEvent}
479+
choiceCardSettings={choiceCardSettings}
481480
/>
482481
)}
483482
<div css={styles.ctaContainer(isCollapsed)}>
@@ -493,9 +492,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
493492
})}
494493
onClick={onCtaClick}
495494
priority="primary"
496-
cssOverrides={styles.linkButtonStyles}
495+
cssOverrides={[styles.linkButtonStyles]}
497496
theme={buttonThemes(
498-
choiceCardButtonSettings,
497+
templateSettings.primaryCtaSettings,
499498
'primary',
500499
)}
501500
icon={<SvgArrowRightStraight />}
@@ -1036,10 +1035,11 @@ const styles = {
10361035
margin-top: ${space[1]}px;
10371036
}
10381037
`,
1039-
iconOverrides: css`
1040-
background-color: ${palette.brand[400]};
1038+
iconOverrides: (ctaSettings?: CtaSettings) => css`
1039+
background-color: ${ctaSettings?.default.backgroundColour ??
1040+
palette.brand[400]};
10411041
path {
1042-
fill: white;
1042+
fill: ${ctaSettings?.default.textColour ?? 'white'};
10431043
}
10441044
margin-top: ${space[1]}px;
10451045
margin-right: ${space[1]}px;

‎dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ export interface ChoiceCardSettings {
4343
buttonSelectColour?: string;
4444
buttonSelectTextColour?: string;
4545
buttonSelectBorderColour?: string;
46+
buttonSelectMarkerColour?: string;
47+
pillTextColour?: string;
48+
pillBackgroundColour?: string;
4649
}
4750

4851
export interface BannerTemplateSettings {

‎dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export const WithThreeTierChoiceCards: Story = {
117117
...design,
118118
visual: {
119119
kind: 'ChoiceCards',
120-
buttonColour: stringToHexColour('E5E5E5'),
120+
buttonColour: stringToHexColour('F1F8FC'),
121121
},
122122
},
123123
tracking: {
@@ -138,7 +138,7 @@ export const ThreeTierChoiceCardsWithHeaderImageAndCopy: Story = {
138138
headerImage,
139139
visual: {
140140
kind: 'ChoiceCards',
141-
buttonColour: stringToHexColour('E5E5E5'),
141+
buttonColour: stringToHexColour('F1F8FC'),
142142
},
143143
},
144144

@@ -162,7 +162,7 @@ export const HeaderImageOnly: Story = {
162162
headerImage,
163163
visual: {
164164
kind: 'ChoiceCards',
165-
buttonColour: stringToHexColour('E5E5E5'),
165+
buttonColour: stringToHexColour('FFFFFF'),
166166
},
167167
colours: {
168168
...design.colours,
@@ -215,7 +215,7 @@ export const DesignThreeAnimatedHeaderImage: Story = {
215215
},
216216
visual: {
217217
kind: 'ChoiceCards',
218-
buttonColour: stringToHexColour('E5E5E5'),
218+
buttonColour: stringToHexColour('FFFFFF'),
219219
},
220220
colours: {
221221
...design.colours,
@@ -239,7 +239,7 @@ export const WithTickerAndThreeTierChoiceCards: Story = {
239239
...design,
240240
visual: {
241241
kind: 'ChoiceCards',
242-
buttonColour: stringToHexColour('E5E5E5'),
242+
buttonColour: stringToHexColour('F1F8FC'),
243243
},
244244
},
245245
tracking: {
@@ -262,7 +262,7 @@ export const WithThreeTierChoiceCardsAndArticleCount: Story = {
262262
...design,
263263
visual: {
264264
kind: 'ChoiceCards',
265-
buttonColour: stringToHexColour('E5E5E5'),
265+
buttonColour: stringToHexColour('F1F8FC'),
266266
},
267267
},
268268
tracking: {
@@ -293,7 +293,7 @@ export const WithMixedDestinations: Story = {
293293
...design,
294294
visual: {
295295
kind: 'ChoiceCards',
296-
buttonColour: stringToHexColour('E5E5E5'),
296+
buttonColour: stringToHexColour('F1F8FC'),
297297
},
298298
},
299299
tracking: {
@@ -320,7 +320,7 @@ export const CollapsableWithThreeTierChoiceCards: Story = {
320320
...design,
321321
visual: {
322322
kind: 'ChoiceCards',
323-
buttonColour: stringToHexColour('E5E5E5'),
323+
buttonColour: stringToHexColour('F1F8FC'),
324324
},
325325
},
326326
tracking: {
@@ -374,7 +374,7 @@ export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
374374
...design,
375375
visual: {
376376
kind: 'ChoiceCards',
377-
buttonColour: stringToHexColour('E5E5E5'),
377+
buttonColour: stringToHexColour('F1F8FC'),
378378
},
379379
},
380380
tracking: {

‎dotcom-rendering/src/components/marketing/banners/utils/storybook.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -111,29 +111,27 @@ export const design: ConfigurableDesign = {
111111
},
112112
primaryCta: {
113113
default: {
114-
text: stringToHexColour('FFFFFF'),
115-
background: stringToHexColour('0077B6'),
114+
text: stringToHexColour('052962'),
115+
background: stringToHexColour('FFE500'),
116116
},
117117
},
118118
secondaryCta: {
119119
default: {
120-
text: stringToHexColour('004E7C'),
120+
text: stringToHexColour('000000'),
121121
background: stringToHexColour('F1F8FC'),
122-
border: stringToHexColour('004E7C'),
122+
border: stringToHexColour('000000'),
123123
},
124124
},
125125
closeButton: {
126126
default: {
127-
text: stringToHexColour('052962'),
128-
background: stringToHexColour('F1F8FC'),
129-
border: stringToHexColour('052962'),
127+
text: stringToHexColour('000000'),
128+
background: stringToHexColour('E6ECEF'),
129+
border: stringToHexColour('E6ECEF'),
130130
},
131131
},
132132
ticker: {
133-
text: stringToHexColour('052962'),
134133
filledProgress: stringToHexColour('052962'),
135134
progressBarBackground: stringToHexColour('cccccc'),
136-
goalMarker: stringToHexColour('000000'),
137135
headlineColour: stringToHexColour('052962'),
138136
totalColour: stringToHexColour('052962'),
139137
goalColour: stringToHexColour('052962'),

‎dotcom-rendering/src/components/marketing/hooks/useContributionsReminderSignup.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type {
88
ReminderComponent,
99
ReminderPlatform,
1010
ReminderStage,
11-
} from '@guardian/support-dotcom-components/dist/shared/types';
11+
} from '@guardian/support-dotcom-components/dist/shared/types/reminders';
1212
import { useState } from 'react';
1313
import {
1414
addContributionReminderCookie,

0 commit comments

Comments
 (0)