background: stringToHexColour()

in dotcom-rendering/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx [159:340]
174 lines of code
1 McCabe index (conditional complexity)

						background: stringToHexColour('234B8A'),
						text: stringToHexColour('FFFFFF'),
					},
				},
			},
		},
	},
};

export const DesignTwoRegularAmounts: Story = {
	name: 'DesignableBanner with regular amounts',
	args: {
		...meta.args,
		design: {
			...design,
			visual: {
				kind: 'ChoiceCards',
				buttonColour: stringToHexColour('E5E5E5'),
			},
		},
		choiceCardAmounts: regularChoiceCardAmounts,
	},
};

export const DesignTwoEdgeCaseAmounts: Story = {
	name: 'DesignableBanner with edge case amounts',
	args: {
		...meta.args,
		design: {
			...design,
			visual: {
				kind: 'ChoiceCards',
				buttonColour: stringToHexColour('883333'),
				buttonTextColour: stringToHexColour('FFFFFF'),
				buttonBorderColour: stringToHexColour('8888FF'),
				buttonSelectColour: stringToHexColour('338833'),
				buttonSelectTextColour: stringToHexColour('FFFF88'),
				buttonSelectBorderColour: stringToHexColour('88FF88'),
			},
		},
		choiceCardAmounts: edgeCaseChoiceCardAmounts,
	},
};

export const DesignThreeHeaderImageOnly: Story = {
	name: 'DesignableBanner with header image and no header copy',
	args: {
		...meta.args,
		content: contentNoHeading,
		mobileContent: mobileContentNoHeading,
		design: {
			...design,
			headerImage,
			visual: {
				kind: 'ChoiceCards',
				buttonColour: stringToHexColour('E5E5E5'),
			},
			colours: {
				...design.colours,
				basic: {
					...design.colours.basic,
					background: stringToHexColour('FFFFFF'),
				},
			},
		},
		choiceCardAmounts: regularChoiceCardAmounts,
	},
};

export const DesignFourHeaderImageAndCopy: Story = {
	name: 'DesignableBanner with header image and header copy',
	args: {
		...meta.args,
		design: {
			...design,
			headerImage,
			visual: {
				kind: 'ChoiceCards',
				buttonColour: stringToHexColour('E5E5E5'),
			},
			colours: {
				...design.colours,
				basic: {
					...design.colours.basic,
					background: stringToHexColour('FFFFFF'),
				},
			},
		},
		choiceCardAmounts: regularChoiceCardAmounts,
	},
};

export const DesignThreeAnimatedHeaderImage: Story = {
	name: 'DesignableBanner with animated header image',
	args: {
		...meta.args,
		content: contentNoHeading,
		mobileContent: mobileContentNoHeading,
		design: {
			...design,
			headerImage: {
				mobileUrl:
					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
				tabletUrl:
					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
				desktopUrl:
					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
				altText: 'Guardian: News provider of the year',
			},
			visual: {
				kind: 'ChoiceCards',
				buttonColour: stringToHexColour('E5E5E5'),
			},
			colours: {
				...design.colours,
				basic: {
					...design.colours.basic,
					background: stringToHexColour('FFFFFF'),
				},
			},
		},
		choiceCardAmounts: regularChoiceCardAmounts,
	},
};

export const NoChoiceCardOrImage: Story = {
	name: 'DesignableBanner with no choice cards or image',
	args: {
		...meta.args,
		design: {
			...design,
			visual: undefined,
		},
	},
};

export const WithNonSupportUrl: Story = {
	name: 'DesignableBanner with non-support site url',
	args: {
		...meta.args,
		content: {
			...contentWithHeading,
			cta: {
				baseUrl: 'theguardian.com',
				text: 'Continue to the Guardian',
			},
		},
		design: {
			...design,
			visual: undefined,
		},
	},
};

export const WithRemindMeLater: Story = {
	name: 'DesignableBanner with reminder CTA',
	args: {
		...meta.args,
		content: {
			...contentWithHeading,
			secondaryCta: {
				...contentWithHeading.secondaryCta,
				type: SecondaryCtaType.ContributionsReminder,
			},
		},
		mobileContent: {
			...mobileContentWithHeading,
			secondaryCta: {
				...mobileContentWithHeading.secondaryCta,
				type: SecondaryCtaType.ContributionsReminder,
			},
		},
		design: {
			...design,
			visual: {
				kind: 'ChoiceCards',
				buttonColour: stringToHexColour('E5E5E5'),
			},
			colours: {
				...design.colours,
				secondaryCta: {
					default: {