Updated decorator to take format

guardian · Oct 18, 2023 · 85a1cf3 · 85a1cf3
1 parent b37c259
commit 85a1cf3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/dotcom-rendering/src/components/HeadlineExample.stories.tsx b/dotcom-rendering/src/components/HeadlineExample.stories.tsx
@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
 import type { Meta, StoryObj, Decorator } from '@storybook/react';
 import { HeadlineExample } from './HeadlineExample';
-import { paletteDeclarations } from '../../../src/palette';
+import { paletteDeclarations } from '../palette';
 
 // ----- Meta ----- //
 
@@ -26,19 +26,23 @@ export default meta;
  * palette colours as CSS custom properties.
  */
 const colourSchemeDecorator =
-	(colourScheme: 'light' | 'dark'): Decorator =>
+	(colourScheme: 'light' | 'dark') =>
+	(format: ArticleFormat): Decorator =>
 	(Story) =>
 		(
 			<div css={css(paletteDeclarations(format, colourScheme))}>
 				<Story />
 			</div>
 		);
 
+const lightMode = colourSchemeDecorator('light');
+const darkMode = colourSchemeDecorator('dark');
+
 // ----- Stories ----- //
 
 type Story = StoryObj<typeof HeadlineExample>;
 
-const format: ArticleFormat = {
+const articleFormat: ArticleFormat = {
 	design: ArticleDesign.Standard,
 	display: ArticleDisplay.Standard,
 	theme: ArticlePillar.News,
@@ -48,10 +52,10 @@ export const LightHeadline: Story = {
 	args: {
 		text: 'A short example headline',
 	},
-	decorators: [colourSchemeDecorator('light')],
+	decorators: [lightMode(articleFormat)],
 };
 
 export const DarkHeadline: Story = {
 	args: LightHeadline.args,
-	decorators: [colourSchemeDecorator('dark')],
+	decorators: [darkMode(articleFormat)],
 };
diff --git a/dotcom-rendering/src/components/HeadlineExample.tsx b/dotcom-rendering/src/components/HeadlineExample.tsx
@@ -1,8 +1,8 @@
 // ----- Imports ----- //
 
 import { css } from '@emotion/react';
-import { palette } from '../../../src/palette';
 import { headline } from '@guardian/source-foundations';
+import { palette } from '../palette';
 
 // ----- Component ----- //