Skip to content

Commit b2aa82e

Browse files
gabrielmferngabrielmfern
authored
feat(web): Unit test to ensure all variants of components render the same (#1676)
1 parent 1d97305 commit b2aa82e

File tree

68 files changed

+387
-243
lines changed

Some content is hidden

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

68 files changed

+387
-243
lines changed

‎apps/web/.eslintrc

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{
2-
"extends": ["custom/next", "prettier"],
2+
"extends": [
3+
"custom/next",
4+
"prettier"
5+
],
36
"rules": {
47
"@typescript-eslint/require-await": "off",
58
"eslint-comments/require-description": "off",
6-
"react/display-name": "off",
7-
},
9+
"react/display-name": "off"
10+
}
811
}

‎apps/web/components/article-with-image-as-background/inline-styles.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,28 @@ export const component = (
2929
<tr>
3030
<td align="center" style={{ padding: 40, textAlign: "center" }}>
3131
<Text
32-
style={{ margin: 0, fontWeight: 600, color: "rgb(229,231,235)" }}
32+
style={{
33+
margin: "0px",
34+
fontWeight: 600,
35+
color: "rgb(229,231,235)",
36+
}}
3337
>
3438
New article
3539
</Text>
3640
<Heading
3741
as="h1"
3842
style={{
39-
margin: 0,
43+
margin: "0px",
4044
marginTop: 4,
41-
fontWeight: "bold",
45+
fontWeight: 700,
4246
color: "rgb(255,255,255)",
4347
}}
4448
>
4549
Artful Accents
4650
</Heading>
4751
<Text
4852
style={{
49-
margin: 0,
53+
margin: "0px",
5054
marginTop: 8,
5155
fontSize: 16,
5256
lineHeight: "24px",

‎apps/web/components/article-with-image-as-background/tailwind.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const component = (
1414
border={0}
1515
cellPadding="0"
1616
cellSpacing="0"
17-
className="m-[16px] h-[424px] rounded-[12px] bg-blue-600"
17+
className="my-[16px] h-[424px] rounded-[12px] bg-blue-600"
1818
role="presentation"
1919
style={{
2020
// This url must be in quotes for Yahoo
@@ -37,7 +37,7 @@ export const component = (
3737
</Text>
3838
<Button
3939
className="mt-[24px] rounded-[8px] border border-solid border-gray-200 bg-white px-[40px] py-[12px] font-semibold text-gray-900"
40-
href="#"
40+
href="https://react.email"
4141
>
4242
Read more
4343
</Button>

‎apps/web/components/article-with-image-on-right/inline-styles.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const component = (
1717
>
1818
<Text
1919
style={{
20-
margin: 0,
20+
margin: "0px",
2121
fontSize: 16,
2222
lineHeight: "24px",
2323
fontWeight: 600,
@@ -28,7 +28,7 @@ export const component = (
2828
</Text>
2929
<Text
3030
style={{
31-
margin: 0,
31+
margin: "0px",
3232
marginTop: "8px",
3333
fontSize: 20,
3434
lineHeight: "28px",
@@ -51,7 +51,7 @@ export const component = (
5151
</Text>
5252
<Link
5353
href="https://react.email"
54-
style={{ color: "rgb(79 70 229)", textDecorationLine: "underline" }}
54+
style={{ color: "rgb(79,70,229)", textDecorationLine: "underline" }}
5555
>
5656
Read more
5757
</Link>

‎apps/web/components/article-with-image/inline-styles.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const component = (
3434
<Heading
3535
as="h1"
3636
style={{
37-
margin: 0,
37+
margin: "0px",
3838
marginTop: 8,
3939
fontSize: 36,
4040
lineHeight: "36px",

‎apps/web/components/article-with-image/tailwind.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ export const component = (
1010
src="/static/herman-miller-chair.jpg"
1111
/>
1212
<Section className="mt-[32px] text-center">
13-
<Text className="m-[16px] text-[18px] font-semibold leading-[28px] text-indigo-600">
13+
<Text className="my-[16px] text-[18px] font-semibold leading-[28px] text-indigo-600">
1414
Our new article
1515
</Text>
1616
<Heading
1717
as="h1"
18-
className="m-0 mt-[8px] text-[36px] font-semibold leading-[40px] text-gray-900"
18+
className="m-0 mt-[8px] text-[36px] font-semibold leading-[36px] text-gray-900"
1919
>
2020
Designing with Furniture
2121
</Heading>

‎apps/web/components/article-with-multiple-authors/inline-styles.tsx

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ import { Layout } from "../_components/layout";
1111

1212
export const component = (
1313
<Row>
14-
<Hr style={{ borderColor: "rgb(209,213,219)", margin: "16px 0 0 0" }} />
14+
<Hr
15+
style={{
16+
borderColor: "rgb(209,213,219) !important",
17+
marginTop: "16px",
18+
marginBottom: "0px",
19+
}}
20+
/>
1521
<Section>
1622
{[
1723
{
@@ -51,7 +57,6 @@ export const component = (
5157
display: "block",
5258
objectFit: "cover",
5359
objectPosition: "center",
54-
width: "48px",
5560
}}
5661
width={48}
5762
/>
@@ -68,11 +73,11 @@ export const component = (
6873
<Heading
6974
as="h3"
7075
style={{
71-
color: "#1A202C",
76+
color: "rgb(17,24,39)",
7277
fontSize: "14px",
7378
fontWeight: 500,
7479
lineHeight: "20px",
75-
margin: 0,
80+
margin: "0px",
7681
}}
7782
>
7883
{author.name}
@@ -83,7 +88,7 @@ export const component = (
8388
fontSize: "12px",
8489
fontWeight: 500,
8590
lineHeight: "14px",
86-
margin: 0,
91+
margin: "0px",
8792
}}
8893
>
8994
{author.title}
@@ -99,8 +104,9 @@ export const component = (
99104
>
100105
<Img
101106
alt="X"
107+
height={12}
102108
src="/static/x-icon.png"
103-
style={{ height: "12px", width: "12px" }}
109+
width={12}
104110
/>
105111
</Link>
106112
<Link
@@ -114,8 +120,9 @@ export const component = (
114120
>
115121
<Img
116122
alt="LinkedIn"
123+
height={12}
117124
src="/static/in-icon.png"
118-
style={{ height: "12px", width: "12px" }}
125+
width={12}
119126
/>
120127
</Link>
121128
</Section>

‎apps/web/components/article-with-multiple-authors/tailwind.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const component = (
7373
</Section>
7474
{author.showDivider ? (
7575
<Hr
76-
className="mr-[16px] inline-block h-[58px] w-[1px] border-none bg-gray-300"
76+
className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
7777
style={{ float: "left" }}
7878
/>
7979
) : null}

‎apps/web/components/article-with-single-author/inline-styles.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ import { Layout } from "../_components/layout";
1111

1212
export const component = (
1313
<Row>
14-
<Hr style={{ borderColor: "rgb(209,213,219)", margin: "16px 0" }} />
14+
<Hr
15+
style={{
16+
borderColor: "rgb(209,213,219) !important",
17+
marginTop: "16px",
18+
marginBottom: "16px",
19+
}}
20+
/>
1521
<Section
1622
style={{
1723
display: "inline-block",
@@ -48,22 +54,22 @@ export const component = (
4854
<Heading
4955
as="h3"
5056
style={{
51-
color: "#1A202C",
57+
color: "rgb(31,41,55)",
5258
fontSize: "14px",
5359
fontWeight: 500,
5460
lineHeight: "20px",
55-
margin: 0,
61+
margin: "0px",
5662
}}
5763
>
5864
Steve Jobs
5965
</Heading>
6066
<Text
6167
style={{
62-
color: "#718096",
68+
color: "rgb(107,114,128)",
6369
fontSize: "12px",
6470
fontWeight: 500,
6571
lineHeight: "14px",
66-
margin: 0,
72+
margin: "0px",
6773
}}
6874
>
6975
Co-Founder & CEO

‎apps/web/components/article-with-single-author/tailwind.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ export const component = (
2424
<Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
2525
<Heading
2626
as="h3"
27-
className="m-[0px] text-[14px] font-medium leading-[20px] text-[#1A202C]"
27+
className="m-[0px] text-[14px] font-medium leading-[20px] text-gray-800"
2828
>
2929
Steve Jobs
3030
</Heading>
31-
<Text className="m-[0px] text-[12px] font-medium leading-[14px] text-[#718096]">
31+
<Text className="m-[0px] text-[12px] font-medium leading-[14px] text-gray-500">
3232
Co-Founder & CEO
3333
</Text>
3434
<Section className="mt-[4px]">

0 commit comments

Comments
 (0)