@axa-fr/design-system-look-and-feel-react 1.0.5-ci.1 → 1.0.5-ci.101

package/dist/Grid/components/MyFooter.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Footer } from "../../Layout/Footer";
-export const MyFooter = () => (_jsx(Footer, { links: [
-        {
-            link: "https://www.axa.fr/qui-sommes-nous.html",
-            text: "À propos",
-        },
-        {
-            link: "https://www.axa.fr/configuration-securite/mentions-legales.html",
-            text: "Mentions légales",
-        },
-        {
-            link: "https://www.axa.fr/configuration-securite/donnees-personnelles.html",
-            text: "Données personnelles",
-        },
-        {
-            link: "https://www.axa.fr/configuration-securite/politique-cookies.html",
-            text: "Cookies",
-        },
-    ], socialMedias: [
-        { icon: "facebook", link: "https://www.facebook.com/axafrance" },
-        { icon: "twitter", link: "https://twitter.com/AXAFrance" },
-        {
-            icon: "youtube",
-            link: "https://www.youtube.com/user/AXAFranceChaine",
-        },
-        {
-            icon: "linkedin",
-            link: "https://www.linkedin.com/company/axa-france/",
-        },
-    ], copyright: `@AXA ${new Date().getFullYear()} - Tous droits réservés`, expandLinkText: "Liens utiles" }));

package/dist/Grid/components/MyHeader.d.ts

@@ -1 +0,0 @@
-export declare const MyHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MyHeader.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import person from "@material-symbols/svg-400/outlined/person-fill.svg";
-import lock from "@material-symbols/svg-400/outlined/lock-fill.svg";
-import { Header } from "../../Layout/Header";
-import { Button, ButtonVariants, Svg } from "../..";
-export const MyHeader = () => (_jsxs(Header, { defaultActiveLink: 0, rightItem: [
-        _jsx(Button, { iconLeft: _jsx(Svg, { src: lock, fill: "#00008f" }), variant: ButtonVariants.secondary, children: "Espace Banque" }, "Banking Space Button"),
-        _jsx(Button, { iconLeft: _jsx(Svg, { src: person, fill: "#00008f" }), variant: ButtonVariants.ghost, children: "Mon Profil" }, "Profile Button"),
-    ], children: [_jsx("a", { className: "af-navbar-item__link", href: "/mes-contrats", children: "MES CONTRATS" }, "MES CONTRATS link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-avantages", children: "MES AVANTAGES" }, "MES AVANTAGES link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-documents", children: "MES DOCUMENTS" }, "MES DOCUMENTS link")] }));

package/dist/Grid/components/MyList.d.ts

@@ -1 +0,0 @@
-export declare const MyList: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MyList.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ContentItemDuo, List } from "../..";
-export const MyList = () => (_jsx(List, { classModifier: "extra-padding", children: [...Array(6).keys()].map(() => (_jsx(ContentItemDuo, { isVertical: false, isShowingDoneIcon: true, isShowingCloseIcon: false, buttonText: "En savoir plus", classModifier: "large", label: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, suscipit sint! Reiciendis, eos? Eveniet, aut qui. Autem reprehenderit", value: "R\u00E9ponse" }, crypto.randomUUID()))) }));

package/dist/Grid/components/Offsets.d.ts

@@ -1 +0,0 @@
-export declare const Offsets: () => import("react/jsx-runtime").JSX.Element[][];

package/dist/Grid/components/Offsets.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const MAX_OFFSET = 12;
-export const Offsets = () => [...Array(MAX_OFFSET).keys()].map((start) => {
-    const offset = start + 1;
-    const maxCols = MAX_OFFSET - offset + 1;
-    return [...Array(maxCols).keys()].map((col) => (_jsx("div", { className: `box box-offset box-offset-${offset}-${col + 1}` }, crypto.randomUUID())));
-});

package/dist/Grid/renderExampleForm.d.ts

@@ -1 +0,0 @@
-export declare const render: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/renderExampleForm.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MyFooter } from "./components/MyFooter";
-import { MyHeader } from "./components/MyHeader";
-import { Button, ButtonVariants, TextInput, Title } from "..";
-import { DebugGrid } from "./DebugGrid";
-function capitalizeFirstLetter(val) {
-    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
-}
-const setAttributesFields = (value, label, type = "text") => ({
-    value,
-    type,
-    name: label,
-    id: label,
-    disabled: false,
-    required: true,
-    label: `${capitalizeFirstLetter(label)} de la personne`,
-    placeholder: `Votre ${label}`,
-    description: `Saisissez un ${label}`,
-    error: `Un ${label} est obligatoire`,
-    className: "subgrid af-form__input-text",
-    helper: "Do you need help ?",
-    buttonLabel: "En savoir plus",
-});
-const FIELDS = [
-    setAttributesFields("Gomez", "nom"),
-    setAttributesFields("Samuel", "prénom"),
-    setAttributesFields("samuel.gomez@axa.fr", "email", "email"),
-    setAttributesFields("0601020304", "téléphone"),
-];
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsx("main", { className: "grid example-form", children: _jsxs("form", { className: "form", children: [_jsxs("div", { className: "form__header subgrid", children: [_jsx(Title, { children: "Mon formulaire" }), _jsx("p", { children: "Les mentions avec * sont obligatoires" })] }), _jsx("div", { className: "form__fields subgrid", children: FIELDS.map((field) => (_jsx(TextInput, { ...field, classModifier: field.error ? "error" : "" }, field.id))) }), _jsxs("div", { className: "form__actions subgrid", children: [_jsx(Button, { variant: ButtonVariants.secondary, children: "Pr\u00E9c\u00E9dent" }), _jsx(Button, { variant: ButtonVariants.primary, children: "Valider" })] })] }) }), _jsx(MyFooter, {})] }));

package/dist/Grid/renderExamplePage.d.ts

@@ -1 +0,0 @@
-export declare const render: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/renderExamplePage.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Title, TitleSize } from "../Title";
-import { Contacts } from "./components/Contacts";
-import { MainTitle } from "./components/MainTitle";
-import { MyFooter } from "./components/MyFooter";
-import { MyHeader } from "./components/MyHeader";
-import { MyList } from "./components/MyList";
-import { DebugGrid } from "./DebugGrid";
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsxs("main", { className: "grid example-page", children: [_jsx(MainTitle, {}), _jsxs("div", { className: "container-part", children: [_jsxs("div", { className: "subgrid af-left-part", children: [_jsx(Title, { size: TitleSize.L, children: "My list title" }), _jsxs("div", { className: "subgrid af-list-part", children: [_jsx(MyList, {}), _jsx(MyList, {})] })] }), _jsxs("div", { className: "subgrid af-right-part", children: [_jsx(Title, { size: TitleSize.L, children: "Contacts" }), _jsx("div", { className: "af-contacts-part subgrid", children: _jsx(Contacts, {}) })] })] })] }), _jsx(MyFooter, {})] }));

package/dist/Grid/renderWireframe.d.ts

@@ -1 +0,0 @@
-export declare const render: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/renderWireframe.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DebugGrid } from "./DebugGrid";
-import { Card } from "./components/Card";
-import { Offsets } from "./components/Offsets";
-export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsxs("main", { className: "grid", children: [_jsx("h1", { className: "box", children: "Bonjour, Samuel G." }), _jsxs("div", { className: "box box-example-1 subgrid", children: [_jsx("h2", { className: "box", children: "Mes contrats" }), [...Array(6).keys()].map((_, index) => (_jsx(Card, { title: `contrat-${index + 1}` }, crypto.randomUUID())))] }), _jsxs("div", { className: "box box-example-2 subgrid", children: [_jsx("h2", { className: "box", children: "Profil" }), _jsx(Card, { title: "Mes coordonn\u00E9es" })] }), _jsxs("div", { className: "box box-example-3 subgrid", children: [_jsx("h2", { className: "box", children: "Mes Infos" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" })] }), _jsxs("div", { className: "box box-custom", children: [_jsx("h2", { className: "box", children: "Custom" }), _jsx("div", { className: "box box-content1", children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, dolore. Ipsum commodi molestiae aut consectetur corrupti sed quos iste, nemo porro dicta necessitatibus aliquam! Ratione magni quae necessitatibus similique eos! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, dolore. Ipsum commodi molestiae aut consectetur corrupti sed quos iste, nemo porro dicta necessitatibus aliquam! Ratione magni quae necessitatibus similique eos!" }), _jsx("div", { className: "box box-content2", children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis." }), _jsx("footer", { children: "@copyright" })] }), _jsx(Offsets, {})] })] }));

package/dist/Loader/index.d.ts

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

package/dist/Loader/index.js

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

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

@@ -1,4 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { PropsWithChildren } from "react";
-import { ModalProps } from "./type";
-export declare const ModalContainer: ({ open, setIsOpen, hasCloseButton, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;

package/dist/ModalClient/Modal.container.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { useEffect, useId, useRef } from "react";
-import { createPortal } from "react-dom";
-import { Modal } from "./Modal";
-import { useModal } from "./Modal.hook";
-export const ModalContainer = ({ open, setIsOpen, hasCloseButton = true, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
-    const { handleClickOutside, handleKeyDown, handleCloseModal } = useModal({
-        setIsOpen,
-        onClose,
-        onClickOutside,
-    });
-    const modalRef = useRef(null);
-    const idTitle = useId();
-    const idContent = useId();
-    const actionCallback = (callback) => {
-        callback?.();
-        setIsOpen(false);
-    };
-    useEffect(() => {
-        const modalElement = modalRef.current;
-        if (modalElement) {
-            if (open) {
-                document.body.style.overflow = "hidden";
-                modalElement.showModal?.();
-            }
-            else {
-                document.body.style.overflow = "inherit";
-                modalElement.close?.();
-            }
-        }
-        return () => {
-            document.body.style.overflow = "inherit";
-        };
-    }, [open]);
-    useEffect(() => {
-        document.body.addEventListener("keydown", handleKeyDown);
-        document.body.addEventListener("click", handleClickOutside);
-        return () => {
-            document.body.removeEventListener("keydown", handleKeyDown);
-            document.body.removeEventListener("click", handleClickOutside);
-        };
-    }, [handleClickOutside, handleKeyDown]);
-    return createPortal(_jsx(Modal, { modalRef: modalRef, idTitle: idTitle, idContent: idContent, iconTitle: iconTitle, title: title, subtitle: subtitle, hasCloseButton: hasCloseButton, handleCloseModal: handleCloseModal, actionCallback: actionCallback, actions: actions, fullWidthButtons: fullWidthButtons, children: children }), document.body);
-};

package/dist/ModalClient/Modal.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { TModalType } from "./type";
-export declare const Modal: ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }: PropsWithChildren<TModalType>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +0,0 @@
-import { TModalHook } from "./type";
-export declare const useModal: ({ setIsOpen, onClose, onClickOutside, }: TModalHook) => {
-    handleClickOutside: (event: MouseEvent) => void;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    handleCloseModal: () => void;
-};

package/dist/ModalClient/Modal.hook.js

@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-export const useModal = ({ setIsOpen, onClose, onClickOutside, }) => {
-    const handleCloseModal = useCallback(() => {
-        onClose?.();
-        setIsOpen(false);
-    }, [onClose, setIsOpen]);
-    const handleClickOutside = useCallback((event) => {
-        if (event.target.tagName !== "DIALOG") {
-            return;
-        }
-        if (onClickOutside) {
-            onClickOutside();
-            setIsOpen(false);
-        }
-        else {
-            handleCloseModal();
-        }
-    }, [handleCloseModal, onClickOutside, setIsOpen]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Escape") {
-            handleCloseModal();
-        }
-    }, [handleCloseModal]);
-    return { handleClickOutside, handleKeyDown, handleCloseModal };
-};

package/dist/ModalClient/Modal.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import close from "@material-symbols/svg-400/outlined/close.svg";
-import { ButtonClient as Button, Variants, Variants as ButtonVariants, } from "../Button/Button";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { Svg } from "../Svg";
-export const Modal = ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }) => (_jsxs("dialog", { ref: modalRef, 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 }))] }), hasCloseButton && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, variant: Variants.ghost, 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: () => actionCallback(actions?.primary?.callback), disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: () => actionCallback(actions?.secondary?.callback), disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: () => actionCallback(actions?.tertiary?.callback), disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));

package/dist/ModalClient/index.d.ts

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

package/dist/ModalClient/index.js

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

package/dist/ModalClient/type.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode, RefObject } from "react";
-export type ButtonAction = {
-    text: string;
-    disabled?: boolean;
-    callback: () => void;
-};
-export type TActionButton = {
-    primary?: ButtonAction;
-    secondary?: ButtonAction;
-    tertiary?: ButtonAction;
-};
-export type TModalHook = {
-    setIsOpen: (value: boolean) => void;
-    onClose?: () => void;
-    onClickOutside?: () => void;
-};
-export type ModalProps = TModalHook & {
-    open: boolean;
-    hasCloseButton?: boolean;
-    title: string;
-    subtitle?: string;
-    iconTitle?: ReactNode;
-    fullWidthButtons?: boolean;
-    actions?: TActionButton;
-};
-export type TModalType = {
-    modalRef: RefObject<HTMLDialogElement>;
-    idTitle: string;
-    idContent: string;
-    iconTitle: ReactNode;
-    title: string;
-    subtitle?: string;
-    hasCloseButton: boolean;
-    handleCloseModal: () => void;
-    actionCallback: (callback?: () => void) => void;
-    actions?: TActionButton;
-    fullWidthButtons?: boolean;
-};

package/dist/ModalClient/type.js

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