Merge branch 'e2e/add-react-crossword' of github.com:guardian/dotcom-…

…rendering into e2e/add-react-crossword
guardian · Dec 12, 2024 · bf139e7 · bf139e7
2 parents 4212c19 + 53a0cef
commit bf139e7
Show file tree

Hide file tree

Showing 14 changed files with 812 additions and 45 deletions.
diff --git a/dotcom-rendering/package.json b/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/[email protected]",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "12.0.0",

diff --git a/dotcom-rendering/scripts/env/check-deps.js b/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\/[email protected]/,
+]);
+
+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.');

diff --git a/dotcom-rendering/src/components/Crossword.importable.tsx b/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['data']) => (
+	<ReactCrossword data={data} clueMinWidth={150} />
+);
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/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';
@@ -841,6 +842,12 @@ export const renderElement = ({
 		case 'model.dotcomrendering.pageElements.DisclaimerBlockElement': {
 			return <AffiliateDisclaimerInline />;
 		}
+		case 'model.dotcomrendering.pageElements.CrosswordElement':
+			return (
+				<Island priority="critical" defer={{ until: 'visible' }}>
+					<Crossword {...element.crossword} />
+				</Island>
+			);
 		case 'model.dotcomrendering.pageElements.AudioBlockElement':
 		case 'model.dotcomrendering.pageElements.ContentAtomBlockElement':
 		case 'model.dotcomrendering.pageElements.GenericAtomBlockElement':