Automate selected logic, apply to articles with given tag

Author: frederickobrien

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

@@ -5,12 +5,6 @@ import { DirectoryPageNav } from './DirectoryPageNav';
 const meta = {
 	component: DirectoryPageNav,
 	title: 'Components/Directory Page Nav',
-	argTypes: {
-		selected: {
-			options: ['fixtures', 'tables', 'none'],
-			control: { type: 'select' },
-		},
-	},
 	parameters: {
 		chromatic: {
 			modes: {
@@ -28,14 +22,12 @@ type Story = StoryObj<typeof meta>;
 
 export const WomensEuro2025 = {
 	args: {
-		selected: 'fixtures',
 		pageId: 'football/women-s-euro-2025/table',
 	},
 } satisfies Story;
 
 export const OtherCompetition = {
 	args: {
-		selected: 'none',
 		pageId: 'football/premierleague/table',
 	},
 } satisfies Story;

dotcom-rendering/src/components/DirectoryPageNav.tsx

@@ -10,18 +10,20 @@ import {
 	palette,
 } from '@guardian/source/foundations';
 import { grid } from '../grid';
+import type { TagType } from '../types/tag';
 
 type Props = {
-	selected: Selected;
 	pageId: string;
+	pageTags?: TagType[];
 };
 
 interface DirectoryPageNavConfig {
 	pageIds: string[];
+	tagIds: string[];
 	textColor: string;
 	backgroundColor: string;
-	title: { label: string; link: string };
-	links: { label: string; href: string; selectedSlug: string | undefined }[];
+	title: { label: string; id: string };
+	links: { label: string; id: string }[];
 	backgroundImages?: {
 		mobile: string;
 		mobileLandscape: string;
@@ -39,32 +41,29 @@ const configs = [
 			'sport/ng-interactive/2026/feb/04/winter-olympics-results-milano-cortina-2026',
 			'sport/ng-interactive/2026/feb/04/winter-olympics-2026-latest-medal-table-milano-cortina',
 		],
+		tagIds: ['sport/winter-olympics-2026'],
 		textColor: palette.neutral[7],
 		backgroundColor: '#CCCCCC',
 		title: {
 			label: 'Winter Olympics 2026',
-			link: 'https://www.theguardian.com/sport/winter-olympics-2026',
+			id: 'sport/winter-olympics-2026',
 		},
 		links: [
 			{
 				label: 'Schedule',
-				href: 'https://www.theguardian.com/sport/ng-interactive/2026/feb/04/winter-olympics-full-schedule-milano-cortina-2026',
-				selectedSlug: 'schedule',
+				id: 'sport/ng-interactive/2026/feb/04/winter-olympics-full-schedule-milano-cortina-2026',
 			},
 			{
 				label: 'Results',
-				href: 'https://www.theguardian.com/sport/ng-interactive/2026/feb/04/winter-olympics-results-milano-cortina-2026',
-				selectedSlug: 'results',
+				id: 'sport/ng-interactive/2026/feb/04/winter-olympics-results-milano-cortina-2026',
 			},
 			{
 				label: 'Medal table',
-				href: 'https://www.theguardian.com/sport/ng-interactive/2026/feb/04/winter-olympics-2026-latest-medal-table-milano-cortina',
-				selectedSlug: undefined,
+				id: 'sport/ng-interactive/2026/feb/04/winter-olympics-2026-latest-medal-table-milano-cortina',
 			},
 			{
 				label: 'Full coverage',
-				href: 'https://www.theguardian.com/sport/winter-olympics-2026',
-				selectedSlug: undefined,
+				id: 'sport/winter-olympics-2026',
 			},
 		],
 		backgroundImages: {
@@ -80,10 +79,6 @@ const configs = [
 	},
 ] satisfies DirectoryPageNavConfig[];
 
-type Configs = typeof configs;
-type SelectedSlug = Configs[number]['links'][number]['selectedSlug'];
-type Selected = Exclude<SelectedSlug, undefined>;
-
 const backgroundImageStyles = (
 	images?: DirectoryPageNavConfig['backgroundImages'],
 ) => {
@@ -109,8 +104,14 @@ const backgroundImageStyles = (
 	};
 };
 
-export const DirectoryPageNav = ({ selected, pageId }: Props) => {
-	const config = configs.find((cfg) => cfg.pageIds.includes(pageId));
+export const DirectoryPageNav = ({ pageId, pageTags }: Props) => {
+	const config = configs.find(
+		(cfg) =>
+			cfg.pageIds.includes(pageId) ||
+			cfg.tagIds.some(
+				(tagId) => pageTags?.some((tag) => tag.id === tagId),
+			),
+	);
 
 	if (!config) {
 		return null;
@@ -225,24 +226,23 @@ export const DirectoryPageNav = ({ selected, pageId }: Props) => {
 
 	return (
 		<nav css={nav}>
-			<a href={config.title.link} css={largeLinkStyles}>
+			<a href={config.title.id} css={largeLinkStyles}>
 				{config.title.label}
 			</a>
 			<ul css={list}>
 				{config.links.map((link, i) => (
-					<li key={link.label} css={listItem}>
+					<li
+						key={link.label}
+						css={listItem}
+						style={pageId === link.id ? selectedStyles : {}}
+					>
 						<a
-							href={link.href}
+							href={`/${link.id}`}
 							css={
 								i === config.links.length - 1
 									? lastSmallLink
 									: smallLink
 							}
-							style={
-								link.selectedSlug === selected
-									? selectedStyles
-									: {}
-							}
 						>
 							{link.label}
 						</a>

dotcom-rendering/src/components/FootballMatchesPage.tsx

@@ -59,10 +59,7 @@ export const FootballMatchesPage = ({
 	pageId,
 }: Props) => (
 	<>
-		<DirectoryPageNav
-			selected={kind === 'FootballFixtures' ? 'fixtures' : 'none'}
-			pageId={pageId}
-		/>
+		<DirectoryPageNav pageId={pageId} />
 		<main
 			id="maincontent"
 			data-layout="FootballDataPageLayout"

dotcom-rendering/src/components/FootballTablesPage.tsx

@@ -31,7 +31,7 @@ export const FootballTablesPage = ({
 	guardianBaseUrl,
 }: Props) => (
 	<>
-		<DirectoryPageNav selected="none" pageId={pageId} />
+		<DirectoryPageNav pageId={pageId} />
 		<main
 			id="maincontent"
 			data-layout="FootballDataPageLayout"

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -258,7 +258,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 						/>
 					</Island>
 				)}
-				<DirectoryPageNav selected="none" pageId={pageId} />
+				<DirectoryPageNav pageId={pageId} />
 
 				{filteredCollections.map((collection, index) => {
 					// Backfills should be added to the end of any curated content

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -291,7 +291,10 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 				</>
 			)}
 			<main data-layout="InteractiveLayout">
-				<DirectoryPageNav selected="none" pageId={article.pageId} />
+				<DirectoryPageNav
+					pageId={article.pageId}
+					pageTags={article.tags}
+				/>
 				<Section
 					fullWidth={true}
 					showTopBorder={false}

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -20,6 +20,7 @@ import { ArticleTitle } from '../components/ArticleTitle';
 import { Border } from '../components/Border';
 import { Carousel } from '../components/Carousel.importable';
 import { DecideLines } from '../components/DecideLines';
+import { DirectoryPageNav } from '../components/DirectoryPageNav';
 import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
 import { GridItem } from '../components/GridItem';
@@ -356,6 +357,10 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 						<AdPortals />
 					</Island>
 				)}
+				<DirectoryPageNav
+					pageId={article.pageId}
+					pageTags={article.tags}
+				/>
 				<Section
 					fullWidth={true}
 					showTopBorder={false}

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -21,6 +21,7 @@ import { ArticleTitle } from '../components/ArticleTitle';
 import { Border } from '../components/Border';
 import { Carousel } from '../components/Carousel.importable';
 import { DecideLines } from '../components/DecideLines';
+import { DirectoryPageNav } from '../components/DirectoryPageNav';
 import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
 import { GetMatchNav } from '../components/GetMatchNav.importable';
@@ -437,6 +438,10 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 						<AdPortals />
 					</Island>
 				)}
+				<DirectoryPageNav
+					pageId={article.pageId}
+					pageTags={article.tags}
+				/>
 				<Section
 					fullWidth={true}
 					showTopBorder={false}

dotcom-rendering/src/layouts/TagPageLayout.tsx

@@ -100,7 +100,7 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 			</div>
 
 			<main data-layout="TagPageLayout" id="maincontent">
-				<DirectoryPageNav selected="none" pageId={tagPage.pageId} />
+				<DirectoryPageNav pageId={tagPage.pageId} />
 				{isAccessibilityPage && (
 					<Island priority="critical" defer={{ until: 'visible' }}>
 						<Accessibility />