Generic subnav component

dotcom-rendering/src/components/FootballCompetitionNav.stories.tsx → dotcom-rendering/src/components/DirectoryPageNav.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
-import { FootballCompetitionNav } from './FootballCompetitionNav';
+import { DirectoryPageNav } from './DirectoryPageNav';
 
 const meta = {
-	component: FootballCompetitionNav,
-	title: 'Components/Football Competition Nav',
+	component: DirectoryPageNav,
+	title: 'Components/Directory Page Nav',
 	argTypes: {
 		selected: {
 			options: ['fixtures', 'tables', 'none'],
@@ -20,7 +20,7 @@ const meta = {
 			},
 		},
 	},
-} satisfies Meta<typeof FootballCompetitionNav>;
+} satisfies Meta<typeof DirectoryPageNav>;
 
 export default meta;
 

dotcom-rendering/src/components/FootballCompetitionNav.tsx → dotcom-rendering/src/components/DirectoryPageNav.tsx

@@ -12,69 +12,88 @@ import {
 import { grid } from '../grid';
 
 type Props = {
-	selected: 'fixtures' | 'tables' | 'none';
+	selected: string;
 	pageId: string;
 };
 
-export const FootballCompetitionNav = ({ selected, pageId }: Props) =>
-	pageId.includes('women-s-euro-2025') ? (
+interface DirectoryPageNavConfig {
+	pageId: string;
+	// backgroundColor: string;
+	// textColor: string;
+	title: { label: string; link: string };
+	links: { label: string; href: string; selectedSlug?: string }[];
+}
+
+// TODO: Configurable colours for different navs
+
+const configs: { [key: string]: DirectoryPageNavConfig } = {
+	'women-s-euro-2025': {
+		pageId: 'women-s-euro-2025',
+		// backgroundColor: palette.news[400],
+		// textColor: palette.neutral[100],
+		title: {
+			label: "Women's Euro 2025",
+			link: '/football/women-s-euro-2025',
+		},
+		links: [
+			{
+				label: 'Fixtures',
+				href: '/football/women-s-euro-2025/fixtures',
+				selectedSlug: 'fixtures',
+			},
+			{
+				label: 'Tables',
+				href: '/football/women-s-euro-2025/overview',
+				selectedSlug: 'tables',
+			},
+			{ label: 'Top scorers', href: '/p/x2e3za' },
+			{ label: 'Players guide', href: '/p/x27nz8' },
+			{
+				label: 'Full coverage',
+				href: '/football/women-s-euro-2025',
+			},
+		],
+	},
+};
+
+export const DirectoryPageNav = ({ selected, pageId }: Props) => {
+	const config = Object.values(configs).find((cfg) =>
+		pageId.includes(cfg.pageId),
+	);
+
+	if (!config) {
+		return null;
+	}
+
+	return (
 		<nav css={nav}>
-			<a
-				href="https://www.theguardian.com/football/women-s-euro-2025"
-				css={largeLinkStyles}
-			>
-				Women's Euro 2025
+			<a href={config.title.link} css={largeLinkStyles}>
+				{config.title.label}
 			</a>
 			<ul css={list}>
-				<li
-					css={listItem}
-					style={selected === 'fixtures' ? selectedStyles : undefined}
-				>
-					<a
-						href="https://www.theguardian.com/football/women-s-euro-2025/fixtures"
-						css={smallLink}
-					>
-						Fixtures
-					</a>
-				</li>
-				<li
-					css={listItem}
-					style={selected === 'tables' ? selectedStyles : undefined}
-				>
-					<a
-						href="https://www.theguardian.com/football/women-s-euro-2025/overview"
-						css={smallLink}
-					>
-						Tables
-					</a>
-				</li>
-				<li css={listItem}>
-					<a
-						href="https://www.theguardian.com/p/x2e3za"
-						css={smallLink}
-					>
-						Top scorers
-					</a>
-				</li>
-				<li css={listItem}>
-					<a
-						href="https://www.theguardian.com/p/x27nz8"
-						css={smallLink}
-					>
-						Players guide
-					</a>
-				</li>
-				<li css={listItem}>
-					<a
-						href="https://www.theguardian.com/football/women-s-euro-2025"
-						css={lastSmallLink}
-					>
-						Full coverage
-					</a>
-				</li>
+				{config.links.map((link, i) => (
+					<li key={link.label} css={listItem}>
+						<a
+							href={link.href}
+							css={
+								i === config.links.length - 1
+									? lastSmallLink
+									: smallLink
+							}
+							style={
+								link.selectedSlug === selected
+									? selectedStyles
+									: {}
+							}
+						>
+							{link.label}
+						</a>
+					</li>
+				))}
 			</ul>
 		</nav>
-	) : null;
+	);
+};
 
 const nav = css({
 	backgroundColor: palette.news[400],

dotcom-rendering/src/components/FootballMatchesPage.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { initialDays, regions } from '../../fixtures/manual/footballData';
-import { WomensEuro2025 } from './FootballCompetitionNav.stories';
+import { WomensEuro2025 } from './DirectoryPageNav.stories';
 import { FootballMatchesPage } from './FootballMatchesPage';
 
 const meta = {

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -12,7 +12,7 @@ import type { Result } from '../lib/result';
 import { palette } from '../palette';
 import type { FootballMatchListPageKind, Region } from '../sportDataPage';
 import { AdSlot } from './AdSlot.web';
-import { FootballCompetitionNav } from './FootballCompetitionNav';
+import { DirectoryPageNav } from './DirectoryPageNav';
 import { FootballCompetitionSelect } from './FootballCompetitionSelect';
 import { FootballMatchList } from './FootballMatchList';
 
@@ -59,7 +59,7 @@ export const FootballMatchesPage = ({
 	pageId,
 }: Props) => (
 	<>
-		<FootballCompetitionNav
+		<DirectoryPageNav
 			selected={kind === 'FootballFixtures' ? 'fixtures' : 'none'}
 			pageId={pageId}
 		/>

dotcom-rendering/src/components/FootballTablesPage.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { regions } from '../../fixtures/manual/footballData';
-import { WomensEuro2025 } from './FootballCompetitionNav.stories';
+import { WomensEuro2025 } from './DirectoryPageNav.stories';
 import { FootballTableList as TableListDefault } from './FootballTableList.stories';
 import { FootballTablesPage } from './FootballTablesPage';
 

dotcom-rendering/src/components/FootballTablesPage.tsx

@@ -10,7 +10,7 @@ import { grid } from '../grid';
 import { palette } from '../palette';
 import type { Region } from '../sportDataPage';
 import { AdSlot } from './AdSlot.web';
-import { FootballCompetitionNav } from './FootballCompetitionNav';
+import { DirectoryPageNav } from './DirectoryPageNav';
 import { FootballTableList } from './FootballTableList';
 import { FootballTablesCompetitionSelect } from './FootballTablesCompetitionSelect.importable';
 import { Island } from './Island';
@@ -31,7 +31,7 @@ export const FootballTablesPage = ({
 	guardianBaseUrl,
 }: Props) => (
 	<>
-		<FootballCompetitionNav selected="none" pageId={pageId} />
+		<DirectoryPageNav selected="none" pageId={pageId} />
 		<main
 			id="maincontent"
 			data-layout="FootballDataPageLayout"