Skip to content

Commit 3431751

Browse files
torleifhalsethtorleifhalseth
authored
feat(eds-demo): migrate typography components to use @equinor/eds-core-react and remove obsolete typography files (#4269)
* feat(eds-demo): migrate typography components to use @equinor/eds-core-react and remove obsolete typography files * test(eds-demo): update visual snapshots for dynamic and static exercise pages * chore(eds-demo): remove unused import of EDS tokens CSS variables from exercise pages
1 parent 4a84a35 commit 3431751

20 files changed

Lines changed: 111 additions & 511 deletions

‎apps/eds-demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"test:e2e:update": "playwright test --update-snapshots"
1313
},
1414
"dependencies": {
15+
"@equinor/eds-core-react": "workspace:^",
1516
"@equinor/eds-tokens": "workspace:^",
1617
"@mdx-js/loader": "^3.1.1",
1718
"@mdx-js/react": "^3.1.1",

‎apps/eds-demo/src/app/(exercise)/dynamic/exercise/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "@equinor/eds-tokens/css/variables";
21
import { Chip } from "./Chip";
32

43
import styles from "./styles.module.css";

‎apps/eds-demo/src/app/(exercise)/dynamic/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "@equinor/eds-tokens/css/variables";
21
import styles from "./styles.module.css";
32
import { Chip } from "@/app/_components/Chip";
43
import { Dashboard } from "@/app/_components/Dashboard";

‎apps/eds-demo/src/app/(exercise)/static/exercise/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "@equinor/eds-tokens/css/variables";
21
import { Chip } from "./Chip";
32

43
import styles from "./styles.module.css";

‎apps/eds-demo/src/app/(exercise)/static/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import "@equinor/eds-tokens/css/variables";
21
import styles from "./styles.module.css";
32
import { Dashboard } from "@/app/_components/Dashboard";
43
import { Metadata } from "next";

‎apps/eds-demo/src/app/_components/Button.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Typography } from "./Typography";
2+
import { TypographyNext as Typography } from "@equinor/eds-core-react";
33

44
type ButtonProps = {
55
className?: string;
@@ -26,7 +26,15 @@ export const PrimaryButton = ({
2626
{...rest}
2727
>
2828
{icon}
29-
<Typography as="span" size="md" isBaselineAligned={false}>
29+
<Typography
30+
as="span"
31+
family="ui"
32+
size="md"
33+
baseline="center"
34+
lineHeight="default"
35+
weight="normal"
36+
tracking="normal"
37+
>
3038
{children}
3139
</Typography>
3240
</button>
@@ -51,7 +59,15 @@ export const SecondaryButton = ({
5159
{...rest}
5260
>
5361
{icon}
54-
<Typography as="span" size="md" isBaselineAligned={false}>
62+
<Typography
63+
as="span"
64+
family="ui"
65+
size="md"
66+
baseline="center"
67+
lineHeight="default"
68+
weight="normal"
69+
tracking="normal"
70+
>
5571
{children}
5672
</Typography>
5773
</button>

‎apps/eds-demo/src/app/_components/Dashboard.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { PrimaryButton, SecondaryButton } from "@/app/_components/Button";
77
import { ButtonGroup } from "@/app/_components/ButtonGroup";
88
import { ChipProps } from "@/app/_components/ChipProps";
99
import { Menu } from "@/app/_components/Menu";
10-
import { Heading } from "./Typography";
10+
import { TypographyNext as Typography } from "@equinor/eds-core-react";
1111

1212
type Props = {
1313
styles: Readonly<{ [key: string]: string }>;
@@ -58,14 +58,18 @@ export function Dashboard({ styles, Chip, ...rest }: Props) {
5858
/>
5959

6060
<header className="self-stretch h-9 pt-[5px] pb-[3px] flex-col justify-start items-start flex">
61-
<Heading
62-
level={1}
63-
size="5xl"
64-
isBaselineAligned={false}
61+
<Typography
62+
as="h1"
63+
family="header"
64+
size="4xl"
65+
baseline="grid"
66+
lineHeight="squished"
67+
weight="normal"
68+
tracking="normal"
6569
className={styles.heading}
6670
>
6771
People
68-
</Heading>
72+
</Typography>
6973
</header>
7074

7175
<DataTable

‎apps/eds-demo/src/app/_components/DataTable.tsx‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { CheckmarkUnselected, CheckmarkSelected } from "./index";
33
import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from "./ChipIcons";
44
import { tableData } from "./tableData";
55
import { ChipProps } from "./ChipProps";
6-
import { Typography } from "./Typography";
6+
import { TypographyNext as Typography } from "@equinor/eds-core-react";
77

88
type Props = {
99
className?: string;
@@ -78,9 +78,12 @@ export const DataTable = ({
7878
) : (
7979
<Typography
8080
as="span"
81+
family="ui"
8182
size="md"
82-
isBaselineAligned={false}
83+
baseline="center"
84+
lineHeight="default"
8385
weight="bolder"
86+
tracking="normal"
8487
>
8588
{column.label}
8689
</Typography>
@@ -115,7 +118,15 @@ export const DataTable = ({
115118

116119
{column.id === "id" && (
117120
<div className="h-5 grow shrink basis-0">
118-
<Typography as="span" size="md" isBaselineAligned={false}>
121+
<Typography
122+
as="span"
123+
family="ui"
124+
size="md"
125+
baseline="center"
126+
lineHeight="default"
127+
weight="normal"
128+
tracking="normal"
129+
>
119130
{row.id}
120131
</Typography>
121132
</div>
@@ -124,15 +135,27 @@ export const DataTable = ({
124135
{column.id === "person" && (
125136
<div className="inline-flex flex-col items-start justify-center h-8 grow shrink basis-0">
126137
<div className="self-stretch h-4">
127-
<Typography as="span" size="md" isBaselineAligned={false}>
138+
<Typography
139+
as="span"
140+
family="ui"
141+
size="md"
142+
baseline="center"
143+
lineHeight="default"
144+
weight="normal"
145+
tracking="normal"
146+
>
128147
{row.person.name}
129148
</Typography>
130149
</div>
131150
<div className="self-stretch h-4">
132151
<Typography
133152
as="span"
153+
family="ui"
134154
size="sm"
135-
isBaselineAligned={false}
155+
baseline="center"
156+
lineHeight="default"
157+
weight="normal"
158+
tracking="normal"
136159
className="underline"
137160
>
138161
{row.person.email}
@@ -143,15 +166,31 @@ export const DataTable = ({
143166

144167
{column.id === "position" && (
145168
<div className="h-5 grow shrink basis-0">
146-
<Typography as="span" size="md" isBaselineAligned={false}>
169+
<Typography
170+
as="span"
171+
family="ui"
172+
size="md"
173+
baseline="center"
174+
lineHeight="default"
175+
weight="normal"
176+
tracking="normal"
177+
>
147178
{row.position}
148179
</Typography>
149180
</div>
150181
)}
151182

152183
{column.id === "location" && (
153184
<div className="h-5 grow shrink basis-0">
154-
<Typography as="span" size="md" isBaselineAligned={false}>
185+
<Typography
186+
as="span"
187+
family="ui"
188+
size="md"
189+
baseline="center"
190+
lineHeight="default"
191+
weight="normal"
192+
tracking="normal"
193+
>
155194
{row.location}
156195
</Typography>
157196
</div>

‎apps/eds-demo/src/app/_components/SearchInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const SearchInput = ({ className, iconClass, ...rest }: Props) => {
3232
type="search"
3333
placeholder="Search"
3434
aria-label="Search input"
35-
className={`max-w-[250px] w-[250px] h-[37px] px-3 py-2 pl-10 text-base font-normal leading-tight ${className}`}
35+
className={`max-w-[250px] w-[250px] h-[37px] px-3 py-2 pl-10 ${className}`}
3636
{...rest}
3737
/>
3838
</div>

‎apps/eds-demo/src/app/_components/Tab.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { TypographyNext as Typography } from "@equinor/eds-core-react";
12
import React from "react";
23

34
export function Tab({
@@ -17,7 +18,17 @@ export function Tab({
1718
className={`h-11 px-4 py-2 justify-center items-center flex ${className}`}
1819
{...rest}
1920
>
20-
<div className="text-base font-normal leading-tight">{children}</div>
21+
<Typography
22+
as="span"
23+
family="ui"
24+
size="lg"
25+
baseline="center"
26+
lineHeight="default"
27+
weight="normal"
28+
tracking="normal"
29+
>
30+
{children}
31+
</Typography>
2132
</a>
2233
);
2334
}

0 commit comments

Comments
 (0)