Handle crossword articles (#12925)

* initial addition of crossword player

Co-authored-by: Oliver Abrahams <ollie.abrahams@guardian.co.uk>

---------

Co-authored-by: oliverabrahams <ollie.abrahams@guardian.co.uk>
Co-authored-by: Ravi <7014230+arelra@users.noreply.github.com>

dotcom-rendering/package.json

@@ -50,6 +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/react-crossword@0.0.0-canary-20250114144251",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "12.0.0",

dotcom-rendering/scripts/env/check-deps.js

@@ -8,10 +8,24 @@ if (pkg.devDependencies) {
 	process.exit(1);
 }
 
-const mismatches = Object.entries(pkg.dependencies).filter(
-	([, version]) =>
-		!semver.valid(version) && !version.startsWith('workspace:'),
-);
+/**
+ * We don't check packages that are not semver-compatible
+ * @type {RegExp[]}
+ */
+const exceptions = /** @type {const} */ ([
+	/npm:@guardian\/react-crossword@0.0.0-canary/,
+]);
+
+const mismatches = Object.entries(pkg.dependencies)
+	.filter(
+		([, version]) =>
+			!exceptions.some((exception) => exception.test(version)),
+	)
+
+	.filter(
+		([, version]) =>
+			!semver.valid(version) && !version.startsWith('workspace:'),
+	);
 
 if (mismatches.length !== 0) {
 	warn('dotcom-rendering dependencies should be pinned.');

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 }: { data: CrosswordProps['data'] }) => (
+	<ReactCrossword data={data} clueMinWidth={150} />
+);

dotcom-rendering/src/lib/renderElement.tsx

@@ -9,6 +9,7 @@ import { CartoonComponent } from '../components/CartoonComponent';
 import { ChartAtom } from '../components/ChartAtom.importable';
 import { CodeBlockComponent } from '../components/CodeBlockComponent';
 import { CommentBlockComponent } from '../components/CommentBlockComponent';
+import { Crossword } from '../components/Crossword.importable';
 import { DividerBlockComponent } from '../components/DividerBlockComponent';
 import { DocumentBlockComponent } from '../components/DocumentBlockComponent.importable';
 import { EmailSignUpWrapper } from '../components/EmailSignUpWrapper';
@@ -860,6 +861,12 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.DisclaimerBlockElement': {
 			return <AffiliateDisclaimerInline />;
 		}
+		case 'model.dotcomrendering.pageElements.CrosswordElement':
+			return (
+				<Island priority="critical" defer={{ until: 'visible' }}>
+					<Crossword data={element.crossword} />
+				</Island>
+			);
 		case 'model.dotcomrendering.pageElements.AudioBlockElement':
 		case 'model.dotcomrendering.pageElements.ContentAtomBlockElement':
 		case 'model.dotcomrendering.pageElements.GenericAtomBlockElement':