allaw-ui 3.7.1 → 3.7.3

package/dist/components/atoms/typography/TinyInfo.css

@@ -9,6 +9,25 @@
   gap: 0.5rem;
 }
 
+/* Classes d'alignement */
+.tiny-info.left {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.tiny-info.center {
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+}
+
+.tiny-info.right {
+  width: 100%;
+  justify-content: flex-end;
+  text-align: right;
+}
+
 .tiny-info.bold14 {
   font-size: 14px;
   font-weight: 700;

package/dist/components/molecules/modal/Modal.js

@@ -86,20 +86,27 @@ var Modal = function (_a) {
     };
     var renderModalContent = function () {
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: style.modalHeadingWrapper },
-                React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
-            React.createElement("div", { className: style.modalParagraphWrapper },
-                React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
-            renderContent && (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel }))),
-            !renderContent && customContent && (React.createElement("div", { className: style.modalCustomWrapper },
-                React.createElement(customContent.component, __assign({}, (customContent.props || {}))))),
-            !renderContent && !customContent && children && (React.createElement("div", { className: style.modalCustomWrapper }, children)),
-            !renderContent &&
-                !customContent &&
-                !children &&
-                imageConfig &&
-                !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
-                React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))));
+            React.createElement("header", { className: style.modalHeader },
+                React.createElement("div", { className: style.modalHeadingWrapper },
+                    React.createElement(Heading, { text: title, variant: "h4", color: "noir", align: "left" })),
+                React.createElement("button", { className: style.modalCloseButton, onClick: onCancel, "aria-label": "Fermer", type: "button" },
+                    React.createElement("span", { className: style.modalCloseIcon }, "\u00D7"))),
+            React.createElement("section", { className: style.modalBody },
+                React.createElement("div", { className: style.modalParagraphWrapper },
+                    React.createElement(Paragraph, { text: description, variant: "medium", size: "default", className: style.modalParagraph })),
+                renderContent && (React.createElement("div", { className: style.modalCustomWrapper }, renderContent({ isOpen: show, onClose: onCancel }))),
+                !renderContent && customContent && (React.createElement("div", { className: style.modalCustomWrapper },
+                    React.createElement(customContent.component, __assign({}, (customContent.props || {}))))),
+                !renderContent && !customContent && children && (React.createElement("div", { className: style.modalCustomWrapper }, children)),
+                !renderContent &&
+                    !customContent &&
+                    !children &&
+                    imageConfig &&
+                    !imgError && (React.createElement("div", { className: "".concat(style.modalImageWrapper, " ").concat(imageConfig.className || ""), style: __assign({ padding: imageConfig.padding }, imageConfig.style) },
+                    React.createElement("img", { src: imageConfig.url, alt: imageConfig.alt || "", width: imageConfig.width, height: imageConfig.height, onError: handleImageError, className: style.modalImage })))),
+            React.createElement("footer", { className: style.modalFooter },
+                cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true }))));
     };
     // Générer les styles pour la largeur maximale responsive
     var getMaxWidthStyles = function () {
@@ -203,11 +210,7 @@ var Modal = function (_a) {
                 ? "".concat(horizontalOffset.right, "px")
                 : undefined,
         } },
-        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : "", " ").concat(getMaxWidthClasses(), " ").concat(getDynamicModalClass()), ref: modalContentRef, style: __assign({}, getMaxWidthStyles()) },
-            renderModalContent(),
-            React.createElement("div", { className: style.modalButtons },
-                cancelLabel && (React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true })),
-                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, startIconName: confirmIconName, startIcon: true })))));
+        React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : "", " ").concat(getMaxWidthClasses(), " ").concat(getDynamicModalClass()), ref: modalContentRef, style: __assign({}, getMaxWidthStyles()) }, renderModalContent())));
     return ReactDOM.createPortal(modalContent, portalContainerRef.current);
 };
 export default Modal;

package/dist/components/molecules/modal/Modal.module.css

@@ -254,30 +254,89 @@
 .modalContent {
   background: #fff;
   border-radius: 16px;
-  padding: 2rem;
   max-width: 500px;
   width: 90%;
   animation: fadeIn 0.2s ease-out;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  max-height: 90vh;
+  max-height: calc(100vh - 120px);
   display: flex;
   flex-direction: column;
 }
 
+.modalHeader {
+  flex-shrink: 0;
+  padding: 2rem 2rem 0 2rem;
+  background: #fff;
+  border-radius: 16px 16px 0 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
 .modalHeadingWrapper {
-  margin-bottom: 1.5rem;
+  flex: 1;
   display: flex;
   justify-content: start;
 }
 
-.modalParagraphWrapper {
-  margin-bottom: 2.5rem;
+.modalCloseButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  margin: -0.25rem -0.25rem -0.25rem 0;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.modalCloseButton:hover {
+  background-color: #f3f4f6;
+}
+
+.modalCloseIcon {
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #6b7280;
+  font-weight: 300;
+  display: block;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+}
+
+.modalBody {
+  flex: 1;
   overflow-y: auto;
+  padding: 1.5rem 2rem;
+}
+
+.modalBody::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modalBody::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.modalBody::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.modalBody::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.modalParagraphWrapper {
+  margin-bottom: 1rem;
 }
 
 .modalImageWrapper {
   text-align: center;
-  margin: 0 0 2.5rem 0;
+  margin: 1rem 0;
 }
 
 .modalImage {
@@ -288,18 +347,40 @@
 
 .modalCustomWrapper {
   width: 100%;
-  margin-bottom: 2.5rem;
+  margin-top: 1rem;
 }
 
 .modalParagraph {
   text-align: left;
 }
 
+.modalFooter {
+  flex-shrink: 0;
+  padding: 0 2rem 2rem 2rem;
+  background: #fff;
+  border-radius: 0 0 16px 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.modalFooter button {
+  flex: 1;
+}
+
+.modalFooter button:only-child {
+  width: 100%;
+}
+
+/* Deprecated - gardé pour backward compatibility */
 .modalButtons {
+  flex-shrink: 0;
+  padding: 0 2rem 2rem 2rem;
+  background: #fff;
+  border-radius: 0 0 16px 16px;
   display: flex;
   justify-content: space-between;
   gap: 16px;
-  margin-top: auto;
 }
 
 .modalButtons button {
@@ -322,7 +403,6 @@
     position: fixed;
     bottom: 0;
     justify-content: flex-start;
-    padding: 2rem;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     max-height: none;
@@ -330,6 +410,21 @@
     max-width: 100%;
   }
 
+  .modalHeader {
+    padding: 1.5rem 2rem 0 2rem;
+    border-radius: 0;
+  }
+
+  .modalBody {
+    padding: 1rem 2rem;
+  }
+
+  .modalFooter,
+  .modalButtons {
+    padding: 0 2rem 1.5rem 2rem;
+    border-radius: 0;
+  }
+
   .modalOverlay {
     padding-top: 0 !important;
     padding-bottom: 0 !important;

package/dist/components/molecules/modal/Modal.stories.d.ts

@@ -123,4 +123,6 @@ export const WithLargeContentAndMaxWidth: any;
 export const WithCustomBreakpoints: any;
 export const WithManyBreakpoints: any;
 export const WithMixedUnitsBreakpoints: any;
+export const WithScrollableContent: any;
+export const WithScrollableContentMobile: any;
 import Modal from "./Modal";

package/dist/components/molecules/modal/Modal.stories.js

@@ -307,3 +307,67 @@ WithMixedUnitsBreakpoints.args = __assign(__assign({}, Default.args), { title: "
             { breakpoint: 1200, maxWidth: 900 },
         ],
     } });
+// Nouvelle story pour tester le scroll avec header/footer fixes
+export var WithScrollableContent = Template.bind({});
+WithScrollableContent.args = {
+    show: false,
+    title: "Modal avec contenu scrollable",
+    description: "Cette modal contient beaucoup de contenu pour tester le comportement de scroll. Le header (titre + bouton fermer) et le footer (boutons) doivent rester fixes pendant que seul le corps de la modal défile.",
+    confirmLabel: "Valider",
+    cancelLabel: "Annuler",
+    children: (React.createElement("div", { style: { textAlign: "left" } },
+        React.createElement("h3", { style: { marginBottom: "1rem", color: "#1f2937" } }, "Contenu tr\u00E8s long pour tester le scroll"),
+        Array.from({ length: 20 }, function (_, i) { return (React.createElement("div", { key: i, style: {
+                marginBottom: "1.5rem",
+                padding: "1rem",
+                backgroundColor: i % 2 === 0 ? "#f9fafb" : "#f3f4f6",
+                borderRadius: "0.5rem",
+                border: "1px solid #e5e7eb",
+            } },
+            React.createElement("h4", { style: { margin: "0 0 0.5rem 0", color: "#374151" } },
+                "Section ",
+                i + 1),
+            React.createElement("p", { style: { margin: 0, color: "#6b7280", lineHeight: "1.6" } }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+            i === 5 && (React.createElement("div", { style: {
+                    marginTop: "1rem",
+                    padding: "1rem",
+                    backgroundColor: "#dbeafe",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #93c5fd",
+                } },
+                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#1e40af" } },
+                    "\uD83D\uDCA1 ",
+                    React.createElement("strong", null, "Note importante :"),
+                    " Pendant que vous scrollez ce contenu, v\u00E9rifiez que le titre en haut et les boutons en bas restent toujours visibles et fixes."))),
+            i === 10 && (React.createElement("div", { style: {
+                    marginTop: "1rem",
+                    padding: "1rem",
+                    backgroundColor: "#ecfdf5",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #86efac",
+                } },
+                React.createElement("p", { style: { margin: 0, fontSize: "0.875rem", color: "#047857" } },
+                    "\u2705 ",
+                    React.createElement("strong", null, "Test r\u00E9ussi :"),
+                    " Si vous voyez ce message au milieu du scroll, l'architecture header/body/footer fonctionne correctement !"))))); }),
+        React.createElement("div", { style: {
+                padding: "1.5rem",
+                backgroundColor: "#fef2f2",
+                borderRadius: "0.5rem",
+                border: "2px solid #fecaca",
+                textAlign: "center",
+            } },
+            React.createElement("h4", { style: { margin: "0 0 1rem 0", color: "#dc2626" } }, "\uD83C\uDFAF Fin du contenu scrollable"),
+            React.createElement("p", { style: { margin: 0, color: "#991b1b", fontSize: "0.875rem" } }, "Vous avez atteint la fin du contenu. Les boutons Annuler/Valider doivent toujours \u00EAtre visibles en bas de la modal.")))),
+};
+// Story pour tester sur viewport mobile restreint
+export var WithScrollableContentMobile = Template.bind({});
+WithScrollableContentMobile.args = __assign(__assign({}, WithScrollableContent.args), { title: "Test mobile - Scroll fixe", description: "Version optimisée pour tester le comportement sur écrans mobiles avec hauteur réduite." });
+WithScrollableContentMobile.parameters = {
+    viewport: {
+        defaultViewport: "mobile1",
+    },
+    backgrounds: {
+        default: "light",
+    },
+};

package/package.json

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