allaw-ui 3.1.4 → 3.1.6

package/dist/components/atoms/checkboxes/Checkbox.js

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import "./Checkbox.css";
 import "../../../styles/global.css";
 var Checkbox = function (_a) {
-    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, _d = _a.size, size = _d === void 0 ? "default" : _d, _e = _a.style, style = _e === void 0 ? "default" : _e, _f = _a.markType, markType = _f === void 0 ? "cross" : _f;
-    var _g = useState(checked), isChecked = _g[0], setIsChecked = _g[1];
+    var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, color = _a.color, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.style, style = _d === void 0 ? "default" : _d, _e = _a.markType, markType = _e === void 0 ? "cross" : _e;
+    var _f = useState(checked), isChecked = _f[0], setIsChecked = _f[1];
     var handleClick = function (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -14,6 +14,7 @@ var Checkbox = function (_a) {
         }
     };
     var checkboxColor = style === "light" ? "light" : color;
-    return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat("checkbox-".concat(checkboxColor), " ").concat(size === "small" ? "checkbox-small" : "", " ").concat(style === "light" ? "checkbox-light" : "", " ").concat(style === "form" ? "checkbox-style-form" : ""), onClick: handleClick, "data-cy": "checkbox-".concat(id) }, isChecked && (React.createElement("span", { className: "checkbox-icon ".concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check", " ").concat("checkbox-icon-".concat(checkboxColor), " ").concat(style === "light" ? "checkbox-icon-light" : "") }))));
+    var colorClass = checkboxColor ? "checkbox-".concat(checkboxColor) : "";
+    return (React.createElement("button", { id: id, className: "checkbox ".concat(isChecked ? "checkbox-pressed" : "checkbox-default", " ").concat(colorClass, " ").concat(size === "small" ? "checkbox-small" : "", " ").concat(style === "light" ? "checkbox-light" : "", " ").concat(style === "form" ? "checkbox-style-form" : ""), onClick: handleClick, "data-cy": "checkbox-".concat(id) }, isChecked && (React.createElement("span", { className: "checkbox-icon ".concat(markType === "cross" ? "allaw-icon-close" : "allaw-icon-check", " ").concat(colorClass, " ").concat(style === "light" ? "checkbox-icon-light" : "") }))));
 };
 export default Checkbox;

package/dist/components/molecules/checkboxForm/CheckboxForm.js

@@ -10,14 +10,17 @@ var CheckboxForm = function (_a) {
             onChange(checked);
         }
     };
-    // Ne pas appliquer de couleur par défaut si style="form"
-    var defaultColor = style === "form" ? undefined : "noir";
-    // Appliquer la couleur light si style="light", sinon utiliser la couleur fournie ou la couleur par défaut
-    var checkboxColor = style === "light" ? "light" : color || defaultColor;
-    return (React.createElement("div", { className: "checkbox-form checkbox-form-".concat(checkboxColor || "noir", " ").concat(size === "small" ? "checkbox-form-small" : "") },
+    // Déterminer la couleur à utiliser
+    var checkboxColor = style === "light"
+        ? "light"
+        : style === "form"
+            ? undefined
+            : color || "noir";
+    var colorClass = checkboxColor ? "checkbox-form-".concat(checkboxColor) : "";
+    return (React.createElement("div", { className: "checkbox-form ".concat(colorClass, " ").concat(size === "small" ? "checkbox-form-small" : "") },
         React.createElement(Checkbox, { id: checkboxId, checked: checked, onChange: handleCheckboxChange, color: checkboxColor, size: size, style: style, markType: markType }),
         label && (React.createElement("label", { htmlFor: checkboxId, className: "checkbox-form-label-container" },
-            React.createElement(Paragraph, { variant: style === "form" ? "medium" : "semiBold", color: color || defaultColor, text: React.createElement(React.Fragment, null,
+            React.createElement(Paragraph, { variant: style === "form" ? "medium" : "semiBold", color: color || (style === "form" ? undefined : "noir"), text: React.createElement(React.Fragment, null,
                     React.createElement("span", null, label),
                     linkText && linkUrl && (React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "checkbox-form-link", onClick: onLinkClick }, linkText))), size: size }),
             isRequired && (React.createElement("span", { className: "checkbox-form-required" },

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ModalProps {
+    show: boolean;
+    title: string;
+    description: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isDanger?: boolean;
+    verticalOffset?: {
+        top?: number;
+        bottom?: number;
+    };
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import style from "./Modal.module.css";
+import PrimaryButton from "../../atoms/buttons/PrimaryButton";
+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, verticalOffset = _a.verticalOffset;
+    var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
+    var portalContainerRef = useRef(null);
+    var modalContentRef = useRef(null);
+    useEffect(function () {
+        if (show) {
+            var container = document.createElement("div");
+            document.body.appendChild(container);
+            portalContainerRef.current = container;
+            document.body.classList.add("modal-open");
+            setIsVisible(true);
+        }
+        else {
+            setIsVisible(false);
+            if (portalContainerRef.current &&
+                document.body.contains(portalContainerRef.current)) {
+                document.body.removeChild(portalContainerRef.current);
+                document.body.classList.remove("modal-open");
+            }
+        }
+        return function () {
+            setIsVisible(false);
+            if (portalContainerRef.current &&
+                document.body.contains(portalContainerRef.current)) {
+                document.body.removeChild(portalContainerRef.current);
+                document.body.classList.remove("modal-open");
+            }
+        };
+    }, [show]);
+    var handleOutsideClick = function (e) {
+        if (modalContentRef.current &&
+            !modalContentRef.current.contains(e.target)) {
+            onCancel();
+        }
+    };
+    if (!show || !isVisible || !portalContainerRef.current)
+        return null;
+    var modalContent = (React.createElement("div", { className: "".concat(style.modalOverlay, " ").concat(isVisible ? style.visible : ""), onClick: handleOutsideClick, 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: style.modalContent, 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 })),
+            React.createElement("div", { className: style.modalButtons },
+                React.createElement(SecondaryButton, { label: cancelLabel, onClick: onCancel, startIconName: "allaw-icon-close", startIcon: true }),
+                React.createElement(PrimaryButton, { label: confirmLabel, variant: isDanger ? "warning" : "default", onClick: onConfirm, endIconName: "allaw-icon-check", endIcon: true })))));
+    return ReactDOM.createPortal(modalContent, portalContainerRef.current);
+};
+export default Modal;

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

@@ -0,0 +1,338 @@
+.stepper-container {
+  display: flex;
+  width: 100vw;
+  max-width: 768px;
+  padding: 2.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1001;
+  max-height: 90vh;
+  overflow: hidden;
+}
+
+.stepper-content {
+  width: 100%;
+  flex: 1;
+  margin: 20px 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
+
+.stepper-buttons.no-buttons {
+  display: none;
+}
+
+.stepper-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.secondary-button-container {
+  width: 38.2%;
+}
+
+.secondary-button-container.hidden,
+.primary-button-container.hidden {
+  display: none;
+}
+
+.primary-button-container {
+  width: 61.8%;
+}
+
+.stepper-buttons .primary-button-container:only-child {
+  width: 100%;
+}
+
+.stepper-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.stepper-overlay.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Classe pour bloquer le scroll du body */
+body.stepper-open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 1000px) {
+  .stepper-container {
+    z-index: 5001;
+  }
+}
+
+@media (max-width: 800px) {
+  .stepper-container {
+    height: 96dvh;
+    position: fixed;
+    bottom: 0;
+    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;
+    z-index: 5001;
+  }
+}
+
+.stepper-container.modal-active {
+  position: relative;
+}
+
+.stepper-container.modal-active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  filter: brightness(50%);
+  z-index: 1000;
+  pointer-events: none;
+  border-radius: 16px;
+}
+
+.confirmation-modal {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1100;
+}
+
+.confirmation-modal-content {
+  background: #fff;
+  border-radius: 16px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.confirmation-modal-heading-wrapper {
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: start;
+}
+
+.confirmation-modal-paragraph-wrapper {
+  margin-bottom: 2.5rem;
+}
+
+.confirmation-modal-paragraph {
+  text-align: left;
+}
+
+.confirmation-modal-buttons {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.confirmation-modal-buttons button {
+  flex: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    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;
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.modalOverlay.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.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;
+  display: flex;
+  flex-direction: column;
+}
+
+.modalHeadingWrapper {
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: start;
+}
+
+.modalParagraphWrapper {
+  margin-bottom: 2.5rem;
+  overflow-y: auto;
+}
+
+.modalParagraph {
+  text-align: left;
+}
+
+.modalButtons {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: auto;
+}
+
+.modalButtons button {
+  flex: 1;
+}
+
+/* Classe pour bloquer le scroll du body */
+:global(body.modal-open) {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 1000px) {
+  .modalContent {
+    z-index: 5001;
+  }
+}
+
+@media (max-width: 800px) {
+  .modalContent {
+    height: 96dvh;
+    position: fixed;
+    bottom: 0;
+    justify-content: flex-start;
+    padding: 2rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    max-height: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .modalOverlay {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    z-index: 5001;
+    align-items: flex-end;
+  }
+}

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

@@ -0,0 +1,66 @@
+declare namespace _default {
+    export let title: string;
+    export { Modal as component };
+    export let tags: string[];
+    export namespace argTypes {
+        export namespace verticalOffset {
+            namespace control {
+                let type: string;
+            }
+            let description: string;
+        }
+        export namespace show {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export namespace title_1 {
+            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 {
+            let control_3: string;
+            export { control_3 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        export { description_3 as description };
+        export namespace confirmLabel {
+            let control_4: string;
+            export { control_4 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        export namespace cancelLabel {
+            let control_5: string;
+            export { control_5 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        export namespace isDanger {
+            let control_6: string;
+            export { control_6 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const DangerModal: any;
+export const WithLargeOffset: any;
+import Modal from "./Modal";

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

@@ -0,0 +1,95 @@
+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, { useState } from "react";
+import { action } from "@storybook/addon-actions";
+import Modal from "./Modal";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/Modal",
+    component: Modal,
+    tags: ["autodocs"],
+    argTypes: {
+        verticalOffset: {
+            control: {
+                type: "object",
+            },
+            description: "Décalage vertical du modal (en px) pour éviter les barres de navigation",
+        },
+        show: {
+            control: "boolean",
+            description: "Affiche ou masque la modal",
+        },
+        title: {
+            control: "text",
+            description: "Titre de la modal",
+        },
+        description: {
+            control: "text",
+            description: "Description de la modal",
+        },
+        confirmLabel: {
+            control: "text",
+            description: "Texte du bouton principal",
+        },
+        cancelLabel: {
+            control: "text",
+            description: "Texte du bouton secondaire",
+        },
+        isDanger: {
+            control: "boolean",
+            description: "Applique le style d'alerte au bouton principal",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.show), isVisible = _a[0], setIsVisible = _a[1];
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: function () { return setIsVisible(true); } }, "Ouvrir la modal"),
+        React.createElement(Modal, __assign({}, args, { show: isVisible, onConfirm: function () {
+                action("Confirm clicked")();
+                setIsVisible(false);
+            }, onCancel: function () {
+                action("Cancel clicked")();
+                setIsVisible(false);
+            } }))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    show: false,
+    title: "Confirmation",
+    description: "Êtes-vous sûr de vouloir effectuer cette action ?",
+    confirmLabel: "Confirmer",
+    cancelLabel: "Annuler",
+    isDanger: false,
+    verticalOffset: {
+        top: 64,
+        bottom: 0,
+    },
+};
+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,
+    } });

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

@@ -0,0 +1,2 @@
+export { default as Modal } from "./Modal";
+export type { ModalProps } from "./Modal";

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

@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";

package/dist/index.d.ts

@@ -61,6 +61,8 @@ export type { DocumentCardProps } from "./components/molecules/documentCard/Docu
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
 export type { StepperProps } from "./components/molecules/stepper/Stepper";
+export { default as Modal } from "./components/molecules/modal/Modal";
+export type { ModalProps } from "./components/molecules/modal/Modal";
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";
 export type { CheckboxFormProps } from "./components/molecules/checkboxForm/CheckboxForm";
 export { default as ColoredCheckbox } from "./components/molecules/checkboxForm/ColoredCheckbox";

package/dist/index.js

@@ -70,6 +70,8 @@ export { default as DocumentCard } from "./components/molecules/documentCard/Doc
 export { default as EmployeeCard } from "./components/molecules/employeeCard/EmployeeCard";
 // Stepper
 export { default as Stepper } from "./components/molecules/stepper/Stepper";
+// Modal
+export { default as Modal } from "./components/molecules/modal/Modal";
 // CheckboxForm
 export { default as CheckboxForm } from "./components/molecules/checkboxForm/CheckboxForm";
 export { default as ColoredCheckbox } from "./components/molecules/checkboxForm/ColoredCheckbox";

package/package.json

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