From c0aca6436c70f31c1f22dd0eac43944b2bba3f8d Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Thu, 12 Dec 2024 15:26:04 +0000
Subject: [PATCH 1/3] pass grid width to `Layout` component

so that consumers can layout custom pages more easily
---
 .../react-crossword/src/@types/Layout.ts      |  1 +
 .../src/components/Crossword.stories.tsx      | 19 ++++++++++++---
 .../src/components/Crossword.tsx              | 23 +++++++++++++++----
 .../src/context/ContextProvider.tsx           |  9 ++++----
 .../react-crossword/src/context/Theme.tsx     | 12 +++-------
 .../src/layouts/ScreenLayout.tsx              | 10 ++------
 6 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/libs/@guardian/react-crossword/src/@types/Layout.ts b/libs/@guardian/react-crossword/src/@types/Layout.ts
index 0d466cf80..25905e43f 100644
--- a/libs/@guardian/react-crossword/src/@types/Layout.ts
+++ b/libs/@guardian/react-crossword/src/@types/Layout.ts
@@ -10,4 +10,5 @@ export type LayoutProps = {
 	AnagramHelper: typeof AnagramHelper;
 	Clues: typeof Clues;
 	SavedMessage: ComponentType;
+	gridWidth: number;
 };
diff --git a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
index 268fe09b3..f94b9bb69 100644
--- a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
@@ -69,9 +69,16 @@ export const MultiplePlayersRow: StoryFn = () => {
 };
 
 export const CustomLayoutRaw: StoryFn = () => {
-	const Layout = ({ Clues, Grid, Controls, SavedMessage }: LayoutProps) => {
+	const Layout = ({
+		Clues,
+		Grid,
+		Controls,
+		SavedMessage,
+		gridWidth,
+	}: LayoutProps) => {
 		return (
 			<>
+				<p>gridWidth: {gridWidth}</p>
 				<Grid />
 				<Controls />
 				<SavedMessage />
@@ -103,13 +110,19 @@ export const CustomisedLayout: StoryFn = () => {
 		</h2>
 	);
 
-	const Layout = ({ Clues, Grid, Controls, SavedMessage }: LayoutProps) => {
+	const Layout = ({
+		Clues,
+		Grid,
+		Controls,
+		SavedMessage,
+		gridWidth,
+	}: LayoutProps) => {
 		return (
 			<div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
 				<div style={{ flex: 1, minWidth: '15em' }}>
 					<Clues direction="across" Header={CluesHeader} />
 				</div>
-				<div style={{ flexBasis: 496, minWidth: '15em' }}>
+				<div style={{ flexBasis: gridWidth, minWidth: '15em' }}>
 					<Grid />
 					<Controls />
 					<div
diff --git a/libs/@guardian/react-crossword/src/components/Crossword.tsx b/libs/@guardian/react-crossword/src/components/Crossword.tsx
index 86b03be41..f26f6c9ac 100644
--- a/libs/@guardian/react-crossword/src/components/Crossword.tsx
+++ b/libs/@guardian/react-crossword/src/components/Crossword.tsx
@@ -1,11 +1,12 @@
 import { css } from '@emotion/react';
-import type { ComponentType, ReactNode } from 'react';
+import { type ComponentType, type ReactNode, useMemo } from 'react';
 import type { CAPICrossword } from '../@types/CAPI';
 import type { Progress, Theme } from '../@types/crossword';
 import type { LayoutProps } from '../@types/Layout';
 import { ContextProvider } from '../context/ContextProvider';
 import { useProgress } from '../context/Progress';
 import { ScreenLayout } from '../layouts/ScreenLayout';
+import { defaultTheme } from '../theme';
 import { AnagramHelper } from './AnagramHelper';
 import { Clues } from './Clues';
 import { Controls } from './Controls';
@@ -30,7 +31,7 @@ const SavedMessage = () => {
 	);
 };
 
-const layoutProps: LayoutProps = {
+const layoutComponents: Omit<LayoutProps, 'gridWidth'> = {
 	Grid,
 	Controls,
 	AnagramHelper,
@@ -47,9 +48,21 @@ export const Crossword = ({
 }: CrosswordProps) => {
 	const LayoutComponent = Layout ?? ScreenLayout;
 
+	const theme = useMemo<Theme>(
+		() => ({ ...defaultTheme, ...userTheme }),
+		[userTheme],
+	);
+
+	const gridWidth = useMemo(
+		() =>
+			(theme.gridCellSize + theme.gridGutterSize) * data.dimensions.cols +
+			theme.gridGutterSize,
+		[theme.gridCellSize, theme.gridGutterSize, data.dimensions.cols],
+	);
+
 	return (
 		<ContextProvider
-			userTheme={userTheme}
+			theme={theme}
 			data={data}
 			userProgress={progress}
 			selectedEntryId={data.entries[0].id}
@@ -70,7 +83,9 @@ export const Crossword = ({
 					container-type: inline-size;
 				`}
 			>
-				{children ?? <LayoutComponent {...layoutProps} />}
+				{children ?? (
+					<LayoutComponent {...layoutComponents} gridWidth={gridWidth} />
+				)}
 			</div>
 		</ContextProvider>
 	);
diff --git a/libs/@guardian/react-crossword/src/context/ContextProvider.tsx b/libs/@guardian/react-crossword/src/context/ContextProvider.tsx
index f467f07dc..0ec9b553a 100644
--- a/libs/@guardian/react-crossword/src/context/ContextProvider.tsx
+++ b/libs/@guardian/react-crossword/src/context/ContextProvider.tsx
@@ -20,9 +20,8 @@
 
 import type { ReactNode } from 'react';
 import type { CAPICrossword } from '../@types/CAPI';
-import type { Progress } from '../@types/crossword';
+import type { Progress, Theme } from '../@types/crossword';
 import type { EntryID } from '../@types/Entry';
-import type { CrosswordProps } from '../components/Crossword';
 import { CurrentCellProvider } from './CurrentCell';
 import { CurrentClueProvider } from './CurrentClue';
 import { DataProvider } from './Data';
@@ -35,19 +34,19 @@ export const ContextProvider = ({
 	data,
 	selectedEntryId,
 	userProgress,
-	userTheme,
+	theme,
 	children,
 }: {
 	data: CAPICrossword;
 	selectedEntryId?: EntryID;
 	userProgress?: Progress;
-	userTheme?: Partial<CrosswordProps>;
+	theme: Theme;
 	children: ReactNode;
 }) => {
 	const { entries, dimensions, solutionAvailable, id } = data;
 
 	return (
-		<ThemeProvider theme={userTheme}>
+		<ThemeProvider theme={theme}>
 			<UIStateProvider>
 				<DataProvider
 					entries={entries}
diff --git a/libs/@guardian/react-crossword/src/context/Theme.tsx b/libs/@guardian/react-crossword/src/context/Theme.tsx
index daf73d9ec..0eac6d9b4 100644
--- a/libs/@guardian/react-crossword/src/context/Theme.tsx
+++ b/libs/@guardian/react-crossword/src/context/Theme.tsx
@@ -1,6 +1,5 @@
-import { createContext, type ReactNode, useContext, useMemo } from 'react';
+import { createContext, type ReactNode, useContext } from 'react';
 import type { Theme } from '../@types/crossword';
-import { defaultTheme } from '../theme';
 
 const ThemeContext = createContext<Theme | undefined>(undefined);
 
@@ -8,16 +7,11 @@ export const ThemeProvider = ({
 	theme,
 	children,
 }: {
-	theme?: Partial<Theme>;
+	theme: Theme;
 	children: ReactNode;
 }) => {
-	const finalTheme = useMemo<Theme>(
-		() => ({ ...defaultTheme, ...theme }),
-		[theme],
-	);
-
 	return (
-		<ThemeContext.Provider value={finalTheme}>{children}</ThemeContext.Provider>
+		<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
 	);
 };
 
diff --git a/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx b/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
index 4264cd6f4..79ccd52dc 100644
--- a/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
+++ b/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
@@ -4,7 +4,6 @@ import { textSans12, textSans14 } from '@guardian/source/foundations';
 import { memo } from 'react';
 import type { Direction } from '../@types/Direction';
 import type { LayoutProps } from '../@types/Layout';
-import { useData } from '../context/Data';
 import { useTheme } from '../context/Theme';
 import { useUIState } from '../context/UI';
 
@@ -32,19 +31,14 @@ const Layout = ({
 	AnagramHelper,
 	Clues,
 	SavedMessage,
+	gridWidth: actualGridWidth,
 }: LayoutProps) => {
 	const { textColor, clueMinWidth, clueMaxWidth } = useTheme();
 
 	const { showAnagramHelper } = useUIState();
 	const theme = useTheme();
 
-	const { gridGutterSize, gridCellSize } = useTheme();
-	const { dimensions } = useData();
-
-	const gridWidth = Math.max(
-		(gridCellSize + gridGutterSize) * dimensions.cols + gridGutterSize,
-		300,
-	);
+	const gridWidth = Math.max(actualGridWidth, 300);
 	const oneColWidth = gridWidth + clueMinWidth;
 	const twoColWidth = gridWidth + clueMinWidth * 2;
 

From e3a65f389b4d61b58ae2c701725a837c6025067a Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Thu, 12 Dec 2024 15:36:26 +0000
Subject: [PATCH 2/3] provide theme to stories

---
 .../src/components/AnagramHelper.stories.tsx             | 8 +++++++-
 .../react-crossword/src/components/Clue.stories.tsx      | 3 ++-
 .../react-crossword/src/components/Clues.stories.tsx     | 9 +++++++--
 .../react-crossword/src/components/Controls.stories.tsx  | 9 +++++++--
 .../react-crossword/src/components/Grid.stories.tsx      | 4 +++-
 .../src/components/SolutionDisplay.stories.tsx           | 3 ++-
 .../react-crossword/src/components/WordWheel.stories.tsx | 3 ++-
 7 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/libs/@guardian/react-crossword/src/components/AnagramHelper.stories.tsx b/libs/@guardian/react-crossword/src/components/AnagramHelper.stories.tsx
index 90af71e4d..c5efb63b3 100644
--- a/libs/@guardian/react-crossword/src/components/AnagramHelper.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/AnagramHelper.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { progress12Across } from '../../stories/formats/grouped-clues.progress';
 import { ContextProvider } from '../context/ContextProvider';
+import { defaultTheme } from '../theme';
 import { AnagramHelper } from './AnagramHelper';
 
 const meta: Meta<typeof AnagramHelper> = {
@@ -11,6 +12,7 @@ const meta: Meta<typeof AnagramHelper> = {
 		(Story) => (
 			<ContextProvider
 				data={data}
+				theme={defaultTheme}
 				selectedEntryId="12-across"
 				userProgress={progress12Across}
 			>
@@ -31,7 +33,11 @@ export const Default: Story = {
 export const LongClue: Story = {
 	decorators: [
 		(Story) => (
-			<ContextProvider data={data} selectedEntryId="7-across">
+			<ContextProvider
+				data={data}
+				theme={defaultTheme}
+				selectedEntryId="7-across"
+			>
 				<Story />
 			</ContextProvider>
 		),
diff --git a/libs/@guardian/react-crossword/src/components/Clue.stories.tsx b/libs/@guardian/react-crossword/src/components/Clue.stories.tsx
index ec132b3b1..42189db14 100644
--- a/libs/@guardian/react-crossword/src/components/Clue.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Clue.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { ContextProvider } from '../context/ContextProvider';
+import { defaultTheme } from '../theme';
 import { Clue } from './Clue';
 
 const meta: Meta<typeof Clue> = {
@@ -11,7 +12,7 @@ const meta: Meta<typeof Clue> = {
 	},
 	decorators: [
 		(Story) => (
-			<ContextProvider data={data}>
+			<ContextProvider data={data} theme={defaultTheme}>
 				<Story />
 			</ContextProvider>
 		),
diff --git a/libs/@guardian/react-crossword/src/components/Clues.stories.tsx b/libs/@guardian/react-crossword/src/components/Clues.stories.tsx
index c236250d7..74de53b05 100644
--- a/libs/@guardian/react-crossword/src/components/Clues.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Clues.stories.tsx
@@ -3,6 +3,7 @@ import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { progress } from '../../stories/formats/grouped-clues.progress';
 import { ContextProvider } from '../context/ContextProvider';
 import { ValidAnswersProvider } from '../context/ValidAnswers';
+import { defaultTheme } from '../theme';
 import { Clues } from './Clues';
 
 const meta: Meta<typeof Clues> = {
@@ -16,7 +17,11 @@ const meta: Meta<typeof Clues> = {
 			localStorage.removeItem(data.id);
 
 			return (
-				<ContextProvider data={data} userProgress={progress}>
+				<ContextProvider
+					data={data}
+					userProgress={progress}
+					theme={defaultTheme}
+				>
 					<Story />
 				</ContextProvider>
 			);
@@ -37,7 +42,7 @@ export const Default: Story = {};
 export const WithSuccess: Story = {
 	decorators: [
 		(Story) => (
-			<ContextProvider data={data} userProgress={progress}>
+			<ContextProvider data={data} userProgress={progress} theme={defaultTheme}>
 				<ValidAnswersProvider validAnswers={new Set(['7-across'])}>
 					<Story />
 				</ValidAnswersProvider>
diff --git a/libs/@guardian/react-crossword/src/components/Controls.stories.tsx b/libs/@guardian/react-crossword/src/components/Controls.stories.tsx
index 299d4cc92..2607f26bd 100644
--- a/libs/@guardian/react-crossword/src/components/Controls.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Controls.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { ContextProvider } from '../context/ContextProvider';
+import { defaultTheme } from '../theme';
 import { Controls } from './Controls';
 
 const meta: Meta<typeof Controls> = {
@@ -12,7 +13,11 @@ const meta: Meta<typeof Controls> = {
 			localStorage.removeItem(data.id);
 
 			return (
-				<ContextProvider data={data} selectedEntryId={data.entries[0].id}>
+				<ContextProvider
+					data={data}
+					theme={defaultTheme}
+					selectedEntryId={data.entries[0].id}
+				>
 					<Story />
 				</ContextProvider>
 			);
@@ -30,7 +35,7 @@ export const NoSelectedEntry: Story = {
 		(Story) => {
 			localStorage.removeItem(data.id);
 			return (
-				<ContextProvider data={data}>
+				<ContextProvider data={data} theme={defaultTheme}>
 					<Story />
 				</ContextProvider>
 			);
diff --git a/libs/@guardian/react-crossword/src/components/Grid.stories.tsx b/libs/@guardian/react-crossword/src/components/Grid.stories.tsx
index 963eeb425..0ef12bfe5 100644
--- a/libs/@guardian/react-crossword/src/components/Grid.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Grid.stories.tsx
@@ -4,6 +4,7 @@ import { progress } from '../../stories/formats/grouped-clues.progress';
 import { separators as separatorData } from '../../stories/formats/separators';
 import type { Progress as ProgressType } from '../@types/crossword';
 import { ContextProvider } from '../context/ContextProvider';
+import { defaultTheme } from '../theme';
 import { Grid } from './Grid';
 
 const meta: Meta<typeof Grid> = {
@@ -16,6 +17,7 @@ const meta: Meta<typeof Grid> = {
 			return (
 				<ContextProvider
 					data={data}
+					theme={defaultTheme}
 					userProgress={parameters.progress as ProgressType}
 				>
 					<Story />
@@ -39,7 +41,7 @@ export const Progress: Story = {
 export const Separators: Story = {
 	decorators: [
 		(Story) => (
-			<ContextProvider data={separatorData}>
+			<ContextProvider data={separatorData} theme={defaultTheme}>
 				<Story />
 			</ContextProvider>
 		),
diff --git a/libs/@guardian/react-crossword/src/components/SolutionDisplay.stories.tsx b/libs/@guardian/react-crossword/src/components/SolutionDisplay.stories.tsx
index 230112792..2aa38a858 100644
--- a/libs/@guardian/react-crossword/src/components/SolutionDisplay.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/SolutionDisplay.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { ContextProvider } from '../context/ContextProvider';
+import { defaultTheme } from '../theme';
 import { SolutionDisplay } from './SolutionDisplay';
 
 const meta: Meta<typeof SolutionDisplay> = {
@@ -9,7 +10,7 @@ const meta: Meta<typeof SolutionDisplay> = {
 	args: {},
 	decorators: [
 		(Story) => (
-			<ContextProvider data={data}>
+			<ContextProvider data={data} theme={defaultTheme}>
 				<Story />
 			</ContextProvider>
 		),
diff --git a/libs/@guardian/react-crossword/src/components/WordWheel.stories.tsx b/libs/@guardian/react-crossword/src/components/WordWheel.stories.tsx
index bfa03b1a0..c5d6c33bf 100644
--- a/libs/@guardian/react-crossword/src/components/WordWheel.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/WordWheel.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react';
 import { type StoryObj } from '@storybook/react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { ContextProvider } from '../context/ContextProvider';
+import { defaultTheme } from '../theme';
 import { WordWheel } from './WordWheel';
 
 const meta: Meta<typeof WordWheel> = {
@@ -10,7 +11,7 @@ const meta: Meta<typeof WordWheel> = {
 	args: {},
 	decorators: [
 		(Story) => (
-			<ContextProvider data={data}>
+			<ContextProvider data={data} theme={defaultTheme}>
 				<Story />
 			</ContextProvider>
 		),

From 6a224587b738eaacc2ff830d90c5a6ef1d1df9ed Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Thu, 12 Dec 2024 16:39:54 +0000
Subject: [PATCH 3/3] wrap the clues title in the custom header, if provided

---
 .../react-crossword/src/components/Clues.tsx  | 34 +++++++++++--------
 .../src/components/Crossword.stories.tsx      |  7 ++--
 .../src/layouts/ScreenLayout.tsx              |  7 ++--
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/libs/@guardian/react-crossword/src/components/Clues.tsx b/libs/@guardian/react-crossword/src/components/Clues.tsx
index 5e39fa2f2..6eb776ef6 100644
--- a/libs/@guardian/react-crossword/src/components/Clues.tsx
+++ b/libs/@guardian/react-crossword/src/components/Clues.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { ComponentType } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import type { Direction } from '../@types/Direction';
 import type { EntryID } from '../@types/Entry';
@@ -14,9 +14,10 @@ type Props = {
 	/** Use this to provide a custom header component for the list of clues. If
 	 * undefined, the word 'across' or 'down' will be displayed, unstyled. */
 	Header?: ComponentType<{
-		/** If you use a custom clues header, this prop is required to force
-		 * users to do something with it, for the sake of a11y... */
-		direction: Direction;
+		/** If you use a custom clues header, it must accept children so that we
+		 * can provide a properly marked up `label` element, for the sake of
+		 * a11y... */
+		children: ReactNode;
 	}>;
 };
 
@@ -64,19 +65,22 @@ export const Clues = ({ direction, Header }: Props) => {
 		}
 	}
 
+	const label = (
+		<label
+			css={css`
+				color: currentColor;
+			`}
+			id={getId(`${direction}-label`)}
+			htmlFor={getId(`${direction}-hints`)}
+		>
+			{direction}
+		</label>
+	);
+
 	return (
 		<div ref={cluesRef}>
-			<label
-				css={css`
-					display: block;
-					color: currentColor;
-					text-transform: capitalize;
-				`}
-				id={getId(`${direction}-label`)}
-				htmlFor={getId(`${direction}-hints`)}
-			>
-				{Header ? <Header direction={direction} /> : direction}
-			</label>
+			{Header ? <Header>{label}</Header> : label}
+
 			<div
 				tabIndex={0}
 				id={getId(`${direction}-hints`)}
diff --git a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
index f94b9bb69..8c5fe3270 100644
--- a/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
+++ b/libs/@guardian/react-crossword/src/components/Crossword.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
 import { groupedClues as data } from '../../stories/formats/grouped-clues';
 import { progress } from '../../stories/formats/grouped-clues.progress';
 import { quick as quickData } from '../../stories/formats/quick';
-import type { Direction } from '../@types/Direction';
 import type { LayoutProps } from '../@types/Layout';
 import { Crossword } from './Crossword';
 
@@ -91,7 +91,7 @@ export const CustomLayoutRaw: StoryFn = () => {
 };
 
 export const CustomisedLayout: StoryFn = () => {
-	const CluesHeader = (props: { direction: Direction }) => (
+	const CluesHeader = ({ children }: { children: ReactNode }) => (
 		<h2
 			style={{
 				fontFamily: 'monospace',
@@ -104,9 +104,10 @@ export const CustomisedLayout: StoryFn = () => {
 				justifyContent: 'center',
 				alignItems: 'center',
 				marginBottom: '0.5em',
+				color: 'royalblue',
 			}}
 		>
-			{props.direction === 'across' ? '👉' : '👇'}
+			{children}
 		</h2>
 	);
 
diff --git a/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx b/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
index 79ccd52dc..356d38392 100644
--- a/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
+++ b/libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx
@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
 import { headlineBold17, space } from '@guardian/source/foundations';
 import { textSans12, textSans14 } from '@guardian/source/foundations';
+import type { ReactNode } from 'react';
 import { memo } from 'react';
-import type { Direction } from '../@types/Direction';
 import type { LayoutProps } from '../@types/Layout';
 import { useTheme } from '../context/Theme';
 import { useUIState } from '../context/UI';
 
-const CluesHeader = memo(({ direction }: { direction: Direction }) => {
+const CluesHeader = memo(({ children }: { children: ReactNode }) => {
 	const theme = useTheme();
 
 	return (
@@ -18,9 +18,10 @@ const CluesHeader = memo(({ direction }: { direction: Direction }) => {
 				border-bottom: 1px dotted ${theme.borderColor};
 				height: 2em;
 				margin-bottom: 0.5em;
+				text-transform: capitalize;
 			`}
 		>
-			{direction}
+			{children}
 		</div>
 	);
 });