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