Add crossword layout

dotcom-rendering/package.json

@@ -50,7 +50,7 @@
 		"@guardian/libs": "19.2.1",
 		"@guardian/ophan-tracker-js": "2.2.5",
 		"@guardian/react-crossword": "2.0.2",
-		"@guardian/react-crossword-next": "npm:@guardian/[email protected]20241209150926",
+		"@guardian/react-crossword-next": "npm:@guardian/[email protected]20241212165903",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "12.0.0",

dotcom-rendering/src/components/ArticleContainer.tsx

@@ -24,6 +24,9 @@ const articleWidth = (format: ArticleFormat) => {
 				}
 			`;
 		}
+		case ArticleDesign.Crossword:
+			/* The crossword player manages its own width; */
+			return null;
 		case ArticleDesign.Video:
 		case ArticleDesign.Audio:
 			return css`

dotcom-rendering/src/components/BylineLink.tsx

@@ -1,6 +1,7 @@
 import { isString } from '@guardian/libs';
 import { Hide } from '@guardian/source/react-components';
 import { DottedLines } from '@guardian/source-development-kitchen/react-components';
+import { Fragment } from 'react';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import {
 	getBylineComponentsFromTokens,
@@ -160,6 +161,10 @@ const getRenderedTokens = (
 		);
 	}
 
+	if (design === ArticleDesign.Crossword && renderedTokens.length > 0) {
+		return [<Fragment key="set-by">Set by: </Fragment>, ...renderedTokens];
+	}
+
 	return renderedTokens;
 };
 

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 type { ReactNode } from 'react';
+import { memo } from 'react';
+
+const CluesHeader = memo(({ children }: { children: ReactNode }) => {
+	return (
+		<div
+			css={css`
+				${headlineBold17};
+				border-top: 1px solid ${palette.neutral[86]};
+				border-bottom: 1px dotted ${palette.neutral[86]};
+				background-color: ${palette.neutral[100]};
+				height: 2em;
+				margin-bottom: 0.5em;
+				text-transform: capitalize;
+			`}
+		>
+			{children}
+		</div>
+	);
+});
+
+const Layout: CrosswordProps['Layout'] = ({
+	Grid,
+	Clues,
+	Controls,
+	SavedMessage,
+	gridWidth,
+}) => {
+	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} />
 );

dotcom-rendering/src/components/CrosswordInstructions.tsx

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import {
+	textEgyptian17,
+	textEgyptianBold17,
+} from '@guardian/source/foundations';
+
+const instructionsStyles = css`
+	${textEgyptian17};
+	white-space: pre-line;
+`;
+
+const headerStyles = css`
+	${textEgyptianBold17};
+	white-space: pre-line;
+`;
+
+export const CrosswordInstructions = ({
+	instructions,
+}: {
+	instructions: string;
+}) => (
+	<div css={instructionsStyles}>
+		<strong css={headerStyles}>Special instructions: </strong>
+		{instructions}
+	</div>
+);

dotcom-rendering/src/components/CrosswordLinks.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
+import { type CrosswordProps } from '@guardian/react-crossword-next';
+import { textSans15 } from '@guardian/source/foundations';
+import { palette } from '../palette';
+
+const crosswordLinkStyles = css`
+	${textSans15};
+
+	a {
+		color: ${palette('--standfirst-link-text')};
+		text-decoration: none;
+		:hover {
+			border-bottom: 1px solid ${palette('--standfirst-link-border')};
+		}
+	}
+`;
+
+export const CrosswordLinks = ({
+	crossword,
+}: {
+	crossword: CrosswordProps['data'];
+}) => {
+	return (
+		isUndefined(crossword.pdf) || (
+			<span css={crosswordLinkStyles}>
+				<a target="_blank" href={crossword.pdf} rel="noreferrer">
+					PDF version
+				</a>
+			</span>
+		)
+	);
+};