Skip to content

Commit 4fcb5ef

Browse files
charleycampbellcharleycampbell
authored
Merge branch 'main' into cc/three-tier-baner-v2
2 parents 2cda810 + 65a586a commit 4fcb5ef

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+324
-197
lines changed

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

+86-4
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,12 @@ export const initialDays: FootballMatches = [
3737
paId: '4482093',
3838
homeTeam: {
3939
name: 'Torino',
40+
id: '27038',
4041
score: 10,
4142
},
4243
awayTeam: {
4344
name: 'Cagliari',
45+
id: '26474',
4446
score: 0,
4547
},
4648
status: '1st',
@@ -53,9 +55,11 @@ export const initialDays: FootballMatches = [
5355
paId: '12345',
5456
homeTeam: {
5557
name: 'Fiorentina',
58+
id: '26366',
5659
},
5760
awayTeam: {
5861
name: 'Bologna',
62+
id: '26371',
5963
},
6064
status: 'S',
6165
comment: 'Awaiting officials decision',
@@ -66,8 +70,82 @@ export const initialDays: FootballMatches = [
6670
'2022-01-01T19:45:00Z',
6771
).toISOString(),
6872
paId: '4482890',
69-
homeTeam: 'Auxerre',
70-
awayTeam: 'St Etienne',
73+
homeTeam: {
74+
name: 'Auxerre',
75+
id: '26348',
76+
},
77+
awayTeam: { name: 'St Etienne', id: '27408' },
78+
},
79+
],
80+
},
81+
{
82+
id: '1',
83+
tag: 'football/bundesligafootball',
84+
name: 'Bundesliga',
85+
nation: 'European',
86+
matches: [
87+
{
88+
kind: 'Live',
89+
dateTimeISOString: new Date(
90+
'2022-01-01T11:11:00Z',
91+
).toISOString(),
92+
paId: '123',
93+
homeTeam: {
94+
name: 'Eintracht Frankfurt',
95+
id: '26460',
96+
score: 1,
97+
},
98+
awayTeam: {
99+
name: 'Bayern Munich',
100+
id: '26247',
101+
score: 0,
102+
},
103+
status: '1st',
104+
},
105+
],
106+
},
107+
108+
{
109+
id: '2',
110+
tag: 'football/uefa-europa-league',
111+
name: 'Europa League',
112+
nation: 'European',
113+
matches: [
114+
{
115+
kind: 'Live',
116+
dateTimeISOString: new Date(
117+
'2022-01-01T11:11:00Z',
118+
).toISOString(),
119+
paId: '123',
120+
homeTeam: {
121+
name: 'AZ',
122+
id: '26464',
123+
score: 1,
124+
},
125+
awayTeam: {
126+
name: 'Sevilla',
127+
id: '27821',
128+
score: 2,
129+
},
130+
status: 'HT',
131+
},
132+
{
133+
kind: 'Live',
134+
dateTimeISOString: new Date(
135+
'2022-01-01T11:11:00Z',
136+
).toISOString(),
137+
paId: '1234',
138+
homeTeam: {
139+
name: 'Jagiellonia Białystok',
140+
id: '9999999',
141+
score: 3,
142+
},
143+
awayTeam: {
144+
name: 'Shakhtar Donetsk',
145+
id: '38299',
146+
score: 2,
147+
},
148+
status: 'HT',
71149
},
72150
],
73151
},
@@ -85,10 +163,12 @@ export const initialDays: FootballMatches = [
85163
paId: '4482835',
86164
homeTeam: {
87165
name: 'Las Palmas',
166+
id: '27804',
88167
score: 2,
89168
},
90169
awayTeam: {
91170
name: 'Osasuna',
171+
id: '27152',
92172
score: 3,
93173
},
94174
comment: 'AET',
@@ -109,10 +189,12 @@ export const initialDays: FootballMatches = [
109189
paId: '4482836',
110190
homeTeam: {
111191
name: 'Brighton & Hove Albion Women',
192+
id: '8450',
112193
score: 1,
113194
},
114195
awayTeam: {
115196
name: 'Crystal Palace Women',
197+
id: '48752',
116198
score: 1,
117199
},
118200
comment:
@@ -140,8 +222,8 @@ export const moreDays: FootballMatches = [
140222
'2022-01-05T19:45:00Z',
141223
).toISOString(),
142224
paId: '4482890',
143-
homeTeam: 'Juventus',
144-
awayTeam: 'Roma',
225+
homeTeam: { name: 'Juventus', id: '26359' },
226+
awayTeam: { name: 'Roma', id: '26357' },
145227
},
146228
],
147229
},

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const globalOlStyles = () => css`
5858
ol:not([data-ignore='global-ol-styling']) {
5959
counter-reset: li;
6060
61-
> li:before {
61+
> li::before {
6262
${textEgyptian17};
6363
line-height: 1.15;
6464
content: counter(li);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const link = css`
3434
`;
3535

3636
const icon = css`
37-
:before {
37+
::before {
3838
position: absolute;
3939
top: 6px;
4040
bottom: 0;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const bioStyles = css`
3737
display: inline-block;
3838
margin-bottom: 0;
3939
}
40-
ul li:before {
40+
ul li::before {
4141
display: inline-block;
4242
content: '';
4343
border-radius: 0.375rem;

‎dotcom-rendering/src/components/Blocks.amp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const adStyle = css`
2020
text-align: center;
2121
margin: 0 auto 12px;
2222
23-
:before {
23+
::before {
2424
content: 'Advertisement';
2525
display: block;
2626
${textSans12};

‎dotcom-rendering/src/components/BodyArticle.amp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const bulletStyle = (pillar: ArticleTheme) => css`
3939
font-size: 1px;
4040
}
4141
42-
.bullet:before {
42+
.bullet::before {
4343
display: inline-block;
4444
content: '';
4545
border-radius: 6px;
@@ -79,7 +79,7 @@ const adStyle = css`
7979
text-align: center;
8080
margin: 4px 0 12px 20px;
8181
82-
:before {
82+
::before {
8383
content: 'Advertisement';
8484
display: block;
8585
${textSans12};

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

+5
Original file line numberDiff line numberDiff line change
@@ -1492,6 +1492,7 @@ export const WithAFiveFourAspectRatio = () => {
14921492
</>
14931493
);
14941494
};
1495+
14951496
export const WithNoGap = () => {
14961497
return (
14971498
<>
@@ -1505,6 +1506,8 @@ export const WithNoGap = () => {
15051506
{...basicCardProps}
15061507
imagePositionOnDesktop="left"
15071508
isOnwardContent={true}
1509+
showTopBarDesktop={false}
1510+
showTopBarMobile={false}
15081511
format={{
15091512
display: ArticleDisplay.Standard,
15101513
design: ArticleDesign.Standard,
@@ -1629,6 +1632,8 @@ export const WithNoVerticalGap = () => {
16291632
<Card
16301633
{...basicCardProps}
16311634
isOnwardContent={true}
1635+
showTopBarDesktop={false}
1636+
showTopBarMobile={false}
16321637
imagePositionOnDesktop="bottom"
16331638
format={{
16341639
display: ArticleDisplay.Standard,

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,7 @@ export const Card = ({
407407
index = 0,
408408
isFlexSplash,
409409
showTopBarDesktop = true,
410-
showTopBarMobile = false,
410+
showTopBarMobile = true,
411411
trailTextSize,
412412
showKickerImage = false,
413413
}: Props) => {
@@ -750,10 +750,10 @@ export const Card = ({
750750
return (
751751
<CardWrapper
752752
format={format}
753-
showTopBarDesktop={!isOnwardContent && showTopBarDesktop}
753+
showTopBarDesktop={showTopBarDesktop}
754754
showTopBarMobile={showTopBarMobile}
755-
containerPalette={containerPalette}
756755
isOnwardContent={isOnwardContent}
756+
containerPalette={containerPalette}
757757
>
758758
<CardLink
759759
linkTo={linkTo}

‎dotcom-rendering/src/components/Card/components/CardWrapper.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { css } from '@emotion/react';
2-
import { space, until } from '@guardian/source/foundations';
2+
import { from, space, until } from '@guardian/source/foundations';
33
import type { ArticleFormat } from '../../../lib/articleFormat';
44
import { palette } from '../../../palette';
55
import type { DCRContainerPalette } from '../../../types/front';
@@ -9,10 +9,10 @@ import { FormatBoundary } from '../../FormatBoundary';
99
type Props = {
1010
children: React.ReactNode;
1111
format: ArticleFormat;
12+
showTopBarDesktop: boolean;
13+
showTopBarMobile: boolean;
14+
isOnwardContent: boolean;
1215
containerPalette?: DCRContainerPalette;
13-
showTopBarDesktop?: boolean;
14-
showTopBarMobile?: boolean;
15-
isOnwardContent?: boolean;
1616
};
1717

1818
const baseCardStyles = css`
@@ -63,7 +63,7 @@ const sublinkHoverStyles = css`
6363
`;
6464

6565
const topBarStyles = css`
66-
:before {
66+
::before {
6767
border-top: 1px solid ${palette('--card-border-top')};
6868
content: '';
6969
z-index: 2;
@@ -78,7 +78,9 @@ const mobileTopBarStyles = css`
7878
}
7979
`;
8080
const desktopTopBarStyles = css`
81-
${topBarStyles}
81+
${from.tablet} {
82+
${topBarStyles}
83+
}
8284
`;
8385

8486
const onwardContentStyles = css`
@@ -93,10 +95,10 @@ const onwardContentStyles = css`
9395
export const CardWrapper = ({
9496
children,
9597
format,
98+
showTopBarDesktop,
99+
showTopBarMobile,
100+
isOnwardContent,
96101
containerPalette,
97-
showTopBarDesktop = true,
98-
showTopBarMobile = false,
99-
isOnwardContent = false,
100102
}: Props) => {
101103
return (
102104
<FormatBoundary format={format}>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -548,7 +548,7 @@ const CarouselCard = ({
548548
starRating={starRating}
549549
index={index}
550550
showTopBarDesktop={!isOnwardContent}
551-
showTopBarMobile={false}
551+
showTopBarMobile={!isOnwardContent}
552552
/>
553553
</LI>
554554
);

‎dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const previewStyle = css`
5454
position: relative;
5555
display: flex;
5656
flex-direction: column;
57-
:before {
57+
::before {
5858
content: '';
5959
position: absolute;
6060
border-left: ${arrowSize}px solid

‎dotcom-rendering/src/components/Discussion/Dropdown.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const firstStyles = css`
8585
const activeStyles = css`
8686
font-weight: bold;
8787
88-
:after {
88+
::after {
8989
content: '';
9090
border: 2px solid ${schemedPalette('--discussion-accent-text')};
9191
border-top: 0px;
@@ -120,12 +120,12 @@ const buttonStyles = css`
120120
text-decoration: none;
121121
122122
:hover {
123-
:after {
123+
::after {
124124
transform: translateY(0) rotate(45deg);
125125
}
126126
}
127127
128-
:after {
128+
::after {
129129
content: '';
130130
display: inline-block;
131131
width: 5px;
@@ -141,10 +141,10 @@ const buttonStyles = css`
141141
`;
142142

143143
const expandedStyles = css`
144-
:hover:after {
144+
:hover::after {
145145
transform: translateY(-1px) rotate(-135deg);
146146
}
147-
:after {
147+
::after {
148148
transform: translateY(1px) rotate(-135deg);
149149
}
150150
`;

‎dotcom-rendering/src/components/Discussion/Filters.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const filterBar = css`
2828
const dividerStyles = css`
2929
position: relative;
3030
margin-left: ${space[2]}px;
31-
:after {
31+
::after {
3232
content: '';
3333
display: block;
3434
width: 1px;

‎dotcom-rendering/src/components/Discussion/LoadingPicks.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const pickBoxStyles = css`
5050
position: relative;
5151
height: 150px;
5252
53-
:before {
53+
::before {
5454
content: '';
5555
margin-left: ${space[6]}px;
5656
position: absolute;

‎dotcom-rendering/src/components/Discussion/TopPick.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const PickBubble = ({ children }: { children: React.ReactNode }) => (
120120
min-height: 150px;
121121
}
122122
123-
:before {
123+
::before {
124124
content: '';
125125
margin-left: ${space[6]}px;
126126
position: absolute;

0 commit comments

Comments
 (0)