graphen 1.10.9 → 1.10.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/css.js +1 -1
  2. package/dist/example.js +2 -0
  3. package/dist/example.js.LICENSE.txt +44 -0
  4. package/dist/scripts.js +1 -1
  5. package/dist/styles.css +1 -0
  6. package/package.json +3 -3
  7. package/src/components/Accordion/index.tsx +38 -59
  8. package/src/components/Button/index.tsx +7 -10
  9. package/src/components/Card/index.tsx +8 -12
  10. package/src/components/Dialog/index.tsx +10 -11
  11. package/src/components/Dialog/styles/_styles.scss +12 -0
  12. package/src/components/Dropdown/index.tsx +27 -23
  13. package/src/components/Flex/index.tsx +18 -22
  14. package/src/components/FlexItem/index.tsx +10 -14
  15. package/src/components/Icon/index.tsx +4 -4
  16. package/src/components/Image/index.tsx +5 -14
  17. package/src/components/Input/index.tsx +12 -15
  18. package/src/components/Joystick/index.tsx +5 -5
  19. package/src/components/Link/index.tsx +3 -10
  20. package/src/components/Logo/index.tsx +3 -11
  21. package/src/components/Panel/index.tsx +8 -12
  22. package/src/components/PanelContent/index.tsx +1 -8
  23. package/src/components/PanelFooter/index.tsx +1 -8
  24. package/src/components/PanelTitle/index.tsx +1 -8
  25. package/src/components/Scroller/index.tsx +4 -4
  26. package/src/components/Separator/index.tsx +2 -8
  27. package/src/components/Switch/index.tsx +45 -0
  28. package/src/components/Tooltip/index.tsx +4 -12
  29. package/src/components/Validation/index.tsx +10 -14
  30. package/src/example.tsx +580 -600
  31. package/src/index.d.ts +1 -1
  32. package/src/index.ts +3 -3
  33. package/src/variables/_z-index.scss +1 -0
package/src/example.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable */
2
2
  import _ from "lodash";
3
- import React from "react";
3
+ import React, { useState } from "react";
4
4
  import { render } from "react-dom";
5
5
  import {
6
6
  Button,
@@ -17,630 +17,610 @@ import {
17
17
  Tooltip,
18
18
  Logo,
19
19
  Dropdown,
20
+ Switch,
21
+ Flex,
22
+ FlexItem,
23
+ Panel,
24
+ PanelFooter,
25
+ PanelContent,
26
+ PanelTitle,
20
27
  constants,
21
28
  } from "./index";
22
29
 
23
30
  const appContainer = document.querySelector(".js-example");
24
31
 
25
- type Props = {};
32
+ function ExampleApp() {
33
+ const [isDialogVisible, setIsDialogVisible] = useState(false);
34
+ const [isDialogWithOverlayVisible, setIsDialogWithOverlayVisible] =
35
+ useState(false);
26
36
 
27
- type State = {
28
- isDialogVisible: boolean,
29
- };
30
-
31
- class ExampleApp extends React.PureComponent<Props, State> {
32
- constructor(props: Props) {
33
- super(props);
34
- this.state = {
35
- isDialogVisible: false,
36
- };
37
- }
38
-
39
- handleShowDialog() {
40
- this.setState(() => ({
41
- isDialogVisible: true,
42
- }));
43
- }
44
-
45
- handleHideDialog() {
46
- this.setState(() => ({
47
- isDialogVisible: false,
48
- }));
49
- }
50
-
51
- render() {
52
- const { isDialogVisible } = this.state;
53
-
54
- return (
55
- <>
56
- <article className="tst-colors gc-panel gc-panel--separator">
57
- <header className="gc-panel__title">Colors</header>
58
- <div className="gc-panel__content">
59
- <ul className="gc-list">
60
- <li className="gc-list__item">
61
- <div className="tst-colors-primary gc-sample gc-sample--brand-primary" />{" "}
62
- - Brand color primary / $gb-color-primary
63
- </li>
64
- <li className="gc-list__item">
65
- <div className="tst-colors-text gc-sample gc-sample--brand-text" />{" "}
66
- - Brand color text / $gb-color-text
67
- </li>
68
- <li className="gc-list__item">
69
- <div className="tst-colors-link gc-sample gc-sample--brand-link" />{" "}
70
- - Brand color link / $gb-color-link
71
- </li>
72
- <li className="gc-list__item">
73
- <div className="tst-colors-component gc-sample gc-sample--brand-component" />{" "}
74
- - Brand color component / $gb-color-component
75
- </li>
76
- <li className="gc-list__item">
77
- <div className="tst-colors-component gc-sample gc-sample--brand-component-dark" />{" "}
78
- - Brand color component dark / $gb-color-component-dark
79
- </li>
80
- <li className="gc-list__item">
81
- <div className="gc-sample gc-sample--brand-success" /> - Brand
82
- color success / $gb-color-success
83
- </li>
84
- <li className="gc-list__item">
85
- <div className="gc-sample gc-sample--brand-info" /> - Brand
86
- color info / $gb-color-info
87
- </li>
88
- <li className="gc-list__item">
89
- <div className="gc-sample gc-sample--brand-danger" /> - Brand
90
- color danger / $gb-color-danger
91
- </li>
92
- </ul>
93
- </div>
94
- </article>
95
- <article className="gc-panel gc-panel--separator">
96
- <header className="gc-panel__title">Logo</header>
97
- <div className="gc-panel__content">
98
- <Logo />
99
- </div>
100
- </article>
101
- <article className="gc-panel gc-panel--separator">
102
- <header className="gc-panel__title">Icons</header>
103
- <div className="gc-panel__content">
104
- <Icon type="circle-up" className="gc-icon--large" />{" "}
105
- <Icon type="circle-right" className="gc-icon--large" />{" "}
106
- <Icon type="circle-down" className="gc-icon--large" />{" "}
107
- <Icon type="circle-left" className="gc-icon--large" />{" "}
108
- <Icon type="fire" className="gc-icon--large" />{" "}
109
- <Icon type="man" className="gc-icon--large" />{" "}
110
- <Icon type="menu" className="gc-icon--large" />{" "}
111
- <Icon type="menu2" className="gc-icon--large" />{" "}
112
- <Icon type="menu3" className="gc-icon--large" />{" "}
113
- <Icon type="menu4" className="gc-icon--large" />{" "}
114
- <Icon type="thermometer-half" className="gc-icon--large" />{" "}
115
- <Icon type="radio-checked" className="gc-icon--large" />{" "}
116
- <Icon type="radio-checked2" className="gc-icon--large" />{" "}
117
- <Icon type="radio-unchecked" className="gc-icon--large" />
118
- </div>
119
- </article>
120
- <article className="gc-panel gc-panel--separator">
121
- <header className="gc-panel__title">Separator</header>
122
- <div className="gc-separator" />
123
- </article>
124
- <article className="gc-panel gc-panel--separator">
125
- <header className="gc-panel__title">Link</header>
126
- <div className="gc-panel__content">
127
- <Link link="http://some-url">Primary Link</Link> ,{" "}
128
- <Link link="http://some-url" skin={constants.SKIN_DEFAULT}>
129
- Default Link
37
+ return (
38
+ <>
39
+ <article className="tst-colors gc-panel gc-panel--separator">
40
+ <header className="gc-panel__title">Colors</header>
41
+ <div className="gc-panel__content">
42
+ <ul className="gc-list">
43
+ <li className="gc-list__item">
44
+ <div className="tst-colors-primary gc-sample gc-sample--brand-primary" />{" "}
45
+ - Brand color primary / $gb-color-primary
46
+ </li>
47
+ <li className="gc-list__item">
48
+ <div className="tst-colors-text gc-sample gc-sample--brand-text" />{" "}
49
+ - Brand color text / $gb-color-text
50
+ </li>
51
+ <li className="gc-list__item">
52
+ <div className="tst-colors-link gc-sample gc-sample--brand-link" />{" "}
53
+ - Brand color link / $gb-color-link
54
+ </li>
55
+ <li className="gc-list__item">
56
+ <div className="tst-colors-component gc-sample gc-sample--brand-component" />{" "}
57
+ - Brand color component / $gb-color-component
58
+ </li>
59
+ <li className="gc-list__item">
60
+ <div className="tst-colors-component gc-sample gc-sample--brand-component-dark" />{" "}
61
+ - Brand color component dark / $gb-color-component-dark
62
+ </li>
63
+ <li className="gc-list__item">
64
+ <div className="gc-sample gc-sample--brand-success" /> - Brand
65
+ color success / $gb-color-success
66
+ </li>
67
+ <li className="gc-list__item">
68
+ <div className="gc-sample gc-sample--brand-info" /> - Brand color
69
+ info / $gb-color-info
70
+ </li>
71
+ <li className="gc-list__item">
72
+ <div className="gc-sample gc-sample--brand-danger" /> - Brand
73
+ color danger / $gb-color-danger
74
+ </li>
75
+ </ul>
76
+ </div>
77
+ </article>
78
+ <article className="gc-panel gc-panel--separator">
79
+ <header className="gc-panel__title">Logo</header>
80
+ <div className="gc-panel__content">
81
+ <Logo />
82
+ </div>
83
+ </article>
84
+ <article className="gc-panel gc-panel--separator">
85
+ <header className="gc-panel__title">Icons</header>
86
+ <div className="gc-panel__content">
87
+ <Icon type="circle-up" className="gc-icon--large" />{" "}
88
+ <Icon type="circle-right" className="gc-icon--large" />{" "}
89
+ <Icon type="circle-down" className="gc-icon--large" />{" "}
90
+ <Icon type="circle-left" className="gc-icon--large" />{" "}
91
+ <Icon type="fire" className="gc-icon--large" />{" "}
92
+ <Icon type="man" className="gc-icon--large" />{" "}
93
+ <Icon type="menu" className="gc-icon--large" />{" "}
94
+ <Icon type="menu2" className="gc-icon--large" />{" "}
95
+ <Icon type="menu3" className="gc-icon--large" />{" "}
96
+ <Icon type="menu4" className="gc-icon--large" />{" "}
97
+ <Icon type="thermometer-half" className="gc-icon--large" />{" "}
98
+ <Icon type="radio-checked" className="gc-icon--large" />{" "}
99
+ <Icon type="radio-checked2" className="gc-icon--large" />{" "}
100
+ <Icon type="radio-unchecked" className="gc-icon--large" />
101
+ </div>
102
+ </article>
103
+ <article className="gc-panel gc-panel--separator">
104
+ <header className="gc-panel__title">Separator</header>
105
+ <div className="gc-separator" />
106
+ </article>
107
+ <article className="gc-panel gc-panel--separator">
108
+ <header className="gc-panel__title">Link</header>
109
+ <div className="gc-panel__content">
110
+ <Link link="http://some-url">Primary Link</Link> ,{" "}
111
+ <Link link="http://some-url" skin={constants.SKIN_DEFAULT}>
112
+ Default Link
113
+ </Link>
114
+ </div>
115
+ </article>
116
+ <article className="gc-panel gc-panel--separator">
117
+ <header className="gc-panel__title">Header</header>
118
+ <div className="gc-panel__content">
119
+ <header className="gc-header">
120
+ <Link className="gc-header__logo" link="/">
121
+ <Logo />
130
122
  </Link>
131
- </div>
132
- </article>
133
- <article className="gc-panel gc-panel--separator">
134
- <header className="gc-panel__title">Header</header>
135
- <div className="gc-panel__content">
136
- <header className="gc-header">
137
- <Link className="gc-header__logo" link="/">
138
- <Logo />
139
- </Link>
140
- <nav className="gc-header__navigation">
141
- <ul className="gc-navigation">
142
- <li className="gc-navigation__option">
143
- <Link className="gc-navigation__link" link="/">
144
- Item 1
145
- </Link>
146
- </li>
147
- <li className="gc-navigation__option gc-navigation__option--active">
148
- <Link className="gc-navigation__link" link="/">
149
- Deep Item 2
150
- </Link>
151
- <div className="gc-navigation__suboption gc-submenu">
152
- <div className="gc-submenu__content">
153
- <Link className="gc-submenu__item" link="/">
154
- Sub Item 2a
155
- </Link>
156
- <Link className="gc-submenu__item" link="/">
157
- Sub Item 2b
158
- </Link>
159
- </div>
123
+ <nav className="gc-header__navigation">
124
+ <ul className="gc-navigation">
125
+ <li className="gc-navigation__option">
126
+ <Link className="gc-navigation__link" link="/">
127
+ Item 1
128
+ </Link>
129
+ </li>
130
+ <li className="gc-navigation__option gc-navigation__option--active">
131
+ <Link className="gc-navigation__link" link="/">
132
+ Deep Item 2
133
+ </Link>
134
+ <div className="gc-navigation__suboption gc-submenu">
135
+ <div className="gc-submenu__content">
136
+ <Link className="gc-submenu__item" link="/">
137
+ Sub Item 2a
138
+ </Link>
139
+ <Link className="gc-submenu__item" link="/">
140
+ Sub Item 2b
141
+ </Link>
160
142
  </div>
161
- </li>
162
- <li className="gc-navigation__option">
163
- <Link className="gc-navigation__link" link="/">
164
- Item 3
165
- </Link>
166
- </li>
167
- <li className="gc-navigation__option">
168
- <Link className="gc-navigation__link" link="/">
169
- Item 4
170
- </Link>
171
- </li>
172
- <li className="gc-navigation__option">
173
- <Link className="gc-navigation__link" link="/">
174
- Item 5
175
- </Link>
176
- </li>
177
- </ul>
178
- </nav>
179
- </header>
180
- <header className="gc-header gc-header--default">
181
- <Link className="gc-header__logo" link="/">
182
- <Logo />
183
- </Link>
184
- <nav className="gc-header__navigation">
185
- <ul className="gc-navigation">
186
- <li className="gc-navigation__option">
187
- <Link className="gc-navigation__link" link="/">
188
- Item 1
189
- </Link>
190
- </li>
191
- <li className="gc-navigation__option gc-navigation__option--active">
192
- <Link className="gc-navigation__link" link="/">
193
- Deep Item 2
194
- </Link>
195
- <div className="gc-navigation__suboption gc-submenu">
196
- <div className="gc-submenu__content">
197
- <Link className="gc-submenu__item" link="/">
198
- Sub Item 2a
199
- </Link>
200
- <Link className="gc-submenu__item" link="/">
201
- Sub Item 2b
202
- </Link>
203
- </div>
143
+ </div>
144
+ </li>
145
+ <li className="gc-navigation__option">
146
+ <Link className="gc-navigation__link" link="/">
147
+ Item 3
148
+ </Link>
149
+ </li>
150
+ <li className="gc-navigation__option">
151
+ <Link className="gc-navigation__link" link="/">
152
+ Item 4
153
+ </Link>
154
+ </li>
155
+ <li className="gc-navigation__option">
156
+ <Link className="gc-navigation__link" link="/">
157
+ Item 5
158
+ </Link>
159
+ </li>
160
+ </ul>
161
+ </nav>
162
+ </header>
163
+ <header className="gc-header gc-header--default">
164
+ <Link className="gc-header__logo" link="/">
165
+ <Logo />
166
+ </Link>
167
+ <nav className="gc-header__navigation">
168
+ <ul className="gc-navigation">
169
+ <li className="gc-navigation__option">
170
+ <Link className="gc-navigation__link" link="/">
171
+ Item 1
172
+ </Link>
173
+ </li>
174
+ <li className="gc-navigation__option gc-navigation__option--active">
175
+ <Link className="gc-navigation__link" link="/">
176
+ Deep Item 2
177
+ </Link>
178
+ <div className="gc-navigation__suboption gc-submenu">
179
+ <div className="gc-submenu__content">
180
+ <Link className="gc-submenu__item" link="/">
181
+ Sub Item 2a
182
+ </Link>
183
+ <Link className="gc-submenu__item" link="/">
184
+ Sub Item 2b
185
+ </Link>
204
186
  </div>
205
- </li>
206
- <li className="gc-navigation__option">
207
- <Link className="gc-navigation__link" link="/">
208
- Item 3
209
- </Link>
210
- </li>
211
- <li className="gc-navigation__option">
212
- <Link className="gc-navigation__link" link="/">
213
- Item 4
214
- </Link>
215
- </li>
216
- <li className="gc-navigation__option">
217
- <Link className="gc-navigation__link" link="/">
218
- Item 5
219
- </Link>
220
- </li>
221
- </ul>
222
- </nav>
223
- </header>
224
- </div>
225
- </article>
226
- <article className="gc-panel gc-panel--separator">
227
- <header className="gc-panel__title">Footer</header>
228
- <div className="gc-panel__content">
229
- <footer className="gc-footer">Footer</footer>
230
- <footer className="gc-footer gc-footer--default">
231
- Footer + default
232
- </footer>
233
- </div>
234
- </article>
235
- <article className="gc-panel gc-panel--separator">
236
- <header className="gc-panel__title">Navigation</header>
237
- <div className="gc-panel__content">
238
- <ul className="gc-navigation">
239
- <li className="gc-navigation__option">
240
- <Link className="gc-navigation__link" link="/">
241
- Item 1
242
- </Link>
243
- </li>
244
- <li className="gc-navigation__option gc-navigation__option--active">
245
- <Link className="gc-navigation__link" link="/">
246
- Deep Item 2
247
- </Link>
248
- <div className="gc-navigation__suboption gc-submenu">
249
- <div className="gc-submenu__content">
250
- <Link className="gc-submenu__item" link="/">
251
- Sub Item 2a
252
- </Link>
253
- <Link className="gc-submenu__item" link="/">
254
- Sub Item 2b
255
- </Link>
256
187
  </div>
188
+ </li>
189
+ <li className="gc-navigation__option">
190
+ <Link className="gc-navigation__link" link="/">
191
+ Item 3
192
+ </Link>
193
+ </li>
194
+ <li className="gc-navigation__option">
195
+ <Link className="gc-navigation__link" link="/">
196
+ Item 4
197
+ </Link>
198
+ </li>
199
+ <li className="gc-navigation__option">
200
+ <Link className="gc-navigation__link" link="/">
201
+ Item 5
202
+ </Link>
203
+ </li>
204
+ </ul>
205
+ </nav>
206
+ </header>
207
+ </div>
208
+ </article>
209
+ <article className="gc-panel gc-panel--separator">
210
+ <header className="gc-panel__title">Footer</header>
211
+ <div className="gc-panel__content">
212
+ <footer className="gc-footer">Footer</footer>
213
+ <footer className="gc-footer gc-footer--default">
214
+ Footer + default
215
+ </footer>
216
+ </div>
217
+ </article>
218
+ <article className="gc-panel gc-panel--separator">
219
+ <header className="gc-panel__title">Navigation</header>
220
+ <div className="gc-panel__content">
221
+ <ul className="gc-navigation">
222
+ <li className="gc-navigation__option">
223
+ <Link className="gc-navigation__link" link="/">
224
+ Item 1
225
+ </Link>
226
+ </li>
227
+ <li className="gc-navigation__option gc-navigation__option--active">
228
+ <Link className="gc-navigation__link" link="/">
229
+ Deep Item 2
230
+ </Link>
231
+ <div className="gc-navigation__suboption gc-submenu">
232
+ <div className="gc-submenu__content">
233
+ <Link className="gc-submenu__item" link="/">
234
+ Sub Item 2a
235
+ </Link>
236
+ <Link className="gc-submenu__item" link="/">
237
+ Sub Item 2b
238
+ </Link>
257
239
  </div>
258
- </li>
259
- <li className="gc-navigation__option">
260
- <Link className="gc-navigation__link" link="/">
261
- Item 3
262
- </Link>
263
- </li>
264
- <li className="gc-navigation__option">
265
- <Link className="gc-navigation__link" link="/">
266
- Item 4
267
- </Link>
268
- </li>
269
- <li className="gc-navigation__option">
270
- <Link className="gc-navigation__link" link="/">
271
- Item 5
272
- </Link>
273
- </li>
274
- </ul>
275
- </div>
276
- </article>
277
- <article className="gc-panel gc-panel--separator">
278
- <header className="gc-panel__title">Panel</header>
279
- <div className="gc-panel__content">
280
- <article className="gc-panel">
281
- <header className="gc-panel__title">Panel title</header>
282
- <div className="gc-panel__content">
283
- <p>Panel content paragraph 1</p>
284
- <p>Panel content paragraph 2</p>
285
240
  </div>
286
- </article>
287
- </div>
288
- </article>
289
- <article className="gc-panel gc-panel--separator">
290
- <header className="gc-panel__title">Buttons</header>
291
- <div className="gc-panel__content">
292
- <p>
293
- <Button>Button</Button>{" "}
294
- <Button className="gc-btn--danger">Button + danger</Button>{" "}
295
- <Button className="gc-btn--primary">Button + primary</Button>{" "}
296
- <Button className="gc-btn--secondary">Button + secondary</Button>{" "}
297
- <Button className="gc-btn--tertiary">Button + tertiary</Button>
298
- </p>
299
- <p>
300
- <Button className="gc-btn--small">Button + small</Button>{" "}
301
- <Button className="gc-btn--small gc-btn--danger">
302
- Button + small + danger
303
- </Button>{" "}
304
- <Button className="gc-btn--small gc-btn--primary">
305
- Button + small + primary
306
- </Button>{" "}
307
- <Button className="gc-btn--small gc-btn--secondary">
308
- Button + small + secondary
309
- </Button>{" "}
310
- <Button className="gc-btn--small gc-btn--tertiary">
311
- Button + small + tertiary
312
- </Button>
313
- </p>
314
- <p>
315
- <Button className="gc-btn--full">Button + full</Button>
316
- </p>
317
- <p>
318
- <Button className="gc-btn--full gc-btn--danger">
319
- Button + full + danger
320
- </Button>
321
- </p>
322
- <p>
323
- <Button className="gc-btn--full gc-btn--primary">
324
- Button + full + primary
325
- </Button>
326
- </p>
327
- <p>
328
- <Button className="gc-btn--full gc-btn--secondary">
329
- Button + full + secondary
330
- </Button>
331
- </p>
332
- <p>
333
- <Button className="gc-btn--full gc-btn--tertiary">
334
- Button + full + tertiary
335
- </Button>
336
- </p>
337
- </div>
338
- </article>
339
- <article className="gc-panel gc-panel--separator">
340
- <header className="gc-panel__title">Switches</header>
341
- <div className="gc-panel__content">
342
- <p>
343
- <label htmlFor="switch-1" className="gc-switch">
344
- <input
345
- id="switch-1"
346
- className="gc-switch__input"
347
- type="checkbox"
348
- />
349
- <span className="gc-switch__slider" />
350
- </label>{" "}
351
- <label
352
- htmlFor="switch-2"
353
- className="gc-switch gc-switch--success"
354
- >
355
- <input
356
- id="switch-2"
357
- className="gc-switch__input"
358
- type="checkbox"
359
- />
360
- <span className="gc-switch__slider" />
361
- </label>{" "}
362
- <label htmlFor="switch-3" className="gc-switch gc-switch--info">
363
- <input
364
- id="switch-3"
365
- className="gc-switch__input"
366
- type="checkbox"
367
- />
368
- <span className="gc-switch__slider" />
369
- </label>{" "}
370
- <label htmlFor="switch-4" className="gc-switch gc-switch--danger">
371
- <input
372
- id="switch-4"
373
- className="gc-switch__input"
374
- type="checkbox"
375
- />
376
- <span className="gc-switch__slider" />
241
+ </li>
242
+ <li className="gc-navigation__option">
243
+ <Link className="gc-navigation__link" link="/">
244
+ Item 3
245
+ </Link>
246
+ </li>
247
+ <li className="gc-navigation__option">
248
+ <Link className="gc-navigation__link" link="/">
249
+ Item 4
250
+ </Link>
251
+ </li>
252
+ <li className="gc-navigation__option">
253
+ <Link className="gc-navigation__link" link="/">
254
+ Item 5
255
+ </Link>
256
+ </li>
257
+ </ul>
258
+ </div>
259
+ </article>
260
+ <article className="gc-panel gc-panel--separator">
261
+ <header className="gc-panel__title">Panel</header>
262
+ <div className="gc-panel__content">
263
+ <article className="gc-panel">
264
+ <header className="gc-panel__title">Panel title</header>
265
+ <div className="gc-panel__content">
266
+ <p>Panel content paragraph 1</p>
267
+ <p>Panel content paragraph 2</p>
268
+ </div>
269
+ </article>
270
+ </div>
271
+ </article>
272
+ <article className="gc-panel gc-panel--separator">
273
+ <header className="gc-panel__title">Buttons</header>
274
+ <div className="gc-panel__content">
275
+ <p>
276
+ <Button>Button</Button>{" "}
277
+ <Button className="gc-btn--danger">Button + danger</Button>{" "}
278
+ <Button className="gc-btn--primary">Button + primary</Button>{" "}
279
+ <Button className="gc-btn--secondary">Button + secondary</Button>{" "}
280
+ <Button className="gc-btn--tertiary">Button + tertiary</Button>
281
+ </p>
282
+ <p>
283
+ <Button className="gc-btn--small">Button + small</Button>{" "}
284
+ <Button className="gc-btn--small gc-btn--danger">
285
+ Button + small + danger
286
+ </Button>{" "}
287
+ <Button className="gc-btn--small gc-btn--primary">
288
+ Button + small + primary
289
+ </Button>{" "}
290
+ <Button className="gc-btn--small gc-btn--secondary">
291
+ Button + small + secondary
292
+ </Button>{" "}
293
+ <Button className="gc-btn--small gc-btn--tertiary">
294
+ Button + small + tertiary
295
+ </Button>
296
+ </p>
297
+ <p>
298
+ <Button className="gc-btn--full">Button + full</Button>
299
+ </p>
300
+ <p>
301
+ <Button className="gc-btn--full gc-btn--danger">
302
+ Button + full + danger
303
+ </Button>
304
+ </p>
305
+ <p>
306
+ <Button className="gc-btn--full gc-btn--primary">
307
+ Button + full + primary
308
+ </Button>
309
+ </p>
310
+ <p>
311
+ <Button className="gc-btn--full gc-btn--secondary">
312
+ Button + full + secondary
313
+ </Button>
314
+ </p>
315
+ <p>
316
+ <Button className="gc-btn--full gc-btn--tertiary">
317
+ Button + full + tertiary
318
+ </Button>
319
+ </p>
320
+ </div>
321
+ </article>
322
+ <article className="gc-panel gc-panel--separator">
323
+ <header className="gc-panel__title">Switches</header>
324
+ <div className="gc-panel__content">
325
+ <p>
326
+ <Switch /> <Switch type="success" isSwitched />{" "}
327
+ <Switch type="info" isSwitched />{" "}
328
+ <Switch type="danger" isSwitched />
329
+ </p>
330
+ </div>
331
+ </article>
332
+ <article className="gc-panel gc-panel--separator">
333
+ <header className="gc-panel__title">Images</header>
334
+ <div className="gc-panel__content">
335
+ <Image
336
+ className="gm-spacing-rl"
337
+ src="no-image.jpg"
338
+ height={200}
339
+ width={400}
340
+ />
341
+ <Image
342
+ src="./can-t-look-over-1312680-639x469.jpg"
343
+ height={200}
344
+ width={400}
345
+ />
346
+ </div>
347
+ </article>
348
+ <article className="gc-panel gc-panel--separator">
349
+ <header className="gc-panel__title">Tooltips</header>
350
+ <div className="gc-panel__content">
351
+ <p>
352
+ <Tooltip type="danger">Tooltip danger message</Tooltip>
353
+ </p>
354
+ </div>
355
+ </article>
356
+ <article className="gc-panel gc-panel--separator">
357
+ <header className="gc-panel__title">Textarea</header>
358
+ <div className="gc-panel__content">
359
+ <textarea className="gc-textarea" />
360
+ </div>
361
+ </article>
362
+ <article className="gc-panel gc-panel--separator">
363
+ <header className="gc-panel__title">Input</header>
364
+ <div className="gc-panel__content">
365
+ <p>
366
+ <div className="gc-input">
367
+ <label htmlFor="input-1" className="gc-input__label">
368
+ Input
377
369
  </label>
378
- </p>
379
- </div>
380
- </article>
381
- <article className="gc-panel gc-panel--separator">
382
- <header className="gc-panel__title">Images</header>
383
- <div className="gc-panel__content">
384
- <Image
385
- className="gm-spacing-rl"
386
- src="no-image.jpg"
387
- height={200}
388
- width={400}
389
- />
390
- <Image
391
- src="./can-t-look-over-1312680-639x469.jpg"
392
- height={200}
393
- width={400}
394
- />
395
- </div>
396
- </article>
397
- <article className="gc-panel gc-panel--separator">
398
- <header className="gc-panel__title">Tooltips</header>
399
- <div className="gc-panel__content">
400
- <p>
401
- <Tooltip type="danger">Tooltip danger message</Tooltip>
402
- </p>
403
- </div>
404
- </article>
405
- <article className="gc-panel gc-panel--separator">
406
- <header className="gc-panel__title">Textarea</header>
407
- <div className="gc-panel__content">
408
- <textarea className="gc-textarea" />
409
- </div>
410
- </article>
411
- <article className="gc-panel gc-panel--separator">
412
- <header className="gc-panel__title">Input</header>
413
- <div className="gc-panel__content">
414
- <p>
415
- <div className="gc-input">
416
- <label htmlFor="input-1" className="gc-input__label">
417
- Input
418
- </label>
419
- <input id="input-1" className="gc-input__field" />
420
- </div>{" "}
421
- <div className="gc-input">
422
- <label htmlFor="input-2" className="gc-input__label">
423
- Inline
424
- </label>
425
- <input id="input-2" className="gc-input__field" />
426
- </div>
427
- </p>
428
- <p>
429
- <div className="gc-input gc-input--full">
430
- <label htmlFor="input-3" className="gc-input__label">
431
- Full Input
432
- </label>
433
- <input id="input-3" className="gc-input__field" />
370
+ <input id="input-1" className="gc-input__field" />
371
+ </div>{" "}
372
+ <div className="gc-input">
373
+ <label htmlFor="input-2" className="gc-input__label">
374
+ Inline
375
+ </label>
376
+ <input id="input-2" className="gc-input__field" />
377
+ </div>
378
+ </p>
379
+ <p>
380
+ <div className="gc-input gc-input--full">
381
+ <label htmlFor="input-3" className="gc-input__label">
382
+ Full Input
383
+ </label>
384
+ <input id="input-3" className="gc-input__field" />
385
+ </div>
386
+ </p>
387
+ <p>
388
+ <div className="gc-input gc-input--full">
389
+ <label htmlFor="input-4" className="gc-input__label">
390
+ Disabled Input
391
+ </label>
392
+ <input
393
+ id="input-4"
394
+ className="gc-input__field"
395
+ disabled
396
+ value="Disabled input"
397
+ />
398
+ </div>
399
+ </p>
400
+ <p>
401
+ <Input label="Success input" type="text" validation="success" />
402
+ </p>
403
+ <p>
404
+ <Validation type="danger" message="Validation error message">
405
+ <Input
406
+ label="Validated input with tooltip"
407
+ type="text"
408
+ validation="danger"
409
+ />
410
+ </Validation>
411
+ </p>
412
+ </div>
413
+ </article>
414
+ <article className="gc-panel gc-panel--separator">
415
+ <header className="gc-panel__title">LED</header>
416
+ <div className="gc-panel__content">
417
+ <p>
418
+ <div className="gc-led gc-led--red" />{" "}
419
+ <div className="gc-led gc-led--red gc-led--blink" />
420
+ </p>
421
+ <p>
422
+ <div className="gc-led gc-led--green" />{" "}
423
+ <div className="gc-led gc-led--green gc-led--blink" />
424
+ </p>
425
+ <p>
426
+ <div className="gc-led gc-led--blue" />{" "}
427
+ <div className="gc-led gc-led--blue gc-led--blink" />
428
+ </p>
429
+ </div>
430
+ </article>
431
+ <article className="gc-panel gc-panel--separator">
432
+ <header className="gc-panel__title">Card</header>
433
+ <div className="gc-panel__content">
434
+ <div className="gc-flex gm-spacing-bl">
435
+ <div className="gc-flex__item gc-card gc-panel">
436
+ <div className="gc-panel__title">Card</div>
437
+ <div className="gc-panel__content">
438
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
439
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
440
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris
441
+ nisi ut aliquip ex ea commodo consequat.
434
442
  </div>
435
- </p>
436
- <p>
437
- <div className="gc-input gc-input--full">
438
- <label htmlFor="input-4" className="gc-input__label">
439
- Disabled Input
440
- </label>
441
- <input
442
- id="input-4"
443
- className="gc-input__field"
444
- disabled
445
- value="Disabled input"
446
- />
443
+ <div className="gc-panel__footer">
444
+ <button className="gc-btn">Button</button>
447
445
  </div>
448
- </p>
449
- <p>
450
- <Input label="Success input" type="text" validation="success" />
451
- </p>
452
- <p>
453
- <Validation type="danger" message="Validation error message">
454
- <Input
455
- label="Validated input with tooltip"
456
- type="text"
457
- validation="danger"
458
- />
459
- </Validation>
460
- </p>
461
- </div>
462
- </article>
463
- <article className="gc-panel gc-panel--separator">
464
- <header className="gc-panel__title">LED</header>
465
- <div className="gc-panel__content">
466
- <p>
467
- <div className="gc-led gc-led--red" />{" "}
468
- <div className="gc-led gc-led--red gc-led--blink" />
469
- </p>
470
- <p>
471
- <div className="gc-led gc-led--green" />{" "}
472
- <div className="gc-led gc-led--green gc-led--blink" />
473
- </p>
474
- <p>
475
- <div className="gc-led gc-led--blue" />{" "}
476
- <div className="gc-led gc-led--blue gc-led--blink" />
477
- </p>
446
+ </div>
478
447
  </div>
479
- </article>
480
- <article className="gc-panel gc-panel--separator">
481
- <header className="gc-panel__title">Card</header>
482
- <div className="gc-panel__content">
483
- <div className="gc-flex gm-spacing-bl">
484
- <div className="gc-flex__item gc-card gc-panel">
485
- <div className="gc-panel__title">Card</div>
486
- <div className="gc-panel__content">
487
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
488
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
489
- Ut enim ad minim veniam, quis nostrud exercitation ullamco
490
- laboris nisi ut aliquip ex ea commodo consequat.
491
- </div>
492
- <div className="gc-panel__footer">
493
- <button className="gc-btn">Button</button>
494
- </div>
448
+ <div className="gc-flex">
449
+ <div className="gc-flex__item gc-card gc-card--default gc-panel gm-spacing-rl">
450
+ <div className="gc-panel__title">Card + default</div>
451
+ <div className="gc-panel__content">
452
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
453
+ eiusmod tempor incididunt ut labore et dolore magna aliqua.
454
+ </div>
455
+ <div className="gc-panel__footer">
456
+ <button className="gc-btn gc-btn--primary">
457
+ Button + primary
458
+ </button>
495
459
  </div>
496
460
  </div>
497
- <div className="gc-flex">
498
- <div className="gc-flex__item gc-card gc-card--default gc-panel gm-spacing-rl">
499
- <div className="gc-panel__title">Card + default</div>
500
- <div className="gc-panel__content">
501
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
502
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
503
- </div>
504
- <div className="gc-panel__footer">
505
- <button className="gc-btn gc-btn--primary">
506
- Button + primary
507
- </button>
508
- </div>
461
+ <div className="gc-flex__item gc-card gc-card--gradient gc-panel">
462
+ <div className="gc-panel__title">Card + gradient</div>
463
+ <div className="gc-panel__content">
464
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
465
+ eiusmod tempor incididunt ut labore et dolore magna aliqua.
509
466
  </div>
510
- <div className="gc-flex__item gc-card gc-card--gradient gc-panel">
511
- <div className="gc-panel__title">Card + gradient</div>
512
- <div className="gc-panel__content">
513
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
514
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
515
- </div>
516
- <div className="gc-separator" />
517
- <div className="gc-panel__footer gc-panel__footer--separated">
518
- <button className="gc-btn gc-btn--primary">
519
- Button + primary
520
- </button>
521
- </div>
467
+ <div className="gc-separator" />
468
+ <div className="gc-panel__footer gc-panel__footer--separated">
469
+ <button className="gc-btn gc-btn--primary">
470
+ Button + primary
471
+ </button>
522
472
  </div>
523
473
  </div>
524
474
  </div>
525
- </article>
526
- <article className="gc-panel gc-panel--separator">
527
- <header className="gc-panel__title">Alerts</header>
528
- <div className="gc-panel__content">
529
- <p>
530
- <div className="gc-alert">Alert</div>
531
- </p>
532
- <p>
533
- <div className="gc-alert gc-alert--success">Alert + success</div>
534
- </p>
535
- <p>
536
- <div className="gc-alert gc-alert--info">Alert + info</div>
537
- </p>
475
+ </div>
476
+ </article>
477
+ <article className="gc-panel gc-panel--separator">
478
+ <header className="gc-panel__title">Alerts</header>
479
+ <div className="gc-panel__content">
480
+ <p>
481
+ <div className="gc-alert">Alert</div>
482
+ </p>
483
+ <p>
484
+ <div className="gc-alert gc-alert--success">Alert + success</div>
485
+ </p>
486
+ <p>
487
+ <div className="gc-alert gc-alert--info">Alert + info</div>
488
+ </p>
489
+ <p>
490
+ <div className="gc-alert gc-alert--danger">Alert + danger</div>
491
+ </p>
492
+ </div>
493
+ </article>
494
+ <article className="gc-panel gc-panel--separator">
495
+ <header className="gc-panel__title">Loader</header>
496
+ <div className="gc-panel__content">
497
+ <Loader />
498
+ </div>
499
+ </article>
500
+ <article className="gc-panel gc-panel--separator">
501
+ <header className="gc-panel__title">Scroller</header>
502
+ <div className="gc-panel__content">
503
+ <Scroller onScrollChange={_.noop} min={10} max={100} />
504
+ </div>
505
+ </article>
506
+ <article className="gc-panel gc-panel--separator">
507
+ <header className="gc-panel__title">Joystick</header>
508
+ <div className="gc-panel__content">
509
+ <Joystick onPositionChange={_.noop} isEnabled />
510
+ </div>
511
+ </article>
512
+ <article className="gc-panel gc-panel--separator">
513
+ <header className="gc-panel__title">Accordion</header>
514
+ <div className="gc-panel__content">
515
+ <Accordion title="Accordion title">
538
516
  <p>
539
- <div className="gc-alert gc-alert--danger">Alert + danger</div>
517
+ Some content <span>here</span>
540
518
  </p>
541
- </div>
542
- </article>
543
- <article className="gc-panel gc-panel--separator">
544
- <header className="gc-panel__title">Loader</header>
545
- <div className="gc-panel__content">
546
- <Loader />
547
- </div>
548
- </article>
549
- <article className="gc-panel gc-panel--separator">
550
- <header className="gc-panel__title">Scroller</header>
551
- <div className="gc-panel__content">
552
- <Scroller onScrollChange={_.noop} min={10} max={100} />
553
- </div>
554
- </article>
555
- <article className="gc-panel gc-panel--separator">
556
- <header className="gc-panel__title">Joystick</header>
557
- <div className="gc-panel__content">
558
- <Joystick onPositionChange={_.noop} isEnabled />
559
- </div>
560
- </article>
561
- <article className="gc-panel gc-panel--separator">
562
- <header className="gc-panel__title">Accordion</header>
563
- <div className="gc-panel__content">
564
- <Accordion title="Accordion title">
565
- <p>
566
- Some content <span>here</span>
567
- </p>
568
- <p>Multiple elements are allowed</p>
569
- </Accordion>
570
- </div>
571
- </article>
572
- <article className="gc-panel gc-panel--separator">
573
- <header className="gc-panel__title">Dialog</header>
574
- <div className="gc-panel__content">
575
- <Button
576
- className="gc-btn--primary"
577
- onClick={() => {
578
- this.handleShowDialog();
579
- }}
580
- >
581
- Open dialog
582
- </Button>
519
+ <p>Multiple elements are allowed</p>
520
+ </Accordion>
521
+ </div>
522
+ </article>
523
+ <article className="gc-panel gc-panel--separator">
524
+ <header className="gc-panel__title">Dialog</header>
525
+ <div className="gc-panel__content">
526
+ <Flex>
527
+ <FlexItem className="gm-spacing-rl">
528
+ <Button
529
+ className="gc-btn--primary"
530
+ onClick={() => setIsDialogVisible(true)}
531
+ >
532
+ Open dialog
533
+ </Button>
534
+ </FlexItem>
535
+ <FlexItem>
536
+ <Button
537
+ className="gc-btn--primary"
538
+ onClick={() => setIsDialogWithOverlayVisible(true)}
539
+ >
540
+ Open dialog with overlay
541
+ </Button>
542
+ </FlexItem>
543
+ </Flex>
583
544
 
584
- {isDialogVisible && (
585
- <Dialog>
586
- <article className="gc-panel">
587
- <header className="gc-panel__title">Dialog</header>
588
- <div className="gc-panel__content">
589
- <p>
590
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
591
- sed do eiusmod tempor incididunt ut labore et dolore magna
592
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation
593
- ullamco laboris nisi ut aliquip ex ea commodo consequat.
594
- Duis aute irure dolor in reprehenderit in voluptate velit
595
- esse cillum dolore eu fugiat nulla pariatur.
596
- </p>
597
- </div>
598
- <div className="gc-panel__footer">
599
- <Button
600
- onClick={() => {
601
- this.handleHideDialog();
602
- }}
603
- className="gc-btn--primary"
604
- >
605
- Close
606
- </Button>
607
- </div>
608
- </article>
609
- </Dialog>
610
- )}
611
- </div>
612
- </article>
613
- <article className="gc-panel gc-panel--separator">
614
- <header className="gc-panel__title">Dropdown Menu</header>
615
- <div className="gc-panel__content">
616
- <p>
617
- <Dropdown
618
- initValue={{ label: "Select value", value: "selectValue" }}
619
- label="Dropdown label"
620
- items={[
621
- { label: "Red", value: "red" },
622
- { label: "Blue", value: "blue" },
623
- ]}
624
- onChange={_.noop}
625
- />
626
- </p>
627
- <p>
628
- <Dropdown
629
- initValue={{ label: "Select value", value: "selectValue" }}
630
- label="Disabled dropdown"
631
- items={[
632
- { label: "Red", value: "red" },
633
- { label: "Blue", value: "blue" },
634
- ]}
635
- onChange={_.noop}
636
- isDisabled
637
- />
638
- </p>
639
- </div>
640
- </article>
641
- </>
642
- );
643
- }
545
+ {isDialogVisible && (
546
+ <Dialog>
547
+ <Panel>
548
+ <PanelTitle>Dialog</PanelTitle>
549
+ <PanelContent>
550
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
551
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua.
552
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco
553
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute
554
+ irure dolor in reprehenderit in voluptate velit esse cillum
555
+ dolore eu fugiat nulla pariatur.
556
+ </PanelContent>
557
+ <PanelFooter>
558
+ <Button
559
+ onClick={() => setIsDialogVisible(false)}
560
+ className="gc-btn--primary"
561
+ >
562
+ Close
563
+ </Button>
564
+ </PanelFooter>
565
+ </Panel>
566
+ </Dialog>
567
+ )}
568
+
569
+ {isDialogWithOverlayVisible && (
570
+ <Dialog isOverlay>
571
+ <Panel>
572
+ <PanelTitle>Dialog</PanelTitle>
573
+ <PanelContent>
574
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
575
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua.
576
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco
577
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute
578
+ irure dolor in reprehenderit in voluptate velit esse cillum
579
+ dolore eu fugiat nulla pariatur.
580
+ </PanelContent>
581
+ <PanelFooter>
582
+ <Button
583
+ onClick={() => setIsDialogWithOverlayVisible(false)}
584
+ className="gc-btn--primary"
585
+ >
586
+ Close
587
+ </Button>
588
+ </PanelFooter>
589
+ </Panel>
590
+ </Dialog>
591
+ )}
592
+ </div>
593
+ </article>
594
+ <article className="gc-panel gc-panel--separator">
595
+ <header className="gc-panel__title">Dropdown Menu</header>
596
+ <div className="gc-panel__content">
597
+ <p>
598
+ <Dropdown
599
+ initValue={{ label: "Select value", value: "selectValue" }}
600
+ label="Dropdown label"
601
+ items={[
602
+ { label: "Red", value: "red" },
603
+ { label: "Blue", value: "blue" },
604
+ ]}
605
+ onChange={_.noop}
606
+ />
607
+ </p>
608
+ <p>
609
+ <Dropdown
610
+ initValue={{ label: "Select value", value: "selectValue" }}
611
+ label="Disabled dropdown"
612
+ items={[
613
+ { label: "Red", value: "red" },
614
+ { label: "Blue", value: "blue" },
615
+ ]}
616
+ onChange={_.noop}
617
+ isDisabled
618
+ />
619
+ </p>
620
+ </div>
621
+ </article>
622
+ </>
623
+ );
644
624
  }
645
625
 
646
626
  if (appContainer) {