Add sticky clue

libs/@guardian/react-crossword/src/@types/Layout.ts

@@ -3,11 +3,13 @@ import type { AnagramHelper } from '../components/AnagramHelper';
 import type { Clues } from '../components/Clues';
 import type { Controls } from '../components/Controls';
 import type { Grid } from '../components/Grid';
+import type { StickyClue } from '../components/StickyClue';
 
 export type LayoutProps = {
 	Grid: typeof Grid;
 	Controls: typeof Controls;
 	AnagramHelper: typeof AnagramHelper;
+	StickyClue: typeof StickyClue;
 	Clues: typeof Clues;
 	SavedMessage: ComponentType;
 	gridWidth: number;

libs/@guardian/react-crossword/src/@types/crossword.ts

@@ -1,6 +1,6 @@
 import type { CAPIEntry } from './CAPI';
 import type { Direction } from './Direction';
-import type { Entry, EntryID } from './Entry';
+import type { EntryID } from './Entry';
 
 export type Axis = 'x' | 'y';
 
@@ -11,7 +11,7 @@ export type Cell = Coords & {
 	number?: number;
 
 	/** Array of entries that this solution is part of */
-	group?: CrosswordEntry['group'];
+	group?: CAPIEntry['group'];
 
 	/** The cell's solution */
 	solution?: string;
@@ -21,14 +21,13 @@ export type Cells = Map<`x${number}y${number}`, Cell> & {
 	getByCoords: (arg0: Coords) => ReturnType<Cells['get']>;
 };
 
-export type Entries = Map<EntryID, CAPIEntry>;
+export type Entries = Map<EntryID, CrosswordEntry>;
 
 export type Progress = string[][];
 
-export type CrosswordEntry = Entry<number> & {
-	direction: Direction;
-	clue: string;
-	solution?: string;
+export type CrosswordEntry = CAPIEntry & {
+	nextEntryID: EntryID;
+	prevEntryID: EntryID;
 };
 
 export type Crossword = {

libs/@guardian/react-crossword/src/components/Crossword.stories.tsx

@@ -38,6 +38,20 @@ export const ShortContainer: StoryFn = () => {
 	);
 };
 
+export const ShortAndNarrowContainer: StoryFn = () => {
+	return (
+		<>
+			<div
+				style={{
+					height: 400,
+					width: 600,
+				}}
+			>
+				<Crossword data={data} progress={progress} />
+			</div>
+		</>
+	);
+};
 export const MultiplePlayersColumn: StoryFn = () => {
 	return (
 		<>
@@ -73,12 +87,14 @@ export const CustomLayoutRaw: StoryFn = () => {
 		Clues,
 		Grid,
 		Controls,
+		StickyClue,
 		SavedMessage,
 		gridWidth,
 	}: LayoutProps) => {
 		return (
 			<>
 				<p>gridWidth: {gridWidth}</p>
+				<StickyClue />
 				<Grid />
 				<Controls />
 				<SavedMessage />
@@ -116,6 +132,7 @@ export const CustomisedLayout: StoryFn = () => {
 		Grid,
 		Controls,
 		SavedMessage,
+		StickyClue,
 		gridWidth,
 	}: LayoutProps) => {
 		return (
@@ -124,6 +141,7 @@ export const CustomisedLayout: StoryFn = () => {
 					<Clues direction="across" Header={CluesHeader} />
 				</div>
 				<div style={{ flexBasis: gridWidth, minWidth: '15em' }}>
+					<StickyClue />
 					<Grid />
 					<Controls />
 					<div

libs/@guardian/react-crossword/src/components/Crossword.tsx

@@ -11,6 +11,7 @@ import { AnagramHelper } from './AnagramHelper';
 import { Clues } from './Clues';
 import { Controls } from './Controls';
 import { Grid } from './Grid';
+import { StickyClue } from './StickyClue';
 
 export type CrosswordProps = {
 	data: CAPICrossword;
@@ -35,6 +36,7 @@ const layoutComponents: Omit<LayoutProps, 'gridWidth'> = {
 	Grid,
 	Controls,
 	AnagramHelper,
+	StickyClue,
 	Clues,
 	SavedMessage,
 };

libs/@guardian/react-crossword/src/components/StickyClue.tsx

@@ -0,0 +1,88 @@
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
+import {
+	Button,
+	SvgChevronLeftSingle,
+	SvgChevronRightSingle,
+} from '@guardian/source/react-components';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import { useCurrentCell } from '../context/CurrentCell';
+import { useCurrentClue } from '../context/CurrentClue';
+import { useData } from '../context/Data';
+import { Clue } from './Clue';
+
+type StickyClueProps = {
+	styles?: SerializedStyles;
+};
+
+export const StickyClue = forwardRef(
+	(props: StickyClueProps, forwardedRef: ForwardedRef<HTMLDivElement>) => {
+		const { entries, cells } = useData();
+		const { currentEntryId, setCurrentEntryId } = useCurrentClue();
+		const { setCurrentCell } = useCurrentCell();
+		const entry = !isUndefined(currentEntryId)
+			? entries.get(currentEntryId)
+			: undefined;
+
+		const handleClick = (direction: 'prev' | 'next') => {
+			if (!entry) {
+				return;
+			}
+			const newEntryId =
+				direction === 'prev' ? entry.prevEntryID : entry.nextEntryID;
+			const newEntry = entries.get(newEntryId);
+			if (newEntry) {
+				setCurrentCell(cells.getByCoords(newEntry.position));
+				setCurrentEntryId(newEntryId);
+			}
+		};
+
+		const stickyClue = css`
+			top: 0;
+			position: sticky;
+			display: flex;
+			z-index: 1;
+			min-height: 3.5em;
+			justify-content: space-between;
+			background: white;
+		`;
+
+		return (
+			<div
+				aria-hidden={true}
+				css={[props.styles, stickyClue]}
+				ref={forwardedRef}
+			>
+				{entry && (
+					<>
+						{' '}
+						<Button
+							aria-hidden={true}
+							priority={'tertiary'}
+							onClick={() => handleClick('prev')}
+							tabIndex={-1}
+						>
+							<SvgChevronLeftSingle size="small" />
+						</Button>
+						<Clue
+							entry={entry}
+							css={css`
+								margin: 0 5px;
+							`}
+						/>
+						<Button
+							aria-hidden={true}
+							tabIndex={-1}
+							priority={'tertiary'}
+							onClick={() => handleClick('next')}
+						>
+							<SvgChevronRightSingle size="small" />
+						</Button>
+					</>
+				)}
+			</div>
+		);
+	},
+);

libs/@guardian/react-crossword/src/layouts/ScreenLayout.tsx

@@ -4,6 +4,7 @@ import { textSans12, textSans14 } from '@guardian/source/foundations';
 import type { ReactNode } from 'react';
 import { memo } from 'react';
 import type { LayoutProps } from '../@types/Layout';
+import { StickyClue } from '../components/StickyClue';
 import { useShowAnagramHelper } from '../context/ShowAnagramHelper';
 import { useTheme } from '../context/Theme';
 
@@ -68,6 +69,11 @@ const Layout = ({
 					}
 				`}
 			>
+				<StickyClue
+					styles={css`
+						max-width: ${gridWidth}px;
+					`}
+				/>
 				{showAnagramHelper ? <AnagramHelper /> : <Grid />}
 				<div
 					css={css`

libs/@guardian/react-crossword/src/utils/parseCrosswordData.ts

@@ -1,3 +1,4 @@
+import { isUndefined } from '@guardian/libs';
 import type { CAPICrossword } from '../@types/CAPI';
 import type {
 	Cell,
@@ -52,9 +53,26 @@ export const parseCrosswordData = (data: {
 	// For each entry, we'll populate `entries` and `separators` and `cells`.
 	//
 	// We're mutating the 'empty' targets so we can do it all in one loop.
-	for (const entry of data.entries) {
+
+	for (let j = 0; j < data.entries.length; j += 1) {
+		const nextEntryIndex = (j + 1) % data.entries.length;
+		const prevEntryIndex = (j - 1 + data.entries.length) % data.entries.length;
+		const nextEntry = data.entries[nextEntryIndex];
+		const prevEntry = data.entries[prevEntryIndex];
+		const entry = data.entries[j];
+		if (
+			isUndefined(entry) ||
+			isUndefined(nextEntry) ||
+			isUndefined(prevEntry)
+		) {
+			throw new Error('Entry out of range');
+		}
 		// populate the `entries` map
-		entries.set(entry.id, entry);
+		entries.set(entry.id, {
+			...entry,
+			nextEntryID: nextEntry.id,
+			prevEntryID: prevEntry.id,
+		});
 
 		// populate the `separators` array
 		for (const [separator, locations] of Object.entries(