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

package/dist/Layout/Header/Client/NavBar/NavBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { isValidElement, useMemo, } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Client/NavBar/NavBar.scss";
+const NavBar = ({ activeLink, children, setActiveLink, ...otherProps }) => {
+    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: React.Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: React.cloneElement(child, {
+                    className: `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
+                    onClick: () => setActiveLink(index),
+                    onFocus: () => setActiveLink(index),
+                    role: "menuitem",
+                }) }))) }) }));
+};
+export { NavBar };

package/dist/Layout/Header/Client/NavBar/NavBar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type React from "react";
+import { NavBar } from "./NavBar";
+declare const meta: Meta<typeof NavBar>;
+export default meta;
+type StoryProps = React.ComponentProps<typeof NavBar>;
+type Story = StoryObj<StoryProps>;
+export declare const Default: Story;

package/dist/Layout/Header/Client/NavBar/NavBar.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavBar } from "./NavBar";
+const meta = {
+    title: "Client/Components/Header/NavBar",
+    component: NavBar,
+    argTypes: {
+        setActiveLink: { action: "active link changed" },
+        activeLink: { control: { type: "number", min: 0, max: 3 } },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ activeLink, children, setActiveLink }) => (_jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children })),
+    args: {
+        activeLink: 0,
+        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/Layout/Header/Client/NavBar/index.d.ts

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

package/dist/Layout/Header/Client/NavBar/index.js

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

package/dist/Layout/Header/Client/PreviousLink/PreviousLink.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Client/PreviousLink/PreviousLink.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+type PreviousLinkProps = {
+    handleClick: () => void;
+} & ComponentPropsWithoutRef<"div">;
+declare const PreviousLink: ({ handleClick, children, ...otherProps }: PropsWithChildren<PreviousLinkProps>) => import("react/jsx-runtime").JSX.Element;
+export { PreviousLink };

package/dist/Layout/Header/Client/PreviousLink/PreviousLink.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import arrowBack from "@material-symbols/svg-400/outlined/arrow_back.svg";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Client/PreviousLink/PreviousLink.scss";
+import React, { isValidElement, useMemo, } from "react";
+import { Svg } from "../../../../Svg";
+const PreviousLink = ({ handleClick, children, ...otherProps }) => {
+    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    return (_jsxs("div", { className: "af-header-previous-link-container", ...otherProps, children: [_jsx(Svg, { className: "af-header-previous-link-icon", src: arrowBack }), React.Children.map(validChildren, (child) => React.cloneElement(child, {
+                className: "af-header-previous-link",
+                onClick: handleClick,
+            }))] }));
+};
+export { PreviousLink };

package/dist/Layout/Header/Client/PreviousLink/PreviousLink.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type React from "react";
+import { PreviousLink } from "./PreviousLink";
+declare const meta: Meta<typeof PreviousLink>;
+export default meta;
+type StoryProps = React.ComponentProps<typeof PreviousLink>;
+type Story = StoryObj<StoryProps>;
+export declare const Default: Story;

package/dist/Layout/Header/Client/PreviousLink/PreviousLink.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviousLink } from "./PreviousLink";
+const meta = {
+    title: "Client/Components/Header/PreviousLink",
+    component: PreviousLink,
+    argTypes: {
+        handleClick: { action: "active link reset" },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ children, handleClick }) => (_jsx(PreviousLink, { handleClick: handleClick, children: children })),
+    args: {
+        children: (_jsx("a", { href: "/mes-contrats", children: "Retour \u00E0 mes contrats" }, "Previous link")),
+    },
+};

package/dist/Layout/Header/Client/PreviousLink/index.d.ts

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

package/dist/Layout/Header/Client/PreviousLink/index.js

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

package/dist/Layout/Header/Client/index.d.ts

@@ -0,0 +1 @@
+export { HeaderClient } from "./Header.client";

package/dist/Layout/Header/Client/index.js

@@ -0,0 +1 @@
+export { HeaderClient } from "./Header.client";

package/dist/Link/Link.client.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Link/Link.client.scss";
+type LinkProps = {
+    openInNewTab?: boolean;
+} & ComponentPropsWithoutRef<"a">;
+export declare const Link: ({ href, openInNewTab, children, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Link/Link.client.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Link/Link.client.scss";
+import openInNew from "@material-symbols/svg-400/outlined/open_in_new.svg";
+import { Svg } from "../Svg";
+export const Link = ({ href, openInNewTab, children, ...props }) => {
+    const newTabProps = openInNewTab && {
+        target: "_blank",
+        rel: "noopener noreferrer",
+    };
+    return (_jsxs("a", { className: `af-link ${openInNewTab ? " af-link--openInNewTab" : ""}`, href: href, ...newTabProps, ...props, children: [children, newTabProps && _jsx(Svg, { src: openInNew })] }));
+};

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

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Link } from "./Link.client";
+declare const meta: Meta<typeof Link>;
+export default meta;
+export declare const Default: StoryObj<typeof Link>;

package/dist/Link/Link.client.stories.js

@@ -0,0 +1,14 @@
+import { Link } from "./Link.client";
+const meta = {
+    title: "Client/Components/Link",
+    component: Link,
+};
+export default meta;
+export const Default = {
+    name: "Default",
+    args: {
+        href: "https://fakelink.com",
+        openInNewTab: true,
+        children: "My link",
+    },
+};

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

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/List/ClickList/ClickList.client.scss";
+type TClickList = {
+    items: Array<ComponentProps<"button"> & {
+        label: ReactNode;
+        icon?: ReactNode;
+    }>;
+    classModifier?: string;
+};
+export declare const ClickList: ({ items, classModifier }: TClickList) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ClickList/ClickList.client.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import { List } from "..";
+import { Svg } from "../../Svg";
+import "@axa-fr/design-system-slash-css/dist/List/ClickList/ClickList.client.scss";
+export const ClickList = ({ items, classModifier }) => (_jsx(List, { classModifier: `list click-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, label, icon, ...buttonProps }) => (_jsxs("button", { id: id, className: "af-list-item__button", type: "button", ...buttonProps, children: [_jsxs("div", { className: "af-list-item__content", children: [icon && _jsx("div", { className: "af-list-item-content__icon", children: icon }), _jsx("div", { className: "af-list-item-content__label", children: label })] }), _jsx("div", { className: "af-list-item__action", children: _jsx(Svg, { src: chevron }) })] }, id ?? label?.toString()))) }));

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ClickList } from "./ClickList.client";
+declare const meta: Meta<typeof ClickList>;
+export default meta;
+export declare const ClickListWithIcon: StoryObj<typeof ClickList>;
+export declare const ClickListWithoutIcon: StoryObj<typeof ClickList>;

package/dist/List/ClickList/ClickList.client.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import contentPasteGo from "@material-symbols/svg-400/outlined/content_paste_go.svg";
+import error from "@material-symbols/svg-400/outlined/error-fill.svg";
+import { Svg } from "../../Svg";
+import { ClickList } from "./ClickList.client";
+const meta = {
+    title: "Client/Components/List/ClickList",
+    component: ClickList,
+};
+export default meta;
+export const ClickListWithIcon = {
+    name: "ClickList with icon",
+    render: (args) => _jsx(ClickList, { ...args }),
+    args: {
+        items: [
+            {
+                id: "report-claim",
+                icon: _jsx(Svg, { src: error }),
+                label: "Déclarer un sinistre",
+            },
+            {
+                id: "follow-claim",
+                icon: _jsx(Svg, { src: contentPasteGo }),
+                label: "Suivre mes sinistres",
+                disabled: true,
+            },
+        ],
+        classModifier: "",
+    },
+    argTypes: {
+        classModifier: {
+            options: ["", "large"],
+            control: { type: "select" },
+            defaultValue: "",
+        },
+    },
+};
+export const ClickListWithoutIcon = {
+    name: "ClickList without icon",
+    render: (args) => _jsx(ClickList, { ...args }),
+    args: {
+        items: [
+            {
+                label: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-list-item-content-label__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-list-item-content-label__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-list-item-content-label__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+            },
+            {
+                label: (_jsxs(_Fragment, { children: [_jsx("h3", { className: "af-list-item-content-label__title", children: "Fiche Orias pr\u00E9contractuelle" }), _jsx("p", { className: "af-list-item-content-label__subtitle", children: "30 novembre 2021" }), _jsx("p", { className: "af-list-item-content-label__secondary", children: "Sign\u00E9 \u00E9lectroniquement" })] })),
+                disabled: true,
+            },
+        ],
+        classModifier: "",
+    },
+    argTypes: {
+        classModifier: {
+            options: ["", "large"],
+            control: { type: "select" },
+            defaultValue: "",
+        },
+    },
+};

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { ClickList } from "..";
+describe("ClickList", () => {
+    const items = [
+        { id: "1", label: "Item 1", icon: _jsx("span", { children: "Icon 1" }) },
+        { id: "2", label: "Item 2", icon: _jsx("span", { children: "Icon 2" }) },
+        { id: "3", label: "Item 3", icon: _jsx("span", { children: "Icon 3" }) },
+    ];
+    it("should render labels and icons from items array", () => {
+        render(_jsx(ClickList, { items: items }));
+        items.forEach((item) => {
+            expect(screen.getByText(item.icon.props.children)).toBeInTheDocument();
+            expect(screen.getByText(item.label)).toBeInTheDocument();
+        });
+        expect(screen.getAllByRole("separator")).toHaveLength(2);
+    });
+});

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

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

package/dist/List/ClickList/index.js

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

package/dist/List/ContentTabList/ContentTabItem/ContentTabItem.client.d.ts

@@ -0,0 +1,6 @@
+import type { TContentTabItem } from "./types";
+type TContentTabItemProps = TContentTabItem & {
+    isMobile?: boolean;
+};
+export declare const ContentTabItem: ({ title, subtitle, tag, tagProps, date, buttons, value, isMobile, }: TContentTabItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentTabList/ContentTabItem/ContentTabItem.client.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Tag } from "../../../client";
+export const ContentTabItem = ({ title, subtitle, tag, tagProps, date, buttons = [], value, isMobile = false, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-list-item__left-container", children: [Boolean(value) && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] })), _jsxs("div", { className: "af-list-item__label", children: [_jsx("span", { className: "af-list-item-label__title", children: title }), Boolean(subtitle) && (_jsx("span", { className: "af-list-item-label__subtitle", children: subtitle }))] }), !value && isMobile && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] }))] }), (buttons.length > 0 ||
+            Boolean(tag) ||
+            Boolean(date) ||
+            Boolean(value)) && (_jsxs("div", { className: "af-list-item__right-container", children: [!value && (Boolean(tag) || Boolean(date)) && !isMobile && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && (_jsx("span", { className: "af-list-item__date", children: date }))] })), buttons.map((button) => (_jsx("div", { className: "af-list-item__button-container", children: _jsx(Button, { ...button }) }, button?.id))), Boolean(value) && _jsx("span", { className: "af-list-item__value", children: value })] }))] }));

package/dist/List/ContentTabList/ContentTabItem/__tests__/ContentTabItem.client.test.d.ts

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

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

@@ -0,0 +1,100 @@
+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 userEvent from "@testing-library/user-event";
+import { ContentTabItem } from "..";
+import { ButtonVariants, Svg } from "../../../../client";
+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",
+        },
+    ];
+    let originalWidth;
+    beforeEach(() => {
+        originalWidth = window.innerWidth;
+    });
+    afterEach(() => {
+        vi.stubGlobal("innerWidth", originalWidth);
+    });
+    it.each(items)("should render the items correctly", (item) => {
+        render(_jsx(ContentTabItem, { ...item }));
+        expect(screen.getByText(item.title)).toBeInTheDocument();
+        if (item.subtitle) {
+            expect(screen.getByText(item.subtitle)).toBeInTheDocument();
+        }
+        if (item.tag) {
+            expect(screen.getByText(item.tag)).toBeInTheDocument();
+        }
+        if (item.date) {
+            expect(screen.getByText(item.date)).toBeInTheDocument();
+        }
+        if (item.value) {
+            expect(screen.getByText(item.value)).toBeInTheDocument();
+        }
+    });
+    it.each(items)("should render the items correctly on mobile view", (item) => {
+        render(_jsx(ContentTabItem, { ...item, isMobile: true }));
+        expect(screen.getByText(item.title)).toBeInTheDocument();
+        if (item.subtitle) {
+            expect(screen.getByText(item.subtitle)).toBeInTheDocument();
+        }
+        if (item.tag) {
+            expect(screen.getByText(item.tag)).toBeInTheDocument();
+        }
+        if (item.date) {
+            expect(screen.getByText(item.date)).toBeInTheDocument();
+        }
+        if (item.value) {
+            expect(screen.getByText(item.value)).toBeInTheDocument();
+        }
+    });
+    it("should call onDownload when download button is clicked", async () => {
+        render(_jsx(ContentTabItem, { ...items[0] }));
+        await userEvent.click(screen.getByRole("button", { name: /Télécharger$/ }));
+        expect(items?.[0]?.buttons?.[0].onClick).toHaveBeenCalled();
+    });
+    it("should call onDisplay when display button is clicked", async () => {
+        render(_jsx(ContentTabItem, { ...items[0] }));
+        await userEvent.click(screen.getByRole("button", { name: /Afficher$/ }));
+        expect(items?.[0]?.buttons?.[1].onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { ContentTabItem } from "./ContentTabItem.client";
+export type { TContentTabItem } from "./types";

package/dist/List/ContentTabList/ContentTabItem/index.js

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

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

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-slash-css/dist/List/ContentTabList/ContentTabList.client.scss";
+import { type TContentTabItem } from "./ContentTabItem";
+type ContentTabListProps = {
+    items: TContentTabItem[];
+    classModifier?: string;
+};
+export declare const ContentTabList: ({ items, classModifier, }: ContentTabListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentTabList/ContentTabList.client.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "../../client";
+import "@axa-fr/design-system-slash-css/dist/List/ContentTabList/ContentTabList.client.scss";
+import { useIsSmallScreen } from "../../utilities";
+import { ContentTabItem } from "./ContentTabItem";
+const BREAKPOINT_SMALL = 668;
+export const ContentTabList = ({ items, classModifier, }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT_SMALL);
+    return (_jsx(List, { classModifier: `list large content-tab-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, ...item }) => (_jsx(ContentTabItem, { ...item, isMobile: isMobile }, id ?? item.title))) }));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+import { ContentTabList } from "./ContentTabList.client";
+declare const meta: Meta<typeof ContentTabList>;
+export default meta;
+export declare const ContentTabListWithButtons: StoryObj<ComponentProps<typeof ContentTabList>>;
+export declare const ContentTabListWithValue: StoryObj<ComponentProps<typeof ContentTabList>>;

package/dist/List/ContentTabList/ContentTabList.client.stories.js

@@ -0,0 +1,78 @@
+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 { ButtonVariants, Svg } from "../../client";
+import { ContentTabList } from "./ContentTabList.client";
+const meta = {
+    title: "Client/Components/List/ContentTabList",
+    component: ContentTabList,
+};
+export default meta;
+const template = (args) => (_jsx(ContentTabList, { ...args }));
+export const ContentTabListWithButtons = {
+    name: "ContentTabList with buttons",
+    render: template,
+    args: {
+        items: [
+            {
+                id: "1",
+                title: "Remboursement soins",
+                subtitle: "Titre onglet",
+                tag: "En attente",
+                date: "01/01/2024",
+                buttons: [
+                    {
+                        id: "download_button",
+                        children: "Télécharger",
+                        variant: ButtonVariants.ghost,
+                        iconLeft: _jsx(Svg, { src: download }),
+                        onClick: () => { },
+                    },
+                ],
+            },
+            {
+                id: "2",
+                title: "Remboursement soins",
+                tag: "En attente",
+                buttons: [
+                    {
+                        id: "download_button",
+                        children: "Télécharger",
+                        variant: ButtonVariants.ghost,
+                        iconLeft: _jsx(Svg, { src: download }),
+                        onClick: () => { },
+                    },
+                    {
+                        id: "display_button",
+                        children: "Afficher",
+                        variant: ButtonVariants.ghost,
+                        iconLeft: _jsx(Svg, { src: visibility }),
+                        onClick: () => { },
+                    },
+                ],
+            },
+        ],
+        classModifier: "",
+    },
+};
+export const ContentTabListWithValue = {
+    name: "ContentTabList with value",
+    render: template,
+    args: {
+        items: [
+            {
+                id: "1",
+                title: "Remboursement soins",
+                subtitle: "Titre onglet",
+                date: "01/01/2024",
+                value: "+ 11,86 €",
+            },
+            {
+                id: "2",
+                title: "Remboursement soins",
+                tag: "En attente",
+                value: "+ 11,86 €",
+            },
+        ],
+    },
+};

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

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

package/dist/List/ContentTabList/__tests__/ContentTabList.client.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 "../../../client";
+import { ContentTabList } from "../ContentTabList.client";
+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.client";

package/dist/List/ContentTabList/index.js

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

package/dist/List/List.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+import { Card } from "../client";
+import "@axa-fr/design-system-slash-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 "../client";
+import "@axa-fr/design-system-slash-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,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { List } from "./List";
+declare const meta: Meta<typeof List>;
+export default meta;
+export declare const Default: StoryObj<typeof List>;