WIP/POC: crossword page in DCR

dotcom-rendering/index.d.ts

@@ -1,3 +1,5 @@
+type GuardianCrossword = import('mycrossword').GuardianCrossword;
+
 type SharePlatform =
 	| 'facebook'
 	| 'twitter'
@@ -188,6 +190,12 @@ declare module '*.svg' {
 	export default content;
 }
 
+declare module '!to-string-loader*' {
+	const value: any;
+	// eslint-disable-next-line import/no-default-export -- This is how we import mycrossword's CSS bundle
+	export default value;
+}
+
 // Extend PerformanceEntry from lib.dom.ts with current 'In Draft' properties (to allow access as use in browsers that support)
 // lib.dom.ts: https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.performanceentry.html
 // Draft: https://wicg.github.io/element-timing/#sec-performance-element-timing

dotcom-rendering/package.json

@@ -157,6 +157,7 @@
 		"lz-string": "1.5.0",
 		"mockdate": "3.0.5",
 		"node-fetch": "3.3.2",
+		"mycrossword": "1.2.4",
 		"postcss-styled-syntax": "0.6.3",
 		"preact": "10.15.1",
 		"preact-render-to-string": "6.0.2",

dotcom-rendering/src/components/ArticleContainer.tsx

@@ -27,6 +27,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 { ArticleDesign, type ArticleFormat, 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 {
 	getBylineComponentsFromTokens,
 	getSoleContributor,
@@ -159,6 +160,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,15 @@
+import type { GuardianCrossword } from 'mycrossword';
+import { MyCrossword } from 'mycrossword/dist/cjs/components';
+import xwCss from '!to-string-loader!css-loader!mycrossword/dist/index.css';
+
+export type CrosswordProps = {
+	id: string;
+	crossword: GuardianCrossword;
+};
+
+export const Crossword = ({ crossword, id }: CrosswordProps) => (
+	<>
+		<style>{xwCss}</style>
+		<MyCrossword id={id} data={crossword} />
+	</>
+);

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,
+	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,49 @@
+import { css } from '@emotion/react';
+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 (
+		<span css={crosswordLinkStyles} className={className}>
+			<a
+				target="_blank"
+				href={`/crosswords/${crossword.crosswordType}/${crossword.number}/print`}
+				rel="noreferrer"
+			>
+				Print
+			</a>{' '}
+			|{' '}
+			{!!crossword.pdf && (
+				<>
+					<a target="_blank" href={crossword.pdf} rel="noreferrer">
+						PDF version
+					</a>{' '}
+					|{' '}
+				</>
+			)}
+			<a
+				href={`/crosswords/accessible/${crossword.crosswordType}/${crossword.number}`}
+			>
+				Accessible version
+			</a>
+		</span>
+	);
+};