From 7319722e321dde25de91ae6e15a35d9aa21658a5 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:51:37 +0100
Subject: [PATCH] Scrollable small container: support for special palettes
 (#12580)

* Add support for container palettes

* Add type to button themes
---
 .../src/components/ContainerOverrides.tsx     | 38 ++++++++++++++++++
 .../components/ScrollableSmall.importable.tsx |  5 ++-
 .../components/ScrollableSmall.stories.tsx    | 39 +++++++++++++++++++
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/ContainerOverrides.tsx b/dotcom-rendering/src/components/ContainerOverrides.tsx
index 4b74f3169bd..9ddc8e4037a 100644
--- a/dotcom-rendering/src/components/ContainerOverrides.tsx
+++ b/dotcom-rendering/src/components/ContainerOverrides.tsx
@@ -1050,6 +1050,28 @@ const carouselArrowBackgroundHover: ContainerFunction = (containerPalette) => {
 	}
 };
 
+const carouselChevronLight: ContainerFunction = (containerPalette) =>
+	cardHeadlineLight(containerPalette);
+const carouselChevronDark: ContainerFunction = (containerPalette) =>
+	cardHeadlineDark(containerPalette);
+
+const carouselChevronBorderLight: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineLight(containerPalette), 0.2);
+const carouselChevronBorderDark: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
+const carouselChevronDisabledLight: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineLight(containerPalette), 0.2);
+const carouselChevronDisabledDark: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
+const carouselChevronBorderDisabledLight: ContainerFunction = (
+	containerPalette,
+) => transparentColour(cardHeadlineLight(containerPalette), 0.2);
+const carouselChevronBorderDisabledDark: ContainerFunction = (
+	containerPalette,
+) => transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
 type ColourName = Parameters<typeof palette>[0];
 
 type ContainerFunction = (containerPalette: DCRContainerPalette) => string;
@@ -1163,6 +1185,22 @@ const containerColours = {
 		light: carouselArrowBackgroundHover,
 		dark: carouselArrowBackgroundHover,
 	},
+	'--carousel-chevron': {
+		light: carouselChevronLight,
+		dark: carouselChevronDark,
+	},
+	'--carousel-chevron-border': {
+		light: carouselChevronBorderLight,
+		dark: carouselChevronBorderDark,
+	},
+	'--carousel-chevron-border-disabled': {
+		light: carouselChevronBorderDisabledLight,
+		dark: carouselChevronBorderDisabledDark,
+	},
+	'--carousel-chevron-disabled': {
+		light: carouselChevronDisabledLight,
+		dark: carouselChevronDisabledDark,
+	},
 	'--section-border': {
 		light: sectionBorderLight,
 		dark: sectionBorderDark,
diff --git a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
index e804ec50b35..9f1754fa428 100644
--- a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
@@ -9,6 +9,7 @@ import {
 	Hide,
 	SvgChevronLeftSingle,
 	SvgChevronRightSingle,
+	type ThemeButton,
 } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
 import { palette } from '../palette';
@@ -41,12 +42,12 @@ const titlePreset = headlineMedium24Object;
 const gridColumnWidth = '60px';
 const gridGap = '20px';
 
-const themeButton = {
+const themeButton: Partial<ThemeButton> = {
 	borderTertiary: palette('--carousel-chevron-border'),
 	textTertiary: palette('--carousel-chevron'),
 };
 
-const themeButtonDisabled = {
+const themeButtonDisabled: Partial<ThemeButton> = {
 	borderTertiary: palette('--carousel-chevron-border-disabled'),
 	textTertiary: palette('--carousel-chevron-disabled'),
 };
diff --git a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
index c5037e4fb0c..2007adcf275 100644
--- a/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
+++ b/dotcom-rendering/src/components/ScrollableSmall.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
+import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableSmall } from './ScrollableSmall.importable';
 
@@ -33,3 +34,41 @@ export const WithFrontSection = {
 		</FrontSection>
 	),
 } satisfies Story;
+
+const containerPalettes = [
+	'InvestigationPalette',
+	'LongRunningPalette',
+	'SombrePalette',
+	'BreakingPalette',
+	'EventPalette',
+	'EventAltPalette',
+	'LongRunningAltPalette',
+	'SombreAltPalette',
+	'SpecialReportAltPalette',
+	'Branded',
+] as const satisfies readonly Omit<
+	DCRContainerPalette,
+	'MediaPalette' | 'PodcastPalette'
+>[];
+
+export const WithSpecialPaletteVariations = {
+	render: (args) => (
+		<>
+			{containerPalettes.map((containerPalette) => (
+				<FrontSection
+					title="Scrollable small"
+					discussionApiUrl={discussionApiUrl}
+					editionId={'UK'}
+					showTopBorder={false}
+					key={containerPalette}
+					containerPalette={containerPalette}
+				>
+					<ScrollableSmall
+						{...args}
+						containerPalette={containerPalette}
+					/>
+				</FrontSection>
+			))}
+		</>
+	),
+} satisfies Story;