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

package/dist/List/ContentItemDuo/ContentItemDuo.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContentItemDuo } from ".";
+import { List } from "../List";
+const meta = {
+    title: "Components/List/ContentItemDuo",
+    component: ContentItemDuo,
+};
+export default meta;
+const defaultArgs = {
+    isVertical: false,
+    label: "Libellé",
+    value: "Réponse",
+    isShowingDoneIcon: true,
+    isShowingCloseIcon: false,
+    buttonText: "En savoir plus",
+    classModifier: [],
+};
+const verticalArgs = {
+    isVertical: true,
+    label: "Le choc de véhicules terrestres à moteur, (voiture, trottinette à moteur…) ou la chute d’appareils aériens (avions, hélicoptères…) avec un propriétaire du véhicule adverse identifié ?",
+    value: "Les incendies, explosions, implosions, fumée et foudre",
+    isShowingDoneIcon: true,
+    isShowingCloseIcon: false,
+    buttonText: "En savoir plus",
+    classModifier: [],
+};
+export const Default = {
+    name: "Default",
+    render: ({ classModifier, ...args }) => (_jsx(ContentItemDuo, { classModifier: classModifier.join(" "), ...args })),
+    args: defaultArgs,
+    argTypes: {
+        classModifier: {
+            options: ["large"],
+            control: { type: "multi-select" },
+            defaultValue: [],
+        },
+    },
+};
+export const Vertical = {
+    name: "Vertical",
+    render: ({ classModifier, ...args }) => (_jsx(ContentItemDuo, { classModifier: classModifier.join(" "), ...args })),
+    args: verticalArgs,
+    argTypes: {
+        classModifier: {
+            options: ["large"],
+            control: { type: "multi-select" },
+            defaultValue: [],
+        },
+    },
+};
+export const DefaultContentItemDuoList = {
+    name: "Default ContentItemDuo List",
+    render: ({ classModifier, items }) => (_jsx(List, { classModifier: classModifier.join(" "), children: items.map(({ classModifier: itemClassModifier, ...itemArgs }) => (_jsx(ContentItemDuo, { classModifier: itemClassModifier.join(" "), ...itemArgs }, itemArgs.id))) })),
+    args: {
+        items: Array.from({ length: 3 }, (_, i) => ({
+            id: i.toString(),
+            ...defaultArgs,
+        })),
+        classModifier: ["extra-padding"],
+    },
+    argTypes: {
+        classModifier: {
+            options: ["extra-padding", "large"],
+            control: { type: "multi-select" },
+            defaultValue: ["extra-padding"],
+        },
+    },
+};
+export const VerticalContentItemDuoList = {
+    name: "Vertical ContentItemDuo List",
+    render: ({ classModifier, items }) => (_jsx(List, { classModifier: classModifier.join(" "), children: items.map(({ classModifier: itemClassModifier, ...itemArgs }) => (_jsx(ContentItemDuo, { classModifier: itemClassModifier.join(" "), ...itemArgs }, itemArgs.id))) })),
+    args: {
+        items: Array.from({ length: 3 }, (_, i) => ({
+            id: i.toString(),
+            ...verticalArgs,
+        })),
+        classModifier: ["extra-padding"],
+    },
+    argTypes: {
+        classModifier: {
+            options: ["extra-padding", "large"],
+            control: { type: "multi-select" },
+            defaultValue: ["extra-padding"],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ContentItemDuo } from "../ContentItemDuo";
+describe("ContentItemDuo", () => {
+    const label = "Sample Label";
+    const value = "Sample Value";
+    it("should render label and value correctly", () => {
+        render(_jsx(ContentItemDuo, { label: label, value: value }));
+        expect(screen.getByText(label)).toBeInTheDocument();
+        expect(screen.getByText(value)).toBeInTheDocument();
+    });
+    it("should render button with correct text and call onClick handler", async () => {
+        const buttonText = "button";
+        const onButtonClick = vi.fn();
+        render(_jsx(ContentItemDuo, { label: label, value: value, buttonText: buttonText, onButtonClick: onButtonClick }));
+        const buttonElement = screen.getByText(buttonText);
+        expect(buttonElement).toBeInTheDocument();
+        userEvent.click(buttonElement);
+        await waitFor(() => {
+            expect(onButtonClick).toHaveBeenCalled();
+        });
+    });
+    it("should render vertical layout when isVertical prop is true", () => {
+        render(_jsx(ContentItemDuo, { label: label, value: value, isVertical: true }));
+        expect(screen.getByText(label).parentElement).toHaveClass("af-content-item-duo--vertical");
+    });
+    it("should render done icon when isShowingDoneIcon prop is true", () => {
+        const { container } = render(_jsx(ContentItemDuo, { label: label, value: value, isShowingDoneIcon: true }));
+        const svgElement = container.querySelector("svg");
+        expect(svgElement).toBeInTheDocument();
+        expect(svgElement?.parentElement).toHaveClass("af-content-item-duo__icon--done");
+    });
+    it("should render close icon when isShowingCloseIcon prop is true", () => {
+        const { container } = render(_jsx(ContentItemDuo, { label: label, value: value, isShowingCloseIcon: true }));
+        const svgElement = container.querySelector("svg");
+        expect(svgElement).toBeInTheDocument();
+        expect(svgElement?.parentElement).toHaveClass("af-content-item-duo__icon--close");
+    });
+});

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

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

package/dist/List/ContentItemDuo/index.js

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

package/dist/List/ContentItemMono/ContentItemMono.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { ContentItemMonoSize } from "./constants";
+type ContentItemMonoProps = {
+    children: ReactNode;
+    className?: string;
+    classModifier?: string;
+    secondaryText?: string;
+    tertiaryText?: string;
+    leftElement?: ReactNode;
+    size?: ContentItemMonoSize;
+    isDisabled?: boolean;
+    isLeftElementCentered?: boolean;
+    hasStick?: boolean;
+};
+export declare const ContentItemMono: ({ children, className, classModifier, secondaryText, tertiaryText, leftElement, size, isDisabled, isLeftElementCentered, hasStick, }: ContentItemMonoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentItemMono/ContentItemMono.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../../utilities";
+import { ContentItemMonoSize } from "./constants";
+export const ContentItemMono = ({ children, className, classModifier, secondaryText, tertiaryText, leftElement, size = ContentItemMonoSize.M, isDisabled = false, isLeftElementCentered = false, hasStick = false, }) => {
+    const componentClassName = useMemo(() => {
+        const classModifiers = [size, classModifier];
+        if (isDisabled) {
+            classModifiers.push("disabled");
+        }
+        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-mono");
+    }, [classModifier, isDisabled, size, className]);
+    return (_jsxs("div", { className: componentClassName, children: [hasStick && (_jsx("div", { className: "af-content-item-mono__stick", role: "presentation" })), leftElement && (_jsx("div", { className: `af-content-item-mono__left-container${isLeftElementCentered
+                    ? " af-content-item-mono__left-container--center"
+                    : ""}`, children: leftElement })), _jsxs("div", { className: "af-content-item-mono__text-container", children: [_jsx("p", { className: "af-content-item-mono__main-text", children: children }), secondaryText && (_jsx("p", { className: "af-content-item-mono__secondary-text", children: secondaryText })), tertiaryText && size !== ContentItemMonoSize.XL && (_jsx("p", { className: "af-content-item-mono__tertiary-text", children: tertiaryText }))] })] }));
+};

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+import { List } from "../List";
+import { ContentItemMono } from "./ContentItemMono";
+declare const meta: Meta<typeof ContentItemMono>;
+export default meta;
+export declare const Default: StoryObj<typeof ContentItemMono>;
+export declare const ContentItemMonoWithIcon: StoryObj<typeof ContentItemMono>;
+export declare const ContentItemMonoWithStick: StoryObj<typeof ContentItemMono>;
+export declare const ContentItemMonoList: StoryObj<{
+    items: (ComponentProps<typeof ContentItemMono> & {
+        id: string;
+    })[];
+} & Omit<ComponentProps<typeof List>, "classModifier"> & {
+    classModifier: string[];
+}>;

package/dist/List/ContentItemMono/ContentItemMono.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import arrowForward from "@material-symbols/svg-400/rounded/arrow_forward.svg";
+import { Svg } from "../../Svg";
+import { List } from "../List";
+import { ContentItemMono } from "./ContentItemMono";
+import { ContentItemMonoSize } from "./constants";
+const meta = {
+    title: "Components/List/ContentItemMono",
+    component: ContentItemMono,
+};
+export default meta;
+const defaultArgs = {
+    children: "Texte principal",
+    secondaryText: "Texte secondaire",
+    tertiaryText: "Texte tertiaire",
+    size: ContentItemMonoSize.M,
+    isDisabled: false,
+    leftElement: "",
+    isLeftElementCentered: false,
+    hasStick: false,
+    classModifier: "",
+};
+const contentItemMonoWithIconArgs = {
+    children: "Texte principal",
+    secondaryText: "Texte secondaire",
+    tertiaryText: "Texte tertiaire",
+    size: ContentItemMonoSize.M,
+    isDisabled: false,
+    leftElement: _jsx(Svg, { src: arrowForward }),
+    isLeftElementCentered: true,
+    hasStick: false,
+    classModifier: "",
+};
+const contentItemMonoWithStickArgs = {
+    children: "Texte principal",
+    secondaryText: "Texte secondaire",
+    tertiaryText: "",
+    size: ContentItemMonoSize.M,
+    isDisabled: false,
+    leftElement: "",
+    isLeftElementCentered: false,
+    hasStick: true,
+    classModifier: "",
+};
+export const Default = {
+    name: "Default",
+    render: (args) => _jsx(ContentItemMono, { ...args }),
+    args: defaultArgs,
+    argTypes: {
+        size: {
+            options: Object.values(ContentItemMonoSize),
+            control: { type: "select" },
+            defaultValue: "m",
+        },
+    },
+};
+export const ContentItemMonoWithIcon = {
+    name: "ContentItemMono With Icon",
+    render: (args) => _jsx(ContentItemMono, { ...args }),
+    args: contentItemMonoWithIconArgs,
+    argTypes: {
+        size: {
+            options: Object.values(ContentItemMonoSize),
+            control: { type: "select" },
+            defaultValue: "m",
+        },
+    },
+};
+export const ContentItemMonoWithStick = {
+    name: "ContentItemMono With Stick",
+    render: (args) => _jsx(ContentItemMono, { ...args }),
+    args: contentItemMonoWithStickArgs,
+    argTypes: {
+        size: {
+            options: Object.values(ContentItemMonoSize),
+            control: { type: "select" },
+            defaultValue: "m",
+        },
+    },
+};
+export const ContentItemMonoList = {
+    name: "ContentItemMono List",
+    render: ({ items, classModifier, ...args }) => (_jsx(List, { classModifier: classModifier.join(" "), ...args, children: items.map((itemsArgs) => (_jsx(ContentItemMono, { ...itemsArgs }, itemsArgs.id))) })),
+    args: {
+        items: [
+            { id: "1", ...defaultArgs },
+            { id: "2", ...contentItemMonoWithIconArgs },
+            { id: "3", ...contentItemMonoWithStickArgs },
+        ],
+        classModifier: [],
+    },
+    argTypes: {
+        classModifier: {
+            options: ["large", "first-separator-full-width"],
+            control: { type: "multi-select" },
+            defaultValue: [],
+        },
+    },
+};

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

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

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { ContentItemMono } from "../ContentItemMono";
+import { ContentItemMonoSize } from "../constants";
+describe("ContentItemMono", () => {
+    it("should render correctly", () => {
+        const children = "Content";
+        const secondaryText = "Secondary Text";
+        const tertiaryText = "Tertiary Text";
+        const leftElement = "Left Element";
+        render(_jsx(ContentItemMono, { secondaryText: secondaryText, tertiaryText: tertiaryText, leftElement: leftElement, hasStick: true, children: children }));
+        expect(screen.getByText(children)).toBeInTheDocument();
+        expect(screen.getByText(secondaryText)).toBeInTheDocument();
+        expect(screen.getByText(tertiaryText)).toBeInTheDocument();
+        expect(screen.getByText(leftElement)).toBeInTheDocument();
+        expect(screen.getByRole("presentation")).toBeInTheDocument();
+    });
+    it("should have custom class and M size", () => {
+        const className = "custom-class";
+        render(_jsx(ContentItemMono, { className: className, children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--m`);
+    });
+    it("should have XL size and no tertiary text", () => {
+        const className = "custom-class";
+        render(_jsx(ContentItemMono, { className: className, size: ContentItemMonoSize.XL, tertiaryText: "tertiaryText", children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--xl`);
+        expect(screen.queryByText("tertiaryText")).not.toBeInTheDocument();
+    });
+    it("should have custom class with modifier", () => {
+        const className = "custom-class";
+        const classModifier = "modifier";
+        render(_jsx(ContentItemMono, { className: className, classModifier: classModifier, children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--${classModifier}`);
+    });
+    it("should be disabled", () => {
+        const className = "custom-class";
+        render(_jsx(ContentItemMono, { className: className, isDisabled: true, children: "Content" }));
+        expect(screen.getByText("Content").parentElement?.parentElement).toHaveClass(`${className} ${className}--disabled`);
+    });
+    it("should have centered left element", () => {
+        const leftElement = "Left Element";
+        render(_jsx(ContentItemMono, { leftElement: leftElement, isLeftElementCentered: true, children: "Content" }));
+        expect(screen.getByText(leftElement)).toHaveClass("af-content-item-mono__left-container af-content-item-mono__left-container--center");
+    });
+});

package/dist/List/ContentItemMono/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ContentItemMonoSize {
+    XL = "xl",
+    M = "m"
+}

package/dist/List/ContentItemMono/constants.js

@@ -0,0 +1,5 @@
+export var ContentItemMonoSize;
+(function (ContentItemMonoSize) {
+    ContentItemMonoSize["XL"] = "xl";
+    ContentItemMonoSize["M"] = "m";
+})(ContentItemMonoSize || (ContentItemMonoSize = {}));

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

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemMono/ContentItemMono.scss";
+export { ContentItemMonoSize } from "./constants";
+export { ContentItemMono } from "./ContentItemMono";

package/dist/List/ContentItemMono/index.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemMono/ContentItemMono.scss";
+export { ContentItemMonoSize } from "./constants";
+export { ContentItemMono } from "./ContentItemMono";

package/dist/List/ContentTabList/ContentTabItem/ContentTabItem.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.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Tag } from "../../..";
+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.test.d.ts

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

package/dist/List/ContentTabList/ContentTabItem/__tests__/ContentTabItem.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 "../../../..";
+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";
+export type { TContentTabItem } from "./types";

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "../List";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentTabList/ContentTabList.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 extra-padding content-tab-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, ...item }) => (_jsx(ContentTabItem, { ...item, isMobile: isMobile }, id ?? item.title))) }));
+};

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ComponentProps } from "react";
+import { ContentTabList } from "./ContentTabList";
+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.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 "../..";
+import { ContentTabList } from "./ContentTabList";
+const meta = {
+    title: "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.test.d.ts

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