From 5653010bafab128b275ecd3b8eb79b7c95183c99 Mon Sep 17 00:00:00 2001
From: DanielCliftonGuardian
 <110032454+DanielCliftonGuardian@users.noreply.github.com>
Date: Thu, 19 Sep 2024 16:29:28 +0100
Subject: [PATCH] Add dark mode stories

---
 dotcom-rendering/src/components/Answers.tsx   |  2 +-
 .../components/KnowledgeQuizAtom.stories.tsx  | 35 ++++++++++++++++++-
 .../PersonalityQuizAtom.stories.tsx           | 26 +++++++++++++-
 dotcom-rendering/src/palette.ts               |  4 +++
 4 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/Answers.tsx b/dotcom-rendering/src/components/Answers.tsx
index 26f42ab2371..4ec7e513f51 100644
--- a/dotcom-rendering/src/components/Answers.tsx
+++ b/dotcom-rendering/src/components/Answers.tsx
@@ -25,7 +25,7 @@ export const radioButtonWrapperStyles = (theme: ArticleTheme) => css`
 		background-color: ${schemedPalette('--quiz-atom-answers-background')};
 
 		:hover {
-			background-color: ${palette.neutral[86]};
+			background-color: ${schemedPalette('--quiz-atom-answers-hover')};
 		}
 		/* TODO: apply same styles on focus (requires source update) */
 
diff --git a/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx b/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx
index 6c7f8cfc288..75a231b7a7c 100644
--- a/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx
+++ b/dotcom-rendering/src/components/KnowledgeQuizAtom.stories.tsx
@@ -1,5 +1,11 @@
-import { ArticleSpecial, Pillar } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import {
 	exampleKnowledgeQuestions,
 	natureQuestions,
@@ -26,6 +32,15 @@ export const Default = {
 		sharingUrls,
 		theme: Pillar.News,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Story;
 
 export const BatchedResults = {
@@ -34,6 +49,15 @@ export const BatchedResults = {
 		questions: natureQuestions,
 		resultGroups: natureResultGroups,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Story;
 
 export const LabsTheme = {
@@ -41,4 +65,13 @@ export const LabsTheme = {
 		...Default.args,
 		theme: ArticleSpecial.Labs,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: ArticleSpecial.Labs,
+			},
+		]),
+	],
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx b/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx
index 5c404b4125c..53fec672bab 100644
--- a/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx
+++ b/dotcom-rendering/src/components/PersonalityQuizAtom.stories.tsx
@@ -1,5 +1,11 @@
-import { ArticleSpecial, Pillar } from '@guardian/libs';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import {
 	examplePersonalityQuestions,
 	exampleResultBuckets,
@@ -24,6 +30,15 @@ export const Default = {
 		sharingUrls,
 		theme: Pillar.News,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: Pillar.News,
+			},
+		]),
+	],
 } satisfies Story;
 
 export const LabsTheme = {
@@ -32,4 +47,13 @@ export const LabsTheme = {
 		id: '2c6bf552-2827-4256-b3a0-f557d215c394',
 		theme: ArticleSpecial.Labs,
 	},
+	decorators: [
+		splitTheme([
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Comment,
+				theme: ArticleSpecial.Labs,
+			},
+		]),
+	],
 } satisfies Story;
diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
index 254100ffe2d..f2da834c959 100644
--- a/dotcom-rendering/src/palette.ts
+++ b/dotcom-rendering/src/palette.ts
@@ -6568,6 +6568,10 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[97],
 		dark: () => sourcePalette.neutral[20],
 	},
+	'--quiz-atom-answers-hover': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[38],
+	},
 	'--quiz-atom-check-mark': {
 		light: () => sourcePalette.neutral[0],
 		dark: () => sourcePalette.neutral[97],