@axa-fr/design-system-look-and-feel-react 0.2.0-beta.370 → 0.3.0-ci.286

package/dist/AccordionCore/AccordionCore.js

@@ -9,5 +9,5 @@ export const AccordionCore = ({ summary, children, className, classModifier, sum
             onClick(event);
         }
     }, [onClick]);
-    return (_jsxs("details", { className: componentClassName, open: isOpen, ...detailsProps, children: [_jsx("summary", { className: "af-accordion__summary", onClick: handleToggle, role: "button", tabIndex: 0, ...summaryProps, children: summary }), _jsx("hr", { className: "af-accordion__separator" }), _jsx("div", { className: "af-accordion__content", children: children })] }));
+    return (_jsxs("details", { className: componentClassName, open: isOpen, ...detailsProps, children: [_jsx("summary", { className: "af-accordion__summary", onClick: handleToggle, role: "button", tabIndex: 0, ...summaryProps, children: summary }), _jsx("div", { className: "af-accordion__content", children: children })] }));
 };

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+type DividerProps = {
+    className?: string;
+    classModifier?: string;
+};
+export declare const Divider: ({ className, classModifier }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Divider/Divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../utilities";
+export const Divider = ({ className, classModifier }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-divider"), [className, classModifier]);
+    return _jsx("hr", { className: componentClassName });
+};

package/dist/Divider/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Divider/Divider.scss";
+export { Divider } from "./Divider";

package/dist/Divider/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Divider/Divider.scss";
+export { Divider } from "./Divider";

package/dist/List/ClickList/ClickItem/ClickItem.d.ts

@@ -4,8 +4,11 @@ type TClickItem = {
     isDisabled?: boolean;
 } & Omit<ComponentProps<"button">, "disabled"> & ComponentProps<"a"> & {
     label?: ReactNode;
+    parentClickComponent?: ({ children, }: {
+        children: ReactNode;
+    } & Record<string, unknown>) => ReactNode;
     children?: ReactNode;
     icon?: ReactNode;
-};
-export declare const ClickItem: ({ label, children, icon, href, isDisabled, className, classModifier, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;
+} & Record<string, unknown>;
+export declare const ClickItem: ({ label, children, icon, parentClickComponent: ClickComponent, isDisabled, className, classModifier, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/List/ClickList/ClickItem/ClickItem.js

@@ -3,15 +3,7 @@ import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
 import { useMemo } from "react";
 import { Svg } from "../../../Svg";
 import { getComponentClassName } from "../../../utilities";
-export const ClickItem = ({ label, children, icon, href, isDisabled = false, className, classModifier = "", ...otherProps }) => {
+export const ClickItem = ({ label, children, icon, parentClickComponent: ClickComponent = ({ children: parentClickComponentChildren, ...parentClickComponentProps }) => (_jsx("button", { type: "button", ...parentClickComponentProps, children: parentClickComponentChildren })), isDisabled = false, className, classModifier = "", ...otherProps }) => {
     const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
-    const ClickComponent = useMemo(() => (href ? "a" : "button"), [href]);
-    const clickComponentProps = useMemo(() => href
-        ? { href, "aria-disabled": isDisabled, ...otherProps }
-        : {
-            type: "button",
-            disabled: isDisabled,
-            ...otherProps,
-        }, [isDisabled, href, otherProps]);
-    return (_jsxs(ClickComponent, { className: componentClassName, ...clickComponentProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children || label })] }), _jsx("div", { className: "af-click-item__action", children: _jsx(Svg, { src: chevron }) })] }));
+    return (_jsxs(ClickComponent, { className: componentClassName, disabled: isDisabled, "aria-disabled": isDisabled, ...otherProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children || label })] }), _jsx("div", { className: "af-click-item__action", children: _jsx(Svg, { src: chevron, "aria-hidden": true }) })] }));
 };

package/dist/List/List.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Children, isValidElement, useMemo, } from "react";
 import { Card } from "..";
 import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
 const defaultClassName = "af-list";
 export const List = ({ children, classModifier, ...cardProps }) => {
     const validChildren = useMemo(() => (Children.map(children, (child) => isValidElement(child) && child) ?? []).filter(Boolean), [children]);
-    return (_jsx(Card, { classModifier: `list ${classModifier}`, ...cardProps, children: _jsx("ul", { className: defaultClassName, children: Children.map(validChildren, (child, index) => (_jsxs(React.Fragment, { children: [_jsx("li", { className: `${defaultClassName}__item`, children: child }), index < validChildren.length - 1 && (_jsx("hr", { className: `${defaultClassName}__separator` }))] }, child.key))) }) }));
+    return (_jsx(Card, { classModifier: `list ${classModifier}`, ...cardProps, children: _jsx("ul", { className: defaultClassName, children: Children.map(validChildren, (child) => (_jsx(React.Fragment, { children: _jsx("li", { className: `${defaultClassName}__item`, children: child }) }, child.key))) }) }));
 };

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,45 @@
+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,24 +1,4 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-export type ButtonAction = {
-    text: string;
-    disabled?: boolean;
-    callback: () => void;
-};
-type ModalProps = {
-    isOpen: boolean;
-    hasCloseBtn?: boolean;
-    onClose?: () => void;
-    onClickOutside?: () => void;
-    title: string;
-    subtitle?: string;
-    iconTitle?: ReactNode;
-    fullWidthButtons?: boolean;
-    actions?: {
-        primary?: ButtonAction;
-        secondary?: ButtonAction;
-        tertiary?: ButtonAction;
-    };
-};
-export declare const Modal: ({ isOpen, hasCloseBtn, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,25 @@
+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,53 +1,6 @@
 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";
+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 = ({ isOpen, hasCloseBtn = true, onClose, onClickOutside, 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]);
-    useEffect(() => {
-        return () => {
-            document.body.style.overflow = "inherit";
-        };
-    }, []);
-    const handleCloseModal = () => {
-        onClose?.();
-        setIsModalOpen(false);
-    };
-    const handleClickOutside = () => {
-        if (onClickOutside) {
-            onClickOutside();
-            setIsModalOpen(false);
-        }
-        else {
-            handleCloseModal();
-        }
-    };
-    const handleKeyDown = (event) => {
-        if (event.key === "Escape") {
-            handleCloseModal();
-        }
-    };
-    return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleClickOutside(), 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, disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));
-};
+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

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

package/dist/ModalClient/index.js

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

package/dist/ModalClient/type.d.ts

@@ -0,0 +1,38 @@
+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

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

package/dist/index.d.ts

@@ -20,11 +20,11 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader";
-export { Modal } from "./ModalClient/Modal";
-export type { ButtonAction as ModalButtonAction } from "./ModalClient/Modal";
+export { Modal } from "./ModalClient";
+export type { ButtonAction as ModalButtonAction } from "./ModalClient/type";
 export { Pagination } from "./Pagination/Pagination";
 export { Stepper } from "./Stepper/Stepper";
 export { Svg } from "./Svg";
-export { TabsClient as Tabs } from "./Tabs/Tabs";
+export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize, type TitleLevel } from "./Title";

package/dist/index.js

@@ -19,10 +19,10 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabList } from "./List/ContentTabList";
 export { Loader } from "./Loader";
-export { Modal } from "./ModalClient/Modal";
+export { Modal } from "./ModalClient";
 export { Pagination } from "./Pagination/Pagination";
 export { Stepper } from "./Stepper/Stepper";
 export { Svg } from "./Svg";
-export { TabsClient as Tabs } from "./Tabs/Tabs";
+export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize } from "./Title";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.370",
+  "version": "0.3.0-ci.286",
   "description": "",
   "exports": {
     ".": {
@@ -21,6 +21,7 @@
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
     "start:storybook": "storybook dev -p 6009",
     "build:storybook": "storybook build",
+    "build-storybook": "storybook build",
     "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
     "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check",
@@ -28,20 +29,23 @@
     "tsc": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:ci": "vitest run --coverage"
+    "test:ci": "vitest run --coverage",
+    "chromatic": "npx chromatic"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AxaFrance/design-system.git"
   },
-  "author": "AxaFrance",
+  "author": {
+    "name": "AxaFrance"
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/AxaFrance/design-system/issues"
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.370",
+    "@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.286",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -53,6 +57,7 @@
   "dependencies": {
     "@fontsource/source-sans-pro": "^5.0.8",
     "@tanem/svg-injector": "^10.1.68",
+    "@types/react-dom": "^18.2.24",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
     "rc-slider": "^10.5.0",
@@ -67,7 +72,6 @@
     "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-mdx-gfm": "^8.3.5",
     "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "^8.3.5",
     "@storybook/manager-api": "^8.3.5",
     "@storybook/react": "^8.3.5",
@@ -88,6 +92,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.1.2",
+    "chromatic": "^11.12.0",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",