Revert "removing crossowrd formatting"

This reverts commit f3b9feb.

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/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>
+		)
+	);
+};