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

package/dist/Layout/Footer/Footer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Footer/Footer.scss";
+import expandMore from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
+import classNames from "classnames";
+import { useCallback, useState } from "react";
+import { MenuIcons } from "./MenuIcons";
+import { MenuLink } from "./MenuLink";
+import { Svg } from "../../Svg";
+export const Footer = ({ links, socialMedias = [], copyright, expandLinkText, id, }) => {
+    const [isAboutOpen, setIsAboutOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setIsAboutOpen((isOpen) => !isOpen);
+    }, []);
+    return (_jsxs("footer", { id: id, className: "af-footer", children: [_jsxs("div", { className: "af-footer__footerTop", children: [_jsxs("nav", { className: "af-footer__menuTop", "aria-label": expandLinkText, children: [_jsxs("button", { type: "button", onClick: handleClick, className: "af-footer__menuAboutTrigger", children: [_jsx("span", { className: "af-footer__menuAboutTriggerText", children: expandLinkText }), _jsx(Svg, { src: expandMore, className: classNames("af-footer__icon", "af-footer__iconTrigger", isAboutOpen && "af-footer__iconTrigger--display") })] }), _jsx(MenuLink, { links: links, isAboutOpen: isAboutOpen })] }), _jsx(MenuIcons, { socialMedias: socialMedias })] }), _jsx("div", { className: "af-footer__footerBottom", children: _jsx("div", { className: "af-footer__footerBottomWidth", children: _jsx("span", { className: "af-footer__textCopyright", children: copyright }) }) })] }));
+};

package/dist/Layout/Footer/Footer.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Footer } from "./Footer";
+import { SocialMedia } from "./MenuIcons";
+import { Link } from "./MenuLink";
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof Footer>, "links" | "socialMedias" | "copyright" | "expandLinkText"> & {
+    links: Link[];
+    socialMedias?: SocialMedia[];
+    copyright: string;
+    expandLinkText: string;
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;

package/dist/Layout/Footer/Footer.stories.js

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

package/dist/Layout/Footer/MenuIcons.d.ts

@@ -0,0 +1,9 @@
+export type SocialMedia = {
+    icon: "facebook" | "twitter" | "youtube" | "linkedin";
+    link: string;
+};
+type MenuIconsProps = {
+    socialMedias: SocialMedia[];
+};
+export declare const MenuIcons: ({ socialMedias }: MenuIconsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Layout/Footer/MenuIcons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicIcon } from "./DynamicIcons";
+export const MenuIcons = ({ socialMedias }) => {
+    if (socialMedias.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { className: "af-footer__footerMenuIcons", children: socialMedias.map((socialItem) => (_jsx("a", { "aria-label": `social media ${socialItem.icon}`, className: "af-footer__menuIconLinks", href: socialItem.link, target: "_blank", rel: "noopener noreferrer", children: _jsx(DynamicIcon, { iconName: socialItem.icon }) }, socialItem.icon))) }));
+};

package/dist/Layout/Footer/MenuLink.d.ts

@@ -0,0 +1,11 @@
+export type Link = {
+    link: string;
+    text: string;
+    openInCurrentTab?: boolean;
+};
+type MenuLinkProps = {
+    links: Link[];
+    isAboutOpen?: boolean;
+};
+export declare const MenuLink: ({ links, isAboutOpen }: MenuLinkProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Layout/Footer/MenuLink.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useIsSmallScreen } from "../../utilities";
+const BREAKPOINT_SMALL = 1024;
+export const MenuLink = ({ links, isAboutOpen = false }) => {
+    const isSmallScreen = useIsSmallScreen(BREAKPOINT_SMALL);
+    if (links.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: classNames("af-footer__menuLinks", isAboutOpen && "af-footer__menuLinks--display"), children: links.map((menuItem) => (_jsx("a", { className: "af-footer__linkItem", href: menuItem.link, target: menuItem.openInCurrentTab ? "_top" : "_blank", rel: "noreferrer", tabIndex: isSmallScreen && !isAboutOpen ? -1 : undefined, children: menuItem.text }, menuItem.text))) }));
+};

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

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
+import { ComponentPropsWithoutRef } from "react";
+type HeaderProps = {
+    defaultActiveLink?: number;
+    previousLink?: JSX.Element;
+    rightItem?: JSX.Element[];
+} & ComponentPropsWithoutRef<"header">;
+export declare const Header: ({ children, defaultActiveLink, previousLink, rightItem, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Layout/Header/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
+import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
+import { useCallback, useState } from "react";
+import { NavBar } from "./NavBar";
+import { PreviousLink } from "./PreviousLink/PreviousLink";
+export const Header = ({ children, defaultActiveLink, previousLink, rightItem, }) => {
+    const [activeLink, setActiveLink] = useState(defaultActiveLink);
+    const resetActiveLink = useCallback(() => setActiveLink(defaultActiveLink), [defaultActiveLink]);
+    return (_jsxs("header", { className: "af-header", children: [_jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "" }), children && (_jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children }))] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem })] }), previousLink && (_jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }))] }));
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Header } from "./Header";
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<React.ComponentProps<typeof Header>>;
+export declare const Default: Story;
+export declare const HeaderWithNavBar: StoryObj<typeof Header>;
+export declare const HeaderWithNavBarAndRightItem: StoryObj<typeof Header>;
+export declare const HeaderWithLinksAndRightItemAndPreviousLink: StoryObj<typeof Header>;
+export declare const HeaderWithLinksAndRightItemAndPreviousLinkAndActiveLink: StoryObj<typeof Header>;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import person from "@material-symbols/svg-400/outlined/person-fill.svg";
+import lock from "@material-symbols/svg-400/outlined/lock-fill.svg";
+import { Svg } from "../../Svg";
+import { Button, ButtonVariants } from "../..";
+import { Header } from "./Header";
+const meta = {
+    component: Header,
+    title: "Components/Header",
+};
+export default meta;
+export const Default = {
+    name: "Header",
+    render: () => _jsx(Header, {}),
+};
+export const HeaderWithNavBar = {
+    name: "Header with navigation bar",
+    render: () => (_jsxs(Header, { children: [_jsx("a", { className: "af-navbar-item__link", href: "/mes-contrats", target: "_", children: "MES CONTRATS" }, "MES CONTRATS link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-avantages", target: "_", children: "MES AVANTAGES" }, "MES AVANTAGES link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-documents", target: "_", children: "MES DOCUMENTS" }, "MES DOCUMENTS link")] })),
+};
+export const HeaderWithNavBarAndRightItem = {
+    name: "Header with navigation bar and right item",
+    render: ({ rightItem }) => (_jsxs(Header, { rightItem: rightItem, 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")] })),
+    args: {
+        rightItem: [
+            _jsx(Button, { iconLeft: _jsx(Svg, { src: lock, fill: "#00008f" }), variant: ButtonVariants.secondary, children: "Espace Banque" }, "Banking Space Button"),
+            _jsx(Button, { iconLeft: _jsx(Svg, { src: person, fill: "#00008f" }), variant: ButtonVariants.ghost, children: "Mon Profil" }, "Profile Button"),
+        ],
+    },
+};
+export const HeaderWithLinksAndRightItemAndPreviousLink = {
+    name: "Header with links, right item and Previous link",
+    render: ({ previousLink, rightItem }) => (_jsxs(Header, { previousLink: previousLink, rightItem: rightItem, 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")] })),
+    args: {
+        previousLink: (_jsx("a", { href: "/mes-contrats", children: "Retour \u00E0 mes contrats" }, "Previous link")),
+        rightItem: [
+            _jsx(Button, { iconLeft: _jsx(Svg, { src: lock, fill: "#00008f" }), variant: ButtonVariants.secondary, children: "Espace Banque" }, "Banking Space Button"),
+            _jsx(Button, { iconLeft: _jsx(Svg, { src: person, fill: "#00008f" }), variant: ButtonVariants.ghost, children: "Mon Profil" }, "Profile Button"),
+        ],
+    },
+};
+export const HeaderWithLinksAndRightItemAndPreviousLinkAndActiveLink = {
+    name: "Header with links, right item, Previous link and active link",
+    render: ({ defaultActiveLink, previousLink, rightItem }) => (_jsxs(Header, { defaultActiveLink: defaultActiveLink, previousLink: previousLink, rightItem: rightItem, 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")] })),
+    args: {
+        defaultActiveLink: 0,
+        previousLink: (_jsx("a", { href: "/mes-contrats", children: "Retour \u00E0 mes contrats" }, "Previous link")),
+        rightItem: [
+            _jsx(Button, { iconLeft: _jsx(Svg, { src: lock, fill: "#00008f" }), variant: ButtonVariants.secondary, children: "Espace Banque" }, "Banking Space Button"),
+            _jsx(Button, { iconLeft: _jsx(Svg, { src: person, fill: "#00008f" }), variant: ButtonVariants.ghost, children: "Mon Profil" }, "Profile Button"),
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
+type NavBarProps = {
+    activeLink?: number;
+    setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+} & ComponentPropsWithoutRef<"nav">;
+declare const NavBar: ({ activeLink, children, setActiveLink, ...otherProps }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element;
+export { NavBar };

package/dist/Layout/Header/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-look-and-feel-css/dist/Layout/Header/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/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/NavBar/NavBar.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavBar } from "./NavBar";
+const meta = {
+    title: "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, setActiveLink }) => (_jsxs(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, 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")] })),
+    args: {
+        activeLink: 0,
+    },
+};

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import arrowBack from "@material-symbols/svg-400/outlined/arrow_back.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/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 (_jsx("div", { className: "af-header-previous-link-container", ...otherProps, children: React.Children.map(validChildren, (child) => React.cloneElement(child, {
+            children: (_jsxs(_Fragment, { children: [_jsx(Svg, { className: "af-header-previous-link__icon", src: arrowBack }), _jsx("span", { className: "af-header-previous-link__text", children: child.props.children })] })),
+            className: "af-header-previous-link",
+            onClick: handleClick,
+        })) }));
+};
+export { PreviousLink };

package/dist/Layout/Header/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/PreviousLink/PreviousLink.stories.js

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

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

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

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

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

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

package/dist/Layout/Header/index.js

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

package/dist/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Link/Link.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.js

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

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

package/dist/Link/Link.stories.js

@@ -0,0 +1,14 @@
+import { Link } from "./Link";
+const meta = {
+    title: "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.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.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.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-look-and-feel-css/dist/List/ClickList/ClickList.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.stories.d.ts

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

package/dist/List/ClickList/index.js

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

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

@@ -0,0 +1,13 @@
+type ContentItemDuoProps = {
+    label: string;
+    value: string;
+    isVertical?: boolean;
+    className?: string;
+    classModifier?: string;
+    isShowingDoneIcon?: boolean;
+    isShowingCloseIcon?: boolean;
+    buttonText?: string;
+    onButtonClick?: () => void;
+};
+export declare const ContentItemDuo: ({ label, value, isVertical, className, classModifier, isShowingDoneIcon, isShowingCloseIcon, buttonText, onButtonClick, }: ContentItemDuoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import checkIcon from "@material-symbols/svg-400/outlined/check.svg";
+import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
+import { useMemo } from "react";
+import { Variants } from "../../Button/Button";
+import { getComponentClassName } from "../../utilities";
+import { Button, Svg } from "../..";
+export const ContentItemDuo = ({ label, value, isVertical = false, className, classModifier, isShowingDoneIcon = false, isShowingCloseIcon = false, buttonText, onButtonClick, }) => {
+    const componentClassName = useMemo(() => {
+        const classModifiers = [classModifier];
+        if (isVertical) {
+            classModifiers.push("vertical");
+        }
+        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-duo");
+    }, [classModifier, className, isVertical]);
+    const iconContainerModifier = useMemo(() => ` af-content-item-duo__icon--${isShowingDoneIcon ? "done" : "close"}`, [isShowingDoneIcon]);
+    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), _jsx("p", { className: "af-content-item-duo__value", children: value }), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
+};

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

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