Link match header league name to tag page (#15602)

* Allow league name to be a link

* Allow league name and URL to be passed to header

* Move league name and URL to vars

Author: jamesmockett

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

@@ -36,7 +36,6 @@ export const Fixture = meta.story({
 	args: {
 		initialTab: 'info',
 		initialData: {
-			leagueName: feHeaderData.competitionName,
 			match: {
 				kind: 'Fixture',
 				kickOff: new Date('2025-11-05T20:30:00Z'),
@@ -56,6 +55,7 @@ export const Fixture = meta.story({
 				matchKind: 'Fixture',
 			},
 		},
+		leagueName: 'Premier League',
 		edition: 'UK',
 		getHeaderData: () =>
 			getMockData({
@@ -102,6 +102,8 @@ export const Fixture = meta.story({
 export const Live = meta.story({
 	args: {
 		initialTab: 'live',
+		leagueName: 'Premier League',
+		leagueURL: 'https://www.theguardian.com/football/premierleague',
 		edition: 'EUR',
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
@@ -147,6 +149,8 @@ export const Live = meta.story({
 export const Result = meta.story({
 	args: {
 		initialTab: 'report',
+		leagueName: 'Premier League',
+		leagueURL: 'https://www.theguardian.com/football/premierleague',
 		edition: 'AU',
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
@@ -190,6 +194,8 @@ export const Result = meta.story({
 export const AppsResult = meta.story({
 	args: {
 		initialTab: 'report',
+		leagueName: 'Premier League',
+		leagueURL: 'https://www.theguardian.com/football/premierleague',
 		edition: 'AU',
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx

@@ -13,7 +13,7 @@ import {
 	textSansItalic15Object,
 	until,
 } from '@guardian/source/foundations';
-import { type ComponentProps, type ReactNode, useMemo } from 'react';
+import { type ComponentProps, useMemo } from 'react';
 import type { SWRConfiguration } from 'swr';
 import useSWR from 'swr';
 import type { FootballMatch } from '../../footballMatchV2';
@@ -39,6 +39,8 @@ import { Tabs } from './Tabs';
 export type FootballMatchHeaderProps = {
 	initialTab: ComponentProps<typeof Tabs>['selected'];
 	initialData?: HeaderData;
+	leagueName: string;
+	leagueURL?: string;
 	edition: EditionId;
 	matchHeaderURL: string;
 	renderingTarget: RenderingTarget;
@@ -60,7 +62,6 @@ export const FootballMatchHeader = (props: Props) => {
 
 	const match = data?.match ?? props.initialData?.match;
 	const tabs = data?.tabs ?? props.initialData?.tabs;
-	const leagueName = data?.leagueName ?? props.initialData?.leagueName;
 
 	if (error) {
 		if (
@@ -79,7 +80,7 @@ export const FootballMatchHeader = (props: Props) => {
 		return null;
 	}
 
-	if (match === undefined || tabs === undefined || leagueName === undefined) {
+	if (match === undefined || tabs === undefined) {
 		return (
 			<Placeholder
 				heights={
@@ -113,7 +114,8 @@ export const FootballMatchHeader = (props: Props) => {
 				}}
 			>
 				<StatusLine
-					leagueName={leagueName}
+					leagueName={props.leagueName}
+					leagueURL={props.leagueURL}
 					match={match}
 					edition={props.edition}
 				/>
@@ -161,6 +163,7 @@ const fetcher =
 
 const StatusLine = (props: {
 	leagueName: string;
+	leagueURL?: string;
 	match: FootballMatch;
 	edition: EditionId;
 }) => (
@@ -179,15 +182,20 @@ const StatusLine = (props: {
 			color: palette(secondaryText(props.match.kind)),
 		}}
 	>
-		<LeagueName matchKind={props.match.kind}>{props.leagueName}</LeagueName>
+		<LeagueName
+			matchKind={props.match.kind}
+			name={props.leagueName}
+			url={props.leagueURL}
+		/>
 		{props.match.venue ? `${props.match.venue} • ` : null}
 		<MatchStatus edition={props.edition} match={props.match} />
 	</p>
 );
 
 const LeagueName = (props: {
 	matchKind: FootballMatch['kind'];
-	children: ReactNode;
+	name: string;
+	url?: string;
 }) => (
 	<>
 		<span
@@ -220,7 +228,20 @@ const LeagueName = (props: {
 				},
 			}}
 		>
-			{props.children}
+			{props.url ? (
+				<a
+					href={props.url}
+					css={{
+						color: 'inherit',
+						textDecoration: 'none',
+						'&:hover': { textDecoration: 'underline' },
+					}}
+				>
+					{props.name}
+				</a>
+			) : (
+				props.name
+			)}
 		</span>
 		<span
 			css={{

dotcom-rendering/src/components/FootballMatchHeader/headerData.ts

@@ -16,7 +16,6 @@ import type { Tabs } from './Tabs';
 export type HeaderData = {
 	tabs: ComponentProps<typeof Tabs>;
 	match: FootballMatch;
-	leagueName: string;
 };
 
 export const parse =
@@ -55,7 +54,6 @@ export const parse =
 		return ok({
 			match: parsedMatch.value,
 			tabs: maybeTabs.value,
-			leagueName: feData.value.competitionName,
 		});
 	};
 

dotcom-rendering/src/components/FootballMatchHeaderWrapper.island.tsx

@@ -16,6 +16,8 @@ export const FootballMatchHeaderWrapper = (props: Props) => (
 	<FootballMatchHeader
 		initialTab={props.initialTab}
 		initialData={props.initialData}
+		leagueName={props.leagueName}
+		leagueURL={props.leagueURL}
 		edition={props.edition}
 		matchHeaderURL={props.matchHeaderURL}
 		article={props.article}

dotcom-rendering/src/components/FootballMatchInfoPage.tsx

@@ -34,7 +34,6 @@ export const FootballMatchInfoPage = ({
 				<FootballMatchHeaderWrapper
 					initialTab="info"
 					initialData={{
-						leagueName: competitionName,
 						match: matchInfo,
 						tabs: {
 							selected: 'info',
@@ -44,6 +43,7 @@ export const FootballMatchInfoPage = ({
 							liveURL: undefined,
 						},
 					}}
+					leagueName={competitionName}
 					edition={edition}
 					matchHeaderURL={matchHeaderUrl.href}
 					renderingTarget={renderingTarget}

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -295,6 +295,9 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 			? article.matchStatsUrl
 			: undefined;
 
+	const footballMatchLeagueName = article.sectionLabel;
+	const footballMatchLeagueUrl = `${article.guardianBaseURL}/${article.sectionUrl}`;
+
 	const cricketMatchUrl =
 		article.matchType === 'CricketMatchType' ? article.matchUrl : undefined;
 
@@ -385,6 +388,8 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 							>
 								<FootballMatchHeaderWrapper
 									initialTab="live"
+									leagueName={footballMatchLeagueName}
+									leagueURL={footballMatchLeagueUrl}
 									edition={article.editionId}
 									matchHeaderURL={footballMatchHeaderUrl}
 									renderingTarget={renderingTarget}

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -363,6 +363,9 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 			? article.matchHeaderUrl
 			: undefined;
 
+	const footballMatchLeagueName = article.sectionLabel;
+	const footballMatchLeagueUrl = `${article.guardianBaseURL}/${article.sectionUrl}`;
+
 	const isMatchReport =
 		format.design === ArticleDesign.MatchReport && !!footballMatchUrl;
 
@@ -433,6 +436,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 			<MatchHeaderContainer
 				isMatchReport={isMatchReport}
 				footballMatchHeaderUrl={footballMatchHeaderUrl}
+				leagueName={footballMatchLeagueName}
+				leagueUrl={footballMatchLeagueUrl}
 				editionId={editionId}
 				renderingTarget={renderingTarget}
 			/>
@@ -1052,11 +1057,15 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 const MatchHeaderContainer = ({
 	isMatchReport,
 	footballMatchHeaderUrl,
+	leagueName,
+	leagueUrl,
 	editionId,
 	renderingTarget,
 }: {
 	isMatchReport: boolean;
 	footballMatchHeaderUrl: string | undefined;
+	leagueName: string;
+	leagueUrl: string;
 	editionId: EditionId;
 	renderingTarget: RenderingTarget;
 }) => {
@@ -1076,6 +1085,8 @@ const MatchHeaderContainer = ({
 			<Island priority="feature" defer={{ until: 'visible' }}>
 				<FootballMatchHeaderWrapper
 					initialTab="report"
+					leagueName={leagueName}
+					leagueURL={leagueUrl}
 					edition={editionId}
 					matchHeaderURL={footballMatchHeaderUrl}
 					renderingTarget={renderingTarget}