@axa-fr/design-system-slash-react 0.2.0-beta.278

package/dist/List/List.stories.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import arrow from "@material-symbols/svg-400/outlined/arrow_right.svg";
+import trash from "@material-symbols/svg-400/outlined/delete.svg";
+import sync from "@material-symbols/svg-400/outlined/sync-fill.svg";
+import { Svg } from "../Svg";
+import { List } from "./List";
+const meta = {
+    title: "Client/Components/List",
+    component: List,
+};
+export default meta;
+export const Default = {
+    name: "List",
+    render: (args) => _jsx(List, { ...args }),
+    args: {
+        children: [
+            _jsx("div", { children: _jsx("span", { children: "Pr\u00E9nom NOM" }) }, "list-item-1"),
+            _jsx("div", { children: _jsx("span", { children: "nom.pr\u00E9nom@mail.fr" }) }, "list-item-2"),
+            _jsxs("div", { style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                }, children: [_jsx(Svg, { src: sync }), _jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                        }, children: [_jsx("span", { children: "Modifier le profil" }), _jsx(Svg, { src: arrow })] })] }, "list-item-3"),
+            _jsx("div", { style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: "4rem",
+                }, children: _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: "0.5rem",
+                    }, children: [_jsx(Svg, { src: trash }), _jsx("span", { children: "Supprimer le profil" })] }) }, "list-element-3"),
+        ],
+        classModifier: "",
+    },
+    argTypes: {
+        classModifier: {
+            options: ["", "large"],
+            control: { type: "select" },
+            defaultValue: "",
+        },
+    },
+};

package/dist/List/__tests__/List.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/List/__tests__/List.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { List } from "../List";
+describe("List", () => {
+    it("should render children", () => {
+        const children = _jsx("div", { children: "Child 1" });
+        render(_jsx(List, { children: children }));
+        expect(screen.getByRole("list")).toHaveClass("af-list");
+        expect(screen.getByText("Child 1")).toBeInTheDocument();
+        expect(screen.queryByRole("separator")).toBeNull();
+    });
+    it("should render with empty children", () => {
+        const children = undefined;
+        render(_jsx(List, { children: children }));
+        expect(screen.getByRole("list")).toHaveClass("af-list");
+        expect(screen.queryByRole("separator")).toBeNull();
+    });
+    it("should render multiple children with separators", () => {
+        const children = [
+            _jsx("div", { children: "Child 1" }, "1"),
+            _jsx("div", { children: "Child 2" }, "2"),
+            _jsx("div", { children: "Child 3" }, "3"),
+        ];
+        render(_jsx(List, { children: children }));
+        expect(screen.getByText("Child 1")).toBeInTheDocument();
+        expect(screen.getByText("Child 2")).toBeInTheDocument();
+        expect(screen.getByText("Child 3")).toBeInTheDocument();
+        expect(screen.getAllByRole("separator")).toHaveLength(2);
+    });
+});

package/dist/List/index.d.ts

@@ -0,0 +1 @@
+export { List } from "./List";

package/dist/List/index.js

@@ -0,0 +1 @@
+export { List } from "./List";

package/dist/Loader/Client/Loader.d.ts

@@ -0,0 +1,11 @@
+import "@axa-fr/design-system-slash-css/dist/Loader/Loader.client.scss";
+import { ComponentPropsWithRef } from "react";
+type Props = ComponentPropsWithRef<"input"> & {
+    size: number;
+    border: number;
+};
+declare const Loader: {
+    ({ size, border }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Loader };

package/dist/Loader/Client/Loader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Loader/Loader.client.scss";
+const Loader = ({ size = 60, border = 5 }) => (_jsx("div", { className: "af-loader__container", style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        border: `${border}px solid #f3f3f3`,
+        borderTop: `${border}px solid #00008f`,
+    }, children: _jsx("div", { className: "af-loader__container-spin", "aria-hidden": "true" }) }));
+Loader.displayName = "Loader";
+export { Loader };

package/dist/Loader/Client/Loader.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof Loader>;
+export declare const LoaderStory: Story;

package/dist/Loader/Client/Loader.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from "./Loader";
+const meta = {
+    component: Loader,
+    title: "Client/Components/Loader",
+};
+export default meta;
+export const LoaderStory = {
+    name: "Loader",
+    render: ({ ...args }) => _jsx(Loader, { ...args }),
+    args: {
+        size: 60,
+        border: 5,
+    },
+};

package/dist/Loader/Client/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from "./Loader";

package/dist/Loader/Client/index.js

@@ -0,0 +1 @@
+export { Loader } from "./Loader";

package/dist/ModalAgent/BooleanModal.d.ts

@@ -0,0 +1,15 @@
+import React, { type ReactNode, type Ref } from "react";
+import { type HeaderProps } from "./components/Header";
+export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & HeaderProps & {
+    onSubmit: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onCancel: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    id: string;
+    children: ReactNode;
+    submitTitle?: string;
+    cancelTitle?: string;
+    className?: string;
+    classModifier?: string;
+    ref?: Ref<HTMLDialogElement>;
+};
+declare const BooleanModal: ({ children, title, submitTitle, cancelTitle, className, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }: BooleanModalProps) => import("react/jsx-runtime").JSX.Element;
+export { BooleanModal };

package/dist/ModalAgent/BooleanModal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal, getComponentClassName } from "../agent";
+import { Body } from "./components/Body";
+import { Footer } from "./components/Footer";
+import { Header } from "./components/Header";
+const defaultClassName = "af-modal";
+const BooleanModal = ({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ...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 })] })] }));
+};
+export { BooleanModal };

package/dist/ModalAgent/Modal.d.ts

@@ -0,0 +1,11 @@
+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;
+    children: ReactNode;
+    classModifier?: string;
+    ref?: React.Ref<HTMLDialogElement>;
+};
+declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { Modal };

package/dist/ModalAgent/Modal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../agent";
+const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, ...props }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal");
+    return (_jsx("dialog", { "aria-describedby": 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 }) }) }));
+});
+Modal.displayName = "Modal";
+export { Modal };

package/dist/ModalAgent/Modal.stories.d.ts

@@ -0,0 +1,31 @@
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.agent.scss";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactElement, ReactNode } from "react";
+import { BooleanModal } from "./BooleanModal";
+import { Modal } from "./Modal";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type DefaultModalStoryProps = Omit<React.ComponentProps<typeof Modal>, "children"> & {
+    children: string;
+    bodyContent: string;
+    cancelButtonText: string;
+    saveButtonText: string;
+};
+type TDefaultModalStory = StoryObj<DefaultModalStoryProps>;
+export declare const DefaultModalStory: TDefaultModalStory;
+type CustomTitleModalStoryProps = Omit<React.ComponentProps<typeof Modal>, "title" | "children"> & {
+    title: ReactNode;
+    children: string;
+    bodyContent: string;
+    cancelButtonText: string;
+    saveButtonText: string;
+};
+type TCustomTitleModalStory = StoryObj<CustomTitleModalStoryProps>;
+export declare const CustomTitleModalStory: TCustomTitleModalStory;
+type BooleanModalStoryProps = React.ComponentProps<typeof BooleanModal> & {
+    bodyContent: ReactElement;
+    cancelButtonText: string;
+    saveButtonText: string;
+};
+type TBooleanModalStory = StoryObj<BooleanModalStoryProps>;
+export declare const BooleanModalStory: TBooleanModalStory;

package/dist/ModalAgent/Modal.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.agent.scss";
+import { BooleanModal } from "./BooleanModal";
+import { Modal } from "./Modal";
+import { Body } from "./components/Body";
+import { Footer } from "./components/Footer";
+import { Header } from "./components/Header";
+import { HeaderBase } from "./components/HeaderBase";
+const MODIFIERS = [
+    { label: "Default", value: "" },
+    { label: "Large (lg)", value: "lg" },
+    { label: "Small (sm)", value: "sm" },
+];
+const meta = {
+    title: "Agent/Components/Modal",
+    component: Modal,
+    parameters: {
+        options: {},
+    },
+};
+export default meta;
+export const DefaultModalStory = {
+    name: "Default Modal",
+    render: ({ bodyContent, cancelButtonText, saveButtonText, ...args }) => {
+        const selectClassModifier = MODIFIERS.find((m) => m.label === args.classModifier) ?? MODIFIERS[0];
+        return (_jsxs(Modal, { ...args, classModifier: selectClassModifier.value, onOutsideTap: () => { }, children: [_jsx(Header, { title: args.title, onCancel: () => { } }), _jsx(Body, { children: _jsx("p", { children: bodyContent }) }), _jsxs(Footer, { children: [selectClassModifier.value !== "sm" && (_jsx("button", { className: "btn af-btn af-btn--reverse", type: "button", children: cancelButtonText })), _jsx("button", { className: "btn af-btn", type: "button", children: saveButtonText })] })] }));
+    },
+    args: {
+        open: true,
+        title: "Modal title",
+        bodyContent: 'Voici une version avec un header classique Modal.Header. Un classModifier "lg" a été mis pour montrer une version plus large d\'une modale. Il est existe également un modifier "sm", pour les modales plus petites. Mais il est possible d\'ajouter son propre modifier pour personnaliser selon ses besoins avec un peu de CSS.',
+        cancelButtonText: "Annuler",
+        saveButtonText: "Valider",
+        classModifier: MODIFIERS[0].label,
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS.map((m) => m.label),
+            control: { type: "radio" },
+        },
+    },
+};
+export const CustomTitleModalStory = {
+    name: "Custom Title Modal",
+    render: ({ bodyContent, cancelButtonText, saveButtonText, ...args }) => {
+        const selectClassModifier = MODIFIERS.find((m) => m.label === args.classModifier) ?? MODIFIERS[0];
+        return (_jsx("div", { children: _jsxs(Modal, { ...args, title: undefined, classModifier: selectClassModifier.value, onOutsideTap: () => { }, children: [_jsx(HeaderBase, { id: "headerId", children: args.title }), _jsx(Body, { children: _jsx("p", { children: bodyContent }) }), _jsxs(Footer, { children: [selectClassModifier.value !== "sm" && (_jsx("button", { className: "btn af-btn af-btn--reverse", type: "button", children: cancelButtonText })), _jsx("button", { className: "btn af-btn", type: "button", children: saveButtonText })] })] }) }));
+    },
+    args: {
+        open: true,
+        title: (_jsxs("p", { children: ["Ici je contr\u00F4le compl\u00E8tement", _jsx("b", { children: " le contenu" })] })),
+        bodyContent: 'Voici une version avec un header customisé à l\'aide du composant Modal.HeaderBase. Un classModifier "lg" a été mis pour montrer une version plus large d\'une modale. Il est existe également un modifier "sm", pour les modales plus petites. Mais il est possible d\'ajouter son propre modifier pour personnaliser selon ses besoins avec un peu de CSS.',
+        cancelButtonText: "Annuler",
+        saveButtonText: "Valider",
+        classModifier: MODIFIERS[0].label,
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS.map((m) => m.label),
+            control: { type: "radio" },
+        },
+    },
+};
+export const BooleanModalStory = {
+    name: "Boolean Modal",
+    render: ({ classModifier, ...args }) => {
+        const selectClassModifier = MODIFIERS.find((m) => m.label === classModifier) ?? MODIFIERS[0];
+        return (_jsx(BooleanModal, { classModifier: selectClassModifier.value, ...args, onCancel: () => { }, children: args.bodyContent }));
+    },
+    args: {
+        open: true,
+        title: "Boolean Modal title",
+        bodyContent: (_jsx("p", { children: "Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo in aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea eu laborum culpa laboris. Labore labore irure ipsum consequat enim officia anim ipsum aliqua excepteur qui sint. Duis sint do culpa adipisicing dolor adipisicing ea dolore aute nisi quis ullamco aliquip occaecat. Aute ut mollit amet." })),
+        cancelTitle: "Annuler",
+        submitTitle: "Valider",
+        classModifier: MODIFIERS[0].label,
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS.map((m) => m.label),
+            control: { type: "radio" },
+        },
+    },
+};

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

@@ -0,0 +1,5 @@
+export type BodyProps = React.HTMLAttributes<HTMLDivElement> & {
+    classModifier?: string;
+};
+declare const Body: ({ children, className, classModifier, ...otherProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export { Body };

package/dist/ModalAgent/components/Body.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../../agent";
+const Body = ({ children, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__body");
+    return (_jsx("section", { className: componentClassName, ...otherProps, children: children }));
+};
+export { Body };

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

@@ -0,0 +1,5 @@
+export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    classModifier?: string;
+};
+declare const Footer: ({ classModifier, className, ...rest }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export { Footer };

package/dist/ModalAgent/components/Footer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../../agent";
+const Footer = ({ classModifier, className, ...rest }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__footer");
+    return _jsx("footer", { ...rest, className: componentClassName });
+};
+export { Footer };

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

@@ -0,0 +1,10 @@
+import type { MouseEventHandler } from "react";
+export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    title?: string;
+    classModifier?: string;
+    closeButtonAriaLabel?: string;
+};
+declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export { Header };

package/dist/ModalAgent/components/Header.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../../agent";
+const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, ...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" }) })] }));
+};
+export { Header };

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

@@ -0,0 +1,5 @@
+export type HeaderBaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    classModifier?: string;
+};
+declare const HeaderBase: ({ classModifier, className, ...rest }: HeaderBaseProps) => import("react/jsx-runtime").JSX.Element;
+export { HeaderBase };

package/dist/ModalAgent/components/HeaderBase.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../../agent";
+const HeaderBase = ({ classModifier, className, ...rest }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
+    return _jsx("header", { ...rest, className: componentClassName });
+};
+export { HeaderBase };

package/dist/ModalAgent/index.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.agent.scss";
+export { BooleanModal } from "./BooleanModal";
+export { Modal } from "./Modal";
+export { Body as ModalBody } from "./components/Body";
+export { Footer as ModalFooter } from "./components/Footer";
+export { Header as ModalHeader } from "./components/Header";
+export { HeaderBase as ModalHeaderBase } from "./components/HeaderBase";

package/dist/ModalAgent/index.js

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.agent.scss";
+export { BooleanModal } from "./BooleanModal";
+export { Modal } from "./Modal";
+export { Body as ModalBody } from "./components/Body";
+export { Footer as ModalFooter } from "./components/Footer";
+export { Header as ModalHeader } from "./components/Header";
+export { HeaderBase as ModalHeaderBase } from "./components/HeaderBase";

package/dist/ModalClient/Modal.client.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren, ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.client.scss";
+export type ButtonAction = {
+    text: string;
+    callback: () => void;
+};
+type ModalProps = {
+    isOpen: boolean;
+    hasCloseBtn?: boolean;
+    onClose?: () => void;
+    title: string;
+    subtitle?: string;
+    iconTitle?: ReactNode;
+    fullWidthButtons?: boolean;
+    actions?: {
+        primary?: ButtonAction;
+        secondary?: ButtonAction;
+        tertiary?: ButtonAction;
+    };
+};
+export declare const Modal: ({ isOpen, hasCloseBtn, onClose, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ModalClient/Modal.client.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from "react";
+import close from "@material-symbols/svg-400/outlined/close.svg";
+import { ButtonClient as Button, Variants as ButtonVariants, } from "../Button/Button.client";
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.client.scss";
+import { Svg } from "../Svg";
+export const Modal = ({ isOpen, hasCloseBtn = true, onClose, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
+    const [isModalOpen, setIsModalOpen] = useState(isOpen);
+    const modalRef = useRef(null);
+    const idTitle = useId();
+    const idContent = useId();
+    useEffect(() => {
+        setIsModalOpen(isOpen);
+    }, [isOpen]);
+    useEffect(() => {
+        const modalElement = modalRef.current;
+        if (!modalRef.current) {
+            return;
+        }
+        if (isModalOpen) {
+            document.body.style.overflow = "hidden";
+            modalElement.showModal();
+        }
+        else {
+            document.body.style.overflow = "inherit";
+            modalElement.close();
+        }
+    }, [isModalOpen]);
+    const handleCloseModal = () => {
+        onClose?.();
+        setIsModalOpen(false);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            handleCloseModal();
+        }
+    };
+    return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleCloseModal(), className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseBtn && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: actions?.primary.callback, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, children: actions?.tertiary.text }))] }))] })] }));
+};

package/dist/ModalClient/Modal.client.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ReactNode } from "react";
+import { ButtonAction, Modal } from "./Modal.client";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof Modal>, "isOpen" | "hasCloseBtn" | "onClose" | "title" | "iconTitle" | "fullWidthButtons" | "actions"> & {
+    isOpen: boolean;
+    hasCloseBtn?: boolean;
+    onClose?: () => void;
+    title: string;
+    iconTitle?: ReactNode;
+    fullWidthButtons?: boolean;
+    actions?: {
+        primary?: ButtonAction;
+        secondary?: ButtonAction;
+        tertiary?: ButtonAction;
+    };
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;

package/dist/ModalClient/Modal.client.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import bluetoothAudio from "@material-symbols/svg-400/outlined/bluetooth_searching.svg";
+import { Modal } from "./Modal.client";
+import { Svg } from "../Svg";
+const meta = {
+    title: "Client/Components/Modal",
+    component: Modal,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const Container = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setIsOpen(true), children: "open modal" }), _jsx(Modal, { ...props, isOpen: isOpen, onClose: () => setIsOpen(false), actions: {
+                    primary: { text: "Save", callback: () => setIsOpen(false) },
+                    secondary: { text: "Cancel", callback: () => setIsOpen(false) },
+                    tertiary: { text: "Reset", callback: () => setIsOpen(false) },
+                } })] }));
+};
+export const Playground = {
+    name: "Modal",
+    render: (args) => _jsx(Container, { ...args }),
+    args: {
+        hasCloseBtn: true,
+        title: "Modal title",
+        children: "Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.",
+        iconTitle: _jsx(Svg, { src: bluetoothAudio }),
+        subtitle: "Info complémentaire",
+        fullWidthButtons: false,
+    },
+};

package/dist/Pagination/Pagination.client.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-slash-css/dist/Pagination/Pagination.client.scss";
+import { ComponentPropsWithoutRef } from "react";
+type PaginationProps = {
+    numberPage: number;
+    onChangePage: (page: number) => void;
+    defaultPage?: number;
+} & ComponentPropsWithoutRef<"div">;
+export declare const Pagination: ({ numberPage, onChangePage, defaultPage, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/Pagination.client.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Pagination/Pagination.client.scss";
+import { useEffect, useState } from "react";
+import { PaginationMobile } from "./PaginationMobile.client";
+import { PaginationDesktop } from "./PaginationDesktop.client";
+import { useIsSmallScreen } from "../utilities/hooks/useIsSmallScreen";
+const BREAKPOINT_SMALL = 1024;
+export const Pagination = ({ numberPage, onChangePage, defaultPage, }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT_SMALL);
+    const [currentPage, setCurrentPage] = useState(defaultPage || 1);
+    useEffect(() => {
+        onChangePage(currentPage);
+    }, [currentPage, onChangePage]);
+    return (_jsx("div", { className: "af-container-pagination", children: isMobile ? (_jsx(PaginationMobile, { numberPage: numberPage, currentPage: currentPage, setCurrentPage: setCurrentPage })) : (_jsx(PaginationDesktop, { numberPage: numberPage, currentPage: currentPage, setCurrentPage: setCurrentPage })) }));
+};

package/dist/Pagination/Pagination.client.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./Pagination.client";
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof Pagination>, "numberPage"> & {
+    numberPage: number;
+    onChangePage: (page: number) => void;
+    defaultPage?: number;
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;

package/dist/Pagination/Pagination.client.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from "./Pagination.client";
+const meta = {
+    component: Pagination,
+    title: "Client/Components/Pagination",
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Playground = {
+    name: "Pagination",
+    render: ({ numberPage, onChangePage, defaultPage }) => (_jsx(Pagination, { numberPage: numberPage, defaultPage: defaultPage, onChangePage: onChangePage })),
+    args: {
+        numberPage: 20,
+        defaultPage: 2,
+        onChangePage: () => { },
+    },
+};

package/dist/Pagination/PaginationDesktop.client.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-slash-css/dist/Pagination/PaginationDesktop.client.scss";
+import { ComponentPropsWithoutRef } from "react";
+type PropsPaginationDesktop = {
+    numberPage: number;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+} & ComponentPropsWithoutRef<"div">;
+export declare const PaginationDesktop: ({ numberPage, currentPage, setCurrentPage, }: PropsPaginationDesktop) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/PaginationDesktop.client.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Pagination/PaginationDesktop.client.scss";
+const SEVEN_PAGE = 7;
+const LAST_FOUR_PAGE = 4;
+const FIVE_PAGE = 5;
+export const PaginationDesktop = ({ numberPage, currentPage, setCurrentPage, }) => {
+    const pages = Array.from({ length: numberPage }, (_, index) => index + 1);
+    let filteredNumbers = [...pages];
+    let classNamePagination = "";
+    if (numberPage > SEVEN_PAGE) {
+        if (currentPage < FIVE_PAGE) {
+            classNamePagination = "first";
+            filteredNumbers = [...pages.slice(0, FIVE_PAGE), pages[pages.length - 1]];
+        }
+        else if (currentPage > numberPage - LAST_FOUR_PAGE) {
+            classNamePagination = "last";
+            filteredNumbers = [pages[0], ...pages.slice(-FIVE_PAGE)];
+        }
+        else {
+            classNamePagination = "between";
+            filteredNumbers = [
+                pages[0],
+                currentPage - 1,
+                currentPage,
+                currentPage + 1,
+                pages[pages.length - 1],
+            ];
+        }
+    }
+    return (_jsx("div", { className: "af-pagination-desktop", children: _jsx("ul", { className: classNamePagination, children: filteredNumbers.map((page) => (_jsx("li", { "aria-label": `page-${page}`, "aria-current": currentPage === page ? "page" : undefined, children: _jsx("button", { type: "button", onClick: () => setCurrentPage(page), children: page }) }, `page-${page}`))) }) }));
+};