From cb0428c053b381b849ecc066eb085f7ad537e81a Mon Sep 17 00:00:00 2001
From: Alex Sanders <alex@sndrs.dev>
Date: Thu, 12 Dec 2024 16:08:12 +0000
Subject: [PATCH] add placeholder custom crossword layout

---
 .../src/components/Crossword.importable.tsx   | 98 ++++++++++++++++++-
 1 file changed, 97 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/Crossword.importable.tsx b/dotcom-rendering/src/components/Crossword.importable.tsx
index 78cda1d207..16633ab2ea 100644
--- a/dotcom-rendering/src/components/Crossword.importable.tsx
+++ b/dotcom-rendering/src/components/Crossword.importable.tsx
@@ -1,6 +1,102 @@
+import { css } from '@emotion/react';
 import { Crossword as ReactCrossword } from '@guardian/react-crossword-next';
 import type { CrosswordProps } from '@guardian/react-crossword-next';
+import {
+	from,
+	headlineBold17,
+	palette,
+	space,
+	textSans12,
+	textSans14,
+} from '@guardian/source/foundations';
+import { memo } from 'react';
+
+const CluesHeader = memo(({ direction }: { direction: 'across' | 'down' }) => {
+	return (
+		<div
+			css={css`
+				${headlineBold17};
+				border-top: 1px solid ${palette.neutral[86]};
+				border-bottom: 1px dotted ${palette.neutral[86]};
+				height: 2em;
+				margin-bottom: 0.5em;
+			`}
+		>
+			{direction}
+		</div>
+	);
+});
+
+const Layout: CrosswordProps['Layout'] = ({
+	Grid,
+	Clues,
+	Controls,
+	SavedMessage,
+	// gridWidth - coming in next version of package
+}) => {
+	// replace with gridWidth from props when package is updated
+	const gridWidth = '496';
+
+	return (
+		<div
+			css={css`
+				display: flex;
+				flex-direction: column;
+				gap: ${space[4]}px;
+
+				${from.leftCol} {
+					flex-direction: row;
+				}
+			`}
+		>
+			<div
+				css={css`
+					flex-basis: ${gridWidth}px;
+
+					${from.leftCol} {
+						position: sticky;
+						top: ${space[4]}px;
+						align-self: flex-start;
+					}
+				`}
+			>
+				<Grid />
+				<Controls />
+				<div
+					css={css`
+						${textSans12};
+						font-style: italic;
+					`}
+				>
+					<SavedMessage />
+				</div>
+			</div>
+
+			<div
+				css={css`
+					${textSans14};
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					gap: ${space[4]}px;
+					align-items: flex-start;
+
+					> * {
+						flex: 1;
+					}
+
+					${from.wide} {
+						flex-direction: row;
+					}
+				`}
+			>
+				<Clues direction="across" Header={CluesHeader} />
+				<Clues direction="down" Header={CluesHeader} />
+			</div>
+		</div>
+	);
+};
 
 export const Crossword = (data: CrosswordProps['data']) => (
-	<ReactCrossword data={data} clueMinWidth={150} />
+	<ReactCrossword data={data} Layout={Layout} />
 );