@platformatic/ui-components 0.8.4 → 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/Icons.module.css +40 -0
- package/tailwind.config.cjs +3 -1
- package/dist/assets/index-UjO_DhXJ.css +0 -1
- package/dist/assets/index-rfLsboCf.js +0 -40
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
|
|
@@ -127,6 +127,40 @@
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
|
|
130
|
+
.giants-orange > circle,
|
|
131
|
+
.giants-orange > ellipse,
|
|
132
|
+
.giants-orange > rect,
|
|
133
|
+
.giants-orange > line,
|
|
134
|
+
.giants-orange > path {
|
|
135
|
+
@apply stroke-giants-orange;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.important-giants-orange > circle,
|
|
139
|
+
.important-giants-orange > ellipse,
|
|
140
|
+
.important-giants-orange > rect,
|
|
141
|
+
.important-giants-orange > line,
|
|
142
|
+
.important-giants-orange > path {
|
|
143
|
+
@apply !stroke-giants-orange;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
.electric-purple > circle,
|
|
148
|
+
.electric-purple > ellipse,
|
|
149
|
+
.electric-purple > rect,
|
|
150
|
+
.electric-purple > line,
|
|
151
|
+
.electric-purple > path {
|
|
152
|
+
@apply stroke-electric-purple;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.important-electric-purple > circle,
|
|
156
|
+
.important-electric-purple > ellipse,
|
|
157
|
+
.important-electric-purple > rect,
|
|
158
|
+
.important-electric-purple > line,
|
|
159
|
+
.important-electric-purple > path {
|
|
160
|
+
@apply !stroke-electric-purple;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
|
|
130
164
|
.filled-rich-black {
|
|
131
165
|
@apply fill-rich-black;
|
|
132
166
|
}
|
|
@@ -151,6 +185,12 @@
|
|
|
151
185
|
.filled-fluorescent-cyan {
|
|
152
186
|
@apply fill-fluorescent-cyan;
|
|
153
187
|
}
|
|
188
|
+
.filled-giants-orange {
|
|
189
|
+
@apply fill-giants-orange;
|
|
190
|
+
}
|
|
191
|
+
.filled-electric-purple {
|
|
192
|
+
@apply fill-electric-purple;
|
|
193
|
+
}
|
|
154
194
|
|
|
155
195
|
|
|
156
196
|
.fill-circle-green > circle {
|
package/tailwind.config.cjs
CHANGED
|
@@ -52,7 +52,9 @@ module.exports = {
|
|
|
52
52
|
'anti-flash-white': '#EDEDED',
|
|
53
53
|
'fire-engine-red': '#D71919',
|
|
54
54
|
'alternate-rich-black': '#12171D',
|
|
55
|
-
'fluorescent-cyan': '#44FFEC'
|
|
55
|
+
'fluorescent-cyan': '#44FFEC',
|
|
56
|
+
'giants-orange': '#FA6221'
|
|
57
|
+
|
|
56
58
|
},
|
|
57
59
|
fontFamily: {
|
|
58
60
|
sans: ['Montserrat'],
|