Skip to content

Add apps route for match info page #15501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
marjisound wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Add apps route for match info page #15501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6f60ee
Add apps route for match summary page
marjisound Mar 9, 2026
ed6a84d
Use new design for apps
marjisound Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 72 additions & 44 deletions dotcom-rendering/src/components/SportDataPageComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { buildAdTargeting } from '../lib/ad-targeting';
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
import { rootStyles } from '../lib/rootStyles';
import { filterABTestSwitches } from '../model/enhance-switches';
import type { SportDataPage } from '../sportDataPage';
import type { AppSportDataPage, WebSportDataPage } from '../sportDataPage';
import { AlreadyVisited } from './AlreadyVisited.importable';
import { useConfig } from './ConfigContext';
import { DarkModeMessage } from './DarkModeMessage';
Expand All @@ -16,17 +16,17 @@ import { SetABTests } from './SetABTests.importable';
import { SetAdTargeting } from './SetAdTargeting.importable';
import { SkipTo } from './SkipTo';

type Props = {
sportData: SportDataPage;
};
type Props = AppSportDataPage | WebSportDataPage;

/**
* @description
* SportDataPageComponent is a high level wrapper for sport data pages on Dotcom. Sets strict mode and some globals
*
* @param {Props} props
* */
export const SportDataPageComponent = ({ sportData }: Props) => {
export const SportDataPageComponent = (props: Props) => {
const { sportData, renderingTarget } = props;

const adTargeting = buildAdTargeting({
isAdFreeUser: sportData.isAdFreeUser,
isSensitive: sportData.config.isSensitive,
Expand All @@ -36,6 +36,9 @@ export const SportDataPageComponent = ({ sportData }: Props) => {
adUnit: sportData.config.adUnit,
});

const isWeb = renderingTarget === 'Web';
const isApps = renderingTarget === 'Apps';

/* We use this as our "base" or default format */
const format = {
display: ArticleDisplay.Standard,
Expand All @@ -48,51 +51,76 @@ export const SportDataPageComponent = ({ sportData }: Props) => {
return (
<StrictMode>
<Global styles={rootStyles(format, darkModeAvailable)} />
<SkipTo id="maincontent" label="Skip to main content" />
<SkipTo id="navigation" label="Skip to navigation" />
<Island priority="feature" defer={{ until: 'idle' }}>
<AlreadyVisited />
</Island>
{isWeb && (
<>
<SkipTo id="maincontent" label="Skip to main content" />
<SkipTo id="navigation" label="Skip to navigation" />
</>
)}
<Island priority="feature" defer={{ until: 'idle' }}>
<FocusStyles />
</Island>
<Island priority="critical">
<Metrics
commercialMetricsEnabled={
!!sportData.config.switches.commercialMetrics
}
tests={sportData.config.abTests}
/>
</Island>
<Island priority="critical">
<SetABTests
abTestSwitches={filterABTestSwitches(
sportData.config.switches,
{/* web */}
{isWeb && (
<>
<Island priority="feature" defer={{ until: 'idle' }}>
<AlreadyVisited />
</Island>
<Island priority="critical">
<Metrics
commercialMetricsEnabled={
!!sportData.config.switches.commercialMetrics
}
tests={sportData.config.abTests}
/>
</Island>
<Island priority="critical">
<SetABTests
abTestSwitches={filterABTestSwitches(
sportData.config.switches,
)}
pageIsSensitive={sportData.config.isSensitive}
isDev={!!sportData.config.isDev}
serverSideTests={sportData.config.abTests}
serverSideABTests={
sportData.config.serverSideABTests
}
/>
</Island>
<Island priority="critical">
<SetAdTargeting adTargeting={adTargeting} />
</Island>

{darkModeAvailable && (
<DarkModeMessage>
Dark mode is a work-in-progress.
<br />
You can{' '}
<a
style={{ color: 'inherit' }}
href="/ab-tests/opt-out/webx-dark-mode-web"
>
opt out anytime
</a>{' '}
if anything is unreadable or odd.
</DarkModeMessage>
)}
pageIsSensitive={sportData.config.isSensitive}
isDev={!!sportData.config.isDev}
serverSideTests={sportData.config.abTests}
serverSideABTests={sportData.config.serverSideABTests}
</>
)}
{isWeb && (
<SportDataPageLayout
sportData={sportData}
nav={props.nav}
renderingTarget={renderingTarget}
/>
)}

{isApps && (
<SportDataPageLayout
sportData={sportData}
renderingTarget={renderingTarget}
/>
</Island>
<Island priority="critical">
<SetAdTargeting adTargeting={adTargeting} />
</Island>
{darkModeAvailable && (
<DarkModeMessage>
Dark mode is a work-in-progress.
<br />
You can{' '}
<a
style={{ color: 'inherit' }}
href="/ab-tests/opt-out/webx-dark-mode-web"
>
opt out anytime
</a>{' '}
if anything is unreadable or odd.
</DarkModeMessage>
)}
<SportDataPageLayout sportData={sportData} />,
</StrictMode>
);
};
7 changes: 6 additions & 1 deletion dotcom-rendering/src/layouts/SportDataPageLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,18 @@ export const Results = {
guardianBaseURL: 'https://www.theguardian.com',
editionId: 'UK',
config: footballData.config,
nav: extractNAV(footballData.nav),
pageFooter: footballData.pageFooter,
contributionsServiceUrl: 'https://contributions.guardianapis.com',
isAdFreeUser: false,
},
renderingTarget: 'Web',
nav: extractNAV(footballData.nav),
},
} satisfies Story;

export const Live = {
args: {
...Results.args,
sportData: {
...Results.args.sportData,
kind: 'FootballLiveScores',
Expand All @@ -43,6 +45,7 @@ export const Live = {

export const Fixtures = {
args: {
...Results.args,
sportData: {
...Results.args.sportData,
kind: 'FootballFixtures',
Expand All @@ -52,6 +55,7 @@ export const Fixtures = {

export const Tables = {
args: {
...Results.args,
sportData: {
...Results.args.sportData,
kind: 'FootballTables',
Expand All @@ -62,6 +66,7 @@ export const Tables = {

export const CricketMatch = {
args: {
...Results.args,
sportData: {
...Results.args.sportData,
kind: 'CricketMatch',
Expand Down
Loading
Loading