Line data Source code
1 : import * as React from 'react';
2 : import * as ActionList from '../../ui/foundations/action_list.js'
3 : import * as styles from './ui_page.module.css';
4 :
5 : import { ChecklistIcon, CopyIcon, EyeIcon, HeartIcon, PaperAirplaneIcon, TriangleDownIcon, ListUnorderedIcon, TableIcon, ProjectIcon, CodeIcon, FileIcon, GraphIcon } from '../../ui/foundations/symbol_icon.js';
6 :
7 : import { TextInput, TextInputValidationStatus } from '../../ui/foundations/text_input.js';
8 : import { TextInputAction } from '../../ui/foundations/text_input_action.js';
9 : import { Button, ButtonSize, ButtonVariant } from '../../ui/foundations/button.js';
10 : import { SegmentedControl, SegmentedControlSize } from '../../ui/foundations/segmented_control.js';
11 :
12 : /// The components of the UI foundations in their variants and sizes
13 1 : function UIPage(): React.ReactElement {
14 1 : const [selectedView, setSelectedView] = React.useState(0);
15 1 : const [selectedTab, setSelectedTab] = React.useState(0);
16 :
17 1 : return <div className={styles.root}>
18 1 : <div className={styles.component_section}>
19 1 : <div className={styles.component_section_header}>
20 : UI Design System
21 1 : </div>
22 1 : <div className={styles.component}>
23 1 : <div className={styles.component_title}>
24 : Segmented Control
25 1 : </div>
26 1 : <div className={styles.component_variants}>
27 1 : <SegmentedControl aria-label="View options">
28 1 : <SegmentedControl.Button defaultSelected>List</SegmentedControl.Button>
29 1 : <SegmentedControl.Button>Grid</SegmentedControl.Button>
30 1 : <SegmentedControl.Button>Gallery</SegmentedControl.Button>
31 1 : </SegmentedControl>
32 :
33 1 : <SegmentedControl aria-label="View mode" onChange={setSelectedView}>
34 1 : <SegmentedControl.Button selected={selectedView === 0}>Preview</SegmentedControl.Button>
35 1 : <SegmentedControl.Button selected={selectedView === 1}>Code</SegmentedControl.Button>
36 1 : <SegmentedControl.Button selected={selectedView === 2}>Split</SegmentedControl.Button>
37 1 : </SegmentedControl>
38 :
39 1 : <SegmentedControl aria-label="File view with icons">
40 1 : <SegmentedControl.Button leadingVisual={ListUnorderedIcon} defaultSelected>
41 : List
42 1 : </SegmentedControl.Button>
43 1 : <SegmentedControl.Button leadingVisual={TableIcon}>
44 : Table
45 1 : </SegmentedControl.Button>
46 1 : <SegmentedControl.Button leadingVisual={ProjectIcon}>
47 : Board
48 1 : </SegmentedControl.Button>
49 1 : </SegmentedControl>
50 :
51 1 : <SegmentedControl aria-label="Icon only view">
52 1 : <SegmentedControl.IconButton
53 1 : aria-label="List view"
54 1 : icon={ListUnorderedIcon}
55 1 : defaultSelected
56 1 : />
57 1 : <SegmentedControl.IconButton
58 1 : aria-label="Table view"
59 1 : icon={TableIcon}
60 1 : />
61 1 : <SegmentedControl.IconButton
62 1 : aria-label="Board view"
63 1 : icon={ProjectIcon}
64 1 : />
65 1 : <SegmentedControl.IconButton
66 1 : aria-label="Graph view"
67 1 : icon={GraphIcon}
68 1 : />
69 1 : </SegmentedControl>
70 :
71 1 : <SegmentedControl aria-label="With description" onChange={setSelectedTab}>
72 1 : <SegmentedControl.IconButton
73 1 : aria-label="Code"
74 1 : description="View source code"
75 1 : icon={CodeIcon}
76 1 : selected={selectedTab === 0}
77 1 : />
78 1 : <SegmentedControl.IconButton
79 1 : aria-label="Files"
80 1 : description="Browse files"
81 1 : icon={FileIcon}
82 1 : selected={selectedTab === 1}
83 1 : />
84 1 : </SegmentedControl>
85 :
86 1 : <SegmentedControl aria-label="Small size" size={SegmentedControlSize.Small}>
87 1 : <SegmentedControl.Button defaultSelected>Small</SegmentedControl.Button>
88 1 : <SegmentedControl.Button>Size</SegmentedControl.Button>
89 1 : <SegmentedControl.Button>Example</SegmentedControl.Button>
90 1 : </SegmentedControl>
91 :
92 1 : <SegmentedControl aria-label="With counter">
93 1 : <SegmentedControl.Button count={12} defaultSelected>Open</SegmentedControl.Button>
94 1 : <SegmentedControl.Button count={3}>Closed</SegmentedControl.Button>
95 1 : <SegmentedControl.Button count={45}>All</SegmentedControl.Button>
96 1 : </SegmentedControl>
97 :
98 1 : <SegmentedControl aria-label="With disabled">
99 1 : <SegmentedControl.Button defaultSelected>Active</SegmentedControl.Button>
100 1 : <SegmentedControl.Button disabled>Disabled</SegmentedControl.Button>
101 1 : <SegmentedControl.Button>Another</SegmentedControl.Button>
102 1 : </SegmentedControl>
103 :
104 1 : <SegmentedControl aria-label="Full width example" fullWidth>
105 1 : <SegmentedControl.Button defaultSelected>Full</SegmentedControl.Button>
106 1 : <SegmentedControl.Button>Width</SegmentedControl.Button>
107 1 : <SegmentedControl.Button>Control</SegmentedControl.Button>
108 1 : </SegmentedControl>
109 1 : </div>
110 1 : </div>
111 1 : <div className={styles.component}>
112 1 : <div className={styles.component_title}>
113 : Text Input
114 1 : </div>
115 1 : <div className={styles.component_variants}>
116 1 : <TextInput />
117 1 : <TextInput value="some value" onChange={() => { }} />
118 1 : <TextInput value="looooooooooooooooooooooooooooooooooooooooooong" onChange={() => { }} />
119 1 : <TextInput placeholder="some placeholder" />
120 1 : <TextInput disabled />
121 1 : <TextInput disabled placeholder="some placeholder" />
122 1 : <TextInput validationStatus={TextInputValidationStatus.Success} value="abc" onChange={() => { }} />
123 1 : <TextInput validationStatus={TextInputValidationStatus.Error} />
124 1 : <TextInput block />
125 1 : <TextInput
126 1 : leadingVisual={() => <div>URL</div>}
127 1 : />
128 1 : <TextInput
129 1 : leadingVisual={ChecklistIcon}
130 1 : />
131 1 : <TextInput
132 1 : trailingVisual={ChecklistIcon}
133 1 : />
134 1 : <TextInput
135 1 : leadingVisual={ChecklistIcon}
136 1 : trailingVisual={ChecklistIcon}
137 1 : />
138 1 : <TextInput
139 1 : trailingAction={
140 1 : <TextInputAction
141 1 : onClick={() => { }}
142 1 : aria-label="action"
143 1 : aria-labelledby=""
144 : >
145 1 : <CopyIcon />
146 1 : </TextInputAction>
147 : }
148 1 : />
149 1 : <TextInput
150 1 : leadingVisual={ChecklistIcon}
151 1 : trailingVisual={ChecklistIcon}
152 1 : trailingAction={
153 1 : <TextInputAction
154 1 : onClick={() => { }}
155 1 : aria-label="action"
156 1 : aria-labelledby=""
157 : >
158 1 : <CopyIcon />
159 1 : </TextInputAction>
160 : }
161 1 : />
162 1 : </div>
163 1 : </div>
164 1 : <div className={styles.component}>
165 1 : <div className={styles.component_title}>
166 : Button
167 1 : </div>
168 1 : <div className={styles.component_variants}>
169 1 : <Button>Default</Button>
170 1 : <Button disabled>Default</Button>
171 1 : <Button variant={ButtonVariant.Primary}>Primary</Button>
172 1 : <Button variant={ButtonVariant.Primary} disabled>Primary</Button>
173 1 : <Button variant={ButtonVariant.Danger}>Danger</Button>
174 1 : <Button variant={ButtonVariant.Danger} disabled>Danger</Button>
175 1 : <Button variant={ButtonVariant.Invisible}>Invisible</Button>
176 1 : <Button variant={ButtonVariant.Invisible} disabled>Invisible</Button>
177 1 : <Button leadingVisual={HeartIcon}>Leading Visual</Button>
178 1 : <Button trailingVisual={EyeIcon}>Trailing Visual</Button>
179 1 : <Button trailingAction={<TriangleDownIcon />}>Trailing action</Button>
180 1 : <Button block>Block</Button>
181 1 : <Button size={ButtonSize.Small}>Small</Button>
182 1 : <Button size={ButtonSize.Medium}>Medium</Button>
183 1 : <Button size={ButtonSize.Large}>Large</Button>
184 1 : </div>
185 1 : <div className={styles.component}>
186 1 : <div className={styles.component_title}>
187 : Action List
188 1 : </div>
189 1 : <div className={styles.component_variants}>
190 1 : <div className={styles.actionlist_component}>
191 1 : <ActionList.List aria-label="Sessions" leading trailing>
192 1 : <ActionList.GroupHeading>
193 : Sessions
194 1 : </ActionList.GroupHeading>
195 1 : <ActionList.ListItem>
196 1 : <ActionList.Leading>
197 1 : <PaperAirplaneIcon />
198 1 : </ActionList.Leading>
199 1 : <ActionList.ItemText>
200 : Execute Query
201 1 : </ActionList.ItemText>
202 1 : <ActionList.Trailing>
203 : Ctrl + E
204 1 : </ActionList.Trailing>
205 1 : </ActionList.ListItem>
206 1 : <ActionList.ListItem>
207 1 : <ActionList.Leading>
208 1 : <EyeIcon />
209 1 : </ActionList.Leading>
210 1 : <ActionList.ItemText>
211 : Execute Query
212 1 : </ActionList.ItemText>
213 1 : <ActionList.Trailing>
214 : Ctrl + E
215 1 : </ActionList.Trailing>
216 1 : </ActionList.ListItem>
217 1 : </ActionList.List>
218 1 : </div>
219 1 : </div>
220 1 : </div>
221 1 : </div>
222 1 : </div>
223 1 : </div>;
224 :
225 1 : }
226 :
227 : export default UIPage;
|
