Skip to content

Commit aa08c94

Browse files
Copiloteagerterrier
Copilot
and
eagerterrier
committed
Migrate 15 components to Tailwind CSS: EmbedConsentBanner, Embeds, Footer, Fragment, FrostedGlassPromo, Header, Image, ImageWithCaption, InlineLink, LiteSiteSummary, LiveHeaderMedia, LiveLabel, LivePulse, LiveText, MaskedImage [copilot]
Co-authored-by: eagerterrier <91352+eagerterrier@users.noreply.github.com>
1 parent 5c29120 commit aa08c94

18 files changed

Lines changed: 567 additions & 229 deletions

File tree

‎src/app/components/EmbedConsentBanner/ConsentBanner.tsx‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
/** @jsx jsx */
2-
import { jsx } from '@emotion/react';
3-
import { use, MouseEvent } from 'react';
1+
import React, { use, MouseEvent } from 'react';
42
import pathOr from 'ramda/src/pathOr';
53

64
import { RequestContext } from '#app/contexts/RequestContext';
@@ -11,7 +9,6 @@ import { ServiceContext } from '../../contexts/ServiceContext';
119
import { Translations } from '../../models/types/translations';
1210
import useViewTracker from '../../hooks/useViewTracker';
1311

14-
import consentBannerCss from './ConsentBanner.styles';
1512
import { ConsentBannerProviders, getEventTrackingData } from '.';
1613

1714
type BannerUrls = {
@@ -189,10 +186,13 @@ const ConsentBanner = ({
189186
<div
190187
data-testid="consentBanner"
191188
id={`consentBanner${id ? `-${id}` : ''}`}
192-
css={[
193-
consentBannerCss.parent,
194-
isLive && consentBannerCss.tranparentBorder,
195-
]}
189+
className={`
190+
bg-white dark:bg-gel-grey-3
191+
p-4
192+
flex flex-col justify-center items-start
193+
border border-solid border-gel-grey-5 dark:border-gel-grey-2
194+
${isLive ? 'border-transparent' : ''}
195+
`}
196196
{...viewTracker}
197197
>
198198
<Text
@@ -203,15 +203,37 @@ const ConsentBanner = ({
203203
>
204204
{consentTranslations.heading}
205205
</Text>
206-
<Paragraph data-testid="banner-body" css={consentBannerCss.textBody}>
206+
<Paragraph
207+
data-testid="banner-body"
208+
className="
209+
my-8
210+
[&_a]:text-current [&_a]:no-underline [&_a]:border-b [&_a]:border-solid [&_a]:border-gel-grey-10
211+
[&_a:visited]:text-gel-grey-6 [&_a:visited]:border-gel-grey-6
212+
[&_a:hover]:text-gel-postbox [&_a:hover]:border-b-2 [&_a:hover]:border-gel-postbox
213+
[&_a:focus]:text-gel-postbox [&_a:focus]:border-b-2 [&_a:focus]:border-gel-postbox
214+
"
215+
>
207216
{consentTranslations.body}
208217
</Paragraph>
209218
<Text
210219
as="button"
211220
type="button"
212221
data-testid="banner-button"
213222
fontVariant="sansBold"
214-
css={consentBannerCss.button}
223+
className="
224+
bg-white dark:bg-gel-grey-3
225+
border border-solid border-gel-philippine-grey dark:border-gel-grey-10
226+
rounded-none
227+
p-4
228+
cursor-pointer
229+
text-gel-black
230+
hover:bg-gel-postbox hover:text-white hover:border-gel-postbox hover:underline
231+
focus:bg-gel-postbox focus:text-white focus:border-gel-postbox focus:underline
232+
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-gel-black
233+
forced-colors:bg-canvas forced-colors:text-canvasText forced-colors:border-canvasText
234+
forced-colors:hover:bg-canvas forced-colors:hover:text-canvasText forced-colors:hover:border-canvasText
235+
forced-colors:focus:bg-canvas forced-colors:focus:text-canvasText forced-colors:focus:border-canvasText
236+
"
215237
{...clickHandler}
216238
>
217239
{consentTranslations.button}

‎src/app/components/Embeds/EmbedHtml/index.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
/** @jsx jsx */
2-
import { jsx } from '@emotion/react';
3-
import { PropsWithChildren, use } from 'react';
1+
import React, { PropsWithChildren, use } from 'react';
42
import useToggle from '#app/hooks/useToggle';
53
import { RequestContext } from '../../../contexts/RequestContext';
6-
import styles from './index.styles';
74

85
type Props = {
96
embeddableContent: string;
@@ -28,10 +25,10 @@ const EmbedHtml = ({ embeddableContent }: PropsWithChildren<Props>) => {
2825

2926
return (
3027
<div
31-
css={[
32-
styles.embedDiv,
33-
isUSElectionBanner && styles.electionBannerOverrides,
34-
]}
28+
className={`
29+
w-full
30+
${isUSElectionBanner ? 'max-w-[63rem] mx-auto' : ''}
31+
`}
3532
suppressHydrationWarning
3633
// eslint-disable-next-line react/no-danger
3734
dangerouslySetInnerHTML={{ __html: embeddableContent }}

‎src/app/components/Footer/Link/index.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
/** @jsx jsx */
2-
import { css, jsx } from '@emotion/react';
3-
import { useState, useEffect, MouseEvent } from 'react';
1+
import React, { useState, useEffect, MouseEvent } from 'react';
42
import { FooterLink } from '#app/models/types/serviceConfig';
5-
import styles from './index.styles';
63

74
interface LinkProps extends FooterLink {
85
inline?: boolean;
@@ -26,17 +23,25 @@ export default ({
2623
}
2724
}, [onlyShowIfJSenabled]);
2825

29-
let display = inline ? 'inline' : 'block';
26+
let displayClass = inline ? 'inline' : 'block';
3027
if (!isVisible) {
31-
display = 'none';
28+
displayClass = 'hidden';
3229
}
3330

3431
return (
3532
<a
36-
css={[styles.link, css({ display: `${display}` })]}
33+
className={`
34+
font-gel-sans-bold
35+
text-white
36+
py-3
37+
no-underline
38+
hover:underline
39+
focus:underline
40+
focusIndicatorInvert
41+
${displayClass}
42+
`}
3743
lang={lang}
3844
href={href}
39-
className="focusIndicatorInvert"
4045
onClick={onClick}
4146
>
4247
{text}

‎src/app/components/Footer/List/index.tsx‎

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
/** @jsx jsx */
2-
import { jsx } from '@emotion/react';
1+
import React from 'react';
32
import { FooterLink } from '#app/models/types/serviceConfig';
43
import { ReactElement } from 'react';
54
import Link from '../Link';
6-
import styles, { gridTemplateRows } from './index.styles';
5+
6+
const getRowCount = ({
7+
itemCount,
8+
columns,
9+
trustProjectLink,
10+
}: {
11+
itemCount: number;
12+
columns: number;
13+
trustProjectLink?: FooterLink;
14+
}) =>
15+
trustProjectLink
16+
? Math.ceil(itemCount / columns) + 1
17+
: Math.ceil(itemCount / columns);
718

819
export default ({
920
elements = [],
@@ -14,32 +25,55 @@ export default ({
1425
trustProjectLink?: FooterLink;
1526
extraLinks?: boolean;
1627
}) => {
28+
const itemCount = elements.length;
29+
30+
const getGridRows = (columns: number) =>
31+
`repeat(${getRowCount({ itemCount, columns, trustProjectLink })}, auto)`;
32+
1733
return (
1834
<ul
1935
role="list"
20-
css={[
21-
styles.list,
22-
trustProjectLink
23-
? [
24-
styles.listPaddingWithTrustProjectLink,
25-
styles.listItemWithBottomBorder,
26-
]
27-
: styles.listPaddingWithoutTrustProjectLink,
28-
gridTemplateRows({
29-
itemCount: elements.length,
30-
trustProjectLink,
31-
}),
32-
extraLinks && styles.listExtraLinks,
33-
]}
36+
className={`
37+
border-b border-gel-shadow
38+
columns-4
39+
m-0
40+
list-none
41+
supports-[display:grid]:grid
42+
supports-[display:grid]:grid-flow-col
43+
group-0:grid-flow-row
44+
group-0:columns-1
45+
group-1:gap-x-4 group-1:grid-cols-2 group-1:columns-2
46+
group-2:gap-x-4 group-2:grid-cols-2 group-2:columns-2
47+
group-3:gap-x-8 group-3:grid-cols-3 group-3:columns-3
48+
group-4:gap-x-8 group-4:grid-cols-4 group-4:columns-4
49+
group-5:gap-x-8 group-5:grid-cols-5 group-5:columns-5
50+
${trustProjectLink ? 'pb-4' : 'py-4'}
51+
${trustProjectLink ?
52+
`[&>li:first-child]:border-b [&>li:first-child]:border-gel-shadow
53+
[&>li:first-child]:py-4 [&>li:first-child]:mb-4
54+
[&>li:first-child]:col-span-full [&>li:first-child]:w-full
55+
[&>li:first-child]:column-span-all` : ''}
56+
${extraLinks ? 'group-2:grid-cols-1 group-2:columns-1 group-2:grid-flow-row' : ''}
57+
`}
58+
style={{
59+
gridTemplateRows: window.CSS?.supports('display: grid') ?
60+
`
61+
${getGridRows(2)} /* group-1 and group-2 */
62+
` : undefined
63+
}}
3464
>
3565
{trustProjectLink && (
36-
<li css={styles.listItem}>
66+
<li className="min-w-[50%] gap-x-8 break-inside-avoid">
3767
<Link text={trustProjectLink.text} href={trustProjectLink.href} />
3868
</li>
3969
)}
4070
{elements.map((elem, index) => (
41-
// eslint-disable-next-line react/no-array-index-key
42-
<li key={index}>{elem}</li>
71+
<li
72+
key={index}
73+
className="min-w-[50%] gap-x-8 break-inside-avoid"
74+
>
75+
{elem}
76+
</li>
4377
))}
4478
</ul>
4579
);

‎src/app/components/Footer/index.tsx‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
/** @jsx jsx */
2-
import { jsx } from '@emotion/react';
3-
import { MouseEvent, use } from 'react';
1+
import React, { MouseEvent, use } from 'react';
42
import { RequestContext } from '#app/contexts/RequestContext';
53
import { ServiceContext } from '#app/contexts/ServiceContext';
64
import Link from './Link';
75
import List from './List';
8-
import styles from './index.styles';
96

107
const openPrivacyManagerModal = (e: MouseEvent<HTMLAnchorElement>) => {
118
e.preventDefault();
@@ -58,22 +55,41 @@ export default () => {
5855
.filter(Boolean);
5956

6057
return (
61-
<div css={styles.siteWideLinksWrapper}>
58+
<div className="
59+
text-gel-brevier
60+
font-gel-sans-regular
61+
bg-gel-ebon
62+
px-8
63+
group-1:px-4
64+
">
6265
<div
63-
css={
64-
trustProjectLink
65-
? styles.constrainedWrapperWithTrustProjectLink
66-
: styles.constrainedWrapperWithoutTrustProjectLink
67-
}
66+
className={`
67+
max-w-group-4
68+
mx-auto
69+
${trustProjectLink ? 'pt-4' : ''}
70+
`}
6871
>
6972
<List elements={elements} trustProjectLink={trustProjectLink} />
7073
{extraLinkElements.length > 0 && (
7174
<List elements={extraLinkElements} extraLinks />
7275
)}
7376
{collectiveNewsroomText && (
74-
<p css={styles.paragraphWithBorderBottom}>{collectiveNewsroomText}</p>
77+
<p className="
78+
border-b
79+
border-gel-shadow
80+
text-white
81+
m-0
82+
py-8
83+
">
84+
{collectiveNewsroomText}
85+
</p>
7586
)}
76-
<p css={styles.paragraph}>
87+
<p className="
88+
text-white
89+
m-0
90+
py-8
91+
[&_a]:p-0
92+
">
7793
<span lang="en-GB">{`\u00A9`} </span>
7894
{`${new Date().getFullYear()} ${copyrightText}`}{' '}
7995
{externalLink && (

‎src/app/components/Fragment/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
/** @jsxRuntime classic */
2-
/** @jsx jsx */
31
import { PropsWithChildren } from 'react';
4-
import { jsx } from '@emotion/react';
5-
import styles from './index.style';
62

73
const bold = ({ children }: PropsWithChildren) => <b>{children}</b>;
84

95
const italic = ({ children }: PropsWithChildren) => (
10-
<i css={styles.italicStyle}>{children}</i>
6+
<i className="font-gel-sans-regular-italic font-inherit font-weight-inherit">
7+
{children}
8+
</i>
119
);
1210

1311
const attributeComponents = {

0 commit comments

Comments
 (0)