Skip to content

Commit a0eff55

Browse files
andrewHEguardianandrewHEguardian
authored
Create Football Match summary component (#13686)
* create a football match component combining `MatchNav` and `MatchStats` * remove matchnav stretch background before element * Create discriminated union props for MatchStats - To indicate that using this component in an article actually requires a format to be passed * Check `usage` prop in match stats to determine background colour * use pseudo element double colon syntax
1 parent 1c7c198 commit a0eff55

File tree

8 files changed

+196
-75
lines changed

8 files changed

+196
-75
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { allModes } from '../../.storybook/modes';
3+
import { matchReport } from '../../fixtures/generated/match-report';
4+
import { FootballMatchSummary as FootballMatchSummaryComponent } from './FootballMatchSummary';
5+
6+
const meta = {
7+
title: 'Components/Football Match Summary',
8+
component: FootballMatchSummaryComponent,
9+
parameters: {
10+
chromatic: {
11+
modes: {
12+
'vertical mobileMedium': allModes['vertical mobileMedium'],
13+
},
14+
},
15+
},
16+
} satisfies Meta<typeof FootballMatchSummaryComponent>;
17+
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const FootballMatchSummary = {
22+
args: {
23+
homeTeam: matchReport.homeTeam,
24+
awayTeam: matchReport.awayTeam,
25+
competition: matchReport.competition.fullName,
26+
comments: matchReport.comments,
27+
},
28+
} satisfies Story;

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { css } from '@emotion/react';
2+
import { from } from '@guardian/source/foundations';
3+
import { grid } from '../grid';
4+
import { palette } from '../palette';
5+
import type { TeamType } from '../types/sport';
6+
import { MatchNav } from './MatchNav';
7+
import { MatchStats } from './MatchStats';
8+
9+
const gridStyles = css`
10+
${grid.paddedContainer}
11+
position: relative;
12+
${from.tablet} {
13+
&::before,
14+
&::after {
15+
content: '';
16+
position: absolute;
17+
border-left: 1px solid ${palette('--article-border')};
18+
z-index: 1;
19+
top: 0;
20+
bottom: 0;
21+
}
22+
23+
&::after {
24+
right: 0;
25+
}
26+
}
27+
`;
28+
29+
type Props = {
30+
homeTeam: TeamType;
31+
awayTeam: TeamType;
32+
comments?: string;
33+
competition: string;
34+
};
35+
36+
export const FootballMatchSummary = ({
37+
homeTeam,
38+
awayTeam,
39+
comments,
40+
competition,
41+
}: Props) => (
42+
<main id="maincontent" css={gridStyles}>
43+
<div
44+
css={css`
45+
${grid.column.centre};
46+
position: relative;
47+
48+
${from.tablet} {
49+
::before {
50+
content: '';
51+
position: absolute;
52+
top: 0;
53+
bottom: 10px;
54+
width: 100vw;
55+
left: -100vw;
56+
background-color: ${palette('--match-nav-background')};
57+
}
58+
}
59+
`}
60+
>
61+
<MatchNav
62+
homeTeam={homeTeam}
63+
awayTeam={awayTeam}
64+
comments={comments}
65+
/>
66+
</div>
67+
<div
68+
css={css`
69+
${grid.column.centre}
70+
`}
71+
>
72+
<MatchStats
73+
home={homeTeam}
74+
away={awayTeam}
75+
competition={competition}
76+
usage="MatchSummary"
77+
/>
78+
</div>
79+
</main>
80+
);

‎dotcom-rendering/src/components/GetMatchStats.importable.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ export const GetMatchStats = ({ matchUrl, format }: Props) => {
101101
away={cleanTeamData(data.awayTeam)}
102102
competition={data.competition.fullName}
103103
format={format}
104+
usage="Article"
104105
/>
105106
);
106107
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const Default = () => {
3434
offTarget: 4,
3535
color: '#e3f45a',
3636
}}
37+
backgroundColour={'--match-stats-background'}
3738
/>
3839
</Wrapper>
3940
);

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ import {
77
import { isLight } from '../lib/isLight';
88
import { transparentColour } from '../lib/transparentColour';
99
import { palette as themePalette } from '../palette';
10+
import type { ColourName } from '../paletteDeclarations';
1011

1112
type Props = {
1213
left: SectionType;
1314
right: SectionType;
15+
backgroundColour: ColourName;
1416
};
1517

1618
type SectionType = {
@@ -75,11 +77,13 @@ const Side = ({
7577
onTarget,
7678
teamColours,
7779
position,
80+
backgroundColour,
7881
}: {
7982
offTarget: number;
8083
onTarget: number;
8184
teamColours: string;
8285
position: 'left' | 'right';
86+
backgroundColour: ColourName;
8387
}) => {
8488
return (
8589
<div
@@ -114,12 +118,11 @@ const Side = ({
114118
height: 70px;
115119
width: 92px;
116120
117-
border-top: 8px solid
118-
${themePalette('--match-stats-background')};
121+
border-top: 8px solid ${themePalette(backgroundColour)};
119122
border-left: ${position === 'left' &&
120-
`8px solid ${themePalette('--match-stats-background')}`};
123+
`8px solid ${themePalette(backgroundColour)}`};
121124
border-right: ${position === 'right' &&
122-
`8px solid ${themePalette('--match-stats-background')}`};
125+
`8px solid ${themePalette(backgroundColour)}`};
123126
`}
124127
>
125128
{onTarget}
@@ -136,20 +139,22 @@ const Side = ({
136139
);
137140
};
138141

139-
export const GoalAttempts = ({ left, right }: Props) => {
142+
export const GoalAttempts = ({ left, right, backgroundColour }: Props) => {
140143
return (
141144
<Row>
142145
<Side
143146
position="left"
144147
offTarget={left.offTarget}
145148
onTarget={left.onTarget}
146149
teamColours={left.color}
150+
backgroundColour={backgroundColour}
147151
/>
148152
<Side
149153
position="right"
150154
offTarget={right.offTarget}
151155
onTarget={right.onTarget}
152156
teamColours={right.color}
157+
backgroundColour={backgroundColour}
153158
/>
154159
</Row>
155160
);

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

Lines changed: 32 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
textSans15,
77
until,
88
} from '@guardian/source/foundations';
9+
import { palette } from '../palette';
910
import type { TeamType } from '../types/sport';
1011
import { Score } from './Score';
1112

@@ -38,36 +39,6 @@ const CrestRow = ({ children }: { children: React.ReactNode }) => (
3839
</div>
3940
);
4041

41-
const StretchBackground = ({ children }: { children: React.ReactNode }) => (
42-
<div
43-
css={css`
44-
display: flex;
45-
flex-direction: column;
46-
justify-content: space-between;
47-
position: relative;
48-
padding: ${space[2]}px;
49-
background-color: var(--match-nav-background);
50-
margin-bottom: 10px;
51-
${until.tablet} {
52-
margin: 0 -10px 10px;
53-
}
54-
55-
::before {
56-
content: '';
57-
position: absolute;
58-
top: 0;
59-
bottom: 0;
60-
width: 100vw;
61-
left: -100vw;
62-
background-color: var(--match-nav-background);
63-
z-index: -1;
64-
}
65-
`}
66-
>
67-
{children}
68-
</div>
69-
);
70-
7142
const Column = ({ children }: { children: React.ReactNode }) => (
7243
<div
7344
css={css`
@@ -169,7 +140,7 @@ const TeamNav = ({
169140
display: flex;
170141
flex-grow: 1;
171142
flex-basis: 50%;
172-
color: var(--match-nav-text);
143+
color: ${palette('--match-nav-text')};
173144
`}
174145
>
175146
<Column>
@@ -232,24 +203,35 @@ const YellowBorder = () => (
232203
);
233204

234205
export const MatchNav = ({ homeTeam, awayTeam, comments }: Props) => (
235-
<div>
236-
<StretchBackground>
237-
<Row>
238-
<TeamNav
239-
name={homeTeam.name}
240-
score={homeTeam.score}
241-
crest={homeTeam.crest}
242-
scorers={homeTeam.scorers}
243-
/>
244-
<YellowBorder />
245-
<TeamNav
246-
name={awayTeam.name}
247-
score={awayTeam.score}
248-
crest={awayTeam.crest}
249-
scorers={awayTeam.scorers}
250-
/>
251-
</Row>
252-
{!!comments && <Comments comments={comments} />}
253-
</StretchBackground>
206+
<div
207+
css={css`
208+
display: flex;
209+
flex-direction: column;
210+
justify-content: space-between;
211+
position: relative;
212+
padding: ${space[2]}px;
213+
background-color: ${palette('--match-nav-background')};
214+
margin-bottom: 10px;
215+
${until.tablet} {
216+
margin: 0 -10px 10px;
217+
}
218+
`}
219+
>
220+
<Row>
221+
<TeamNav
222+
name={homeTeam.name}
223+
score={homeTeam.score}
224+
crest={homeTeam.crest}
225+
scorers={homeTeam.scorers}
226+
/>
227+
<YellowBorder />
228+
<TeamNav
229+
name={awayTeam.name}
230+
score={awayTeam.score}
231+
crest={awayTeam.crest}
232+
scorers={awayTeam.scorers}
233+
/>
234+
</Row>
235+
{!!comments && <Comments comments={comments} />}
254236
</div>
255237
);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const Default = () => {
2323
design: ArticleDesign.Standard,
2424
theme: Pillar.News,
2525
}}
26+
usage="Article"
2627
/>
2728
);
2829
};
@@ -51,6 +52,7 @@ export const InContext = () => {
5152
design: ArticleDesign.Standard,
5253
theme: Pillar.News,
5354
}}
55+
usage="Article"
5456
/>
5557
</ArticleContainer>
5658
<RightColumn>
@@ -73,6 +75,7 @@ const DefaultInLiveblog = () => {
7375
design: ArticleDesign.DeadBlog,
7476
theme: Pillar.Sport,
7577
}}
78+
usage="Article"
7679
/>
7780
);
7881
};
@@ -89,6 +92,7 @@ export const NoStats = () => {
8992
design: ArticleDesign.Standard,
9093
theme: Pillar.News,
9194
}}
95+
usage="Article"
9296
/>
9397
);
9498
};

0 commit comments

Comments
 (0)