Skip to content

Commit 280b6fe

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2202 from dxc-technology/jialecl/link-tokens
Link component redesign
2 parents df9abc7 + ed6051f commit 280b6fe

File tree

16 files changed

+185
-607
lines changed

16 files changed

+185
-607
lines changed

‎apps/website/pages/components/link/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import LinkPageLayout from "screens/components/link/LinkPageLayout";
4+
import LinkCodePage from "screens/components/link/code/LinkCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Link code — Halstack Design System</title>
10+
</Head>
11+
<LinkCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <LinkPageLayout>{page}</LinkPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/link/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import LinkPageLayout from "screens/components/link/LinkPageLayout";
4-
import LinkCodePage from "screens/components/link/code/LinkCodePage";
4+
import LinkOverviewPage from "screens/components/link/overview/LinkOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Link — Halstack Design System</title>
11-
</Head>
12-
<LinkCodePage></LinkCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Link — Halstack Design System</title>
10+
</Head>
11+
<LinkOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <LinkPageLayout>{page}</LinkPageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <LinkPageLayout>{page}</LinkPageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/link/specifications.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/pages/components/link/usage.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/components/link/LinkPageLayout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
66

77
const LinkPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/link" },
10-
{ label: "Usage", path: "/components/link/usage" },
11-
{ label: "Specifications", path: "/components/link/specifications" },
9+
{ label: "Overview", path: "/components/link" },
10+
{ label: "Code", path: "/components/link/code" },
1211
];
1312

1413
return (
@@ -17,8 +16,9 @@ const LinkPageHeading = ({ children }: { children: ReactNode }) => {
1716
<DxcFlex direction="column" gap="2rem">
1817
<ComponentHeading name="Link" />
1918
<DxcParagraph>
20-
Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or
21-
following the content.
19+
Links serve as navigational elements, allowing users to move between pages or access related content. They
20+
can appear independently, be embedded within text, or follow a section to provide additional information or
21+
actions.
2222
</DxcParagraph>
2323
<TabsPageHeading tabs={tabs}></TabsPageHeading>
2424
</DxcFlex>

‎apps/website/screens/components/link/code/LinkCodePage.tsx‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,36 @@ const sections = [
2727
</thead>
2828
<tbody>
2929
<tr>
30-
<td>disabled</td>
3130
<td>
32-
<TableCode>boolean</TableCode>
31+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
32+
<StatusBadge status="required" />
33+
children
34+
</DxcFlex>
3335
</td>
34-
<td>If true, the link is disabled.</td>
3536
<td>
36-
<TableCode>false</TableCode>
37+
<TableCode>string</TableCode>
3738
</td>
39+
<td>Text of the link.</td>
40+
<td>-</td>
3841
</tr>
3942
<tr>
40-
<td>inheritColor</td>
43+
<td>disabled</td>
4144
<td>
4245
<TableCode>boolean</TableCode>
4346
</td>
44-
<td>If true, the color is inherited from parent.</td>
47+
<td>If true, the link is disabled.</td>
4548
<td>
4649
<TableCode>false</TableCode>
4750
</td>
4851
</tr>
52+
<tr>
53+
<td>href</td>
54+
<td>
55+
<TableCode>string</TableCode>
56+
</td>
57+
<td>Page to be opened when the user clicks on the link.</td>
58+
<td>-</td>
59+
</tr>
4960
<tr>
5061
<td>icon</td>
5162
<td>
@@ -59,7 +70,6 @@ const sections = [
5970
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
6071
symbol name with <TableCode>"filled_"</TableCode>.
6172
</td>
62-
6373
<td>-</td>
6474
</tr>
6575
<tr>
@@ -73,55 +83,44 @@ const sections = [
7383
</td>
7484
</tr>
7585
<tr>
76-
<td>href</td>
77-
<td>
78-
<TableCode>string</TableCode>
79-
</td>
80-
<td>Page to be opened when the user clicks on the link.</td>
81-
<td>-</td>
82-
</tr>
83-
<tr>
84-
<td>newWindow</td>
86+
<td>inheritColor</td>
8587
<td>
8688
<TableCode>boolean</TableCode>
8789
</td>
88-
<td>If true, the page is opened in a new browser tab.</td>
90+
<td>If true, the color is inherited from parent.</td>
8991
<td>
9092
<TableCode>false</TableCode>
9193
</td>
9294
</tr>
9395
<tr>
94-
<td>onClick</td>
96+
<td>margin</td>
9597
<td>
96-
<TableCode>{"() => void"}</TableCode>
98+
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
9799
</td>
98100
<td>
99-
If defined, the link will be displayed as a button. This function will be called when the user clicks the
100-
link.
101+
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
102+
'right' properties in order to specify different margin sizes.
101103
</td>
102104
<td>-</td>
103105
</tr>
104106
<tr>
107+
<td>newWindow</td>
105108
<td>
106-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
107-
<StatusBadge status="required" />
108-
children
109-
</DxcFlex>
109+
<TableCode>boolean</TableCode>
110110
</td>
111+
<td>If true, the page is opened in a new browser tab.</td>
111112
<td>
112-
<TableCode>string</TableCode>
113+
<TableCode>false</TableCode>
113114
</td>
114-
<td>Text of the link.</td>
115-
<td>-</td>
116115
</tr>
117116
<tr>
118-
<td>margin</td>
117+
<td>onClick</td>
119118
<td>
120-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
119+
<TableCode>{"() => void"}</TableCode>
121120
</td>
122121
<td>
123-
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
124-
'right' properties in order to specify different margin sizes.
122+
If defined, the link will be displayed as a button. This function will be called when the user clicks the
123+
link.
125124
</td>
126125
<td>-</td>
127126
</tr>

‎apps/website/screens/components/link/overview/LinkOverviewPage.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
2+
import DocFooter from "@/common/DocFooter";
3+
import QuickNavContainer from "@/common/QuickNavContainer";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import Image from "@/common/Image";
6+
import linkAnatomy from "./images/link-anatomy.png";
7+
8+
const sections = [
9+
{
10+
title: "Introduction",
11+
content: (
12+
<DxcParagraph>
13+
Links are essential interactive elements that enable users to <strong>navigate</strong> between pages, access
14+
external resources, or explore related content. They can be placed within text, used as standalone elements, or
15+
positioned after sections to provide additional actions or information. Links enhance usability by clearly
16+
indicating their purpose and destination, ensuring a seamless and intuitive browsing experience. Proper usage of
17+
links helps maintain accessibility and improves content discoverability across digital products.
18+
</DxcParagraph>
19+
),
20+
},
21+
{
22+
title: "Anatomy",
23+
content: (
24+
<>
25+
<Image src={linkAnatomy} alt="Link's anatomy" />
26+
<DxcBulletedList type="number">
27+
<DxcBulletedList.Item>
28+
<strong>Icon:</strong> an optional visual element that can be used to represent more graphically the purpose
29+
of the link. It can be placed before or after the link it’s representing.
30+
</DxcBulletedList.Item>
31+
<DxcBulletedList.Item>
32+
<strong>Label:</strong> displays the textual content of the link, conveying where exactly it’s going to
33+
navigate the component.
34+
</DxcBulletedList.Item>
35+
</DxcBulletedList>
36+
</>
37+
),
38+
},
39+
{
40+
title: "Best practices",
41+
content: (
42+
<>
43+
<DxcBulletedList>
44+
<DxcBulletedList.Item>
45+
<strong>Use clear and descriptive labels:</strong> link labels should clearly indicate what users can expect
46+
when they click. Avoid generic labels like <em>"click here"</em>.
47+
</DxcBulletedList.Item>
48+
<DxcBulletedList.Item>
49+
<strong>Indicate external links appropriately:</strong> If a link directs users to an external site or opens
50+
a new tab, provide an appropriate icon to set expectations.
51+
</DxcBulletedList.Item>
52+
<DxcBulletedList.Item>
53+
<strong>Avoid excessive linking:</strong> too many links within a paragraph can overwhelm users and make
54+
content harder to read. Use links strategically.
55+
</DxcBulletedList.Item>
56+
<DxcBulletedList.Item>
57+
<strong>Use appropriate link placement:</strong> position links logically within content, either integrated
58+
into sentences or placed at the end of a section for additional navigation.
59+
</DxcBulletedList.Item>
60+
<DxcBulletedList.Item>
61+
<strong>Differentiate links from buttons:</strong> links are primarily for navigation, while buttons trigger
62+
actions like form submissions or modal openings. Use each element correctly.
63+
</DxcBulletedList.Item>
64+
</DxcBulletedList>
65+
</>
66+
),
67+
},
68+
];
69+
70+
const LinkOverviewPage = () => {
71+
return (
72+
<DxcFlex direction="column" gap="4rem">
73+
<QuickNavContainerLayout>
74+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
75+
</QuickNavContainerLayout>
76+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/link/overview/LinkOverviewPage.tsx" />
77+
</DxcFlex>
78+
);
79+
};
80+
81+
export default LinkOverviewPage;

‎apps/website/screens/components/link/overview/images/link-anatomy.png‎

11 KB
Loading

0 commit comments

Comments
 (0)