allaw-ui 4.4.8 → 4.5.0

package/dist/components/atoms/buttons/ActionButton.d.ts

@@ -10,7 +10,7 @@ export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElemen
     fullWidth?: boolean;
     type?: "button" | "submit" | "reset";
     isLoading?: boolean;
-    variant?: "default" | "warning";
+    variant?: "default" | "warning" | "yellow";
     size?: "medium" | "large";
     dataTestId?: string;
 }

package/dist/components/atoms/buttons/ActionButton.js

@@ -107,7 +107,7 @@ var ActionButton = forwardRef(function (_a, ref) {
             }
         });
     }); };
-    return (React.createElement("button", __assign({ ref: buttonRef, "data-testid": props.dataTestId, className: "".concat(styles.actionButton, " ").concat(disabled ? styles.actionButtonDisabled : styles.actionButtonEnabled, " ").concat(fullWidth ? styles.actionButtonFullWidth : "", " ").concat(isButtonLoading ? styles.actionButtonLoading : "", " ").concat(variant === "warning" ? styles.actionButtonWarning : "", " ").concat(size === "large" ? styles.actionButtonLarge : ""), disabled: disabled, onClick: handleClick, type: type }, props),
+    return (React.createElement("button", __assign({ ref: buttonRef, "data-testid": props.dataTestId, className: "".concat(styles.actionButton, " ").concat(disabled ? styles.actionButtonDisabled : styles.actionButtonEnabled, " ").concat(fullWidth ? styles.actionButtonFullWidth : "", " ").concat(isButtonLoading ? styles.actionButtonLoading : "", " ").concat(variant === "warning" ? styles.actionButtonWarning : "", " ").concat(variant === "yellow" ? styles.actionButtonYellow : "", " ").concat(size === "large" ? styles.actionButtonLarge : ""), disabled: disabled, onClick: handleClick, type: type }, props),
         startIcon && (React.createElement("span", { className: "".concat(styles.actionButtonIcon, " ").concat(startIconName) })),
         React.createElement("span", { className: styles.actionButtonLabel }, label),
         isButtonLoading ? (React.createElement("span", { className: styles.actionButtonLoadingDots }, loadingDots)) : (endIcon && (React.createElement("span", { className: "".concat(styles.actionButtonIcon, " ").concat(endIconName) })))));

package/dist/components/atoms/buttons/ActionButton.module.css

@@ -90,6 +90,19 @@
   background: rgba(225, 81, 81, 0.1);
 }
 
+.actionButtonYellow {
+  background: #ffc107;
+  color: #000000;
+}
+
+.actionButtonYellow:hover {
+  background: #e0a005;
+}
+
+.actionButtonYellow:active {
+  background: #c79504;
+}
+
 @keyframes pulseBackground {
   0% {
     background-color: var(--Primary-Mid-black, #171e25);

package/dist/components/atoms/buttons/ActionButton.stories.d.ts

@@ -105,4 +105,6 @@ export const WarningButton: any;
 export const LargeButton: any;
 export const LargeButtonWithIcons: any;
 export const LargeWarningButton: any;
+export const YellowButton: any;
+export const LargeYellowButton: any;
 import ActionButton from "./ActionButton";

package/dist/components/atoms/buttons/ActionButton.stories.js

@@ -97,7 +97,7 @@ export default {
         variant: {
             control: {
                 type: "select",
-                options: ["default", "warning"],
+                options: ["default", "warning", "yellow"],
             },
         },
         size: {
@@ -165,3 +165,7 @@ export var LargeButtonWithIcons = Template.bind({});
 LargeButtonWithIcons.args = __assign(__assign({}, Default.args), { label: "Grand Bouton avec Icônes", startIcon: true, endIcon: true, size: "large" });
 export var LargeWarningButton = Template.bind({});
 LargeWarningButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton d'Alerte", variant: "warning", size: "large" });
+export var YellowButton = Template.bind({});
+YellowButton.args = __assign(__assign({}, Default.args), { label: "Bouton Jaune", variant: "yellow" });
+export var LargeYellowButton = Template.bind({});
+LargeYellowButton.args = __assign(__assign({}, Default.args), { label: "Grand Bouton Jaune", variant: "yellow", size: "large" });

package/dist/components/molecules/phoneNumberField/CountrySelect.js

@@ -30,12 +30,13 @@ var CountrySelect = function (_a) {
             setSearch("");
     }, [isOpen]);
     useEffect(function () {
+        if (disablePortal)
+            return;
         if (isOpen && buttonRef.current) {
             var rect = buttonRef.current.getBoundingClientRect();
             var btnW = typeof buttonWidth === "number" ? buttonWidth : rect.width;
             var lstW = typeof listWidth === "number" ? listWidth : rect.width;
             var left = rect.left + window.scrollX + (btnW - lstW) / 2;
-            // Décalage intelligent si la liste sort de l'écran
             var minMargin = 8;
             if (left < minMargin)
                 left = minMargin;
@@ -47,7 +48,7 @@ var CountrySelect = function (_a) {
                 width: lstW,
             });
         }
-    }, [isOpen, listWidth, buttonWidth]);
+    }, [isOpen, listWidth, buttonWidth, disablePortal]);
     useEffect(function () {
         if (!isOpen)
             return;
@@ -99,14 +100,19 @@ var CountrySelect = function (_a) {
         }
     };
     var selectedItem = items.find(function (i) { return i.value === selected; });
-    // Liste en portal, position fixed, centrée sous le bouton, décalée si besoin
-    var dropdown = (React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: {
-            position: disablePortal ? "absolute" : "fixed",
-            top: listPos.top,
-            left: listPos.left,
-            width: listPos.width,
-            zIndex: 9999,
-        }, role: "listbox", tabIndex: -1, onKeyDown: handleKeyDown },
+    var dropdown = (React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: disablePortal
+            ? {
+                position: "absolute",
+                width: listPos.width,
+                zIndex: 9999,
+            }
+            : {
+                position: "fixed",
+                top: listPos.top,
+                left: listPos.left,
+                width: listPos.width,
+                zIndex: 9999,
+            }, onKeyDown: handleKeyDown },
         React.createElement("div", { className: styles.searchWrapper },
             React.createElement("i", { className: "allaw-icon-search" }),
             React.createElement("input", __assign({ className: styles.search, placeholder: "Rechercher...", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true, "aria-label": "Rechercher un pays", onBlur: handleBlur }, (disableAutofill && {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.4.8",
+  "version": "4.5.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",