Skip to content

Commit 44fc8cc

Browse files
jwngrjwngr
authored
Removed classnames and fixed styled-component warnings (#9)
1 parent 1f16838 commit 44fc8cc

File tree

33 files changed

+258
-232
lines changed

33 files changed

+258
-232
lines changed

‎website/package-lock.json

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
"private": true,
55
"type": "module",
66
"dependencies": {
7-
"classnames": "^2.5.1",
87
"d3": "^4.12.2",
98
"d3-geo": "^1.11.1",
109
"d3-scale-chromatic": "^1.3.3",

‎website/src/components/Game.styles.ts

+31-22
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import {darken} from 'polished';
22
import {Link} from 'react-router-dom';
3-
import styled from 'styled-components';
3+
import styled, {css} from 'styled-components';
44

55
import {assertNever} from '../lib/utils';
66
import {TVNetwork} from '../models';
77
import {TeamLogo} from './TeamLogo';
88

9-
const GameWrapper = styled(Link)`
9+
interface GameWrapperProps {
10+
readonly $isSelected: boolean;
11+
readonly $isHomeGame: boolean;
12+
}
13+
14+
export const GameWrapper = styled(Link)<GameWrapperProps>`
1015
height: 52px;
1116
padding: 0 4px;
1217
@@ -32,23 +37,20 @@ const GameWrapper = styled(Link)`
3237
transform: none;
3338
}
3439
}
40+
41+
${({$isHomeGame}) => ($isHomeGame ? homeGameWrapperStyles : awayGameWrapperStyles)}
3542
`;
3643

37-
export const HomeGameWrapper = styled(GameWrapper)`
38-
&.selected {
39-
background: ${({theme}) => theme.colors.gold}cc;
40-
}
44+
const homeGameWrapperStyles = css<GameWrapperProps>`
45+
${({theme, $isSelected}) => ($isSelected ? `background: ${theme.colors.gold}cc;` : null)}
4146
4247
&:hover {
43-
background: ${({theme}) => theme.colors.black}20;
44-
45-
&.selected {
46-
background: ${({theme}) => theme.colors.gold}cc;
47-
}
48+
background: ${({theme, $isSelected}) =>
49+
$isSelected ? `${theme.colors.gold}cc` : `${theme.colors.black}20`};
4850
}
4951
`;
5052

51-
export const AwayGameWrapper = styled(GameWrapper)`
53+
const awayGameWrapperStyles = css<GameWrapperProps>`
5254
background-size: 4px 4px;
5355
5456
background-image: repeating-linear-gradient(
@@ -220,17 +222,24 @@ export const ScoreResult = styled.p`
220222
}
221223
`;
222224

223-
export const ScoreTotals = styled.div`
225+
interface ScoreTotalsProps {
226+
readonly $isOvertimeGame: boolean;
227+
}
228+
229+
export const ScoreTotals = styled.div<ScoreTotalsProps>`
224230
flex: 1;
225231
226-
&.overtime-game {
232+
${({$isOvertimeGame}) =>
233+
$isOvertimeGame
234+
? css`
227235
margin-top: 6px;
228236
line-height: 14px;
229-
}
237+
}`
238+
: null}
230239
`;
231240

232241
interface TelevisionCoverageProps {
233-
readonly network: TVNetwork;
242+
readonly $network: TVNetwork;
234243
}
235244

236245
export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
@@ -246,8 +255,8 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
246255
}
247256
248257
img {
249-
height: ${({network}) => {
250-
switch (network) {
258+
height: ${({$network}) => {
259+
switch ($network) {
251260
case TVNetwork.ESPN2:
252261
return '11px';
253262
case TVNetwork.ACCN:
@@ -276,7 +285,7 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
276285
case TVNetwork.Unknown:
277286
return '32px';
278287
default:
279-
assertNever(network);
288+
assertNever($network);
280289
}
281290
}};
282291
margin-left: 10px;
@@ -290,8 +299,8 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
290299
}
291300
292301
img {
293-
height: ${({network}) => {
294-
switch (network) {
302+
height: ${({$network}) => {
303+
switch ($network) {
295304
case TVNetwork.ESPN:
296305
case TVNetwork.ESPN2:
297306
case TVNetwork.Peacock:
@@ -318,7 +327,7 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
318327
case TVNetwork.Unknown:
319328
return '24px';
320329
default:
321-
assertNever(network);
330+
assertNever($network);
322331
}
323332
}};
324333
}

‎website/src/components/Game.tsx

+12-22
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import classNames from 'classnames';
21
import format from 'date-fns/format';
32
import _ from 'lodash';
43
import React from 'react';
@@ -9,10 +8,9 @@ import {GameInfo, Team, TeamId, TVNetwork} from '../models';
98
import teamsJson from '../resources/teams.json';
109
import {
1110
AwayGamePrefix,
12-
AwayGameWrapper,
1311
DateOpponentDetailsWrapper,
1412
GameDate,
15-
HomeGameWrapper,
13+
GameWrapper,
1614
Location,
1715
OpponentDetailsWrapper,
1816
OpponentLogo,
@@ -39,13 +37,13 @@ export const Game: React.FC<{
3937
let lastColumnContent: React.ReactNode;
4038
if (game.isCanceled) {
4139
lastColumnContent = (
42-
<TelevisionCoverage network={TVNetwork.Unknown}>
40+
<TelevisionCoverage $network={TVNetwork.Unknown}>
4341
<p>Canceled</p>
4442
</TelevisionCoverage>
4543
);
4644
} else if (game.isPostponed) {
4745
lastColumnContent = (
48-
<TelevisionCoverage network={TVNetwork.Unknown}>
46+
<TelevisionCoverage $network={TVNetwork.Unknown}>
4947
<p>Posponed</p>
5048
</TelevisionCoverage>
5149
);
@@ -71,14 +69,10 @@ export const Game: React.FC<{
7169
);
7270
}
7371

74-
const scoreTotalClasses = classNames({
75-
'overtime-game': game.numOvertimes,
76-
});
77-
7872
lastColumnContent = (
7973
<Score>
8074
{scoreResult}
81-
<ScoreTotals className={scoreTotalClasses}>
75+
<ScoreTotals $isOvertimeGame={(game.numOvertimes ?? 0) > 0}>
8276
<p>
8377
{notreDameScore} - {opponentScore}
8478
</p>
@@ -91,7 +85,7 @@ export const Game: React.FC<{
9185

9286
lastColumnContent = (
9387
<TelevisionCoverage
94-
network={game.coverage === 'TBD' ? TVNetwork.Unknown : game.coverage ?? TVNetwork.Unknown}
88+
$network={game.coverage === 'TBD' ? TVNetwork.Unknown : game.coverage ?? TVNetwork.Unknown}
9589
>
9690
<p>{time}</p>
9791
{game.coverage && game.coverage !== 'TBD' ? (
@@ -101,18 +95,12 @@ export const Game: React.FC<{
10195
);
10296
} else {
10397
lastColumnContent = (
104-
<TelevisionCoverage network={TVNetwork.Unknown}>
98+
<TelevisionCoverage $network={TVNetwork.Unknown}>
10599
<p>TBD</p>
106100
</TelevisionCoverage>
107101
);
108102
}
109103

110-
const gameClassNames = classNames({
111-
selected: isSelected,
112-
homeGame: game.isHomeGame,
113-
awayGame: !game.isHomeGame,
114-
});
115-
116104
let gameDate: Date | 'TBD' | undefined;
117105
if (game.fullDate) {
118106
gameDate = new Date(game.fullDate);
@@ -139,8 +127,6 @@ export const Game: React.FC<{
139127
_.get(game, 'rankings.home.cfbPlayoff') ||
140128
_.get(game, 'rankings.home.ap');
141129

142-
const WrapperComponent = game.isHomeGame ? HomeGameWrapper : AwayGameWrapper;
143-
144130
let shamrockSeriesLogoContent: React.ReactNode = null;
145131
if (game.isShamrockSeries) {
146132
shamrockSeriesLogoContent = (
@@ -174,7 +160,11 @@ export const Game: React.FC<{
174160
}
175161

176162
return (
177-
<WrapperComponent className={gameClassNames} to={`/${season}/${index + 1}/`}>
163+
<GameWrapper
164+
to={`/${season}/${index + 1}/`}
165+
$isSelected={isSelected}
166+
$isHomeGame={game.isHomeGame}
167+
>
178168
<OpponentWrapper>
179169
<OpponentLogo teamId={game.opponentId} />
180170
<DateOpponentDetailsWrapper>
@@ -191,6 +181,6 @@ export const Game: React.FC<{
191181
{shamrockSeriesLogoContent}
192182
</Location>
193183
{lastColumnContent}
194-
</WrapperComponent>
184+
</GameWrapper>
195185
);
196186
};

‎website/src/components/NavMenu/NavMenuDecade/index.styles.ts

+47-32
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {darken} from 'polished';
22
import {Link} from 'react-router-dom';
3-
import styled from 'styled-components';
3+
import styled, {css} from 'styled-components';
44

55
export const NavMenuDecadeWrapper = styled.div`
66
flex: 1;
@@ -62,7 +62,13 @@ export const NavMenuDecadeYearsWrapper = styled.div`
6262
margin-top: 4px;
6363
`;
6464

65-
export const NavMenuDecadeYear = styled(Link)`
65+
interface NavMenuDecadeYearProps {
66+
readonly $isCurrentYear: boolean;
67+
readonly $isSelectedYear: boolean;
68+
readonly $isChampionshipYear: boolean;
69+
}
70+
71+
export const NavMenuDecadeYear = styled(Link)<NavMenuDecadeYearProps>`
6672
width: 36px;
6773
height: 36px;
6874
display: flex;
@@ -79,36 +85,45 @@ export const NavMenuDecadeYear = styled(Link)`
7985
background-color: ${({theme}) => theme.colors.black}20;
8086
}
8187
82-
&.national-championship-year {
83-
background-image: repeating-linear-gradient(
84-
135deg,
85-
${({theme}) => darken(0.2, theme.colors.green)}40,
86-
${({theme}) => darken(0.2, theme.colors.green)}40 1px,
87-
transparent 2px,
88-
transparent 2px,
89-
${({theme}) => darken(0.2, theme.colors.green)}40 3px
90-
);
91-
92-
&:hover {
93-
color: ${({theme}) => theme.colors.white};
94-
}
95-
}
96-
97-
&.current-year {
98-
background-image: repeating-linear-gradient(
99-
-135deg,
100-
${({theme}) => darken(0.2, theme.colors.blue)}40,
101-
${({theme}) => darken(0.2, theme.colors.blue)}40 1px,
102-
transparent 2px,
103-
transparent 2px,
104-
${({theme}) => darken(0.2, theme.colors.blue)}40 3px
105-
);
106-
}
107-
108-
&.selected-year {
109-
font-weight: bold;
110-
background-color: ${({theme}) => theme.colors.gold};
111-
}
88+
${({$isChampionshipYear}) =>
89+
$isChampionshipYear
90+
? css`
91+
background-image: repeating-linear-gradient(
92+
135deg,
93+
${({theme}) => darken(0.2, theme.colors.green)}40,
94+
${({theme}) => darken(0.2, theme.colors.green)}40 1px,
95+
transparent 2px,
96+
transparent 2px,
97+
${({theme}) => darken(0.2, theme.colors.green)}40 3px
98+
);
99+
100+
&:hover {
101+
color: ${({theme}) => theme.colors.white};
102+
}
103+
`
104+
: null}
105+
106+
${({$isCurrentYear}) =>
107+
$isCurrentYear
108+
? css`
109+
background-image: repeating-linear-gradient(
110+
-135deg,
111+
${({theme}) => darken(0.2, theme.colors.blue)}40,
112+
${({theme}) => darken(0.2, theme.colors.blue)}40 1px,
113+
transparent 2px,
114+
transparent 2px,
115+
${({theme}) => darken(0.2, theme.colors.blue)}40 3px
116+
);
117+
`
118+
: null}
119+
120+
${({$isSelectedYear}) =>
121+
$isSelectedYear
122+
? css`
123+
font-weight: bold;
124+
background-color: ${({theme}) => theme.colors.gold};
125+
`
126+
: null}
112127
113128
@media (max-width: 480px) {
114129
width: 44px;

‎website/src/components/NavMenu/NavMenuDecade/index.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import classNames from 'classnames';
21
import _ from 'lodash';
32
import React from 'react';
43

@@ -27,19 +26,20 @@ export const NavMenuDecade: React.FC<{
2726
yearEnding = '0' + yearEnding;
2827
}
2928

30-
const yearLinkClasses = classNames({
31-
'current-year': year === CURRENT_SEASON,
32-
'selected-year': year === selectedSeason,
33-
'national-championship-year': _.includes(getNationalChampionshipYears(), year),
34-
});
35-
3629
// Notre Dame did not field a team in 1980 or 1981.
3730
if (year === 1890 || year === 1891 || year > LATEST_YEAR) {
3831
return <p key={year} />;
3932
}
4033

4134
return (
42-
<NavMenuDecadeYear className={yearLinkClasses} to={`/${year}`} key={year} onClick={onClick}>
35+
<NavMenuDecadeYear
36+
key={year}
37+
to={`/${year}`}
38+
$isCurrentYear={year === CURRENT_SEASON}
39+
$isSelectedYear={year === selectedSeason}
40+
$isChampionshipYear={_.includes(getNationalChampionshipYears(), year)}
41+
onClick={onClick}
42+
>
4343
{yearEnding}
4444
</NavMenuDecadeYear>
4545
);

‎website/src/components/NavMenu/index.styles.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {Link} from 'react-router-dom';
12
import styled from 'styled-components';
23

34
import backgroundImage from '../../images/background.png';
@@ -57,7 +58,7 @@ export const NavMenuLinksSectionWrapper = styled.div`
5758
}
5859
`;
5960

60-
export const NavMenuLink = styled.a`
61+
export const NavMenuLink = styled(Link)`
6162
flex: 1;
6263
color: ${({theme}) => theme.colors.black};
6364
font-size: 16px;

0 commit comments

Comments
 (0)