@platformatic/ui-components 0.2.1 → 0.2.3
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.
- package/dist/assets/index-DGu0wALr.css +1 -0
- package/dist/assets/index-DcjcxgBQ.js +206 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/Button.jsx +18 -4
- package/src/components/Button.module.css +6 -0
- package/src/components/ModalDirectional.jsx +17 -3
- package/src/components/ModalDirectional.module.css +1 -1
- package/src/components/PlatformaticIcon.jsx +21 -5
- package/src/components/constants.js +3 -2
- package/src/components/icons/CreateAppIcon.jsx +108 -0
- package/src/components/icons/Icons.module.css +11 -1
- package/src/components/icons/ImportAppIcon.jsx +103 -0
- package/src/components/icons/RecentAppsIcon.jsx +125 -0
- package/src/components/icons/index.js +6 -2
- package/src/stories/Button.stories.jsx +285 -3
- package/src/stories/PlatformaticIcon.stories.jsx +2 -5
- package/dist/assets/index-BEfzfEAe.js +0 -206
- package/dist/assets/index-Bk6UpmQr.css +0 -1
- package/src/components/icons/ImportApplicationIcon.jsx +0 -67
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import Button from '../components/Button'
|
|
4
|
-
import { ALTERNATE_RICH_BLACK, ANTI_FLASH_WHITE, BOX_SHADOW, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, ERROR_RED, FIRE_ENGINE_RED, HOVER_EFFECTS_BUTTONS, LARGE, RICH_BLACK, SIZES, WHITE } from '../components/constants'
|
|
4
|
+
import { ALTERNATE_RICH_BLACK, ANTI_FLASH_WHITE, BOX_SHADOW, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, ERROR_RED, FIRE_ENGINE_RED, HOVER_EFFECTS_BUTTONS, LARGE, RICH_BLACK, SIZES, WHITE, ACTIVE_AND_INACTIVE_STATUS, MEDIUM } from '../components/constants'
|
|
5
5
|
|
|
6
6
|
const divStyle = {
|
|
7
7
|
width: '100%',
|
|
@@ -125,7 +125,7 @@ AllFilled.args = {
|
|
|
125
125
|
const DesignSystem = (args) => {
|
|
126
126
|
return (
|
|
127
127
|
<div className='grid grid-cols-5 gap-2 items-center'>
|
|
128
|
-
<span className='text-sm text-white col-span-1'>Disabled</span>
|
|
128
|
+
<span className='text-sm text-white col-span-1'>Disabled with Background Color</span>
|
|
129
129
|
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
130
130
|
<Button
|
|
131
131
|
color={RICH_BLACK}
|
|
@@ -133,6 +133,8 @@ const DesignSystem = (args) => {
|
|
|
133
133
|
onClick={() => alert('clicked Disabled WHITE')}
|
|
134
134
|
bordered={false}
|
|
135
135
|
disabled
|
|
136
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
137
|
+
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
136
138
|
{...args}
|
|
137
139
|
/>
|
|
138
140
|
<Button
|
|
@@ -141,6 +143,8 @@ const DesignSystem = (args) => {
|
|
|
141
143
|
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
142
144
|
bordered={false}
|
|
143
145
|
disabled
|
|
146
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
147
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
144
148
|
{...args}
|
|
145
149
|
/>
|
|
146
150
|
</div>
|
|
@@ -151,6 +155,8 @@ const DesignSystem = (args) => {
|
|
|
151
155
|
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
152
156
|
bordered={false}
|
|
153
157
|
disabled
|
|
158
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
159
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
154
160
|
{...args}
|
|
155
161
|
/>
|
|
156
162
|
<Button
|
|
@@ -159,10 +165,106 @@ const DesignSystem = (args) => {
|
|
|
159
165
|
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
160
166
|
bordered={false}
|
|
161
167
|
disabled
|
|
168
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
169
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
162
170
|
{...args}
|
|
163
171
|
/>
|
|
164
172
|
</div>
|
|
165
|
-
<span className='text-sm text-white col-span-1'>Default</span>
|
|
173
|
+
<span className='text-sm text-white col-span-1'>Default with Background Color</span>
|
|
174
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
175
|
+
<Button
|
|
176
|
+
color={RICH_BLACK}
|
|
177
|
+
backgroundColor={WHITE}
|
|
178
|
+
onClick={() => alert('clicked Default WHITE')}
|
|
179
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
180
|
+
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
181
|
+
bordered={false}
|
|
182
|
+
{...args}
|
|
183
|
+
/>
|
|
184
|
+
<Button
|
|
185
|
+
color={WHITE}
|
|
186
|
+
backgroundColor={ERROR_RED}
|
|
187
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
188
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
189
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
190
|
+
bordered={false}
|
|
191
|
+
{...args}
|
|
192
|
+
/>
|
|
193
|
+
</div>
|
|
194
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
195
|
+
<Button
|
|
196
|
+
color={WHITE}
|
|
197
|
+
backgroundColor={RICH_BLACK}
|
|
198
|
+
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
199
|
+
bordered={false}
|
|
200
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
201
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
202
|
+
{...args}
|
|
203
|
+
/>
|
|
204
|
+
<Button
|
|
205
|
+
color={WHITE}
|
|
206
|
+
backgroundColor={ERROR_RED}
|
|
207
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
208
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
209
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
210
|
+
bordered={false}
|
|
211
|
+
{...args}
|
|
212
|
+
/>
|
|
213
|
+
</div>
|
|
214
|
+
<span className='text-sm text-white col-span-1'>Disabled with Background Color 2</span>
|
|
215
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
216
|
+
<Button
|
|
217
|
+
color={RICH_BLACK}
|
|
218
|
+
backgroundColor={WHITE}
|
|
219
|
+
onClick={() => alert('clicked Disabled WHITE')}
|
|
220
|
+
bordered={false}
|
|
221
|
+
disabled
|
|
222
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
223
|
+
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
224
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
225
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
226
|
+
{...args}
|
|
227
|
+
/>
|
|
228
|
+
<Button
|
|
229
|
+
color={WHITE}
|
|
230
|
+
backgroundColor={ERROR_RED}
|
|
231
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
232
|
+
bordered={false}
|
|
233
|
+
disabled
|
|
234
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
235
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
236
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
237
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
238
|
+
{...args}
|
|
239
|
+
/>
|
|
240
|
+
</div>
|
|
241
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
242
|
+
<Button
|
|
243
|
+
color={WHITE}
|
|
244
|
+
backgroundColor={RICH_BLACK}
|
|
245
|
+
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
246
|
+
bordered={false}
|
|
247
|
+
disabled
|
|
248
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
249
|
+
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
250
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
251
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
252
|
+
{...args}
|
|
253
|
+
/>
|
|
254
|
+
<Button
|
|
255
|
+
color={WHITE}
|
|
256
|
+
backgroundColor={ERROR_RED}
|
|
257
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
258
|
+
bordered={false}
|
|
259
|
+
disabled
|
|
260
|
+
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
261
|
+
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
262
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
263
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
264
|
+
{...args}
|
|
265
|
+
/>
|
|
266
|
+
</div>
|
|
267
|
+
<span className='text-sm text-white col-span-1'>Default with Background Color 2</span>
|
|
166
268
|
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
167
269
|
<Button
|
|
168
270
|
color={RICH_BLACK}
|
|
@@ -171,6 +273,8 @@ const DesignSystem = (args) => {
|
|
|
171
273
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
172
274
|
hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
|
|
173
275
|
bordered={false}
|
|
276
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
277
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
174
278
|
{...args}
|
|
175
279
|
/>
|
|
176
280
|
<Button
|
|
@@ -180,6 +284,8 @@ const DesignSystem = (args) => {
|
|
|
180
284
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
181
285
|
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
182
286
|
bordered={false}
|
|
287
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
288
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
183
289
|
{...args}
|
|
184
290
|
/>
|
|
185
291
|
</div>
|
|
@@ -191,6 +297,8 @@ const DesignSystem = (args) => {
|
|
|
191
297
|
bordered={false}
|
|
192
298
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
193
299
|
hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
|
|
300
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
301
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
194
302
|
{...args}
|
|
195
303
|
/>
|
|
196
304
|
<Button
|
|
@@ -200,6 +308,180 @@ const DesignSystem = (args) => {
|
|
|
200
308
|
hoverEffect={CHANGE_BACKGROUND_COLOR}
|
|
201
309
|
hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
|
|
202
310
|
bordered={false}
|
|
311
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
312
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
313
|
+
{...args}
|
|
314
|
+
/>
|
|
315
|
+
</div>
|
|
316
|
+
<span className='text-sm text-white col-span-1'>Disabled </span>
|
|
317
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
318
|
+
<Button
|
|
319
|
+
color={WHITE}
|
|
320
|
+
backgroundColor={RICH_BLACK}
|
|
321
|
+
onClick={() => alert('clicked Disabled WHITE')}
|
|
322
|
+
bordered={false}
|
|
323
|
+
disabled
|
|
324
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
325
|
+
{...args}
|
|
326
|
+
/>
|
|
327
|
+
<Button
|
|
328
|
+
color={ERROR_RED}
|
|
329
|
+
backgroundColor={RICH_BLACK}
|
|
330
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
331
|
+
bordered={false}
|
|
332
|
+
disabled
|
|
333
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
334
|
+
{...args}
|
|
335
|
+
/>
|
|
336
|
+
</div>
|
|
337
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
338
|
+
<Button
|
|
339
|
+
color={RICH_BLACK}
|
|
340
|
+
backgroundColor={WHITE}
|
|
341
|
+
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
342
|
+
bordered={false}
|
|
343
|
+
disabled
|
|
344
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
345
|
+
{...args}
|
|
346
|
+
/>
|
|
347
|
+
<Button
|
|
348
|
+
color={ERROR_RED}
|
|
349
|
+
backgroundColor={WHITE}
|
|
350
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
351
|
+
bordered={false}
|
|
352
|
+
disabled
|
|
353
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
354
|
+
{...args}
|
|
355
|
+
/>
|
|
356
|
+
</div>
|
|
357
|
+
<span className='text-sm text-white col-span-1'>Default</span>
|
|
358
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
359
|
+
<Button
|
|
360
|
+
color={WHITE}
|
|
361
|
+
backgroundColor={RICH_BLACK}
|
|
362
|
+
onClick={() => alert('clicked Default WHITE')}
|
|
363
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
364
|
+
bordered={false}
|
|
365
|
+
{...args}
|
|
366
|
+
/>
|
|
367
|
+
<Button
|
|
368
|
+
color={ERROR_RED}
|
|
369
|
+
backgroundColor={RICH_BLACK}
|
|
370
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
371
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
372
|
+
bordered={false}
|
|
373
|
+
{...args}
|
|
374
|
+
/>
|
|
375
|
+
</div>
|
|
376
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
377
|
+
<Button
|
|
378
|
+
color={RICH_BLACK}
|
|
379
|
+
backgroundColor={WHITE}
|
|
380
|
+
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
381
|
+
bordered={false}
|
|
382
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
383
|
+
{...args}
|
|
384
|
+
/>
|
|
385
|
+
<Button
|
|
386
|
+
color={ERROR_RED}
|
|
387
|
+
backgroundColor={WHITE}
|
|
388
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
389
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
390
|
+
bordered={false}
|
|
391
|
+
{...args}
|
|
392
|
+
/>
|
|
393
|
+
</div>
|
|
394
|
+
<span className='text-sm text-white col-span-1'>Disabled </span>
|
|
395
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
396
|
+
<Button
|
|
397
|
+
color={WHITE}
|
|
398
|
+
backgroundColor={RICH_BLACK}
|
|
399
|
+
onClick={() => alert('clicked Disabled WHITE')}
|
|
400
|
+
bordered={false}
|
|
401
|
+
disabled
|
|
402
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
403
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
404
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
405
|
+
{...args}
|
|
406
|
+
/>
|
|
407
|
+
<Button
|
|
408
|
+
color={ERROR_RED}
|
|
409
|
+
backgroundColor={RICH_BLACK}
|
|
410
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
411
|
+
bordered={false}
|
|
412
|
+
disabled
|
|
413
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
414
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
415
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
416
|
+
{...args}
|
|
417
|
+
/>
|
|
418
|
+
</div>
|
|
419
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
420
|
+
<Button
|
|
421
|
+
color={RICH_BLACK}
|
|
422
|
+
backgroundColor={WHITE}
|
|
423
|
+
onClick={() => alert('clicked Disabled RICH_BLACK')}
|
|
424
|
+
bordered={false}
|
|
425
|
+
disabled
|
|
426
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
427
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
428
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
429
|
+
{...args}
|
|
430
|
+
/>
|
|
431
|
+
<Button
|
|
432
|
+
color={ERROR_RED}
|
|
433
|
+
backgroundColor={WHITE}
|
|
434
|
+
onClick={() => alert('clicked Disabled ERROR_RED')}
|
|
435
|
+
bordered={false}
|
|
436
|
+
disabled
|
|
437
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
438
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
439
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
440
|
+
{...args}
|
|
441
|
+
/>
|
|
442
|
+
</div>
|
|
443
|
+
<span className='text-sm text-white col-span-1'>Default</span>
|
|
444
|
+
<div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
|
|
445
|
+
<Button
|
|
446
|
+
color={WHITE}
|
|
447
|
+
backgroundColor={RICH_BLACK}
|
|
448
|
+
onClick={() => alert('clicked Default WHITE')}
|
|
449
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
450
|
+
bordered={false}
|
|
451
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
452
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
|
|
453
|
+
{...args}
|
|
454
|
+
/>
|
|
455
|
+
<Button
|
|
456
|
+
color={ERROR_RED}
|
|
457
|
+
backgroundColor={RICH_BLACK}
|
|
458
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
459
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
460
|
+
bordered={false}
|
|
461
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
462
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
463
|
+
{...args}
|
|
464
|
+
/>
|
|
465
|
+
</div>
|
|
466
|
+
<div className='grid grid-cols-2 gap-x-2 bg-white p-2 col-span-2'>
|
|
467
|
+
<Button
|
|
468
|
+
color={RICH_BLACK}
|
|
469
|
+
backgroundColor={WHITE}
|
|
470
|
+
onClick={() => alert('clicked Default RICH_BLACK')}
|
|
471
|
+
bordered={false}
|
|
472
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
473
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
474
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
|
|
475
|
+
{...args}
|
|
476
|
+
/>
|
|
477
|
+
<Button
|
|
478
|
+
color={ERROR_RED}
|
|
479
|
+
backgroundColor={WHITE}
|
|
480
|
+
onClick={() => alert('clicked Default ERROR_RED')}
|
|
481
|
+
hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
|
|
482
|
+
bordered={false}
|
|
483
|
+
platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
484
|
+
platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
|
|
203
485
|
{...args}
|
|
204
486
|
/>
|
|
205
487
|
</div>
|
|
@@ -40,9 +40,6 @@ export default {
|
|
|
40
40
|
options: COLORS_ICON,
|
|
41
41
|
control: { type: 'radio' }
|
|
42
42
|
},
|
|
43
|
-
onClick: {
|
|
44
|
-
type: 'function'
|
|
45
|
-
},
|
|
46
43
|
size: {
|
|
47
44
|
options: SIZES,
|
|
48
45
|
control: { type: 'radio' }
|
|
@@ -98,6 +95,6 @@ export const PlatformaticIconAll = AllIconsTemplate.bind({})
|
|
|
98
95
|
PlatformaticIconAll.args = {
|
|
99
96
|
color: WHITE,
|
|
100
97
|
classes: '',
|
|
101
|
-
|
|
102
|
-
|
|
98
|
+
tip: '',
|
|
99
|
+
onClick: () => alert('clicked')
|
|
103
100
|
}
|