@axa-fr/design-system-look-and-feel-react 0.2.0-beta.306

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import download from "@material-symbols/svg-400/rounded/download_2-fill.svg";
+import visibility from "@material-symbols/svg-400/rounded/visibility-fill.svg";
+import { render, screen } from "@testing-library/react";
+import { ButtonVariants, Svg } from "../../..";
+import { ContentTabList } from "../ContentTabList";
+describe("ContentTabList", () => {
+    const items = [
+        {
+            id: "1",
+            title: "Title 1",
+            subtitle: "Subtitle 1",
+            tag: "Tag 1",
+            date: "Date 1",
+            buttons: [
+                {
+                    id: "download_button",
+                    children: "Télécharger",
+                    variant: ButtonVariants.ghost,
+                    iconLeft: _jsx(Svg, { src: download, fill: "#00008F" }),
+                    onClick: vi.fn(),
+                },
+                {
+                    id: "display_button",
+                    children: "Afficher",
+                    variant: ButtonVariants.ghost,
+                    iconLeft: _jsx(Svg, { src: visibility, fill: "#00008F" }),
+                    onClick: vi.fn(),
+                },
+            ],
+        },
+        {
+            id: "2",
+            title: "Title 2",
+            subtitle: "Subtitle 2",
+            tag: "Tag 2",
+            date: "Date 2",
+            value: "Value 2",
+        },
+        {
+            id: "3",
+            title: "Title 3",
+            value: "Value 3",
+        },
+        {
+            title: "Title 4",
+            date: "Date 4",
+        },
+    ];
+    it("should render the list correctly", () => {
+        render(_jsx(ContentTabList, { items: items }));
+        expect(screen.getByText("Title 1")).toBeInTheDocument();
+        expect(screen.getByText("Title 2")).toBeInTheDocument();
+        expect(screen.getByText("Title 3")).toBeInTheDocument();
+        expect(screen.getByText("Title 4")).toBeInTheDocument();
+    });
+});

package/dist/List/ContentTabList/index.d.ts

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

package/dist/List/ContentTabList/index.js

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

package/dist/List/List.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+import { Card } from "..";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+type TList = ComponentProps<typeof Card>;
+export declare const List: ({ children, classModifier, ...cardProps }: TList) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/List.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } 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))) }) }));
+};

package/dist/List/List.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+import { List } from "./List";
+declare const meta: Meta<typeof List>;
+export default meta;
+export declare const Default: StoryObj<Omit<ComponentProps<typeof List>, "classModifier"> & {
+    classModifier: string[];
+}>;

package/dist/List/List.stories.js

@@ -0,0 +1,56 @@
+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: "Components/List",
+    component: List,
+};
+export default meta;
+export const Default = {
+    name: "List",
+    render: ({ classModifier, ...args }) => (_jsx(List, { classModifier: classModifier.join(" "), ...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",
+                "first-separator-full-width",
+                "first-separator-full-width",
+            ],
+            control: { type: "multi-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/Loader.d.ts

@@ -0,0 +1,11 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.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/Loader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.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/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/Loader.stories.js

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

package/dist/Loader/index.d.ts

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

package/dist/Loader/index.js

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

package/dist/ModalClient/Modal.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithChildren, ReactNode } 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;
+    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.js

@@ -0,0 +1,44 @@
+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 "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.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]);
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = "inherit";
+        };
+    }, []);
+    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, 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 }))] }))] })] }));
+};

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

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ReactNode } from "react";
+import { ButtonAction, Modal } from "./Modal";
+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.stories.js

@@ -0,0 +1,37 @@
+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";
+import { Svg } from "../Svg";
+const meta = {
+    title: "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),
+                        disabled: true,
+                    },
+                } })] }));
+};
+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.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/Pagination.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.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/Pagination.scss";
+import { useEffect, useState } from "react";
+import { useIsSmallScreen } from "../utilities";
+import { PaginationMobile } from "./PaginationMobile";
+import { PaginationDesktop } from "./PaginationDesktop";
+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.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./Pagination";
+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.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from "./Pagination";
+const meta = {
+    component: Pagination,
+    title: "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.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationDesktop.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.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationDesktop.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}`))) }) }));
+};

package/dist/Pagination/PaginationMobile.d.ts

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

package/dist/Pagination/PaginationMobile.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationMobile.scss";
+import arrowBackIos from "@material-symbols/svg-400/outlined/arrow_back_ios.svg";
+import arrowForwardIos from "@material-symbols/svg-400/outlined/arrow_forward_ios.svg";
+import { Svg } from "../Svg";
+export const PaginationMobile = ({ numberPage, currentPage, setCurrentPage, }) => {
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === numberPage;
+    return (_jsxs("div", { className: "af-pagination-mobile", children: [_jsx("button", { type: "button", onClick: () => setCurrentPage(currentPage - 1), disabled: isFirstPage, "aria-label": "Page pr\u00E9c\u00E9dente", children: _jsx(Svg, { src: arrowBackIos, className: "arrow" }) }), _jsxs("span", { children: [currentPage, " sur ", numberPage] }), _jsx("button", { type: "button", onClick: () => setCurrentPage(currentPage + 1), disabled: isLastPage, "aria-label": "Page suivant", children: _jsx(Svg, { src: arrowForwardIos, className: "arrow" }) })] }));
+};

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+export type StepperProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    currentSubtitle?: string;
+    currentTitle?: string;
+    nbSteps: 2 | 3 | 4 | 5 | 6;
+    isTitleVisible?: boolean;
+    isSubtitleVisible?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, "role">;
+export declare const Stepper: ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible, isSubtitleVisible, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Stepper/Stepper.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId } from "react";
+import classNames from "classnames";
+import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+const INITIAL_STEPPER_PROGRESS = 10;
+const MAX_STEPPER_PROGRESS = 100;
+export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible = true, isSubtitleVisible = true, className, ...props }) => {
+    const stepperId = useId();
+    const getCurrentProgress = useCallback((index) => {
+        if (index < currentStep) {
+            return MAX_STEPPER_PROGRESS;
+        }
+        if (index === currentStep) {
+            if (currentStepProgress === 0) {
+                return INITIAL_STEPPER_PROGRESS;
+            }
+            return currentStepProgress;
+        }
+        return 0;
+    }, [currentStep, currentStepProgress]);
+    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle })), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
+};

package/dist/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Stepper } from "./Stepper";
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type StoryProps = Omit<ComponentProps<typeof Stepper>, "currentStep" | "currentStepProgress" | "isTitleVisible" | "isSubtitleVisible" | "currentTitle" | "nbSteps"> & {
+    currentStep: number;
+    currentSubtitle: string;
+    currentStepProgress: number;
+    isTitleVisible: boolean;
+    isSubtitleVisible: boolean;
+    currentTitle: string;
+    nbSteps: 2 | 3 | 4 | 5 | 6;
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;

package/dist/Stepper/Stepper.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stepper } from "./Stepper";
+const meta = {
+    component: Stepper,
+    title: "Components/Stepper",
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Playground = {
+    name: "Stepper",
+    render: (props) => (_jsx("div", { style: { minWidth: "70vw" }, children: _jsx(Stepper, { ...props }) })),
+    args: {
+        nbSteps: 3,
+        currentTitle: "Step title",
+        currentStep: 2,
+        currentSubtitle: "Step subtitle",
+        currentStepProgress: 50,
+        isTitleVisible: true,
+        isSubtitleVisible: true,
+    },
+};

package/dist/Svg/Svg.d.ts

@@ -0,0 +1,7 @@
+import { type SVGAttributes } from "react";
+type SvgProps = SVGAttributes<SVGSVGElement> & {
+    src: string;
+    alt?: string;
+};
+export declare const Svg: ({ src, alt, width, height, ...props }: SvgProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Svg/Svg.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { svgInjector } from "./svgInjector";
+const cloneAttributes = (from, to) => {
+    const attributes = from.getAttributeNames();
+    attributes.forEach((attribute) => {
+        to.setAttribute(attribute, from.getAttribute(attribute));
+    });
+};
+export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
+    const rootRef = useRef(null);
+    const [hasError, setHasError] = useState(false);
+    useLayoutEffect(() => {
+        if (hasError) {
+            setHasError(false);
+        }
+    }, [src]);
+    useLayoutEffect(() => {
+        if (hasError) {
+            return;
+        }
+        const root = rootRef.current;
+        if (root) {
+            const parent = document.createElement("div");
+            const svg = document.createElement("svg");
+            parent.appendChild(svg);
+            cloneAttributes(root, svg);
+            svg.setAttribute("width", width.toString());
+            svg.setAttribute("height", height.toString());
+            svgInjector(svg, {
+                afterEach: (error, svgInject) => {
+                    if (error) {
+                        setHasError(true);
+                    }
+                    if (svgInject) {
+                        root.innerHTML = svgInject.innerHTML;
+                        cloneAttributes(svgInject, root);
+                    }
+                },
+            });
+        }
+    }, [src, width, height, hasError]);
+    if (hasError) {
+        return alt ? (_jsx("span", { ...props, children: alt })) : null;
+    }
+    return _jsx("svg", { ref: rootRef, "data-src": src, ...props });
+};