/
RadioGroupUsagePage.tsx
94 lines (91 loc) · 3.06 KB
/
RadioGroupUsagePage.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import {
DxcBulletedList,
DxcParagraph,
DxcFlex,
DxcTable,
} from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import stacking from "./examples/stacking";
import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
const sections = [
{
title: "Usage",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Labelling should be concise and clearly differentiated from other
options.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
One option of the radio group can be pre-selected. Select the safest
or convenient option.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Single radio button should not be used.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
If the question that the user needs to respond is as easier as
yes/no, it is recommended to use a checkbox instead of radio group.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
{
title: "Stacking",
content: (
<>
<Example example={stacking} />
<DxcTable>
<thead>
<tr>
<th>Name</th>
<HeaderDescriptionCell>Description</HeaderDescriptionCell>
</tr>
</thead>
<tbody>
<tr>
<td>Vertical</td>
<td>
Short lists of radio buttons should be stacked vertically below
a descriptive label to better associate the group. Options that
are listed vertically are easier to read.
</td>
</tr>
<tr>
<td>Horizontal</td>
<td>
Multiple radio buttons may be displayed horizontally across the
page while keeping them aligned within their respective columns.
Here, it is needed to have in consideration that the linear
radio buttons represent some challenge, because it's
difficult to scan and localize.
</td>
</tr>
</tbody>
</DxcTable>
<DxcParagraph>
*In any case, in the specification it is specified the ideal distance
between component with label in the same horizontal edge to avoid the
problem of pairing and scalability.
</DxcParagraph>
</>
),
},
];
const RadioGroupUsagePage = () => {
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/radio-group/usage/RadioGroupUsagePage.tsx" />
</DxcFlex>
);
};
export default RadioGroupUsagePage;