allaw-ui 2.3.0 → 2.3.2

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

@@ -4,7 +4,7 @@
   max-width: 768px;
   padding: 2.5rem;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   gap: 16px;
   border-radius: 16px;
@@ -12,11 +12,42 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   position: relative;
   z-index: 1001;
+  max-height: 90vh;
+  overflow: hidden;
 }
 
 .stepper-content {
-  margin: 20px 0;
   width: 100%;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+  /* padding-right: 16px; */
+  margin: 0;
+}
+
+.stepper-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.stepper-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.stepper-content::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.stepper-content::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }
 
 .stepper-buttons {
@@ -70,6 +101,7 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
+  box-sizing: border-box;
 }
 
 .stepper-overlay.visible {
@@ -77,30 +109,21 @@
   visibility: visible;
 }
 
-.stepper-content {
-  width: 100%;
-  max-height: 100%;
-  height: 90%;
-  overflow-y: auto;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0em;
-}
-
 @media (max-width: 800px) {
   .stepper-container {
     height: 99dvh;
     position: fixed;
     bottom: 0;
-    justify-content: start;
+    justify-content: flex-start;
     padding: 2rem;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    max-height: none;
+  }
+
+  .stepper-overlay {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
   }
 }
 

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

@@ -40,6 +40,10 @@ export interface StepperProps {
     };
     onModalConfirm?: () => void;
     onModalCancel?: () => void;
+    verticalOffset?: {
+        top?: number;
+        bottom?: number;
+    };
 }
 declare const Stepper: React.FC<StepperProps>;
 export default Stepper;

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

@@ -46,7 +46,7 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
 import ConfirmationModal from "./ConfirmationModal";
 var Stepper = function (_a) {
     var _b, _c, _d, _e, _f;
-    var steps = _a.steps, currentStep = _a.currentStep, _g = _a.startIcon, startIcon = _g === void 0 ? [] : _g, _h = _a.endIcon, endIcon = _h === void 0 ? true : _h, children = _a.children, _j = _a.secondaryButton, secondaryButton = _j === void 0 ? [] : _j, _k = _a.primaryButton, primaryButton = _k === void 0 ? [] : _k, _l = _a.showProgressBar, showProgressBar = _l === void 0 ? [] : _l, onClose = _a.onClose, validateStep = _a.validateStep, confirmationModal = _a.confirmationModal, onModalCancel = _a.onModalCancel, onModalConfirm = _a.onModalConfirm;
+    var steps = _a.steps, currentStep = _a.currentStep, _g = _a.startIcon, startIcon = _g === void 0 ? [] : _g, _h = _a.endIcon, endIcon = _h === void 0 ? true : _h, children = _a.children, _j = _a.secondaryButton, secondaryButton = _j === void 0 ? [] : _j, _k = _a.primaryButton, primaryButton = _k === void 0 ? [] : _k, _l = _a.showProgressBar, showProgressBar = _l === void 0 ? [] : _l, onClose = _a.onClose, validateStep = _a.validateStep, confirmationModal = _a.confirmationModal, onModalCancel = _a.onModalCancel, onModalConfirm = _a.onModalConfirm, verticalOffset = _a.verticalOffset;
     var _m = useState(false), isVisible = _m[0], setIsVisible = _m[1];
     var portalContainerRef = useRef(null);
     var stepperContainerRef = useRef(null);
@@ -119,7 +119,12 @@ var Stepper = function (_a) {
             handleClose();
         }
     }, [handleClose]);
-    var stepperContent = (React.createElement("div", { className: "stepper-overlay ".concat(isVisible ? "visible" : ""), onMouseDown: handleMouseDown },
+    var stepperContent = (React.createElement("div", { className: "stepper-overlay ".concat(isVisible ? "visible" : ""), onMouseDown: handleMouseDown, style: {
+            paddingTop: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.top) ? "".concat(verticalOffset.top, "px") : undefined,
+            paddingBottom: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.bottom)
+                ? "".concat(verticalOffset.bottom, "px")
+                : undefined,
+        } },
         React.createElement("div", { className: "stepper-container ".concat((confirmationModal === null || confirmationModal === void 0 ? void 0 : confirmationModal.show) ? "modal-active" : ""), onClick: function (e) { return e.stopPropagation(); }, ref: stepperContainerRef },
             React.createElement(ProgressBar, { steps: steps, currentStep: currentStep, startIcon: currentShowStartIcon, endIcon: endIcon, onStartIconClick: handlePrevious, onEndIconClick: handleClose, showProgressBar: currentShowProgressBar }),
             React.createElement("div", { className: "stepper-content" }, children[currentStep - 1]),

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

@@ -25,6 +25,15 @@ declare namespace _default {
             let description_1: string;
             export { description_1 as description };
         }
+        namespace verticalOffset {
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -39,4 +48,5 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WithLargeOffset: any;
 import Stepper from "./Stepper";

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

@@ -9,7 +9,43 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from "react";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState, useEffect } from "react";
 import { action } from "@storybook/addon-actions";
 import Stepper from "./Stepper";
 import "../../../styles/global.css";
@@ -35,6 +71,12 @@ export default {
             },
             description: "Contrôle l'affichage de la barre de progression pour chaque étape",
         },
+        verticalOffset: {
+            control: {
+                type: "object",
+            },
+            description: "Décalage vertical du stepper (en px) pour éviter les barres de navigation",
+        },
     },
     parameters: {
         backgrounds: {
@@ -48,11 +90,36 @@ export default {
         },
     },
 };
-var Template = function (args) { return React.createElement(Stepper, __assign({}, args)); };
+var Template = function (args) {
+    var _a = useState(args.currentStep), step = _a[0], setStep = _a[1];
+    useEffect(function () {
+        setStep(args.currentStep);
+    }, [args.currentStep]);
+    var updatedArgs = __assign(__assign({}, args), { currentStep: step, onClose: function () {
+            action("Stepper closed")();
+            if (args.onClose)
+                args.onClose();
+        }, primaryButton: args.primaryButton.map(function (button) { return (__assign(__assign({}, button), { onPrimaryButtonClick: function (currentStep) {
+                action("Primary button clicked on step ".concat(currentStep))();
+                if (currentStep < args.steps) {
+                    setStep(currentStep + 1);
+                }
+            } })); }), secondaryButton: args.secondaryButton.map(function (button) { return (__assign(__assign({}, button), { onSecondaryButtonClick: function (currentStep) {
+                action("Secondary button clicked on step ".concat(currentStep))();
+                if (currentStep > 1) {
+                    setStep(currentStep - 1);
+                }
+            } })); }) });
+    return React.createElement(Stepper, __assign({}, updatedArgs));
+};
 export var Default = Template.bind({});
 Default.args = {
     steps: 5,
     currentStep: 1,
+    verticalOffset: {
+        top: 64,
+        bottom: 0,
+    },
     startIcon: [true, true, true, true, true],
     endIcon: true,
     onClose: function () {
@@ -64,69 +131,68 @@ Default.args = {
             show: true,
             label: "Autre",
             startIconName: "allaw-icon-add",
-            onSecondaryButtonClick: function (step) {
-                return action("Secondary button clicked on step ".concat(step))();
-            },
         },
         { show: false },
         {
             show: true,
             label: "Option",
             startIconName: "allaw-icon-settings",
-            onSecondaryButtonClick: function (step) {
-                return action("Secondary button clicked on step ".concat(step))();
-            },
         },
         { show: false },
     ],
+    validateStep: function (step) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            // Simuler une validation réussie
+            return [2 /*return*/, true];
+        });
+    }); },
     primaryButton: [
         {
             show: true,
             label: "Commencer",
             startIconName: "allaw-icon-arrow-right",
-            onPrimaryButtonClick: function (step) {
-                return action("Primary button clicked on step ".concat(step))();
-            },
         },
         {
             show: true,
             label: "Continuer",
             endIconName: "allaw-icon-arrow-right",
-            onPrimaryButtonClick: function (step) {
-                return action("Primary button clicked on step ".concat(step))();
-            },
         },
         {
             show: true,
             label: "Suivant",
             endIconName: "allaw-icon-arrow-right",
-            onPrimaryButtonClick: function (step) {
-                return action("Primary button clicked on step ".concat(step))();
-            },
         },
         {
             show: true,
             label: "Presque fini",
             endIconName: "allaw-icon-arrow-right",
-            onPrimaryButtonClick: function (step) {
-                return action("Primary button clicked on step ".concat(step))();
-            },
         },
         {
             show: true,
             label: "Terminer",
             endIconName: "allaw-icon-check",
-            onPrimaryButtonClick: function (step) {
-                return action("Stepper completed on step ".concat(step))();
-            },
         },
     ],
     showProgressBar: [true, true, true, true, true],
     children: [
-        React.createElement("div", { className: "stepper-content", key: "step1" }, "Contenu de l'\u00E9tape 1"),
+        React.createElement("div", { className: "stepper-content", key: "step1", style: { display: "flex", flexDirection: "column", gap: "10px" } },
+            "Contenu de l'\u00E9tape 1",
+            Array(10)
+                .fill(null)
+                .map(function (_, index) { return (React.createElement("div", { key: index },
+                React.createElement("br", null),
+                "Ligne ",
+                index + 1)); }),
+            React.createElement("div", null, "Fin du composant")),
         React.createElement("div", { className: "stepper-content", key: "step2" }, "Contenu de l'\u00E9tape 2"),
         React.createElement("div", { className: "stepper-content", key: "step3" }, "Contenu de l'\u00E9tape 3"),
         React.createElement("div", { className: "stepper-content", key: "step4" }, "Contenu de l'\u00E9tape 4"),
         React.createElement("div", { className: "stepper-content", key: "step5" }, "Contenu de l'\u00E9tape 5"),
     ],
 };
+// Ajouter une story avec un offset différent
+export var WithLargeOffset = Template.bind({});
+WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: {
+        top: 120,
+        bottom: 80,
+    } });

package/package.json

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