@platformatic/ui-components 0.8.3 → 0.8.5
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-Bj5xxPry.css +1 -0
- package/dist/assets/index-C8-hJodH.js +40 -0
- package/dist/index.html +2 -2
- package/dist/main.css +110 -110
- package/package.json +1 -1
- package/src/components/Button.module.css +12 -0
- package/src/components/ButtonOnlyIcon.module.css +12 -0
- package/src/components/Common.module.css +73 -1
- package/src/components/DropDown.jsx +26 -4
- package/src/components/constants.js +5 -3
- package/src/components/icons/ArrowRightIcon.jsx +15 -1
- package/src/components/icons/EnvVariableszIcon.jsx +112 -0
- package/src/components/icons/Icons.module.css +40 -0
- package/src/components/icons/index.js +2 -0
- package/src/stories/ButtonFullRounded.stories.jsx +6 -1
- package/tailwind.config.cjs +3 -1
- package/dist/assets/index-DFooB5Gh.js +0 -40
- package/dist/assets/index-UjO_DhXJ.css +0 -1
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-C8-hJodH.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-Bj5xxPry.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
|
@@ -1,5 +1,113 @@
|
|
|
1
|
+
*, ::before, ::after {
|
|
2
|
+
--tw-border-spacing-x: 0;
|
|
3
|
+
--tw-border-spacing-y: 0;
|
|
4
|
+
--tw-translate-x: 0;
|
|
5
|
+
--tw-translate-y: 0;
|
|
6
|
+
--tw-rotate: 0;
|
|
7
|
+
--tw-skew-x: 0;
|
|
8
|
+
--tw-skew-y: 0;
|
|
9
|
+
--tw-scale-x: 1;
|
|
10
|
+
--tw-scale-y: 1;
|
|
11
|
+
--tw-pan-x: ;
|
|
12
|
+
--tw-pan-y: ;
|
|
13
|
+
--tw-pinch-zoom: ;
|
|
14
|
+
--tw-scroll-snap-strictness: proximity;
|
|
15
|
+
--tw-gradient-from-position: ;
|
|
16
|
+
--tw-gradient-via-position: ;
|
|
17
|
+
--tw-gradient-to-position: ;
|
|
18
|
+
--tw-ordinal: ;
|
|
19
|
+
--tw-slashed-zero: ;
|
|
20
|
+
--tw-numeric-figure: ;
|
|
21
|
+
--tw-numeric-spacing: ;
|
|
22
|
+
--tw-numeric-fraction: ;
|
|
23
|
+
--tw-ring-inset: ;
|
|
24
|
+
--tw-ring-offset-width: 0px;
|
|
25
|
+
--tw-ring-offset-color: #fff;
|
|
26
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
27
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
28
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
29
|
+
--tw-shadow: 0 0 #0000;
|
|
30
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
31
|
+
--tw-blur: ;
|
|
32
|
+
--tw-brightness: ;
|
|
33
|
+
--tw-contrast: ;
|
|
34
|
+
--tw-grayscale: ;
|
|
35
|
+
--tw-hue-rotate: ;
|
|
36
|
+
--tw-invert: ;
|
|
37
|
+
--tw-saturate: ;
|
|
38
|
+
--tw-sepia: ;
|
|
39
|
+
--tw-drop-shadow: ;
|
|
40
|
+
--tw-backdrop-blur: ;
|
|
41
|
+
--tw-backdrop-brightness: ;
|
|
42
|
+
--tw-backdrop-contrast: ;
|
|
43
|
+
--tw-backdrop-grayscale: ;
|
|
44
|
+
--tw-backdrop-hue-rotate: ;
|
|
45
|
+
--tw-backdrop-invert: ;
|
|
46
|
+
--tw-backdrop-opacity: ;
|
|
47
|
+
--tw-backdrop-saturate: ;
|
|
48
|
+
--tw-backdrop-sepia: ;
|
|
49
|
+
--tw-contain-size: ;
|
|
50
|
+
--tw-contain-layout: ;
|
|
51
|
+
--tw-contain-paint: ;
|
|
52
|
+
--tw-contain-style: ;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
::backdrop {
|
|
56
|
+
--tw-border-spacing-x: 0;
|
|
57
|
+
--tw-border-spacing-y: 0;
|
|
58
|
+
--tw-translate-x: 0;
|
|
59
|
+
--tw-translate-y: 0;
|
|
60
|
+
--tw-rotate: 0;
|
|
61
|
+
--tw-skew-x: 0;
|
|
62
|
+
--tw-skew-y: 0;
|
|
63
|
+
--tw-scale-x: 1;
|
|
64
|
+
--tw-scale-y: 1;
|
|
65
|
+
--tw-pan-x: ;
|
|
66
|
+
--tw-pan-y: ;
|
|
67
|
+
--tw-pinch-zoom: ;
|
|
68
|
+
--tw-scroll-snap-strictness: proximity;
|
|
69
|
+
--tw-gradient-from-position: ;
|
|
70
|
+
--tw-gradient-via-position: ;
|
|
71
|
+
--tw-gradient-to-position: ;
|
|
72
|
+
--tw-ordinal: ;
|
|
73
|
+
--tw-slashed-zero: ;
|
|
74
|
+
--tw-numeric-figure: ;
|
|
75
|
+
--tw-numeric-spacing: ;
|
|
76
|
+
--tw-numeric-fraction: ;
|
|
77
|
+
--tw-ring-inset: ;
|
|
78
|
+
--tw-ring-offset-width: 0px;
|
|
79
|
+
--tw-ring-offset-color: #fff;
|
|
80
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
81
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
82
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
83
|
+
--tw-shadow: 0 0 #0000;
|
|
84
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
85
|
+
--tw-blur: ;
|
|
86
|
+
--tw-brightness: ;
|
|
87
|
+
--tw-contrast: ;
|
|
88
|
+
--tw-grayscale: ;
|
|
89
|
+
--tw-hue-rotate: ;
|
|
90
|
+
--tw-invert: ;
|
|
91
|
+
--tw-saturate: ;
|
|
92
|
+
--tw-sepia: ;
|
|
93
|
+
--tw-drop-shadow: ;
|
|
94
|
+
--tw-backdrop-blur: ;
|
|
95
|
+
--tw-backdrop-brightness: ;
|
|
96
|
+
--tw-backdrop-contrast: ;
|
|
97
|
+
--tw-backdrop-grayscale: ;
|
|
98
|
+
--tw-backdrop-hue-rotate: ;
|
|
99
|
+
--tw-backdrop-invert: ;
|
|
100
|
+
--tw-backdrop-opacity: ;
|
|
101
|
+
--tw-backdrop-saturate: ;
|
|
102
|
+
--tw-backdrop-sepia: ;
|
|
103
|
+
--tw-contain-size: ;
|
|
104
|
+
--tw-contain-layout: ;
|
|
105
|
+
--tw-contain-paint: ;
|
|
106
|
+
--tw-contain-style: ;
|
|
107
|
+
}
|
|
108
|
+
|
|
1
109
|
/*
|
|
2
|
-
! tailwindcss v3.4.
|
|
110
|
+
! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
|
|
3
111
|
*/
|
|
4
112
|
|
|
5
113
|
/*
|
|
@@ -442,118 +550,10 @@ video {
|
|
|
442
550
|
|
|
443
551
|
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
444
552
|
|
|
445
|
-
[hidden] {
|
|
553
|
+
[hidden]:where(:not([hidden="until-found"])) {
|
|
446
554
|
display: none;
|
|
447
555
|
}
|
|
448
556
|
|
|
449
|
-
*, ::before, ::after {
|
|
450
|
-
--tw-border-spacing-x: 0;
|
|
451
|
-
--tw-border-spacing-y: 0;
|
|
452
|
-
--tw-translate-x: 0;
|
|
453
|
-
--tw-translate-y: 0;
|
|
454
|
-
--tw-rotate: 0;
|
|
455
|
-
--tw-skew-x: 0;
|
|
456
|
-
--tw-skew-y: 0;
|
|
457
|
-
--tw-scale-x: 1;
|
|
458
|
-
--tw-scale-y: 1;
|
|
459
|
-
--tw-pan-x: ;
|
|
460
|
-
--tw-pan-y: ;
|
|
461
|
-
--tw-pinch-zoom: ;
|
|
462
|
-
--tw-scroll-snap-strictness: proximity;
|
|
463
|
-
--tw-gradient-from-position: ;
|
|
464
|
-
--tw-gradient-via-position: ;
|
|
465
|
-
--tw-gradient-to-position: ;
|
|
466
|
-
--tw-ordinal: ;
|
|
467
|
-
--tw-slashed-zero: ;
|
|
468
|
-
--tw-numeric-figure: ;
|
|
469
|
-
--tw-numeric-spacing: ;
|
|
470
|
-
--tw-numeric-fraction: ;
|
|
471
|
-
--tw-ring-inset: ;
|
|
472
|
-
--tw-ring-offset-width: 0px;
|
|
473
|
-
--tw-ring-offset-color: #fff;
|
|
474
|
-
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
475
|
-
--tw-ring-offset-shadow: 0 0 #0000;
|
|
476
|
-
--tw-ring-shadow: 0 0 #0000;
|
|
477
|
-
--tw-shadow: 0 0 #0000;
|
|
478
|
-
--tw-shadow-colored: 0 0 #0000;
|
|
479
|
-
--tw-blur: ;
|
|
480
|
-
--tw-brightness: ;
|
|
481
|
-
--tw-contrast: ;
|
|
482
|
-
--tw-grayscale: ;
|
|
483
|
-
--tw-hue-rotate: ;
|
|
484
|
-
--tw-invert: ;
|
|
485
|
-
--tw-saturate: ;
|
|
486
|
-
--tw-sepia: ;
|
|
487
|
-
--tw-drop-shadow: ;
|
|
488
|
-
--tw-backdrop-blur: ;
|
|
489
|
-
--tw-backdrop-brightness: ;
|
|
490
|
-
--tw-backdrop-contrast: ;
|
|
491
|
-
--tw-backdrop-grayscale: ;
|
|
492
|
-
--tw-backdrop-hue-rotate: ;
|
|
493
|
-
--tw-backdrop-invert: ;
|
|
494
|
-
--tw-backdrop-opacity: ;
|
|
495
|
-
--tw-backdrop-saturate: ;
|
|
496
|
-
--tw-backdrop-sepia: ;
|
|
497
|
-
--tw-contain-size: ;
|
|
498
|
-
--tw-contain-layout: ;
|
|
499
|
-
--tw-contain-paint: ;
|
|
500
|
-
--tw-contain-style: ;
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
::backdrop {
|
|
504
|
-
--tw-border-spacing-x: 0;
|
|
505
|
-
--tw-border-spacing-y: 0;
|
|
506
|
-
--tw-translate-x: 0;
|
|
507
|
-
--tw-translate-y: 0;
|
|
508
|
-
--tw-rotate: 0;
|
|
509
|
-
--tw-skew-x: 0;
|
|
510
|
-
--tw-skew-y: 0;
|
|
511
|
-
--tw-scale-x: 1;
|
|
512
|
-
--tw-scale-y: 1;
|
|
513
|
-
--tw-pan-x: ;
|
|
514
|
-
--tw-pan-y: ;
|
|
515
|
-
--tw-pinch-zoom: ;
|
|
516
|
-
--tw-scroll-snap-strictness: proximity;
|
|
517
|
-
--tw-gradient-from-position: ;
|
|
518
|
-
--tw-gradient-via-position: ;
|
|
519
|
-
--tw-gradient-to-position: ;
|
|
520
|
-
--tw-ordinal: ;
|
|
521
|
-
--tw-slashed-zero: ;
|
|
522
|
-
--tw-numeric-figure: ;
|
|
523
|
-
--tw-numeric-spacing: ;
|
|
524
|
-
--tw-numeric-fraction: ;
|
|
525
|
-
--tw-ring-inset: ;
|
|
526
|
-
--tw-ring-offset-width: 0px;
|
|
527
|
-
--tw-ring-offset-color: #fff;
|
|
528
|
-
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
529
|
-
--tw-ring-offset-shadow: 0 0 #0000;
|
|
530
|
-
--tw-ring-shadow: 0 0 #0000;
|
|
531
|
-
--tw-shadow: 0 0 #0000;
|
|
532
|
-
--tw-shadow-colored: 0 0 #0000;
|
|
533
|
-
--tw-blur: ;
|
|
534
|
-
--tw-brightness: ;
|
|
535
|
-
--tw-contrast: ;
|
|
536
|
-
--tw-grayscale: ;
|
|
537
|
-
--tw-hue-rotate: ;
|
|
538
|
-
--tw-invert: ;
|
|
539
|
-
--tw-saturate: ;
|
|
540
|
-
--tw-sepia: ;
|
|
541
|
-
--tw-drop-shadow: ;
|
|
542
|
-
--tw-backdrop-blur: ;
|
|
543
|
-
--tw-backdrop-brightness: ;
|
|
544
|
-
--tw-backdrop-contrast: ;
|
|
545
|
-
--tw-backdrop-grayscale: ;
|
|
546
|
-
--tw-backdrop-hue-rotate: ;
|
|
547
|
-
--tw-backdrop-invert: ;
|
|
548
|
-
--tw-backdrop-opacity: ;
|
|
549
|
-
--tw-backdrop-saturate: ;
|
|
550
|
-
--tw-backdrop-sepia: ;
|
|
551
|
-
--tw-contain-size: ;
|
|
552
|
-
--tw-contain-layout: ;
|
|
553
|
-
--tw-contain-paint: ;
|
|
554
|
-
--tw-contain-style: ;
|
|
555
|
-
}
|
|
556
|
-
|
|
557
557
|
.container {
|
|
558
558
|
width: 100%;
|
|
559
559
|
margin-right: auto;
|
package/package.json
CHANGED
|
@@ -72,6 +72,12 @@
|
|
|
72
72
|
.color-fluorescent-cyan {
|
|
73
73
|
@apply text-fluorescent-cyan border-fluorescent-cyan;
|
|
74
74
|
}
|
|
75
|
+
.color-electric-purple {
|
|
76
|
+
@apply text-electric-purple border-electric-purple;
|
|
77
|
+
}
|
|
78
|
+
.color-giants-orange {
|
|
79
|
+
@apply text-giants-orange border-giants-orange;
|
|
80
|
+
}
|
|
75
81
|
.no-border {
|
|
76
82
|
@apply border-0;
|
|
77
83
|
}
|
|
@@ -114,6 +120,12 @@
|
|
|
114
120
|
.hover-box-shadow-fluorescent-cyan {
|
|
115
121
|
@apply hover:shadow-fluorescent-cyan;
|
|
116
122
|
}
|
|
123
|
+
.hover-box-shadow-electric-purple {
|
|
124
|
+
@apply hover:shadow-electric-purple;
|
|
125
|
+
}
|
|
126
|
+
.hover-box-shadow-giants-orange {
|
|
127
|
+
@apply hover:shadow-giants-orange;
|
|
128
|
+
}
|
|
117
129
|
|
|
118
130
|
.underline-effect {
|
|
119
131
|
@apply hover:underline;
|
|
@@ -72,6 +72,12 @@
|
|
|
72
72
|
.color-fluorescent-cyan{
|
|
73
73
|
@apply text-fluorescent-cyan border-fluorescent-cyan;
|
|
74
74
|
}
|
|
75
|
+
.color-electric-purple {
|
|
76
|
+
@apply text-electric-purple border-electric-purple;
|
|
77
|
+
}
|
|
78
|
+
.color-giants-orange {
|
|
79
|
+
@apply text-giants-orange border-giants-orange;
|
|
80
|
+
}
|
|
75
81
|
|
|
76
82
|
.no-border {
|
|
77
83
|
@apply border-0;
|
|
@@ -115,6 +121,12 @@
|
|
|
115
121
|
.hover-box-shadow-fluorescent-cyan {
|
|
116
122
|
@apply hover:shadow-fluorescent-cyan;
|
|
117
123
|
}
|
|
124
|
+
.hover-box-shadow-electric-purple {
|
|
125
|
+
@apply hover:shadow-electric-purple;
|
|
126
|
+
}
|
|
127
|
+
.hover-box-shadow-giants-orange {
|
|
128
|
+
@apply hover:shadow-giants-orange;
|
|
129
|
+
}
|
|
118
130
|
|
|
119
131
|
.underline-effect {
|
|
120
132
|
@apply hover:underline;
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
.bordered--fluorescent-cyan {
|
|
32
32
|
@apply border-fluorescent-cyan;
|
|
33
33
|
}
|
|
34
|
+
.bordered--electric-purple {
|
|
35
|
+
@apply border-electric-purple;
|
|
36
|
+
}
|
|
37
|
+
.bordered--giants-orange {
|
|
38
|
+
@apply border-giants-orange;
|
|
39
|
+
}
|
|
34
40
|
.bordered--transparent {
|
|
35
41
|
@apply border-none;
|
|
36
42
|
}
|
|
@@ -64,6 +70,12 @@
|
|
|
64
70
|
.bordered--fluorescent-cyan-100 {
|
|
65
71
|
@apply border-fluorescent-cyan/100;
|
|
66
72
|
}
|
|
73
|
+
.bordered--electric-purple-100 {
|
|
74
|
+
@apply border-electric-purple/100;
|
|
75
|
+
}
|
|
76
|
+
.bordered--giants-orange-100 {
|
|
77
|
+
@apply border-giants-orange/100;
|
|
78
|
+
}
|
|
67
79
|
.bordered--main-green-70 {
|
|
68
80
|
@apply border-main-green/70;
|
|
69
81
|
}
|
|
@@ -94,6 +106,12 @@
|
|
|
94
106
|
.bordered--fluorescent-cyan-70 {
|
|
95
107
|
@apply border-fluorescent-cyan/70;
|
|
96
108
|
}
|
|
109
|
+
.bordered--electric-purple-70 {
|
|
110
|
+
@apply border-electric-purple/70;
|
|
111
|
+
}
|
|
112
|
+
.bordered--giants-orange-70 {
|
|
113
|
+
@apply border-giants-orange/70;
|
|
114
|
+
}
|
|
97
115
|
.bordered--main-green-30 {
|
|
98
116
|
@apply border-main-green/30;
|
|
99
117
|
}
|
|
@@ -121,6 +139,12 @@
|
|
|
121
139
|
.bordered--fluorescent-cyan-30 {
|
|
122
140
|
@apply border-fluorescent-cyan/30;
|
|
123
141
|
}
|
|
142
|
+
.bordered--electric-purple-30 {
|
|
143
|
+
@apply border-electric-purple/30;
|
|
144
|
+
}
|
|
145
|
+
.bordered--giants-orange-30 {
|
|
146
|
+
@apply border-giants-orange/30;
|
|
147
|
+
}
|
|
124
148
|
.bordered--tertiary-blue-30 {
|
|
125
149
|
@apply border-tertiary-blue/30;
|
|
126
150
|
}
|
|
@@ -151,6 +175,12 @@
|
|
|
151
175
|
.bordered--fluorescent-cyan-20 {
|
|
152
176
|
@apply border-fluorescent-cyan/20;
|
|
153
177
|
}
|
|
178
|
+
.bordered--electric-purple-20 {
|
|
179
|
+
@apply border-electric-purple/20;
|
|
180
|
+
}
|
|
181
|
+
.bordered--giants-orange-20 {
|
|
182
|
+
@apply border-giants-orange/20;
|
|
183
|
+
}
|
|
154
184
|
.bordered--tertiary-blue-20 {
|
|
155
185
|
@apply border-tertiary-blue/20;
|
|
156
186
|
}
|
|
@@ -169,6 +199,12 @@
|
|
|
169
199
|
.bordered--fluorescent-cyan-15 {
|
|
170
200
|
@apply border-fluorescent-cyan/15;
|
|
171
201
|
}
|
|
202
|
+
.bordered--electric-purple-15 {
|
|
203
|
+
@apply border-electric-purple/15;
|
|
204
|
+
}
|
|
205
|
+
.bordered--giants-orange-15 {
|
|
206
|
+
@apply border-giants-orange/15;
|
|
207
|
+
}
|
|
172
208
|
.bordered--tertiary-blue-15 {
|
|
173
209
|
@apply border-tertiary-blue/15;
|
|
174
210
|
}
|
|
@@ -187,6 +223,12 @@
|
|
|
187
223
|
.bordered--fluorescent-cyan-10 {
|
|
188
224
|
@apply border-fluorescent-cyan/10;
|
|
189
225
|
}
|
|
226
|
+
.bordered--electric-purple-10 {
|
|
227
|
+
@apply border-electric-purple/10;
|
|
228
|
+
}
|
|
229
|
+
.bordered--giants-orange-10 {
|
|
230
|
+
@apply border-giants-orange/10;
|
|
231
|
+
}
|
|
190
232
|
.bordered--tertiary-blue-10 {
|
|
191
233
|
@apply border-tertiary-blue/10;
|
|
192
234
|
}
|
|
@@ -248,6 +290,12 @@
|
|
|
248
290
|
.text--fluorescent-cyan {
|
|
249
291
|
@apply text-fluorescent-cyan;
|
|
250
292
|
}
|
|
293
|
+
.text--giants-orange {
|
|
294
|
+
@apply text-giants-orange;
|
|
295
|
+
}
|
|
296
|
+
.text--electric-purple {
|
|
297
|
+
@apply text-electric-purple;
|
|
298
|
+
}
|
|
251
299
|
.text--rich-black-70 {
|
|
252
300
|
@apply text-rich-black/70;
|
|
253
301
|
}
|
|
@@ -257,7 +305,12 @@
|
|
|
257
305
|
.text--fluorescent-cyan-70 {
|
|
258
306
|
@apply text-fluorescent-cyan/70;
|
|
259
307
|
}
|
|
260
|
-
|
|
308
|
+
.text--giants-orange-70 {
|
|
309
|
+
@apply text-giants-orange/70;
|
|
310
|
+
}
|
|
311
|
+
.text--electric-purple-70 {
|
|
312
|
+
@apply text-electric-purple/70;
|
|
313
|
+
}
|
|
261
314
|
.text--base {
|
|
262
315
|
@apply text-base
|
|
263
316
|
}
|
|
@@ -301,9 +354,16 @@
|
|
|
301
354
|
.background-color-fluorescent-cyan {
|
|
302
355
|
@apply bg-fluorescent-cyan ;
|
|
303
356
|
}
|
|
357
|
+
.background-color-giants-orange {
|
|
358
|
+
@apply bg-giants-orange ;
|
|
359
|
+
}
|
|
360
|
+
.background-color-electric-purple {
|
|
361
|
+
@apply bg-electric-purple ;
|
|
362
|
+
}
|
|
304
363
|
.background-color-black-russian {
|
|
305
364
|
@apply bg-black-russian ;
|
|
306
365
|
}
|
|
366
|
+
|
|
307
367
|
.background-color-night {
|
|
308
368
|
@apply bg-night ;
|
|
309
369
|
}
|
|
@@ -394,6 +454,12 @@
|
|
|
394
454
|
.hover-background-color-opaque-fluorescent-cyan{
|
|
395
455
|
@apply hover:bg-fluorescent-cyan hover:bg-opacity-15;
|
|
396
456
|
}
|
|
457
|
+
.hover-background-color-opaque-giants-orange{
|
|
458
|
+
@apply hover:bg-giants-orange hover:bg-opacity-15;
|
|
459
|
+
}
|
|
460
|
+
.hover-background-color-opaque-electric-purple{
|
|
461
|
+
@apply hover:bg-electric-purple hover:bg-opacity-15;
|
|
462
|
+
}
|
|
397
463
|
.hover-background-color-opaque-night{
|
|
398
464
|
@apply hover:bg-night hover:bg-opacity-15;
|
|
399
465
|
}
|
|
@@ -424,6 +490,12 @@
|
|
|
424
490
|
.selected-background-color-fluorescent-cyan {
|
|
425
491
|
@apply !bg-fluorescent-cyan bg-opacity-15;
|
|
426
492
|
}
|
|
493
|
+
.selected-background-color-electric-purple {
|
|
494
|
+
@apply !bg-electric-purple bg-opacity-15;
|
|
495
|
+
}
|
|
496
|
+
.selected-background-color-giants-orange {
|
|
497
|
+
@apply !bg-giants-orange bg-opacity-15;
|
|
498
|
+
}
|
|
427
499
|
.selected-background-color-night {
|
|
428
500
|
@apply !bg-night bg-opacity-15;
|
|
429
501
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use strict'
|
|
2
|
-
import React, { useState } from 'react'
|
|
2
|
+
import React, { useEffect, useRef, useState } from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import styles from './DropDown.module.css'
|
|
5
5
|
import commonStyles from './Common.module.css'
|
|
@@ -16,11 +16,29 @@ function DropDown ({
|
|
|
16
16
|
headerColor = WHITE,
|
|
17
17
|
borderColor = WHITE,
|
|
18
18
|
lastButton = null,
|
|
19
|
-
menuCustomClassName = ''
|
|
19
|
+
menuCustomClassName = '',
|
|
20
|
+
handleClickOutside = false
|
|
20
21
|
}) {
|
|
21
22
|
const [open, setOpen] = useState(false)
|
|
23
|
+
const wrapperRef = useRef(null)
|
|
22
24
|
const borderClass = commonStyles[`bordered--${borderColor}-30`]
|
|
23
25
|
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (open && handleClickOutside) {
|
|
28
|
+
function innerHandleClickOutside (event) {
|
|
29
|
+
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
30
|
+
setOpen(false)
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
// Bind the event listener
|
|
34
|
+
document.addEventListener('mousedown', innerHandleClickOutside)
|
|
35
|
+
return () => {
|
|
36
|
+
// Unbind the event listener on clean up
|
|
37
|
+
document.removeEventListener('mousedown', innerHandleClickOutside)
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}, [handleClickOutside, open])
|
|
41
|
+
|
|
24
42
|
let classNameMenu = `${styles.menu} `
|
|
25
43
|
classNameMenu += commonStyles[`background-color-${backgroundColor}`]
|
|
26
44
|
classNameMenu += ' ' + borderClass
|
|
@@ -49,7 +67,7 @@ function DropDown ({
|
|
|
49
67
|
}
|
|
50
68
|
|
|
51
69
|
return (
|
|
52
|
-
<div className={`${styles.dropDown} ${styles[align]}`}>
|
|
70
|
+
<div className={`${styles.dropDown} ${styles[align]}`} ref={wrapperRef}>
|
|
53
71
|
<span className={headerClassNamme} onClick={handleOpen}>
|
|
54
72
|
{pictureUrl && <img src={pictureUrl} height={32} width={32} className={styles.picture} />}
|
|
55
73
|
{header && (<span className={headerClassName || styles.headerClassNameDefault}>{header}</span>)}
|
|
@@ -116,7 +134,11 @@ DropDown.propTypes = {
|
|
|
116
134
|
/**
|
|
117
135
|
* menuCustomClassName
|
|
118
136
|
*/
|
|
119
|
-
menuCustomClassName: PropTypes.string
|
|
137
|
+
menuCustomClassName: PropTypes.string,
|
|
138
|
+
/**
|
|
139
|
+
* handleClickOutside
|
|
140
|
+
*/
|
|
141
|
+
handleClickOutside: PropTypes.bool
|
|
120
142
|
}
|
|
121
143
|
|
|
122
144
|
export default DropDown
|
|
@@ -16,6 +16,8 @@ export const ANTI_FLASH_WHITE = 'anti-flash-white'
|
|
|
16
16
|
export const FIRE_ENGINE_RED = 'fire-engine-red'
|
|
17
17
|
export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
|
|
18
18
|
export const FLUORESCENT_CYAN = 'fluorescent-cyan'
|
|
19
|
+
export const GIANTS_ORANGE = 'giants-orange'
|
|
20
|
+
export const ELECTRIC_PURPLE = 'electric-purple'
|
|
19
21
|
|
|
20
22
|
export const NONE = 'none'
|
|
21
23
|
export const MINI = 'mini'
|
|
@@ -38,9 +40,9 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERL
|
|
|
38
40
|
export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
|
|
39
41
|
export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
|
|
40
42
|
|
|
41
|
-
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN]
|
|
42
|
-
export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN]
|
|
43
|
-
export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN]
|
|
43
|
+
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
|
|
44
|
+
export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
|
|
45
|
+
export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
|
|
44
46
|
|
|
45
47
|
export const MODAL_POPUP = 'popup'
|
|
46
48
|
export const MODAL_POPUP_V2 = 'popup-v2'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Icons.module.css'
|
|
4
|
-
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE, TINY } from '../constants'
|
|
5
5
|
|
|
6
6
|
const ArrowRightIcon = ({
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
@@ -19,6 +19,20 @@ const ArrowRightIcon = ({
|
|
|
19
19
|
let icon = <></>
|
|
20
20
|
|
|
21
21
|
switch (size) {
|
|
22
|
+
case TINY:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={8}
|
|
26
|
+
height={8}
|
|
27
|
+
viewBox='0 0 8 8'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<path d='M2.5 7L5.5 4L2.5 1' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
</svg>
|
|
34
|
+
)
|
|
35
|
+
break
|
|
22
36
|
case SMALL:
|
|
23
37
|
icon = (
|
|
24
38
|
<svg
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const EnvVariableszIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
|
|
22
|
+
switch (size) {
|
|
23
|
+
case SMALL:
|
|
24
|
+
icon = (
|
|
25
|
+
<svg
|
|
26
|
+
width={16}
|
|
27
|
+
height={16}
|
|
28
|
+
viewBox='0 0 16 16'
|
|
29
|
+
fill='none'
|
|
30
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
31
|
+
className={className}
|
|
32
|
+
>
|
|
33
|
+
<path d='M7 8H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
<path d='M7 11H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M2 5V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V5M2 5V4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V5M2 5H14' stroke='none' strokeLinejoin='round' />
|
|
36
|
+
<circle cx='3.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
37
|
+
<circle cx='5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
38
|
+
<circle cx='6.5' cy='3.5' r='0.5' fill='none' className={filledClassName} />
|
|
39
|
+
<path d='M4.65051 7L4.9899 7.58203H5.00606L5.34949 7H5.97576L5.35758 8L6 9H5.35758L5.00606 8.40625H4.9899L4.63838 9H4L4.63434 8L4.0202 7H4.65051Z' fill='none' className={filledClassName} />
|
|
40
|
+
<path d='M4.65051 10L4.9899 10.582H5.00606L5.34949 10H5.97576L5.35758 11L6 12H5.35758L5.00606 11.4062H4.9899L4.63838 12H4L4.63434 11L4.0202 10H4.65051Z' fill='none' className={filledClassName} />
|
|
41
|
+
</svg>
|
|
42
|
+
)
|
|
43
|
+
break
|
|
44
|
+
case MEDIUM:
|
|
45
|
+
icon = (
|
|
46
|
+
<svg
|
|
47
|
+
width={24}
|
|
48
|
+
height={24}
|
|
49
|
+
viewBox='0 0 24 24'
|
|
50
|
+
fill='none'
|
|
51
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
52
|
+
className={className}
|
|
53
|
+
>
|
|
54
|
+
<path d='M10.5 12H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<path d='M10.5 16.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M3 7.5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V7.5M3 7.5V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V7.5M3 7.5H21' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
57
|
+
<circle cx='5.25' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
58
|
+
<circle cx='7.5' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
59
|
+
<circle cx='9.75' cy='5.25' r='0.75' fill='none' className={filledClassName} />
|
|
60
|
+
<path d='M6.97576 10.5L7.48485 11.373H7.50909L8.02424 10.5H8.96364L8.03636 12L9 13.5H8.03636L7.50909 12.6094H7.48485L6.95758 13.5H6L6.95152 12L6.0303 10.5H6.97576Z' fill='none' className={filledClassName} />
|
|
61
|
+
<path d='M6.97576 15L7.48485 15.873H7.50909L8.02424 15H8.96364L8.03636 16.5L9 18H8.03636L7.50909 17.1094H7.48485L6.95758 18H6L6.95152 16.5L6.0303 15H6.97576Z' fill='none' className={filledClassName} />
|
|
62
|
+
</svg>
|
|
63
|
+
)
|
|
64
|
+
break
|
|
65
|
+
case LARGE:
|
|
66
|
+
icon = (
|
|
67
|
+
<svg
|
|
68
|
+
width={40}
|
|
69
|
+
height={40}
|
|
70
|
+
viewBox='0 0 40 40'
|
|
71
|
+
fill='none'
|
|
72
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
73
|
+
className={className}
|
|
74
|
+
>
|
|
75
|
+
<path d='M17.5 20H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
<path d='M17.5 27.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
77
|
+
<path d='M5 12.5V31C5 33.2091 6.79086 35 9 35H31C33.2091 35 35 33.2091 35 31V12.5M5 12.5V9C5 6.79086 6.79086 5 9 5H31C33.2091 5 35 6.79086 35 9V12.5M5 12.5H35' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
78
|
+
<circle cx='8.75' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
79
|
+
<circle cx='12.5' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
80
|
+
<circle cx='16.25' cy='8.75' r='1.25' fill='none' className={filledClassName} />
|
|
81
|
+
<path d='M11.6263 17.5L12.4747 18.9551H12.5152L13.3737 17.5H14.9394L13.3939 20L15 22.5H13.3939L12.5152 21.0156H12.4747L11.596 22.5H10L11.5859 20L10.0505 17.5H11.6263Z' fill='none' className={filledClassName} />
|
|
82
|
+
<path d='M11.6263 25L12.4747 26.4551H12.5152L13.3737 25H14.9394L13.3939 27.5L15 30H13.3939L12.5152 28.5156H12.4747L11.596 30H10L11.5859 27.5L10.0505 25H11.6263Z' fill='none' className={filledClassName} />
|
|
83
|
+
</svg>
|
|
84
|
+
)
|
|
85
|
+
break
|
|
86
|
+
|
|
87
|
+
default:
|
|
88
|
+
break
|
|
89
|
+
}
|
|
90
|
+
return icon
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
EnvVariableszIcon.propTypes = {
|
|
94
|
+
/**
|
|
95
|
+
* color of text, icon and borders
|
|
96
|
+
*/
|
|
97
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
98
|
+
/**
|
|
99
|
+
* Size
|
|
100
|
+
*/
|
|
101
|
+
size: PropTypes.oneOf(SIZES),
|
|
102
|
+
/**
|
|
103
|
+
* disabled
|
|
104
|
+
*/
|
|
105
|
+
disabled: PropTypes.bool,
|
|
106
|
+
/**
|
|
107
|
+
* inactive
|
|
108
|
+
*/
|
|
109
|
+
inactive: PropTypes.bool
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export default EnvVariableszIcon
|