allaw-ui 3.3.5 → 3.3.7

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

@@ -3,6 +3,7 @@ import "./TertiaryButton.css";
 import "../../../styles/global.css";
 export interface TertiaryButtonProps {
     startIcon?: string;
+    endIcon?: string;
     label: string;
     variant?: boolean;
     href?: string;

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

@@ -3,7 +3,7 @@ import Link from "next/link";
 import "./TertiaryButton.css";
 import "../../../styles/global.css";
 var TertiaryButton = function (_a) {
-    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, href = _a.href, onClick = _a.onClick, _c = _a.color, color = _c === void 0 ? "noir" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d;
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, href = _a.href, onClick = _a.onClick, _c = _a.color, color = _c === void 0 ? "noir" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d;
     var buttonClass = "tertiary-button tertiary-button-".concat(color, " ").concat(variant ? "tertiary-button-variant" : "tertiary-button-default", " ").concat(isDisabled ? "tertiary-button-disabled" : "");
     var handleClick = function (e) {
         if (isDisabled) {
@@ -14,8 +14,10 @@ var TertiaryButton = function (_a) {
     };
     return href ? (React.createElement(Link, { href: href, className: buttonClass, onClick: handleClick },
         startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
-        React.createElement("span", { className: "tertiary-button-label" }, label))) : (React.createElement("button", { type: "button", className: buttonClass, onClick: handleClick, disabled: isDisabled },
+        React.createElement("span", { className: "tertiary-button-label" }, label),
+        endIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(endIcon) }))) : (React.createElement("button", { type: "button", className: buttonClass, onClick: handleClick, disabled: isDisabled },
         startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
-        React.createElement("span", { className: "tertiary-button-label" }, label)));
+        React.createElement("span", { className: "tertiary-button-label" }, label),
+        endIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(endIcon) })));
 };
 export default TertiaryButton;

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

@@ -13,27 +13,34 @@ declare namespace _default {
                 let type: string;
             }
         }
-        export namespace variant {
+        export namespace endIcon {
             export namespace control_1 {
                 let type_1: string;
                 export { type_1 as type };
             }
             export { control_1 as control };
         }
-        export namespace color {
+        export namespace variant {
             export namespace control_2 {
                 let type_2: string;
                 export { type_2 as type };
             }
             export { control_2 as control };
-            export let options: string[];
         }
-        export namespace isDisabled {
+        export namespace color {
             export namespace control_3 {
                 let type_3: string;
                 export { type_3 as type };
             }
             export { control_3 as control };
+            export let options: string[];
+        }
+        export namespace isDisabled {
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
         }
         export namespace onClick_1 {
             let action: string;
@@ -56,6 +63,8 @@ export const Default: any;
 export const BlueButton: any;
 export const ErrorButton: any;
 export const Variant: any;
+export const WithEndIcon: any;
+export const WithBothIcons: any;
 export const Disabled: any;
 export const ColoredButton: any;
 import TertiaryButton from "./TertiaryButton";

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

@@ -27,6 +27,11 @@ export default {
                 type: "text",
             },
         },
+        endIcon: {
+            control: {
+                type: "text",
+            },
+        },
         variant: {
             control: {
                 type: "boolean",
@@ -94,6 +99,21 @@ Variant.args = {
     color: "dark-grey",
     isDisabled: false,
 };
+export var WithEndIcon = Template.bind({});
+WithEndIcon.args = {
+    label: "Ouvrir le lien",
+    endIcon: "allaw-icon-external-link",
+    variant: false,
+    color: "bleu-allaw",
+};
+export var WithBothIcons = Template.bind({});
+WithBothIcons.args = {
+    label: "Télécharger",
+    startIcon: "allaw-icon-download",
+    endIcon: "allaw-icon-chevron-right",
+    variant: false,
+    color: "noir",
+};
 export var Disabled = Template.bind({});
 Disabled.args = {
     label: "Bouton désactivé",

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

@@ -1,18 +1,32 @@
 import React from "react";
+interface ImageConfig {
+    url: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    padding?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
 export interface ModalProps {
     show: boolean;
     title: string;
     description: string;
     confirmLabel: string;
-    cancelLabel: string;
+    cancelLabel?: string;
     onConfirm: () => void;
     onCancel: () => void;
     isDanger?: boolean;
     confirmIconName?: string;
+    imageConfig?: ImageConfig;
     verticalOffset?: {
         top?: number;
         bottom?: number;
     };
+    horizontalOffset?: {
+        left?: number;
+        right?: number;
+    };
 }
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

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

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import style from "./Modal.module.css";
@@ -6,8 +17,9 @@ import SecondaryButton from "../../atoms/buttons/SecondaryButton";
 import Heading from "../../atoms/typography/Heading";
 import Paragraph from "../../atoms/typography/Paragraph";
 var Modal = function (_a) {
-    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, verticalOffset = _a.verticalOffset;
+    var show = _a.show, title = _a.title, description = _a.description, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, _b = _a.isDanger, isDanger = _b === void 0 ? false : _b, _c = _a.confirmIconName, confirmIconName = _c === void 0 ? "allaw-icon-check" : _c, imageConfig = _a.imageConfig, verticalOffset = _a.verticalOffset, horizontalOffset = _a.horizontalOffset;
     var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
+    var _e = useState(false), imgError = _e[0], setImgError = _e[1];
     var portalContainerRef = useRef(null);
     var modalContentRef = useRef(null);
     var isMouseDownOutsideRef = useRef(false);
@@ -18,6 +30,7 @@ var Modal = function (_a) {
             portalContainerRef.current = container;
             document.body.style.overflow = "hidden";
             setIsVisible(true);
+            setImgError(false);
         }
         else {
             setIsVisible(false);
@@ -52,6 +65,9 @@ var Modal = function (_a) {
             onCancel();
         }
     };
+    var handleImageError = function () {
+        setImgError(true);
+    };
     if (!show || !isVisible || !portalContainerRef.current)
         return null;
     var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : "", " ").concat(show ? style.modal : ""), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
@@ -59,14 +75,22 @@ var Modal = function (_a) {
             paddingBottom: (verticalOffset === null || verticalOffset === void 0 ? void 0 : verticalOffset.bottom)
                 ? "".concat(verticalOffset.bottom, "px")
                 : undefined,
+            paddingLeft: (horizontalOffset === null || horizontalOffset === void 0 ? void 0 : horizontalOffset.left)
+                ? "".concat(horizontalOffset.left, "px")
+                : undefined,
+            paddingRight: (horizontalOffset === null || horizontalOffset === void 0 ? void 0 : horizontalOffset.right)
+                ? "".concat(horizontalOffset.right, "px")
+                : undefined,
         } },
         React.createElement("div", { className: "".concat(style.modalContent, " ").concat(show ? style.modal : ""), ref: modalContentRef },
             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 })),
+            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("div", { className: style.modalButtons },
-                React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true }),
+                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 })))));
     return ReactDOM.createPortal(modalContent, portalContainerRef.current);
 };

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

@@ -275,6 +275,17 @@
   overflow-y: auto;
 }
 
+.modalImageWrapper {
+  text-align: center;
+  margin: 0 0 2.5rem 0;
+}
+
+.modalImage {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
 .modalParagraph {
   text-align: left;
 }
@@ -290,6 +301,10 @@
   flex: 1;
 }
 
+.modalButtons button:only-child {
+  width: 100%;
+}
+
 @media (max-width: 1000px) {
   .modalContent {
     z-index: 5001;

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

@@ -9,44 +9,62 @@ declare namespace _default {
             }
             let description: string;
         }
-        export namespace show {
-            let control_1: string;
+        export namespace horizontalOffset {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
             export { control_1 as control };
             let description_1: string;
             export { description_1 as description };
         }
-        export namespace title_1 {
+        export namespace show {
             let control_2: string;
             export { control_2 as control };
             let description_2: string;
             export { description_2 as description };
         }
-        export { title_1 as title };
-        export namespace description_3 {
+        export namespace title_1 {
             let control_3: string;
             export { control_3 as control };
-            let description_4: string;
-            export { description_4 as description };
+            let description_3: string;
+            export { description_3 as description };
         }
-        export { description_3 as description };
-        export namespace confirmLabel {
+        export { title_1 as title };
+        export namespace description_4 {
             let control_4: string;
             export { control_4 as control };
             let description_5: string;
             export { description_5 as description };
         }
-        export namespace cancelLabel {
+        export { description_4 as description };
+        export namespace confirmLabel {
             let control_5: string;
             export { control_5 as control };
             let description_6: string;
             export { description_6 as description };
         }
-        export namespace isDanger {
+        export namespace cancelLabel {
             let control_6: string;
             export { control_6 as control };
             let description_7: string;
             export { description_7 as description };
         }
+        export namespace imageConfig {
+            export namespace control_7 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_7 as control };
+            let description_8: string;
+            export { description_8 as description };
+        }
+        export namespace isDanger {
+            let control_8: string;
+            export { control_8 as control };
+            let description_9: string;
+            export { description_9 as description };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -63,4 +81,7 @@ export default _default;
 export const Default: any;
 export const DangerModal: any;
 export const WithLargeOffset: any;
+export const WithImageConfig: any;
+export const WithoutCancel: any;
+export const OffsetBothWays: any;
 import Modal from "./Modal";

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

@@ -1,3 +1,4 @@
+// src/components/molecules/modal/Modal.stories.jsx
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -19,11 +20,13 @@ export default {
     tags: ["autodocs"],
     argTypes: {
         verticalOffset: {
-            control: {
-                type: "object",
-            },
+            control: { type: "object" },
             description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
         },
+        horizontalOffset: {
+            control: { type: "object" },
+            description: "Décalage horizontal du modal (en px) pour éviter les éléments latéraux",
+        },
         show: {
             control: "boolean",
             description: "Affiche ou masque la modal",
@@ -42,7 +45,11 @@ export default {
         },
         cancelLabel: {
             control: "text",
-            description: "Texte du bouton secondaire",
+            description: "Texte du bouton secondaire (optionnel)",
+        },
+        imageConfig: {
+            control: { type: "object" },
+            description: "Configuration de l'image à afficher (url, alt, dimensions, styles, padding, className)",
         },
         isDanger: {
             control: "boolean",
@@ -81,15 +88,39 @@ Default.args = {
     confirmLabel: "Confirmer",
     cancelLabel: "Annuler",
     isDanger: false,
-    verticalOffset: {
-        top: 64,
-        bottom: 0,
+    verticalOffset: { top: 64, bottom: 0 },
+    horizontalOffset: { left: 0, right: 0 },
+    imageConfig: {
+        url: "https://cdn.iconscout.com/icon/free/png-512/free-checkmark-icon-download-in-svg-png-gif-file-formats--done-approved-check-tick-user-interface-pack-icons-1502470.png?f=webp&w=512",
+        alt: "Checkmark",
+        width: 64,
+        height: 64,
+        padding: "0px, 0px, 250px, 300px",
+        className: "",
+        style: {
+            backgroundColor: "#ffffff",
+        },
     },
 };
 export var DangerModal = Template.bind({});
 DangerModal.args = __assign(__assign({}, Default.args), { title: "Attention", description: "Cette action est irréversible. Voulez-vous continuer ?", confirmLabel: "Supprimer", isDanger: true });
 export var WithLargeOffset = Template.bind({});
-WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: {
-        top: 120,
-        bottom: 80,
-    } });
+WithLargeOffset.args = __assign(__assign({}, Default.args), { verticalOffset: { top: 120, bottom: 80 } });
+export var WithImageConfig = Template.bind({});
+WithImageConfig.args = __assign(__assign({}, Default.args), { title: "Image personnalisée", description: "Cette modal affiche une image avec dimensions et styles personnalisés.", imageConfig: {
+        url: Default.args.imageConfig.url,
+        alt: "Custom checkmark",
+        width: 200,
+        height: 200,
+        padding: "24px",
+        className: "border-circle",
+        style: {
+            border: "4px dashed #007bff",
+            borderRadius: "50%",
+            backgroundColor: "#e9f5ff",
+        },
+    }, confirmLabel: "Valider", cancelLabel: "Annuler" });
+export var WithoutCancel = Template.bind({});
+WithoutCancel.args = __assign(__assign({}, Default.args), { title: "Information", description: "Cette action a été effectuée avec succès.", confirmLabel: "OK", cancelLabel: undefined });
+export var OffsetBothWays = Template.bind({});
+OffsetBothWays.args = __assign(__assign({}, Default.args), { title: "Modal avec décalages", description: "Décalages verticaux et horizontaux appliqués.", verticalOffset: { top: 100, bottom: 50 }, horizontalOffset: { left: 80, right: 80 } });

package/package.json

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