allaw-ui 3.5.6 → 3.5.8
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.
|
@@ -4,12 +4,14 @@ export interface InboxButtonProps {
|
|
|
4
4
|
count?: number;
|
|
5
5
|
/** Callback au clic */
|
|
6
6
|
onClick?: () => void;
|
|
7
|
-
/** Textes à afficher suivant la valeur de
|
|
7
|
+
/** Textes à afficher suivant la valeur de count */
|
|
8
8
|
labels: {
|
|
9
9
|
none: string;
|
|
10
10
|
one: string;
|
|
11
11
|
multiple: string;
|
|
12
12
|
};
|
|
13
|
+
/** Identifiant pour les tests Playwright */
|
|
14
|
+
dataCy?: string;
|
|
13
15
|
/**
|
|
14
16
|
* Thème de couleur automatique :
|
|
15
17
|
* - "notification" : bleu si 0, rouge sinon (et disabled si 0)
|
|
@@ -2,7 +2,7 @@ import clsx from "clsx";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import styles from "./InboxButton.module.css";
|
|
4
4
|
var InboxButton = function (_a) {
|
|
5
|
-
var _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, labels = _a.labels, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel;
|
|
5
|
+
var _b = _a.count, count = _b === void 0 ? 0 : _b, onClick = _a.onClick, labels = _a.labels, dataCy = _a.dataCy, _c = _a.scheme, scheme = _c === void 0 ? "notification" : _c, iconClassName = _a.iconClassName, iconAriaLabel = _a.iconAriaLabel;
|
|
6
6
|
var isZero = count === 0;
|
|
7
7
|
var isDisabled = scheme === "notification" && isZero;
|
|
8
8
|
var isQualificationZero = scheme === "qualification" && isZero;
|
|
@@ -38,7 +38,7 @@ var InboxButton = function (_a) {
|
|
|
38
38
|
}
|
|
39
39
|
return (React.createElement("button", { className: clsx(styles.inboxBtn, isDisabled && styles.disabled, isQualificationZero && styles.qualificationZero, !isDisabled && !isQualificationZero && styles["bg-".concat(bgKey)], scheme === "qualification" &&
|
|
40
40
|
!isQualificationZero &&
|
|
41
|
-
styles.qualificationActive), disabled: isDisabled, onClick: onClick, "data-
|
|
41
|
+
styles.qualificationActive), disabled: isDisabled, onClick: onClick, "data-cy": dataCy },
|
|
42
42
|
iconClassName && (React.createElement("i", { className: clsx(styles.icon, iconClassName, !isDisabled && !isQualificationZero && styles["color-".concat(colorKey)], isQualificationZero && styles.colorDarkGrey, scheme === "qualification" &&
|
|
43
43
|
!isQualificationZero &&
|
|
44
44
|
styles.colorNoir), "aria-label": iconAriaLabel })),
|
|
@@ -21,83 +21,54 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.qualificationActive:hover {
|
|
24
|
-
background-color:
|
|
25
|
-
color:
|
|
24
|
+
background-color: #000000;
|
|
25
|
+
color: #25beeb;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.qualificationActive:hover .icon {
|
|
29
|
-
color:
|
|
29
|
+
color: #25beeb;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.qualificationActive:hover .label {
|
|
33
|
-
color:
|
|
33
|
+
color: #25beeb;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.disabled {
|
|
37
37
|
cursor: initial;
|
|
38
|
-
background-color:
|
|
39
|
-
color:
|
|
38
|
+
background-color: #daebfb;
|
|
39
|
+
color: #1985e8;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.qualificationZero {
|
|
43
43
|
cursor: initial;
|
|
44
|
-
background-color:
|
|
45
|
-
color:
|
|
46
|
-
border: 2px solid #
|
|
44
|
+
background-color: #ffffff;
|
|
45
|
+
color: #d1dce8;
|
|
46
|
+
border: 2px solid #d1dce8;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.qualificationActive {
|
|
50
50
|
background-color: transparent;
|
|
51
|
-
color:
|
|
51
|
+
color: #000000;
|
|
52
52
|
position: relative;
|
|
53
|
-
border: 2px solid
|
|
53
|
+
border: 2px solid #000000;
|
|
54
54
|
overflow: hidden;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.qualificationActive
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
top: -2px;
|
|
61
|
-
left: -2px;
|
|
62
|
-
right: -2px;
|
|
63
|
-
bottom: -2px;
|
|
64
|
-
border-radius: 0.5rem;
|
|
65
|
-
background: var(--noir);
|
|
66
|
-
z-index: -1;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.qualificationActive::after {
|
|
70
|
-
content: "";
|
|
71
|
-
position: absolute;
|
|
72
|
-
top: -2px;
|
|
73
|
-
left: -2px;
|
|
74
|
-
right: -2px;
|
|
75
|
-
bottom: -2px;
|
|
76
|
-
border-radius: 0.5rem;
|
|
77
|
-
background: conic-gradient(
|
|
78
|
-
from 0deg,
|
|
79
|
-
transparent 0deg,
|
|
80
|
-
transparent 70deg,
|
|
81
|
-
rgba(230, 237, 245, 0.8) 85deg,
|
|
82
|
-
rgba(230, 237, 245, 1) 90deg,
|
|
83
|
-
rgba(230, 237, 245, 0.8) 95deg,
|
|
84
|
-
transparent 110deg,
|
|
85
|
-
transparent 360deg
|
|
86
|
-
);
|
|
87
|
-
animation: rotateReflection 4s linear infinite;
|
|
88
|
-
z-index: -1;
|
|
57
|
+
.qualificationActive:hover {
|
|
58
|
+
background-color: #000000;
|
|
59
|
+
color: #25beeb;
|
|
89
60
|
}
|
|
90
61
|
|
|
91
62
|
.colorDarkGrey {
|
|
92
|
-
color: #
|
|
63
|
+
color: #d1dce8;
|
|
93
64
|
}
|
|
94
65
|
|
|
95
66
|
.colorNoir {
|
|
96
|
-
color:
|
|
67
|
+
color: #000000;
|
|
97
68
|
}
|
|
98
69
|
|
|
99
70
|
.label {
|
|
100
|
-
font-family:
|
|
71
|
+
font-family: "Open Sans", sans-serif;
|
|
101
72
|
font-size: 16px;
|
|
102
73
|
font-style: normal;
|
|
103
74
|
font-weight: 600;
|
|
@@ -105,63 +76,63 @@
|
|
|
105
76
|
}
|
|
106
77
|
|
|
107
78
|
.labelDisabled {
|
|
108
|
-
color:
|
|
79
|
+
color: #1985e8;
|
|
109
80
|
}
|
|
110
81
|
|
|
111
82
|
.bg-mid-grey {
|
|
112
|
-
background-color:
|
|
83
|
+
background-color: #728ea7;
|
|
113
84
|
}
|
|
114
85
|
|
|
115
86
|
.bg-dark-grey {
|
|
116
|
-
background-color:
|
|
87
|
+
background-color: #456073;
|
|
117
88
|
}
|
|
118
89
|
|
|
119
90
|
.bg-noir {
|
|
120
|
-
background-color:
|
|
91
|
+
background-color: #000000;
|
|
121
92
|
}
|
|
122
93
|
|
|
123
94
|
.bg-pure-white {
|
|
124
|
-
background-color:
|
|
95
|
+
background-color: #ffffff;
|
|
125
96
|
}
|
|
126
97
|
|
|
127
98
|
.bg-light-red {
|
|
128
|
-
background-color:
|
|
99
|
+
background-color: #fdf2f2;
|
|
129
100
|
}
|
|
130
101
|
|
|
131
102
|
.bg-light-blue {
|
|
132
|
-
background-color:
|
|
103
|
+
background-color: #daebfb;
|
|
133
104
|
}
|
|
134
105
|
|
|
135
106
|
.bg-dark-green {
|
|
136
|
-
background-color:
|
|
107
|
+
background-color: #29a36a;
|
|
137
108
|
}
|
|
138
109
|
|
|
139
110
|
.color-mid-grey {
|
|
140
|
-
color:
|
|
111
|
+
color: #728ea7;
|
|
141
112
|
}
|
|
142
113
|
|
|
143
114
|
.color-dark-grey {
|
|
144
|
-
color:
|
|
115
|
+
color: #456073;
|
|
145
116
|
}
|
|
146
117
|
|
|
147
118
|
.color-noir {
|
|
148
|
-
color:
|
|
119
|
+
color: #000000;
|
|
149
120
|
}
|
|
150
121
|
|
|
151
122
|
.color-pure-white {
|
|
152
|
-
color:
|
|
123
|
+
color: #ffffff;
|
|
153
124
|
}
|
|
154
125
|
|
|
155
126
|
.color-red {
|
|
156
|
-
color:
|
|
127
|
+
color: #e15151;
|
|
157
128
|
}
|
|
158
129
|
|
|
159
130
|
.color-green {
|
|
160
|
-
color:
|
|
131
|
+
color: #29a36a;
|
|
161
132
|
}
|
|
162
133
|
|
|
163
134
|
.color-blue {
|
|
164
|
-
color:
|
|
135
|
+
color: #1985e8;
|
|
165
136
|
}
|
|
166
137
|
|
|
167
138
|
.icon {
|
package/dist/styles/colors.css
CHANGED