diff --git a/dotcom-rendering/src/components/FootballCompetitionNav.stories.tsx b/dotcom-rendering/src/components/DirectoryPageNav.stories.tsx similarity index 79% rename from dotcom-rendering/src/components/FootballCompetitionNav.stories.tsx rename to dotcom-rendering/src/components/DirectoryPageNav.stories.tsx index 39f491b7b29..304d75ac4cc 100644 --- a/dotcom-rendering/src/components/FootballCompetitionNav.stories.tsx +++ b/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; +} satisfies Meta; export default meta; diff --git a/dotcom-rendering/src/components/FootballCompetitionNav.tsx b/dotcom-rendering/src/components/DirectoryPageNav.tsx similarity index 59% rename from dotcom-rendering/src/components/FootballCompetitionNav.tsx rename to dotcom-rendering/src/components/DirectoryPageNav.tsx index 356697892a5..6bdc57cba72 100644 --- a/dotcom-rendering/src/components/FootballCompetitionNav.tsx +++ b/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 ( - ) : null; + ); +}; const nav = css({ backgroundColor: palette.news[400], diff --git a/dotcom-rendering/src/components/FootballMatchesPage.stories.tsx b/dotcom-rendering/src/components/FootballMatchesPage.stories.tsx index 2a87583c7c7..b5d9f681795 100644 --- a/dotcom-rendering/src/components/FootballMatchesPage.stories.tsx +++ b/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 = { diff --git a/dotcom-rendering/src/components/FootballMatchesPage.tsx b/dotcom-rendering/src/components/FootballMatchesPage.tsx index 39d0f0cc888..1acf80cae25 100644 --- a/dotcom-rendering/src/components/FootballMatchesPage.tsx +++ b/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) => ( <> - diff --git a/dotcom-rendering/src/components/FootballTablesPage.stories.tsx b/dotcom-rendering/src/components/FootballTablesPage.stories.tsx index c6a8ee544f7..242312c79c5 100644 --- a/dotcom-rendering/src/components/FootballTablesPage.stories.tsx +++ b/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'; diff --git a/dotcom-rendering/src/components/FootballTablesPage.tsx b/dotcom-rendering/src/components/FootballTablesPage.tsx index ea29dc22700..e0420d36ccd 100644 --- a/dotcom-rendering/src/components/FootballTablesPage.tsx +++ b/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) => ( <> - +