World cup 2026 tagged article nav

ab-testing/config/abTests.ts

@@ -133,6 +133,18 @@ const ABTests: ABTest[] = [
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: true,
 	},
+	{
+		name: "webx-world-cup-2026-subnav",
+		description:
+			"Test of World Cup 2026 subnav on world cup related content",
+		owners: ["dotcom.platform@guardian.co.uk:"],
+		expirationDate: "2026-07-20",
+		type: "server",
+		status: "ON",
+		audienceSize: 0 / 100,
+		groups: ["enable"],
+		shouldForceMetricsCollection: false,
+	},
 ];
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");

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

@@ -1,7 +1,18 @@
 import { allModes } from '../../.storybook/modes';
 import preview from '../../.storybook/preview';
+import { BetaABTests } from '../experiments/lib/beta-ab-tests';
+import { setBetaABTests } from '../lib/useAB';
+import { ConfigProvider } from './ConfigContext';
 import { DirectoryPageNav } from './DirectoryPageNav';
 
+const mockAB = new BetaABTests({
+	isServer: true,
+	serverSideABTests: {
+		'webx-world-cup-2026-subnav': 'enable',
+	},
+});
+setBetaABTests(mockAB);
+
 const meta = preview.meta({
 	component: DirectoryPageNav,
 	title: 'Components/Directory Page Nav',
@@ -22,6 +33,64 @@ export const WomensEuro2025 = meta.story({
 	},
 });
 
+export const WorldCup2026 = meta.story({
+	args: {
+		pageId: 'football/world-cup-2026',
+	},
+});
+
+export const WorldCup2026MatchCenter = meta.story({
+	args: {
+		pageId: 'football/world-cup-2026/overview',
+	},
+});
+
+export const WorldCup2026ArticleWeb = meta.story({
+	args: {
+		pageId: 'football/2026/may/19/brazils-world-cup-squad-offers-a-hint-of-the-magical-pragmatism-of-1994',
+		pageTags: [
+			{
+				id: 'football/world-cup-2026',
+				type: 'Topic',
+				title: 'World Cup 2026',
+			},
+		],
+	},
+});
+
+export const WorldCup2026ArticleApp = meta.story({
+	render: (args) => (
+		<ConfigProvider
+			value={{
+				renderingTarget: 'Apps',
+				darkModeAvailable: true,
+				assetOrigin: '/',
+				editionId: 'UK',
+			}}
+		>
+			<DirectoryPageNav {...args} />
+		</ConfigProvider>
+	),
+	args: {
+		pageId: 'football/2026/may/19/brazils-world-cup-squad-offers-a-hint-of-the-magical-pragmatism-of-1994',
+		pageTags: [
+			{
+				id: 'football/world-cup-2026',
+				type: 'Topic',
+				title: 'World Cup 2026',
+			},
+		],
+	},
+	parameters: {
+		chromatic: {
+			modes: {
+				'apps light': allModes['light'],
+				'apps dark': allModes['dark'],
+			},
+		},
+	},
+});
+
 export const OtherCompetition = meta.story({
 	args: {
 		pageId: 'football/premierleague/table',