allaw-ui 2.6.1 → 2.6.3

package/dist/components/atoms/inputs/VerificationCodeInput.js

@@ -14,6 +14,7 @@ var VerificationCodeInput = function (_a) {
     var numInputs = _a.numInputs, _b = _a.allowedChars, allowedChars = _b === void 0 ? "numeric" : _b, _c = _a.size, size = _c === void 0 ? "large" : _c, onChange = _a.onChange, onError = _a.onError, onComplete = _a.onComplete, _d = _a.testError, testError = _d === void 0 ? false : _d, _e = _a.autoFocus, autoFocus = _e === void 0 ? false : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f;
     var _g = useState(Array(numInputs).fill("")), values = _g[0], setValues = _g[1];
     var _h = useState(""), error = _h[0], setError = _h[1];
+    var _j = useState(false), isSmallScreen = _j[0], setIsSmallScreen = _j[1];
     var inputRefs = useRef(Array(numInputs).fill(null));
     useEffect(function () {
         setValues(Array(numInputs).fill(""));
@@ -29,6 +30,17 @@ var VerificationCodeInput = function (_a) {
             onError === null || onError === void 0 ? void 0 : onError(null);
         }
     }, [testError, onError]);
+    useEffect(function () {
+        var checkScreenSize = function () {
+            setIsSmallScreen(window.innerWidth < 400);
+        };
+        // Vérifier la taille initiale
+        checkScreenSize();
+        // Ajouter un écouteur d'événement pour les changements de taille
+        window.addEventListener("resize", checkScreenSize);
+        // Nettoyer l'écouteur d'événement
+        return function () { return window.removeEventListener("resize", checkScreenSize); };
+    }, []);
     var handleInputChange = function (index, value) {
         // console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
         var _a;
@@ -128,7 +140,7 @@ var VerificationCodeInput = function (_a) {
         return regex.test(value);
     };
     var renderInputs = function () {
-        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
+        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
                 ? "[0-9]*"
                 : allowedChars === "alphabetic"
                     ? "[a-zA-Z]*"
@@ -136,8 +148,8 @@ var VerificationCodeInput = function (_a) {
             , "data-form-type": "other" // Indique que ce n'est pas un champ de mot de passe
             , disabled: isDisabled })); });
     };
-    return (React.createElement("div", { className: styles.container },
-        React.createElement("div", { className: styles.inputsContainer }, renderInputs()),
+    return (React.createElement("div", { className: "".concat(styles.container, " ").concat(isSmallScreen ? styles.responsiveContainer : "") },
+        React.createElement("div", { className: "".concat(styles.inputsContainer, " ").concat(isSmallScreen ? styles.responsiveInputsContainer : "") }, renderInputs()),
         error && (React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))));
 };
 export default VerificationCodeInput;

package/dist/components/atoms/inputs/VerificationCodeInput.module.css

@@ -82,3 +82,38 @@
   height: 56px;
   font-size: 20px;
 }
+
+/* Styles responsifs pour les petits écrans (moins de 400px) */
+.responsiveContainer {
+  gap: 6px;
+}
+
+.responsiveInputsContainer {
+  gap: 6px;
+}
+
+.responsive.small {
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+}
+
+.responsive.medium {
+  width: 38px;
+  height: 38px;
+  font-size: 16px;
+}
+
+.responsive.large {
+  width: 44px;
+  height: 44px;
+  font-size: 18px;
+}
+
+/* Media query pour les petits écrans */
+@media (max-width: 400px) {
+  .input {
+    border-width: 1.5px;
+    border-radius: 6px;
+  }
+}

package/dist/components/atoms/inputs/VerificationCodeInput.stories.d.ts

@@ -56,4 +56,26 @@ declare namespace _default {
 export default _default;
 export const Default: any;
 export const WithError: any;
+export function Responsive(args: any): React.JSX.Element;
+export namespace Responsive {
+    export namespace args {
+        let numInputs_1: number;
+        export { numInputs_1 as numInputs };
+        let size_1: string;
+        export { size_1 as size };
+    }
+    export namespace parameters_1 {
+        namespace docs {
+            export namespace description_4 {
+                let story: string;
+            }
+            export { description_4 as description };
+        }
+        namespace viewport {
+            let defaultViewport: string;
+        }
+    }
+    export { parameters_1 as parameters };
+}
 import VerificationCodeInput from "./VerificationCodeInput";
+import React from "react";

package/dist/components/atoms/inputs/VerificationCodeInput.stories.js

@@ -70,3 +70,20 @@ WithError.parameters = {
         },
     },
 };
+export var Responsive = function (args) { return (React.createElement("div", null,
+    React.createElement("p", { style: { marginBottom: "10px" } }, "Redimensionnez la fen\u00EAtre \u00E0 moins de 400px pour voir le design responsive"),
+    React.createElement(VerificationCodeInput, __assign({}, args)))); };
+Responsive.args = {
+    numInputs: 6,
+    size: "large",
+};
+Responsive.parameters = {
+    docs: {
+        description: {
+            story: "Montre le comportement responsive du composant lorsque la largeur de l'écran est inférieure à 400px",
+        },
+    },
+    viewport: {
+        defaultViewport: "mobile1",
+    },
+};

package/dist/components/molecules/stepper/Stepper.css

@@ -199,3 +199,19 @@
     transform: scale(1);
   }
 }
+
+.stepper-button-container.auto-width {
+  width: auto;
+  margin: 0 auto;
+}
+
+.stepper-button-container.auto-width button {
+  width: auto;
+  min-width: 150px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.stepper-buttons .primary-button-container.auto-width:only-child {
+  width: auto;
+}

package/dist/components/molecules/stepper/Stepper.d.ts

@@ -16,6 +16,7 @@ export interface StepperProps {
         startIconName?: string;
         endIconName?: string;
         onSecondaryButtonClick?: (step: number) => void;
+        fullWidth?: boolean;
     }[];
     primaryButton?: {
         show: boolean;
@@ -26,6 +27,7 @@ export interface StepperProps {
         endIconName?: string;
         onPrimaryButtonClick?: (step: number) => void;
         disabled?: boolean;
+        fullWidth?: boolean;
     }[];
     showProgressBar?: boolean[];
     onClose?: () => void;

package/dist/components/molecules/stepper/Stepper.js

@@ -131,10 +131,10 @@ var Stepper = function (_a) {
             React.createElement("div", { className: "stepper-buttons ".concat(!(currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && !(currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show)
                     ? "no-buttons"
                     : "") },
-                (currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container" },
-                    React.createElement(SecondaryButton, { fullWidth: true, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, currentStep); } }))),
-                (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container" },
-                    React.createElement(PrimaryButton, { fullWidth: true, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))),
+                (currentSecondaryButton === null || currentSecondaryButton === void 0 ? void 0 : currentSecondaryButton.show) && (React.createElement("div", { className: "stepper-button-container secondary-button-container ".concat(currentSecondaryButton.fullWidth === false ? "auto-width" : "") },
+                    React.createElement(SecondaryButton, { fullWidth: currentSecondaryButton.fullWidth !== false, label: currentSecondaryButton.label, startIcon: currentSecondaryButton.startIconName ? true : undefined, endIcon: currentSecondaryButton.endIconName ? true : undefined, startIconName: currentSecondaryButton.startIconName, endIconName: currentSecondaryButton.endIconName, onClick: function () { var _a; return (_a = currentSecondaryButton.onSecondaryButtonClick) === null || _a === void 0 ? void 0 : _a.call(currentSecondaryButton, currentStep); } }))),
+                (currentPrimaryButton === null || currentPrimaryButton === void 0 ? void 0 : currentPrimaryButton.show) && (React.createElement("div", { className: "stepper-button-container primary-button-container ".concat(currentPrimaryButton.fullWidth === false ? "auto-width" : "") },
+                    React.createElement(PrimaryButton, { fullWidth: currentPrimaryButton.fullWidth !== false, label: currentPrimaryButton.label, startIcon: currentPrimaryButton.startIconName ? true : undefined, endIcon: currentPrimaryButton.endIconName ? true : undefined, startIconName: currentPrimaryButton.startIconName, endIconName: currentPrimaryButton.endIconName, disabled: currentPrimaryButton.disabled, onClick: handleNext })))),
             React.createElement(ConfirmationModal, { show: (_b = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.show) !== null && _b !== void 0 ? _b : false, title: (_c = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.title) !== null && _c !== void 0 ? _c : "Confirmation", description: (_d = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.description) !== null && _d !== void 0 ? _d : "Voulez-vous continuer ?", confirmLabel: (_e = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.confirmLabel) !== null && _e !== void 0 ? _e : "Confirmer", cancelLabel: (_f = confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.cancelLabel) !== null && _f !== void 0 ? _f : "Annuler", onConfirm: onModalConfirm !== null && onModalConfirm !== void 0 ? onModalConfirm : (function () { }), onCancel: onModalCancel !== null && onModalCancel !== void 0 ? onModalCancel : (function () { }), isDanger: confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.isDanger }))));
     return portalContainerRef.current && isVisible
         ? ReactDOM.createPortal(stepperContent, portalContainerRef.current)

package/package.json

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