Skip to content

Link component redesign #2202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 4 commits into from
Apr 9, 2025
Merged

Link component redesign #2202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5bf226
Link component redesign
Jialecl Mar 28, 2025
50feec1
Tokens fixed based on comments and doc added
Jialecl Apr 3, 2025
e91781d
Fied documentation errors
Jialecl Apr 8, 2025
ed6051f
single tag for quicknav
Jialecl Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/link/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import LinkPageLayout from "screens/components/link/LinkPageLayout";
import LinkCodePage from "screens/components/link/code/LinkCodePage";

const Code = () => (
<>
<Head>
<title>Link code — Halstack Design System</title>
</Head>
<LinkCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <LinkPageLayout>{page}</LinkPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/link/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import LinkPageLayout from "screens/components/link/LinkPageLayout";
import LinkCodePage from "screens/components/link/code/LinkCodePage";
import LinkOverviewPage from "screens/components/link/overview/LinkOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Link — Halstack Design System</title>
</Head>
<LinkCodePage></LinkCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Link — Halstack Design System</title>
</Head>
<LinkOverviewPage />
</>
);

Index.getLayout = function getLayout(page: ReactElement) {
return <LinkPageLayout>{page}</LinkPageLayout>;
};
Index.getLayout = (page: ReactElement) => <LinkPageLayout>{page}</LinkPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/link/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/link/usage.tsx
View file
Open in desktop

This file was deleted.

10 changes: 5 additions & 5 deletions apps/website/screens/components/link/LinkPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

const LinkPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/link" },
{ label: "Usage", path: "/components/link/usage" },
{ label: "Specifications", path: "/components/link/specifications" },
{ label: "Overview", path: "/components/link" },
{ label: "Code", path: "/components/link/code" },
];

return (
Expand All @@ -17,8 +16,9 @@ const LinkPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Link" />
<DxcParagraph>
Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or
following the content.
Links serve as navigational elements, allowing users to move between pages or access related content. They
can appear independently, be embedded within text, or follow a section to provide additional information or
actions.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
</DxcFlex>
Expand Down
63 changes: 31 additions & 32 deletions apps/website/screens/components/link/code/LinkCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,36 @@ const sections = [
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>If true, the link is disabled.</td>
<td>
<TableCode>false</TableCode>
<TableCode>string</TableCode>
</td>
<td>Text of the link.</td>
<td>-</td>
</tr>
<tr>
<td>inheritColor</td>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the color is inherited from parent.</td>
<td>If true, the link is disabled.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>href</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Page to be opened when the user clicks on the link.</td>
<td>-</td>
</tr>
<tr>
<td>icon</td>
<td>
Expand All @@ -59,7 +70,6 @@ const sections = [
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
symbol name with <TableCode>"filled_"</TableCode>.
</td>

<td>-</td>
</tr>
<tr>
Expand All @@ -73,55 +83,44 @@ const sections = [
</td>
</tr>
<tr>
<td>href</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Page to be opened when the user clicks on the link.</td>
<td>-</td>
</tr>
<tr>
<td>newWindow</td>
<td>inheritColor</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the page is opened in a new browser tab.</td>
<td>If true, the color is inherited from parent.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>onClick</td>
<td>margin</td>
<td>
<TableCode>{"() => void"}</TableCode>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
If defined, the link will be displayed as a button. This function will be called when the user clicks the
link.
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
</td>
<td>-</td>
</tr>
<tr>
<td>newWindow</td>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
<TableCode>boolean</TableCode>
</td>
<td>If true, the page is opened in a new browser tab.</td>
<td>
<TableCode>string</TableCode>
<TableCode>false</TableCode>
</td>
<td>Text of the link.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>onClick</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
<TableCode>{"() => void"}</TableCode>
</td>
<td>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
If defined, the link will be displayed as a button. This function will be called when the user clicks the
link.
</td>
<td>-</td>
</tr>
Expand Down
81 changes: 81 additions & 0 deletions apps/website/screens/components/link/overview/LinkOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Image from "@/common/Image";
import linkAnatomy from "./images/link-anatomy.png";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
Links are essential interactive elements that enable users to <strong>navigate</strong> between pages, access
external resources, or explore related content. They can be placed within text, used as standalone elements, or
positioned after sections to provide additional actions or information. Links enhance usability by clearly
indicating their purpose and destination, ensuring a seamless and intuitive browsing experience. Proper usage of
links helps maintain accessibility and improves content discoverability across digital products.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={linkAnatomy} alt="Link's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Icon:</strong> an optional visual element that can be used to represent more graphically the purpose
of the link. It can be placed before or after the link it’s representing.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Label:</strong> displays the textual content of the link, conveying where exactly it’s going to
navigate the component.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Best practices",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Use clear and descriptive labels:</strong> link labels should clearly indicate what users can expect
when they click. Avoid generic labels like <em>"click here"</em>.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Indicate external links appropriately:</strong> If a link directs users to an external site or opens
a new tab, provide an appropriate icon to set expectations.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid excessive linking:</strong> too many links within a paragraph can overwhelm users and make
content harder to read. Use links strategically.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use appropriate link placement:</strong> position links logically within content, either integrated
into sentences or placed at the end of a section for additional navigation.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Differentiate links from buttons:</strong> links are primarily for navigation, while buttons trigger
actions like form submissions or modal openings. Use each element correctly.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];

const LinkOverviewPage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/link/overview/LinkOverviewPage.tsx" />
</DxcFlex>
);
};

export default LinkOverviewPage;
Binary file added apps/website/screens/components/link/overview/images/link-anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading