Skip to content

Commit 4459f51

Browse files
jamesmockettjamesmockett
committed
Coming soon state when match lineup unavailable
1 parent a39ace3 commit 4459f51

File tree

3 files changed

+123
-35
lines changed

3 files changed

+123
-35
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,14 @@ export default meta;
4242

4343
type Story = StoryObj<typeof meta>;
4444

45-
export const LineupsStory = {
45+
export const WithLineup = {
4646
args: {
4747
matchStats,
4848
},
4949
} satisfies Story;
50+
51+
export const ComingSoon = {
52+
args: {
53+
matchStats: undefined,
54+
},
55+
} satisfies Story;

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

Lines changed: 112 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { palette } from '../palette';
1717
import Union from '../static/icons/Union.svg';
1818

1919
type Props = {
20-
matchStats: FootballMatchStats;
20+
matchStats?: FootballMatchStats;
2121
};
2222

2323
const lineupSectionId = 'lineups';
@@ -26,38 +26,57 @@ const substitutesSectionId = 'substitutes';
2626
export const Lineups = ({ matchStats }: Props) => {
2727
return (
2828
<section css={sectionStyles} aria-label="Team Lineups and Substitutes">
29-
<section
30-
css={playerListSectionGridStyles}
31-
aria-labelledby={lineupSectionId}
32-
>
33-
<Title text="Lineups" id={lineupSectionId} />
34-
<PlayerList
35-
team={matchStats.homeTeam}
36-
isSubstitute={false}
37-
isHome={true}
38-
/>
39-
<PlayerList
40-
team={matchStats.awayTeam}
41-
isSubstitute={false}
42-
isHome={false}
43-
/>
44-
</section>
45-
<section
46-
css={playerListSectionGridStyles}
47-
aria-labelledby={substitutesSectionId}
48-
>
49-
<Title text="Substitutes" id={substitutesSectionId} />
50-
<PlayerList
51-
team={matchStats.homeTeam}
52-
isSubstitute={true}
53-
isHome={true}
54-
/>
55-
<PlayerList
56-
team={matchStats.awayTeam}
57-
isSubstitute={true}
58-
isHome={false}
59-
/>
60-
</section>
29+
{matchStats ? (
30+
<>
31+
<section
32+
css={playerListSectionGridStyles}
33+
aria-labelledby={lineupSectionId}
34+
>
35+
<Title text="Lineups" id={lineupSectionId} />
36+
<PlayerList
37+
team={matchStats.homeTeam}
38+
isSubstitute={false}
39+
isHome={true}
40+
/>
41+
<PlayerList
42+
team={matchStats.awayTeam}
43+
isSubstitute={false}
44+
isHome={false}
45+
/>
46+
</section>
47+
<section
48+
css={playerListSectionGridStyles}
49+
aria-labelledby={substitutesSectionId}
50+
>
51+
<Title text="Substitutes" id={substitutesSectionId} />
52+
<PlayerList
53+
team={matchStats.homeTeam}
54+
isSubstitute={true}
55+
isHome={true}
56+
/>
57+
<PlayerList
58+
team={matchStats.awayTeam}
59+
isSubstitute={true}
60+
isHome={false}
61+
/>
62+
</section>
63+
</>
64+
) : (
65+
<section
66+
css={[
67+
playerListSectionGridStyles,
68+
playerListComingSoonStyles,
69+
]}
70+
aria-labelledby={lineupSectionId}
71+
>
72+
<Title
73+
text="Lineups"
74+
label="Coming soon"
75+
id={lineupSectionId}
76+
/>
77+
<PlayerListPlaceholder />
78+
</section>
79+
)}
6180
</section>
6281
);
6382
};
@@ -100,7 +119,15 @@ const Event = ({
100119
}
101120
};
102121

103-
const Title = ({ text, id }: { text: string; id: string }) => (
122+
const Title = ({
123+
text,
124+
label,
125+
id,
126+
}: {
127+
text: string;
128+
label?: string;
129+
id: string;
130+
}) => (
104131
<h3
105132
id={id}
106133
css={css`
@@ -112,6 +139,16 @@ const Title = ({ text, id }: { text: string; id: string }) => (
112139
`}
113140
>
114141
{text}
142+
{label && (
143+
<span
144+
css={css`
145+
font-weight: 400;
146+
`}
147+
>
148+
{' '}
149+
{label}
150+
</span>
151+
)}
115152
</h3>
116153
);
117154

@@ -147,6 +184,31 @@ const PlayerList = ({
147184
);
148185
};
149186

187+
const PlayerListPlaceholder = () => (
188+
<>
189+
<ul css={homeStyles}>
190+
<li css={listItem}>
191+
<strong css={shirtNumber}>1</strong>
192+
<span css={playerName}>TBC</span>
193+
</li>
194+
<li css={listItem}>
195+
<strong css={shirtNumber}>2</strong>
196+
<span css={playerName}>TBC</span>
197+
</li>
198+
</ul>
199+
<ul css={awayStyles}>
200+
<li css={listItem}>
201+
<strong css={shirtNumber}>1</strong>
202+
<span css={playerName}>TBC</span>
203+
</li>
204+
<li css={listItem}>
205+
<strong css={shirtNumber}>2</strong>
206+
<span css={playerName}>TBC</span>
207+
</li>
208+
</ul>
209+
</>
210+
);
211+
150212
const sectionStyles = css`
151213
border: 1px solid ${palette('--football-match-stat-border')};
152214
border-radius: 6px;
@@ -164,6 +226,22 @@ const playerListSectionGridStyles = css`
164226
padding: 0px 10px 10px 10px;
165227
`;
166228

229+
const playerListComingSoonStyles = css`
230+
position: relative;
231+
&::after {
232+
position: absolute;
233+
content: '';
234+
top: 25px;
235+
width: 100%;
236+
height: 60px;
237+
background: linear-gradient(
238+
to bottom,
239+
${palette('--football-match-info-coming-soon-fade')},
240+
${palette('--football-match-info-background')}
241+
);
242+
}
243+
`;
244+
167245
const homeStyles = css`
168246
grid-column: home-start / home-end;
169247
`;

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7154,6 +7154,10 @@ const paletteColours = {
71547154
light: () => sourcePalette.neutral[100],
71557155
dark: () => sourcePalette.neutral[10],
71567156
},
7157+
'--football-match-info-coming-soon-fade': {
7158+
light: () => transparentColour(sourcePalette.neutral[100], 0.6),
7159+
dark: () => transparentColour(sourcePalette.neutral[10], 0.6),
7160+
},
71577161
'--football-match-info-team-number': {
71587162
light: () => sourcePalette.neutral[46],
71597163
dark: () => sourcePalette.neutral[60],

0 commit comments

Comments
 (0)