-
Notifications
You must be signed in to change notification settings - Fork 14
/
TagUsagePage.tsx
67 lines (64 loc) · 2.12 KB
/
TagUsagePage.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
62
63
64
65
66
67
import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import iconUsage from "./examples/iconUsage";
const sections = [
{
title: "Usage",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use the tag component to highlight properties of a section that want
to remark.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Make consistent use of the component accross the application.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Be responsible of the use of background color and icons.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
If there are multiple tags, the space between them should be at least
16px.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Icon usage",
content: (
<>
<Example example={iconUsage} />
<DxcBulletedList>
<DxcBulletedList.Item>
The tag can be displayed with icon and label or only icon.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The icon can be placed before or after.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The icon background color can be defined with the{" "}
<Code>iconBgColor</Code> component property.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];
const TagUsagePage = () => {
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/tag/usage/TagUsagePage.tsx" />
</DxcFlex>
);
};
export default TagUsagePage;