Merge branch 'features/modal' into 'dev'

Features/modal See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!23
2025-11-30 16:53:43 +00:00
parent 3816d3a296 c2d64ed341
commit 08554d9ba6
3 changed files with 107 additions and 0 deletions
@@ -0,0 +1,23 @@
+import styles from "./modal.module.css"
+import Button from "../button/button.jsx";
+
+const Modal = ({ open, onClose, children, title }) => {
+
+    if(!open) return null;
+
+    return <div className={styles.overlay}>
+
+        <div className={styles.modal}>
+
+            {title && <h2>{title}</h2>}
+
+            {children}
+
+            <div className={styles.modalFooter}> <Button onClick={onClose}>Fermer</Button> </div>
+
+        </div>
+
+    </div>
+}
+
+export default Modal;
@@ -0,0 +1,35 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal {
+    padding: 20px 20px 20px 20px;
+    border-radius: 8px;
+    min-width: 300px;
+    max-width: 70%;
+    position: relative;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    width: fit-content;
+    border: 1px solid rgba(200, 200, 200, 0.3);
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #000;
+    outline: none;
+}
+
+.modalFooter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}
@@ -0,0 +1,49 @@
+import Modal from "../components/ui/modal/modal.jsx";
+import Button from "../components/ui/button/button.jsx";
+import { useState } from "react";
+
+export default {
+    title: 'UI/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Variable qui gère si la modal est ouverte ou fermée.',
+        },
+        children: {
+            control: Object,
+            description: 'Contenu de la modal.',
+        },
+        title: {
+            control: 'text',
+            description: 'Titre de la modal',
+        },
+        onClose: {
+            action: 'changed',
+            description: 'Fonction appelée pour fermer la modal.',
+        },
+    },
+};
+
+const Template = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div>
+            <Button onClick={() => setIsOpen(true)}>Ouvrir</Button>
+            <Modal {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+                {args.children}
+            </Modal>
+        </div>
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    title: "Hello",
+    children: <p>Lorem Ipsum...</p>,
+};