Skip to content

Commit f425a8b

Browse files
andrewHEguardianmarjisound
andrewHEguardian
and
marjisound
authored
Create Football data page layout (#13373)
* Create SportData endpoint and basic layout * remove title prop * add football data page as a wrapper for football page layout * add masthead and footer * comment out lint errors * pass unvalidated data from FE to layout * tidy up and put main content inside section * move select onChange into island component * move into football data specific handler and render files * rename to `FootballDataPage` consistently review suggestions * wrap matches page component in importable * tidy: use storybook hardcoded data * get football test data from a fixture file * remove right adslot - todo later * rebase on main to get the latest config model for football-live * remove Section component - had wrong padding --------- Co-authored-by: Marjan Kalanaki <[email protected]>
1 parent 68aec49 commit f425a8b

11 files changed

+535
-139
lines changed

‎dotcom-rendering/fixtures/manual/footballData.ts

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import type { Nations } from '../../src/components/FootballCompetitionSelect';
2+
import type { FootballMatches } from '../../src/footballMatches';
3+
4+
export const nations: Nations = [
5+
{
6+
name: 'England',
7+
competitions: [
8+
{ tag: 'football/premierleague', name: 'Premier League' },
9+
{ tag: 'football/championship', name: 'Championship' },
10+
],
11+
},
12+
{
13+
name: 'Scotland',
14+
competitions: [
15+
{
16+
tag: 'football/scottish-premiership',
17+
name: 'Scottish Premiership',
18+
},
19+
],
20+
},
21+
];
22+
23+
export const initialDays: FootballMatches = [
24+
{
25+
date: new Date('2022-01-01T00:00:00Z'),
26+
competitions: [
27+
{
28+
competitionId: '635',
29+
tag: 'football/serieafootball',
30+
name: 'Serie A',
31+
nation: 'European',
32+
matches: [
33+
{
34+
kind: 'Live',
35+
dateTime: new Date('2022-01-01T11:11:00Z'),
36+
paId: '4482093',
37+
homeTeam: {
38+
name: 'Torino',
39+
score: 10,
40+
},
41+
awayTeam: {
42+
name: 'Cagliari',
43+
score: 0,
44+
},
45+
status: '1st',
46+
},
47+
{
48+
kind: 'Fixture',
49+
dateTime: new Date('2022-01-01T19:45:00Z'),
50+
paId: '4482890',
51+
homeTeam: 'Auxerre',
52+
awayTeam: 'St Etienne',
53+
},
54+
],
55+
},
56+
{
57+
competitionId: '650',
58+
tag: 'football/laligafootball',
59+
name: 'La Liga',
60+
nation: 'European',
61+
matches: [
62+
{
63+
kind: 'Result',
64+
dateTime: new Date('2022-01-01T20:00:00Z'),
65+
paId: '4482835',
66+
homeTeam: {
67+
name: 'Las Palmas',
68+
score: 2,
69+
},
70+
awayTeam: {
71+
name: 'Osasuna',
72+
score: 3,
73+
},
74+
comment: 'AET',
75+
},
76+
],
77+
},
78+
{
79+
competitionId: '651',
80+
tag: 'football/fa-cup',
81+
name: 'FA Cup',
82+
nation: 'European',
83+
matches: [
84+
{
85+
kind: 'Result',
86+
dateTime: new Date('2022-01-01T20:00:00Z'),
87+
paId: '4482836',
88+
homeTeam: {
89+
name: 'Brighton & Hove Albion Women',
90+
score: 1,
91+
},
92+
awayTeam: {
93+
name: 'Crystal Palace Women',
94+
score: 1,
95+
},
96+
comment:
97+
'Brighton & Hove Albion Women won 4 - 3 on penalties...',
98+
},
99+
],
100+
},
101+
],
102+
},
103+
];
104+
105+
export const moreDays: FootballMatches = [
106+
{
107+
date: new Date('2022-01-05T00:00:00Z'),
108+
competitions: [
109+
{
110+
competitionId: '635',
111+
tag: 'football/serieafootball',
112+
name: 'Serie A',
113+
nation: 'European',
114+
matches: [
115+
{
116+
kind: 'Fixture',
117+
dateTime: new Date('2022-01-05T19:45:00Z'),
118+
paId: '4482890',
119+
homeTeam: 'Juventus',
120+
awayTeam: 'Roma',
121+
},
122+
],
123+
},
124+
],
125+
},
126+
];

‎dotcom-rendering/src/components/FootballCompetitionSelect.stories.tsx

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
33
import { allModes } from '../../.storybook/modes';
4+
import { nations } from '../../fixtures/manual/footballData';
45
import { FootballCompetitionSelect as FootballCompetitionSelectComponent } from './FootballCompetitionSelect';
56

67
const meta = {
@@ -20,24 +21,7 @@ type Story = StoryObj<typeof meta>;
2021

2122
export const FootballCompetitionSelect = {
2223
args: {
23-
nations: [
24-
{
25-
name: 'England',
26-
competitions: [
27-
{ tag: 'football/premierleague', name: 'Premier League' },
28-
{ tag: 'football/championship', name: 'Championship' },
29-
],
30-
},
31-
{
32-
name: 'Scotland',
33-
competitions: [
34-
{
35-
tag: 'football/scottish-premiership',
36-
name: 'Scottish Premiership',
37-
},
38-
],
39-
},
40-
],
24+
nations,
4125
kind: 'Result',
4226
onChange: fn(),
4327
},

‎dotcom-rendering/src/components/FootballDataPage.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { Global } from '@emotion/react';
2+
import { StrictMode } from 'react';
3+
import type { FEFootballDataPage } from '../feFootballDataPage';
4+
import { FootballDataPageLayout } from '../layouts/FootballDataPageLayout';
5+
import { buildAdTargeting } from '../lib/ad-targeting';
6+
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
7+
import { rootStyles } from '../lib/rootStyles';
8+
import { filterABTestSwitches } from '../model/enhance-switches';
9+
import { AlreadyVisited } from './AlreadyVisited.importable';
10+
import { useConfig } from './ConfigContext';
11+
import { DarkModeMessage } from './DarkModeMessage';
12+
import { FocusStyles } from './FocusStyles.importable';
13+
import { Island } from './Island';
14+
import { Metrics } from './Metrics.importable';
15+
import { SetABTests } from './SetABTests.importable';
16+
import { SetAdTargeting } from './SetAdTargeting.importable';
17+
import { SkipTo } from './SkipTo';
18+
19+
type Props = {
20+
footballData: FEFootballDataPage;
21+
};
22+
23+
/**
24+
* @description
25+
* FootballDataPage is a high level wrapper for football pages on Dotcom. Sets strict mode and some globals
26+
*
27+
* @param {Props} props
28+
* */
29+
export const FootballDataPage = ({ footballData }: Props) => {
30+
const adTargeting = buildAdTargeting({
31+
isAdFreeUser: footballData.isAdFreeUser,
32+
isSensitive: footballData.config.isSensitive,
33+
edition: footballData.config.edition,
34+
section: footballData.config.section,
35+
sharedAdTargeting: footballData.config.sharedAdTargeting,
36+
adUnit: footballData.config.adUnit,
37+
});
38+
39+
/* We use this as our "base" or default format */
40+
const format = {
41+
display: ArticleDisplay.Standard,
42+
design: ArticleDesign.Standard,
43+
theme: Pillar.News,
44+
};
45+
46+
const { darkModeAvailable } = useConfig();
47+
48+
return (
49+
<StrictMode>
50+
<Global styles={rootStyles(format, darkModeAvailable)} />
51+
<SkipTo id="maincontent" label="Skip to main content" />
52+
<SkipTo id="navigation" label="Skip to navigation" />
53+
<Island priority="feature" defer={{ until: 'idle' }}>
54+
<AlreadyVisited />
55+
</Island>
56+
<Island priority="feature" defer={{ until: 'idle' }}>
57+
<FocusStyles />
58+
</Island>
59+
<Island priority="critical">
60+
<Metrics
61+
commercialMetricsEnabled={
62+
!!footballData.config.switches.commercialMetrics
63+
}
64+
tests={footballData.config.abTests}
65+
/>
66+
</Island>
67+
<Island priority="critical">
68+
<SetABTests
69+
abTestSwitches={filterABTestSwitches(
70+
footballData.config.switches,
71+
)}
72+
pageIsSensitive={footballData.config.isSensitive}
73+
isDev={!!footballData.config.isDev}
74+
serverSideTests={footballData.config.abTests}
75+
/>
76+
</Island>
77+
<Island priority="critical">
78+
<SetAdTargeting adTargeting={adTargeting} />
79+
</Island>
80+
{darkModeAvailable && (
81+
<DarkModeMessage>
82+
Dark mode is a work-in-progress.
83+
<br />
84+
You can{' '}
85+
<a
86+
style={{ color: 'inherit' }}
87+
href="/opt/out/dark-mode-web"
88+
>
89+
opt out anytime
90+
</a>{' '}
91+
if anything is unreadable or odd.
92+
</DarkModeMessage>
93+
)}
94+
<FootballDataPageLayout footballData={footballData} />,
95+
</StrictMode>
96+
);
97+
};

‎dotcom-rendering/src/components/FootballMatchList.stories.tsx

Lines changed: 1 addition & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import { userEvent, within } from '@storybook/test';
33
import { allModes } from '../../.storybook/modes';
4-
import type { FootballMatches } from '../footballMatches';
4+
import { initialDays, moreDays } from '../../fixtures/manual/footballData';
55
import { error, ok } from '../lib/result';
66
import { FootballMatchList } from './FootballMatchList';
77

@@ -32,111 +32,6 @@ export default meta;
3232

3333
type Story = StoryObj<typeof meta>;
3434

35-
const initialDays: FootballMatches = [
36-
{
37-
date: new Date('2022-01-01T00:00:00Z'),
38-
competitions: [
39-
{
40-
competitionId: '635',
41-
tag: 'football/serieafootball',
42-
name: 'Serie A',
43-
nation: 'European',
44-
matches: [
45-
{
46-
kind: 'Live',
47-
dateTime: new Date('2022-01-01T11:11:00Z'),
48-
paId: '4482093',
49-
homeTeam: {
50-
name: 'Torino',
51-
score: 10,
52-
},
53-
awayTeam: {
54-
name: 'Cagliari',
55-
score: 0,
56-
},
57-
status: '1st',
58-
},
59-
{
60-
kind: 'Fixture',
61-
dateTime: new Date('2022-01-01T19:45:00Z'),
62-
paId: '4482890',
63-
homeTeam: 'Auxerre',
64-
awayTeam: 'St Etienne',
65-
},
66-
],
67-
},
68-
{
69-
competitionId: '650',
70-
tag: 'football/laligafootball',
71-
name: 'La Liga',
72-
nation: 'European',
73-
matches: [
74-
{
75-
kind: 'Result',
76-
dateTime: new Date('2022-01-01T20:00:00Z'),
77-
paId: '4482835',
78-
homeTeam: {
79-
name: 'Las Palmas',
80-
score: 2,
81-
},
82-
awayTeam: {
83-
name: 'Osasuna',
84-
score: 3,
85-
},
86-
comment: 'AET',
87-
},
88-
],
89-
},
90-
{
91-
competitionId: '651',
92-
tag: 'football/fa-cup',
93-
name: 'FA Cup',
94-
nation: 'European',
95-
matches: [
96-
{
97-
kind: 'Result',
98-
dateTime: new Date('2022-01-01T20:00:00Z'),
99-
paId: '4482836',
100-
homeTeam: {
101-
name: 'Brighton & Hove Albion Women',
102-
score: 1,
103-
},
104-
awayTeam: {
105-
name: 'Crystal Palace Women',
106-
score: 1,
107-
},
108-
comment:
109-
'Brighton & Hove Albion Women won 4 - 3 on penalties...',
110-
},
111-
],
112-
},
113-
],
114-
},
115-
];
116-
117-
const moreDays: FootballMatches = [
118-
{
119-
date: new Date('2022-01-05T00:00:00Z'),
120-
competitions: [
121-
{
122-
competitionId: '635',
123-
tag: 'football/serieafootball',
124-
name: 'Serie A',
125-
nation: 'European',
126-
matches: [
127-
{
128-
kind: 'Fixture',
129-
dateTime: new Date('2022-01-05T19:45:00Z'),
130-
paId: '4482890',
131-
homeTeam: 'Juventus',
132-
awayTeam: 'Roma',
133-
},
134-
],
135-
},
136-
],
137-
},
138-
];
139-
14035
export const Default = {
14136
args: {
14237
edition: 'UK',

0 commit comments

Comments
 (0)