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

package/dist/IconBg/IconBg.client.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../agent";
+export const IconBg = ({ children, className, classModifier, isDisabled = false, }) => {
+    const componentClassName = useMemo(() => {
+        let newClassModifier = classModifier;
+        if (isDisabled) {
+            newClassModifier += " disabled";
+        }
+        return getComponentClassName(className, newClassModifier, "af-icon-bg");
+    }, [classModifier, isDisabled, className]);
+    return _jsx("div", { className: componentClassName, children: children });
+};

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

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

package/dist/IconBg/IconBg.client.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import article from "@material-symbols/svg-400/outlined/article-fill.svg";
+import { IconBg } from ".";
+import { Svg } from "../Svg";
+const meta = {
+    title: "Client/Components/IconBg",
+    parameters: {
+        backgrounds: {
+            default: "dark",
+        },
+    },
+    component: IconBg,
+};
+export default meta;
+export const Default = {
+    name: "IconBg",
+    render: (args) => _jsx(IconBg, { ...args }),
+    args: {
+        children: _jsx(Svg, { src: article }),
+        isDisabled: false,
+        classModifier: "secondary",
+    },
+};

package/dist/IconBg/__tests__/IconBg.client.test.d.ts

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

package/dist/IconBg/__tests__/IconBg.client.test.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { IconBg } from "..";
+describe("IconBg", () => {
+    it("should render children", () => {
+        render(_jsx(IconBg, { children: "An IconBg" }));
+        const iconBg = screen.getByText("An IconBg");
+        expect(iconBg).toHaveClass("af-icon-bg");
+    });
+    it("should have custom class", () => {
+        render(_jsx(IconBg, { className: "custom-class", children: "An IconBg" }));
+        expect(screen.getByText("An IconBg")).toHaveClass("custom-class");
+    });
+    it("should have custom class with modifier", () => {
+        render(_jsx(IconBg, { className: "custom-class", classModifier: "modifier", children: "An IconBg" }));
+        expect(screen.getByText("An IconBg")).toHaveClass("custom-class custom-class--modifier");
+    });
+    it("should be disabled", () => {
+        render(_jsx(IconBg, { className: "custom-class", isDisabled: true, children: "An IconBg" }));
+        expect(screen.getByText("An IconBg")).toHaveClass("custom-class custom-class--disabled");
+    });
+});

package/dist/IconBg/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-slash-css/dist/IconBg/IconBg.client.scss";
+export { IconBg } from "./IconBg.client";

package/dist/IconBg/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-slash-css/dist/IconBg/IconBg.client.scss";
+export { IconBg } from "./IconBg.client";

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

@@ -0,0 +1,12 @@
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.agent.scss";
+type FooterProps = {
+    href?: string;
+    title?: string;
+    alt?: string;
+    icon?: string;
+    className?: string;
+};
+export declare const Footer: import("react").ForwardRefExoticComponent<FooterProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Layout/Footer/Agent/Footer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import logo from "@axa-fr/design-system-slash-css/dist/common/assets/logo-axa.svg";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.agent.scss";
+import { forwardRef } from "react";
+export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsx("footer", { ref: ref, className: className, ...props, children: _jsxs("div", { className: "container-fluid container", children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "blank", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children })] }) })));
+Footer.displayName = "Footer";

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Footer } from "./Footer";
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof Footer>, "children"> & {
+    children: string;
+};
+type Story = StoryObj<StoryProps>;
+export declare const FooterStory: Story;
+export declare const FooterCoreStory: Story;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Footer } from "./Footer";
+const meta = {
+    title: "Agent/Components/Footer",
+    component: Footer,
+    parameters: {
+        options: {},
+    },
+};
+export default meta;
+export const FooterStory = {
+    name: "Default",
+    render: ({ children, ...args }) => _jsx(Footer, { ...args, children: children }),
+};
+export const FooterCoreStory = {
+    name: "Core with HTML children",
+    render: () => (_jsxs(Footer, { children: [_jsx("a", { href: "https://www.axa.fr/", target: "blank", children: _jsx("strong", { children: "@ 2018 AXA" }) }), _jsx("i", { children: "Tous droits r\u00E9serv\u00E9s" })] })),
+};

package/dist/Layout/Footer/Agent/index.d.ts

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

package/dist/Layout/Footer/Agent/index.js

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

package/dist/Layout/Footer/Client/DynamicIcons.d.ts

@@ -0,0 +1,4 @@
+export declare const DynamicIcon: ({ iconName, className, }: {
+    iconName: string;
+    className?: string;
+}) => string | import("react/jsx-runtime").JSX.Element;

package/dist/Layout/Footer/Client/DynamicIcons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import facebook from "../../../assets/svg/facebook.svg";
+import linkedin from "../../../assets/svg/linkedin.svg";
+import twitterx from "../../../assets/svg/twitterx.svg";
+import youtube from "../../../assets/svg/youtube.svg";
+import { Svg } from "../../../Svg";
+export const DynamicIcon = ({ iconName, className, }) => {
+    switch (iconName) {
+        case "facebook":
+            return _jsx(Svg, { src: facebook, className: className });
+        case "twitter":
+            return _jsx(Svg, { src: twitterx, className: className });
+        case "youtube":
+            return _jsx(Svg, { src: youtube, className: className });
+        case "linkedin":
+            return _jsx(Svg, { src: linkedin, className: className });
+        default:
+            return iconName;
+    }
+};

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

@@ -0,0 +1,14 @@
+import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.client.scss";
+import { FC } from "react";
+import { SocialMedia } from "./MenuIcons";
+import { Link } from "./MenuLink";
+type Props = {
+    links: Link[];
+    socialMedias?: SocialMedia[];
+    copyright: string;
+    expandLinkText: string;
+    id?: string;
+};
+export declare const Footer: FC<Props>;
+export {};

package/dist/Layout/Footer/Client/Footer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.client.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/Client/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/Client/Footer.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Footer } from "./Footer";
+const meta = {
+    component: Footer,
+    title: "Client/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/Client/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/Client/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/Client/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/Client/MenuLink.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useIsSmallScreen } from "../../../utilities/hooks/useIsSmallScreen";
+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/Agent/Header.agent.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Header.agent.scss";
+type Props = {
+    children: ReactNode;
+    classModifier?: string;
+    className?: string;
+};
+declare const HeaderAgent: ({ classModifier, className, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export { HeaderAgent };

package/dist/Layout/Header/Agent/Header.agent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Header.agent.scss";
+import { getComponentClassName } from "../../../agent";
+const defaultClassName = "af-header";
+const HeaderAgent = ({ classModifier, className, children }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsx("div", { className: componentClassName, children: _jsx("div", { className: `container ${defaultClassName}__wrapper`, children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }) }));
+};
+export { HeaderAgent };

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { HeaderAgent } from "./Header.agent";
+declare const meta: Meta<typeof HeaderAgent>;
+export default meta;
+export declare const HeaderWithName: StoryObj<typeof HeaderAgent>;
+export declare const HeaderWithNameAndInfos: StoryObj<typeof HeaderAgent>;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import logo from "@axa-fr/design-system-slash-css/dist/common/assets/logo-axa.svg";
+import { HeaderAgent } from "./Header.agent";
+import { Infos } from "./Infos/Infos";
+import { Name } from "./Name/Name";
+const meta = {
+    component: HeaderAgent,
+    title: "Agent/Components/Header",
+};
+export default meta;
+export const HeaderWithName = {
+    name: "Header With Name",
+    args: {
+        children: (_jsx(Name, { alt: "Logo React", img: logo, onClick: () => { }, subtitle: "Baseline", title: "Nom de l'application" })),
+    },
+};
+export const HeaderWithNameAndInfos = {
+    name: "Header With Name And Infos",
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Name, { alt: "Logo React", img: logo, onClick: () => { }, subtitle: "Baseline", title: "Nom de l'application" }), _jsx(Infos, { infos: [
+                        { word: "Customer :", definition: "0123456789 - NOM" },
+                        { word: "Wallet:", definition: "000123456789" },
+                        { word: "Status :", definition: "New business" },
+                    ] })] })),
+    },
+};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Infos/Infos.scss";
+export type TInfo = {
+    definition: ReactNode;
+    id?: string;
+    word: ReactNode;
+};
+type InfosProps = {
+    classModifier?: string;
+    className?: string;
+    infos: TInfo[];
+};
+declare const Infos: ({ infos, className, classModifier }: InfosProps) => import("react/jsx-runtime").JSX.Element;
+export { Infos };

package/dist/Layout/Header/Agent/Infos/Infos.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Infos/Infos.scss";
+import { getComponentClassName } from "../../../../agent";
+const defaultClassName = "af-contrat";
+const Infos = ({ infos, className, classModifier }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => (_jsxs(Fragment, { children: [_jsx("dt", { className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, children: info.definition })] }, `info-${info.id}`))) })] }));
+};
+export { Infos };

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

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

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

@@ -0,0 +1,15 @@
+import { Infos } from "./Infos";
+const meta = {
+    component: Infos,
+    title: "Agent/Components/Header/Infos",
+};
+export default meta;
+export const Default = {
+    args: {
+        infos: [
+            { word: "Customer :", definition: "0123456789 - NOM" },
+            { word: "Wallet:", definition: "000123456789" },
+            { word: "Status :", definition: "New business" },
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+type TMenuTitleWrapperProps = {
+    children: React.ReactNode;
+    menuVisible: boolean;
+    subtitle: string;
+    title: string;
+};
+declare const MenuTitleWrapper: ({ children, menuVisible, subtitle, title, }: TMenuTitleWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuTitleWrapper };

package/dist/Layout/Header/Agent/MenuTitleWrapper/MenuTitleWrapper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { NavBar } from "../NavBar";
+import { TitleHeader } from "../TitleHeader/TitleHeader";
+const MenuTitleWrapper = ({ children, menuVisible, subtitle, title, }) => {
+    const [isMenuVisible, setIsMenuVisible] = useState(menuVisible);
+    const handleClick = useCallback(() => {
+        const { body } = document;
+        body.classList.toggle("af-menu-open");
+        setIsMenuVisible((prev) => !prev);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(NavBar, { isVisible: isMenuVisible, onClick: handleClick, children: children }), _jsx(TitleHeader, { title: title, subtitle: subtitle, toggleMenu: handleClick })] }));
+};
+export { MenuTitleWrapper };

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

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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavBar } from "../NavBar/NavBar";
+import { NavBarItem } from "../NavBar/NavBarItem";
+const meta = {
+    component: NavBar,
+    title: "Agent/Components/Header/MenuTitleWrapper",
+};
+export default meta;
+export const Default = {
+    args: {
+        children: [
+            _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/#", children: "Home" }) }, "home"),
+            _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/forms", children: "Forms" }) }, "forms"),
+            _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/fileupload", children: "Fileupload" }) }, "fileupload"),
+            _jsxs(NavBarItem, { className: "af-nav__item af-nav__item--haschild", "aria-haspopup": "true", "aria-expanded": "false", ariaLabel: "Table", actionElt: _jsx("a", { className: "af-nav__link", href: "/table", children: "Table" }), children: [_jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/table/sous-lien-1", children: "Sous lien 1" }) }, "table-1"), _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/table/sous-lien-2", children: "Sous lien 2" }) }, "table-2"), _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/table/sous-lien-3", children: "Sous lien 3" }) }, "table-3"), _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/table/sous-lien-4", children: "Sous lien 4" }) }, "table-4")] }, "table"),
+            _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/accordion", children: "Accordion" }) }, "accordions"),
+            _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/alerts", children: "Alerts" }) }, "alerts"),
+            _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/validation", children: "Validation" }) }, "validation"),
+            _jsxs(NavBarItem, { className: "af-nav__item af-nav__item--haschild", "aria-haspopup": "true", "aria-expanded": "false", ariaLabel: "Table", actionElt: _jsx("a", { className: "af-nav__link", href: "/doc", children: "Doc" }), children: [_jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/doc/sous-lien-1", children: "Sous lien 1" }) }, "doc-1"), _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/doc/sous-lien-2", children: "Sous lien 2" }) }, "doc-2"), _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/doc/sous-lien-3", children: "Sous lien 3" }) }, "doc-3"), _jsx(NavBarItem, { actionElt: _jsx("a", { className: "af-nav__link", href: "/doc/sous-lien-4", children: "Sous lien 4" }) }, "doc-4")] }, "doc"),
+        ],
+        menuVisible: false,
+        subtitle: "Sous titre",
+        title: "Toolkit Axa",
+    },
+};

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

@@ -0,0 +1,16 @@
+import { MouseEvent } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Name/Name.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Logo/Logo.scss";
+type Props = {
+    alt?: string;
+    classModifier?: string;
+    className?: string;
+    img?: string;
+    onClick?: (action: {
+        event: MouseEvent<HTMLAnchorElement>;
+    }) => void;
+    subtitle?: string;
+    title: string;
+};
+declare const Name: ({ alt, classModifier, className, img, onClick, subtitle, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Name };

package/dist/Layout/Header/Agent/Name/Name.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Name/Name.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Agent/Logo/Logo.scss";
+import { getComponentClassName } from "../../../../agent";
+const defaultClassName = "af-header__name";
+const Name = ({ alt = "logo", classModifier, className, img, onClick, subtitle, title, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("a", { className: "af-logo", href: "/", onClick: (event) => onClick && onClick({ event }), children: _jsx("img", { className: "af-logo__brand", src: img, alt: alt }) }), _jsxs("h2", { className: "af-header__title", children: [title, _jsx("span", { className: "af-header__subtitle", children: subtitle })] })] }));
+};
+export { Name };

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

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

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

@@ -0,0 +1,18 @@
+import logo from "@axa-fr/design-system-slash-css/dist/common/assets/logo-axa.svg";
+import { Name } from "./Name";
+const meta = {
+    component: Name,
+    title: "Agent/Components/Header/Name",
+};
+export default meta;
+export const Default = {
+    args: {
+        alt: "Logo React",
+        img: logo,
+        subtitle: "Baseline",
+        title: "Nom de l'application",
+    },
+    argTypes: {
+        onClick: { action: "onClick" },
+    },
+};

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

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+type Props = {
+    id?: string;
+    toggleMenuId?: string;
+    positionInit?: number;
+    className?: string;
+    isVisible: boolean;
+    children: ReactNode;
+    onClick: (event: React.MouseEvent) => void;
+};
+declare const NavBar: ({ positionInit, children, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { NavBar };

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

@@ -0,0 +1 @@
+export declare const getPosition: (max: number, position: number, direction: string) => number;

package/dist/Layout/Header/Agent/NavBar/NavBar.helpers.js

@@ -0,0 +1,12 @@
+export const getPosition = (max, position, direction) => {
+    switch (direction) {
+        case "ArrowRight":
+        case "ArrowDown":
+            return position + 1 < max ? position + 1 : 0;
+        case "ArrowLeft":
+        case "ArrowUp":
+            return position - 1 < 0 ? max - 1 : position - 1;
+        default:
+            return position;
+    }
+};

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { isValidElement, useCallback, useMemo, useState, } from "react";
+import { getPosition } from "./NavBar.helpers";
+import { NavBarBase } from "./NavBarBase";
+const NavBar = ({ positionInit = 0, children, ...otherProps }) => {
+    const [isMenuFocused, setIsMenuFocused] = useState(false);
+    const [position, setPosition] = useState(positionInit);
+    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    const handleKeys = useCallback((key) => {
+        if (key === "Escape") {
+            setIsMenuFocused(false);
+        }
+        if (key === "ArrowRight" || key === "ArrowLeft") {
+            const newPosition = getPosition(validChildren.length, position, key);
+            setPosition(newPosition);
+        }
+    }, [position, validChildren]);
+    return (_jsx(NavBarBase, { ...otherProps, onFocus: () => setIsMenuFocused(true), onBlur: () => setIsMenuFocused(false), handleKeys: handleKeys, isMenuFocused: isMenuFocused, children: React.Children.map(validChildren, (child, index) => {
+            const isCurrent = index === position;
+            return React.cloneElement(child, {
+                key: `NavBarItem`,
+                classModifier: [
+                    child.props.classModifier,
+                    isCurrent ? "active" : undefined,
+                ]
+                    .filter((c) => Boolean(c))
+                    .join(" "),
+                tabIndex: isCurrent ? 0 : -1,
+                index,
+                hasFocus: isMenuFocused && isCurrent,
+            });
+        }) }));
+};
+export { NavBar };

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

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