@axa-fr/design-system-slash-react 1.2.1-alpha.41 → 1.2.1-alpha.44

package/dist/ModalAgent/BooleanModal.d.ts

@@ -1,15 +1,40 @@
-import React, { type ReactNode, type Ref } from "react";
+import React, { type ReactNode } from "react";
 import { type HeaderProps } from "./components/Header";
-export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & HeaderProps & {
+import { ModalProps } from "./Modal";
+export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & Omit<HeaderProps, "children" | "onCancel" | "title"> & Pick<ModalProps, "size"> & {
+    /**
+     * Title of the modal, displayed in the header.
+     * Also used as the `aria-label` of the <dialog> element for accessibility.
+     */
+    title: string;
+    /**
+     * Callback function called when the modal is submitted.
+     * @param event The event that triggered the submission, can be a mouse click or a keyboard event.
+     * @returns void
+     */
     onSubmit: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback function called when the modal is cancelled.
+     * @param event The event that triggered the cancellation, can be a mouse click or a keyboard event.
+     * @returns void
+     */
     onCancel: (event: React.MouseEvent | React.KeyboardEvent) => void;
     id: string;
     children: ReactNode;
+    /**
+     * Text content of the submit button.
+     */
     submitTitle?: string;
+    /**
+     * Text content of the cancel button.
+     */
     cancelTitle?: string;
     className?: string;
+    /**
+     * @deprecated Use `size` prop instead.
+     * Class modifier for the modal. Can be used to apply custom styles.
+     */
     classModifier?: string;
-    ref?: Ref<HTMLDialogElement>;
 };
 declare const BooleanModal: React.ForwardRefExoticComponent<Omit<BooleanModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
 export { BooleanModal };

package/dist/ModalAgent/BooleanModal.js

@@ -7,7 +7,7 @@ import { Header } from "./components/Header";
 const defaultClassName = "af-modal";
 const BooleanModal = forwardRef(({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { classModifier: "reverse", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, children: submitTitle })] })] }));
+    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { classModifier: "reverse", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, classModifier: "success", children: submitTitle })] })] }));
 });
 BooleanModal.displayName = "BooleanModal";
 export { BooleanModal };

package/dist/ModalAgent/Modal.d.ts

@@ -1,10 +1,24 @@
 import { type ReactNode } from "react";
 export type ModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
-    className?: string;
-    title?: string;
-    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    size?: "lg" | "sm";
+    /**
+     * The content of the modal.
+     */
     children: ReactNode;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * `aria-label` of the modal, used for accessibility.
+     */
+    title?: string;
+    className?: string;
+    /**
+     * @deprecated Use `size` prop instead.
+     * Class modifier for the modal. Can be used to apply custom styles.
+     */
     classModifier?: string;
+    /**
+     * Size of the modal. Overrides classModifier if set
+     */
     ref?: React.Ref<HTMLDialogElement>;
 };
 declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/ModalAgent/Modal.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getComponentClassName } from "..";
-const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, ...props }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal");
+const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, size, ...props }, ref) => {
+    // If size is set to 'lg' or 'sm', use it as the classModifier, otherwise use the provided classModifier
+    let effectiveClassModifier;
+    if (size) {
+        if (classModifier && classModifier !== "lg" && classModifier !== "sm") {
+            effectiveClassModifier = `${size} ${classModifier}`;
+        }
+        else {
+            effectiveClassModifier = size;
+        }
+    }
+    else {
+        effectiveClassModifier = classModifier;
+    }
+    const componentClassName = getComponentClassName(className, effectiveClassModifier, "af-modal");
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));

package/dist/ModalAgent/components/Header.d.ts

@@ -1,10 +1,30 @@
-import type { MouseEventHandler } from "react";
+import type { MouseEventHandler, ReactNode } from "react";
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Text displayed in the header.
+     * @deprecated Use `children` instead to allow for more flexible content.
+     */
     title?: string;
-    classModifier?: string;
+    /**
+     * Text displayed in the header, overrides `title` if both are set.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when the close button is clicked.
+     */
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Aria label for the close button, used for accessibility.
+     */
     closeButtonAriaLabel?: string;
+    /**
+     * Class modifier for the header. Can be used to apply custom styles.
+     */
+    classModifier?: string;
+    /**
+     * Prop to override the style of the header. Will totally remove the default styles.
+     */
+    className?: string;
 };
-declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/ModalAgent/components/Header.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../..";
-const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, ...props }) => {
+import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
+import { getComponentClassName, Svg } from "../..";
+const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, children, ...props }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
-    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx("span", { className: "glyphicon glyphicon-close", "aria-hidden": "true" }) })] }));
+    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: children ?? title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx(Svg, { src: closeIcon }) })] }));
 };
 export { Header };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.41",
+  "version": "1.2.1-alpha.44",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.41",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.44",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },