initial addition of crossword player

this is a first pass, it needs work

dotcom-rendering/index.d.ts

@@ -2,6 +2,9 @@
 // 3rd party type declarations //
 // ------------------------------
 
+type GuardianCrossword =
+	import('@guardian/react-crossword-next').CrosswordProps['data'];
+
 declare module 'chromatic/isChromatic';
 
 declare module 'dynamic-import-polyfill' {

dotcom-rendering/package.json

@@ -49,7 +49,7 @@
 		"@guardian/identity-auth-frontend": "4.0.0",
 		"@guardian/libs": "19.2.1",
 		"@guardian/ophan-tracker-js": "2.2.5",
-		"@guardian/react-crossword-next": "npm:@guardian/[email protected]20241128162754",
+		"@guardian/react-crossword-next": "npm:@guardian/[email protected]20241209150926",
 		"@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

@@ -0,0 +1,6 @@
+import { Crossword as ReactCrossword } from '@guardian/react-crossword-next';
+import type { CrosswordProps } from '@guardian/react-crossword-next';
+
+export const Crossword = ({ data }: CrosswordProps) => (
+	<ReactCrossword data={data} clueMinWidth={150} />
+);

dotcom-rendering/src/components/CrosswordInstructions.tsx

@@ -0,0 +1,28 @@
+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,
+	className,
+}: {
+	instructions: string;
+	className?: string;
+}) => (
+	<div css={instructionsStyles} className={className}>
+		<strong css={headerStyles}>Special instructions: </strong>
+		{instructions}
+	</div>
+);

dotcom-rendering/src/components/CrosswordLinks.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
+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,
+	className,
+}: {
+	crossword: GuardianCrossword;
+	className?: string;
+}) => {
+	return (
+		isUndefined(crossword.pdf) || (
+			<span css={crosswordLinkStyles} className={className}>
+				<a target="_blank" href={crossword.pdf} rel="noreferrer">
+					PDF version
+				</a>
+			</span>
+		)
+	);
+};