allaw-ui 3.5.5 → 3.5.7
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 })),
|
|
@@ -42,54 +42,25 @@
|
|
|
42
42
|
.qualificationZero {
|
|
43
43
|
cursor: initial;
|
|
44
44
|
background-color: var(--pure-white, #ffffff);
|
|
45
|
-
color: var(venom-grey-dark, #d1dce8);
|
|
46
|
-
border: 2px solid #
|
|
45
|
+
color: var(--venom-grey-dark, #d1dce8);
|
|
46
|
+
border: 2px solid var(--venom-grey-dark, #d1dce8);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.qualificationActive {
|
|
50
50
|
background-color: transparent;
|
|
51
51
|
color: var(--noir);
|
|
52
52
|
position: relative;
|
|
53
|
-
border: 2px solid var(--noir);
|
|
53
|
+
border: 2px solid var(--noir, #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: var(--noir, #000000);
|
|
59
|
+
color: var(--bleu-allaw, #25beeb);
|
|
89
60
|
}
|
|
90
61
|
|
|
91
62
|
.colorDarkGrey {
|
|
92
|
-
color: #
|
|
63
|
+
color: var(--venom-grey-dark, #d1dce8);
|
|
93
64
|
}
|
|
94
65
|
|
|
95
66
|
.colorNoir {
|
package/dist/styles/colors.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "allaw-ui",
|
|
3
|
-
"version": "3.5.
|
|
3
|
+
"version": "3.5.7",
|
|
4
4
|
"description": "Composants UI pour l'application Allaw",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"access": "public"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
+
"allaw-ui": "^3.5.5",
|
|
43
44
|
"date-fns": "^4.1.0",
|
|
44
45
|
"next": "14.2.5",
|
|
45
46
|
"react": "^17.0.0 || ^18.0.0",
|