feat: apply colour palette to 3 tier designable banner

Author: Juarez Mota

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

@@ -47,7 +47,6 @@ import type {
 	BannerTemplateSettings,
 	ChoiceCardSettings,
 	CtaSettings,
-	CtaStateSettings,
 } from './settings';
 import { buttonStyles, buttonThemes } from './styles/buttonStyles';
 import { templateSpacing } from './styles/templateStyles';
@@ -92,6 +91,9 @@ const buildChoiceCardSettings = (
 			buttonSelectColour,
 			buttonSelectTextColour,
 			buttonSelectBorderColour,
+			buttonSelectMarkerColour,
+			pillTextColour,
+			pillBackgroundColour,
 		} = design.visual;
 		return {
 			buttonColour: buttonColour
@@ -112,6 +114,15 @@ const buildChoiceCardSettings = (
 			buttonSelectBorderColour: buttonSelectBorderColour
 				? hexColourToString(buttonSelectBorderColour)
 				: undefined,
+			buttonSelectMarkerColour: buttonSelectMarkerColour
+				? hexColourToString(buttonSelectMarkerColour)
+				: undefined,
+			pillTextColour: pillTextColour
+				? hexColourToString(pillTextColour)
+				: undefined,
+			pillBackgroundColour: pillBackgroundColour
+				? hexColourToString(pillBackgroundColour)
+				: undefined,
 		};
 	}
 	return undefined;
@@ -195,15 +206,6 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 		? 'main-image'
 		: '.';
 
-	// TODO: I assume we're planning on making this adjustable in RRCP in future.
-	const choiceCardButtonCtaStateSettings: CtaStateSettings = {
-		backgroundColour: palette.brandAlt[400],
-		textColour: 'inherit',
-	};
-	const choiceCardButtonSettings: CtaSettings = {
-		default: choiceCardButtonCtaStateSettings,
-	};
-
 	const templateSettings: BannerTemplateSettings = {
 		containerSettings: {
 			backgroundColour: hexColourToString(basic.background),
@@ -431,8 +433,10 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 								onClick={() =>
 									handleSetIsCollapsed(!isCollapsed)
 								}
-								cssOverrides={styles.iconOverrides}
-								priority="tertiary"
+								cssOverrides={styles.iconOverrides(
+									templateSettings.closeButtonSettings,
+								)}
+								priority="secondary"
 								icon={
 									isCollapsed ? (
 										<SvgChevronUpSingle />
@@ -442,14 +446,8 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 								}
 								size="small"
 								theme={buttonThemes(
-									{
-										default: {
-											backgroundColour:
-												palette.brand[400],
-											textColour: 'inherit',
-										},
-									},
-									'tertiary',
+									templateSettings.closeButtonSettings,
+									'secondary',
 								)}
 								hideLabel={true}
 							/>
@@ -478,6 +476,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 									choices={choiceCards}
 									id={'banner'}
 									submitComponentEvent={submitComponentEvent}
+									choiceCardSettings={choiceCardSettings}
 								/>
 							)}
 							<div css={styles.ctaContainer(isCollapsed)}>
@@ -493,9 +492,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 									})}
 									onClick={onCtaClick}
 									priority="primary"
-									cssOverrides={styles.linkButtonStyles}
+									cssOverrides={[styles.linkButtonStyles]}
 									theme={buttonThemes(
-										choiceCardButtonSettings,
+										templateSettings.primaryCtaSettings,
 										'primary',
 									)}
 									icon={<SvgArrowRightStraight />}
@@ -1036,10 +1035,11 @@ const styles = {
 			margin-top: ${space[1]}px;
 		}
 	`,
-	iconOverrides: css`
-		background-color: ${palette.brand[400]};
+	iconOverrides: (ctaSettings?: CtaSettings) => css`
+		background-color: ${ctaSettings?.default.backgroundColour ??
+		palette.brand[400]};
 		path {
-			fill: white;
+			fill: ${ctaSettings?.default.textColour ?? 'white'};
 		}
 		margin-top: ${space[1]}px;
 		margin-right: ${space[1]}px;

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

@@ -43,6 +43,9 @@ export interface ChoiceCardSettings {
 	buttonSelectColour?: string;
 	buttonSelectTextColour?: string;
 	buttonSelectBorderColour?: string;
+	buttonSelectMarkerColour?: string;
+	pillTextColour?: string;
+	pillBackgroundColour?: string;
 }
 
 export interface BannerTemplateSettings {

dotcom-rendering/src/components/marketing/shared/ThreeTierChoiceCards.tsx

@@ -23,18 +23,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { useEffect } from 'react';
 import sanitise from 'sanitize-html';
 import { useIsInView } from '../../../lib/useIsInView';
-
-const supportTierChoiceCardStyles = (selected: boolean) => css`
-	display: block;
-	border: ${selected
-		? `2px solid ${palette.brand['500']}`
-		: `1px solid ${palette.neutral[46]}`};
-	background-color: ${palette.neutral[100]};
-	border-radius: 10px;
-	padding: ${selected
-		? `6px ${space[5]}px 10px ${space[5]}px`
-		: `6px ${space[5]}px`};
-`;
+import type { ChoiceCardSettings } from '../banners/designableBanner/settings';
 
 const benefitsStyles = css`
 	${textSans15};
@@ -60,8 +49,8 @@ const benefitsStyles = css`
 	}
 `;
 
-const benefitsLabelStyles = css`
-	color: ${palette.neutral[0]};
+const benefitsLabelStyles = (customColor?: string) => css`
+	color: ${customColor ?? palette.neutral[0]};
 	${textSans15};
 
 	strong {
@@ -82,45 +71,23 @@ const supportingTextStyles = css`
 	margin-top: ${space[4]}px;
 `;
 
-const pillStyles = (pill: NonNullable<ChoiceCard['pill']>) => css`
-	border-radius: 4px;
-	padding: ${space[1]}px ${space[2]}px;
-	background-color: ${pill.backgroundColour
-		? hexColourToString(pill.backgroundColour as HexColour)
-		: palette.brandAlt[400]};
-	${textSansBold14};
-	color: ${pill.textColour
-		? hexColourToString(pill.textColour as HexColour)
-		: palette.neutral[7]};
-	position: absolute;
-	top: -${space[2]}px;
-	${until.phablet} {
-		right: ${space[3]}px;
-	}
-	right: ${space[5]}px;
-`;
-
-const customRadioTheme: ThemeRadio = {
-	...themeRadio,
-	borderSelected: palette.brandAlt[400],
-	borderUnselected: palette.neutral[46],
-	borderHover: palette.brandAlt[400],
-	fillSelected: palette.brand[400],
-};
-
 const SupportingBenefits = ({
 	benefitsLabel,
 	benefits,
+	choiceCardSettings,
 }: {
 	benefitsLabel?: string;
 	benefits: ChoiceCard['benefits'];
+	choiceCardSettings?: ChoiceCardSettings;
 }) => {
 	const showTicks = benefits.length > 1;
 	return (
 		<div css={supportingTextStyles}>
 			{!!benefitsLabel && (
 				<span
-					css={benefitsLabelStyles}
+					css={benefitsLabelStyles(
+						choiceCardSettings?.buttonSelectTextColour,
+					)}
 					dangerouslySetInnerHTML={{
 						__html: sanitise(benefitsLabel),
 					}}
@@ -129,8 +96,20 @@ const SupportingBenefits = ({
 			<ul css={benefitsStyles}>
 				{benefits.map((benefit) => (
 					<li key={benefit.copy}>
-						{showTicks && <SvgTickRound size="xsmall" />}
+						{showTicks && (
+							<SvgTickRound
+								size="xsmall"
+								theme={{
+									fill:
+										choiceCardSettings?.buttonSelectMarkerColour ??
+										palette.brand[400],
+								}}
+							/>
+						)}
 						<span
+							css={benefitsLabelStyles(
+								choiceCardSettings?.buttonSelectTextColour,
+							)}
 							dangerouslySetInnerHTML={{
 								__html: sanitise(benefit.copy),
 							}}
@@ -142,20 +121,13 @@ const SupportingBenefits = ({
 	);
 };
 
-const ChoiceCardPill = ({
-	pill,
-}: {
-	pill: NonNullable<ChoiceCard['pill']>;
-}) => {
-	return <div css={pillStyles(pill)}>{pill.copy}</div>;
-};
-
 type ThreeTierChoiceCardsProps = {
 	selectedChoiceCard: ChoiceCard;
 	setSelectedChoiceCard: Dispatch<SetStateAction<ChoiceCard | undefined>>;
 	choices: ChoiceCard[];
 	id: 'epic' | 'banner'; // uniquely identify this choice cards component to avoid conflicting with others
 	submitComponentEvent?: (componentEvent: ComponentEvent) => void;
+	choiceCardSettings?: ChoiceCardSettings;
 };
 
 export const ThreeTierChoiceCards = ({
@@ -164,12 +136,77 @@ export const ThreeTierChoiceCards = ({
 	choices,
 	id,
 	submitComponentEvent,
+	choiceCardSettings,
 }: ThreeTierChoiceCardsProps) => {
 	const [hasBeenSeen, setNode] = useIsInView({
 		debounce: true,
 		threshold: 0,
 	});
 
+	const supportTierChoiceCardStyles = (selected: boolean) => css`
+		display: block;
+		border: ${selected
+			? `2px solid ${
+					choiceCardSettings?.buttonSelectBorderColour ??
+					palette.brand['500']
+			  }`
+			: `1px solid ${
+					choiceCardSettings?.buttonBorderColour ??
+					palette.neutral[46]
+			  }`};
+		background-color: ${selected
+			? choiceCardSettings?.buttonSelectColour ?? palette.neutral[100]
+			: choiceCardSettings?.buttonColour ?? palette.neutral[100]};
+		color: ${selected
+			? choiceCardSettings?.buttonSelectTextColour ?? 'inherit'
+			: choiceCardSettings?.buttonTextColour ?? 'inherit'};
+		border-radius: 10px;
+		padding: ${selected
+			? `6px ${space[5]}px 10px ${space[5]}px`
+			: `6px ${space[5]}px`};
+	`;
+
+	const customRadioTheme: ThemeRadio = {
+		...themeRadio,
+		borderSelected:
+			choiceCardSettings?.buttonSelectBorderColour ??
+			palette.brandAlt[400],
+		borderUnselected:
+			choiceCardSettings?.buttonBorderColour ?? palette.neutral[46],
+		borderHover:
+			choiceCardSettings?.buttonSelectBorderColour ??
+			palette.brandAlt[400],
+		fillSelected:
+			choiceCardSettings?.buttonSelectMarkerColour ?? palette.brand[400],
+	};
+
+	const pillStyles = (pill: NonNullable<ChoiceCard['pill']>) => css`
+		border-radius: 4px;
+		padding: ${space[1]}px ${space[2]}px;
+		background-color: ${pill.backgroundColour
+			? hexColourToString(pill.backgroundColour as HexColour)
+			: choiceCardSettings?.pillBackgroundColour ??
+			  palette.brandAlt[400]};
+		${textSansBold14};
+		color: ${pill.textColour
+			? hexColourToString(pill.textColour as HexColour)
+			: choiceCardSettings?.pillTextColour ?? palette.neutral[7]};
+		position: absolute;
+		top: -${space[2]}px;
+		${until.phablet} {
+			right: ${space[3]}px;
+		}
+		right: ${space[5]}px;
+	`;
+
+	const ChoiceCardPill = ({
+		pill,
+	}: {
+		pill: NonNullable<ChoiceCard['pill']>;
+	}) => {
+		return <div css={pillStyles(pill)}>{pill.copy}</div>;
+	};
+
 	useEffect(() => {
 		if (submitComponentEvent) {
 			void submitComponentEvent({
@@ -277,6 +314,9 @@ export const ThreeTierChoiceCards = ({
 															| undefined
 													}
 													benefits={benefits}
+													choiceCardSettings={
+														choiceCardSettings
+													}
 												/>
 											)
 										}