allaw-ui 1.0.25 → 1.0.26
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/components/atoms/buttons/SecondaryButton.css +66 -0
- package/dist/components/atoms/buttons/SecondaryButton.d.ts +1 -0
- package/dist/components/atoms/buttons/SecondaryButton.js +4 -4
- package/dist/components/atoms/buttons/TabNavigation.css +1 -1
- package/dist/components/atoms/datepickers/Datepicker.js +7 -5
- package/dist/components/atoms/datepickers/datepicker.css +13 -6
- package/package.json +1 -1
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
.secondary-button-enabled:hover {
|
|
26
26
|
color: #25beeb;
|
|
27
|
+
border: 0px;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.secondary-button-enabled:active {
|
|
@@ -122,3 +123,68 @@
|
|
|
122
123
|
.secondary-button-full-width {
|
|
123
124
|
width: 100%;
|
|
124
125
|
}
|
|
126
|
+
|
|
127
|
+
/* Styles pour les différentes couleurs */
|
|
128
|
+
.secondary-button-color-bleu-allaw {
|
|
129
|
+
border-color: var(--bleu-allaw);
|
|
130
|
+
color: var(--bleu-allaw);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.secondary-button-color-mid-grey {
|
|
134
|
+
border-color: var(--mid-grey);
|
|
135
|
+
color: var(--mid-grey);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.secondary-button-color-dark-grey {
|
|
139
|
+
border-color: var(--dark-grey);
|
|
140
|
+
color: var(--dark-grey);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.secondary-button-color-noir {
|
|
144
|
+
border-color: var(--noir);
|
|
145
|
+
color: var(--noir);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.secondary-button-color-pure-white {
|
|
149
|
+
border-color: var(--pure-white);
|
|
150
|
+
color: var(--pure-white);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.secondary-button-color-actions-error {
|
|
154
|
+
border-color: var(--actions-error);
|
|
155
|
+
color: var(--actions-error);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.secondary-button-color-actions-valid {
|
|
159
|
+
border-color: var(--actions-valid);
|
|
160
|
+
color: var(--actions-valid);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Ajustement des icônes pour chaque couleur */
|
|
164
|
+
.secondary-button-color-bleu-allaw .secondary-button-icon {
|
|
165
|
+
color: var(--bleu-allaw);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.secondary-button-color-mid-grey .secondary-button-icon {
|
|
169
|
+
color: var(--mid-grey);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.secondary-button-color-dark-grey .secondary-button-icon {
|
|
173
|
+
color: var(--dark-grey);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.secondary-button-color-noir .secondary-button-icon {
|
|
177
|
+
color: var(--noir);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.secondary-button-color-pure-white .secondary-button-icon {
|
|
181
|
+
color: var(--pure-white);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.secondary-button-color-actions-error .secondary-button-icon {
|
|
185
|
+
color: var(--actions-error);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.secondary-button-color-actions-valid .secondary-button-icon {
|
|
189
|
+
color: var(--actions-valid);
|
|
190
|
+
}
|
|
@@ -9,6 +9,7 @@ export interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
|
|
|
9
9
|
label: string;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
mode?: "dark" | "light";
|
|
12
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
|
|
12
13
|
onClick?: () => Promise<void> | void;
|
|
13
14
|
fullWidth?: boolean;
|
|
14
15
|
type?: "button" | "submit" | "reset";
|
|
@@ -61,10 +61,10 @@ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "re
|
|
|
61
61
|
import "./SecondaryButton.css";
|
|
62
62
|
import "../../../styles/global.css";
|
|
63
63
|
var SecondaryButton = forwardRef(function (_a, ref) {
|
|
64
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick,
|
|
64
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "button" : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "color", "onClick", "fullWidth", "type", "isLoading"]);
|
|
65
65
|
var buttonRef = React.useRef(null);
|
|
66
|
-
var
|
|
67
|
-
var
|
|
66
|
+
var _h = useState(false), internalIsLoading = _h[0], setInternalIsLoading = _h[1];
|
|
67
|
+
var _j = useState(""), loadingDots = _j[0], setLoadingDots = _j[1];
|
|
68
68
|
useImperativeHandle(ref, function () { return buttonRef.current; });
|
|
69
69
|
var isButtonLoading = isLoading || internalIsLoading;
|
|
70
70
|
useEffect(function () {
|
|
@@ -108,7 +108,7 @@ var SecondaryButton = forwardRef(function (_a, ref) {
|
|
|
108
108
|
}
|
|
109
109
|
});
|
|
110
110
|
}); };
|
|
111
|
-
return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
111
|
+
return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : "", " ").concat(color ? "secondary-button-color-".concat(color) : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
112
112
|
startIcon && (React.createElement("span", { className: "secondary-button-icon ".concat(startIconName) })),
|
|
113
113
|
React.createElement("span", { className: "secondary-button-label" }, label),
|
|
114
114
|
isButtonLoading ? (React.createElement("span", { className: "secondary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIconName) }))));
|
|
@@ -58,14 +58,14 @@ var Datepicker = function (_a) {
|
|
|
58
58
|
if (buttonRef.current) {
|
|
59
59
|
var rect = buttonRef.current.getBoundingClientRect();
|
|
60
60
|
var windowHeight = window.innerHeight;
|
|
61
|
-
var calendarHeight =
|
|
61
|
+
var calendarHeight = 360; // Hauteur approximative du calendrier
|
|
62
62
|
// Vérifier s'il y a assez d'espace en dessous
|
|
63
63
|
var spaceBelow = windowHeight - rect.bottom;
|
|
64
64
|
var shouldShowBelow = spaceBelow >= calendarHeight;
|
|
65
65
|
setPlacement(shouldShowBelow ? "bottom" : "top");
|
|
66
66
|
// Calcul de la position horizontale centrée
|
|
67
67
|
var buttonCenter = rect.left + rect.width / 2;
|
|
68
|
-
var calendarWidth = 300; // Largeur du calendrier
|
|
68
|
+
var calendarWidth = 300; // Largeur du calendrier
|
|
69
69
|
var leftPosition = buttonCenter - calendarWidth / 2;
|
|
70
70
|
// Ajuster si le calendrier dépasse de l'écran
|
|
71
71
|
if (leftPosition + calendarWidth > window.innerWidth) {
|
|
@@ -74,10 +74,12 @@ var Datepicker = function (_a) {
|
|
|
74
74
|
if (leftPosition < 16) {
|
|
75
75
|
leftPosition = 16;
|
|
76
76
|
}
|
|
77
|
+
// Calcul de la position verticale
|
|
78
|
+
var topPosition = shouldShowBelow
|
|
79
|
+
? rect.bottom + window.scrollY + 8 // 8px de marge en dessous du bouton
|
|
80
|
+
: rect.top + window.scrollY - calendarHeight - 8; // 8px de marge au-dessus du bouton
|
|
77
81
|
setPosition({
|
|
78
|
-
top:
|
|
79
|
-
? rect.bottom + window.scrollY
|
|
80
|
-
: rect.top + window.scrollY,
|
|
82
|
+
top: topPosition,
|
|
81
83
|
left: leftPosition + window.scrollX,
|
|
82
84
|
});
|
|
83
85
|
}
|
|
@@ -163,13 +163,10 @@
|
|
|
163
163
|
box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
transform: translateY(-100%);
|
|
169
|
-
}
|
|
170
|
-
|
|
166
|
+
/* Suppression des styles top et bottom qui ne sont plus nécessaires */
|
|
167
|
+
.datepicker-portal.top,
|
|
171
168
|
.datepicker-portal.bottom {
|
|
172
|
-
|
|
169
|
+
transform: none; /* Suppression de la transformation */
|
|
173
170
|
}
|
|
174
171
|
|
|
175
172
|
/* Customisation des flèches de navigation */
|
|
@@ -231,3 +228,13 @@
|
|
|
231
228
|
.react-datepicker__year-text:not([aria-disabled="true"]):hover {
|
|
232
229
|
border-radius: 18px;
|
|
233
230
|
}
|
|
231
|
+
|
|
232
|
+
.react-datepicker__day--disabled {
|
|
233
|
+
color: var(--venom-grey-dark, #d1dce8) !important;
|
|
234
|
+
cursor: not-allowed;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.react-datepicker__day--disabled:hover {
|
|
238
|
+
background: none !important;
|
|
239
|
+
cursor: not-allowed;
|
|
240
|
+
}
|