-
Notifications
You must be signed in to change notification settings - Fork 14
/
LinkUsagePage.tsx
61 lines (58 loc) · 1.8 KB
/
LinkUsagePage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import {
DxcBulletedList,
DxcFlex,
DxcParagraph,
} from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import iconUsage from "./examples/iconUsage";
import Example from "@/common/example/Example";
const sections = [
{
title: "Usage",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Provide visual cue to suggest clickability for all types of links.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Distinguish the visited and unvisited for navigation links.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Clearly explain where the link will take you to.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Front-load the most relevant keyword.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Icon usage",
content: (
<>
<DxcParagraph>
An icon can be used either in the normal or underlined mode to
represent more graphical the purpose of the link, placing the icon
before or after the link that is representing.
</DxcParagraph>
<Example example={iconUsage}></Example>
</>
),
},
];
const LinkUsagePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer
sections={sections}
startHeadingLevel={2}
></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/link/usage/LinkUsagePage.tsx" />
</DxcFlex>
);
};
export default LinkUsagePage;