@axa-fr/design-system-look-and-feel-react 1.0.5-ci.118 → 1.0.5-ci.119

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

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type Dispatch, type ReactElement, type SetStateAction } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+type BurgerMenuProps = {
+    isOpen: boolean;
+    items: ReactElement[];
+    setActiveLink: Dispatch<SetStateAction<number | undefined>>;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+} & ComponentPropsWithoutRef<"nav">;
+declare const BurgerMenu: ({ isOpen, items, setActiveLink, setIsOpen, ...props }: BurgerMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export { BurgerMenu };

package/dist/Layout/Header/BurgerMenu/BurgerMenu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/BurgerMenu/BurgerMenu.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+import classNames from "classnames";
+import { ClickItem, createClickItemParent } from "../../../List/ClickList";
+const BurgerMenu = ({ isOpen, items, setActiveLink, setIsOpen, ...props }) => {
+    const handleOnClick = (index) => () => {
+        setActiveLink(index);
+        setIsOpen(false);
+    };
+    if (items.length === 0)
+        return null;
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal mobile", "aria-hidden": !isOpen, className: classNames("af-card", "af-card--list", "af-burger-menu", {
+            open: isOpen,
+        }), ...props, children: _jsx("ul", { role: "menubar", children: items.map((item, index) => {
+                const { key, props: itemProps, type } = item;
+                const { children, ...otherProps } = itemProps;
+                return (_jsx("li", { className: "af-list__item", role: "none", children: _jsx(ClickItem, { classModifier: "small", onClick: handleOnClick(index), parentClickComponent: createClickItemParent(type, {
+                            ...otherProps,
+                            role: "menuitem",
+                        }), children: children }) }, key ?? `list item ${index}`));
+            }) }) }));
+};
+export { BurgerMenu };

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

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

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

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

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

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

package/dist/Layout/Header/Header.js

@@ -1,11 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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/logo-axa.svg";
-import { useCallback, useState, } from "react";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useState, } from "react";
+import menu from "@material-symbols/svg-400/outlined/menu.svg";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
-export const Header = ({ children, defaultActiveLink, previousLink, rightItem, }) => {
+import { Button, IconBg, Svg } from "../..";
+import { BurgerMenu } from "./BurgerMenu";
+import { BREAKPOINT } from "../../utilities";
+export const Header = ({ children, defaultActiveLink, previousLink, rightItem, ...props }) => {
     const [activeLink, setActiveLink] = useState(defaultActiveLink);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleMenu = () => setIsOpen((prev) => !prev);
     const resetActiveLink = useCallback(() => setActiveLink(defaultActiveLink), [defaultActiveLink]);
-    return (_jsxs(_Fragment, { children: [_jsx("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 }))] }));
+    useEffect(() => {
+        const handleResize = () => {
+            if (window.innerWidth > BREAKPOINT.MD && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [isOpen]);
+    const burgerMenuItems = useMemo(() => {
+        const mapValidElements = (items) => (Children.map(items, (child) => isValidElement(child) && child) ?? []).filter(Boolean);
+        const validLinks = mapValidElements(children);
+        if (!rightItem || !isValidElement(rightItem)) {
+            return validLinks;
+        }
+        if (Array.isArray(rightItem)) {
+            return [...validLinks, ...mapValidElements(rightItem)];
+        }
+        return [...validLinks, rightItem];
+    }, [children, rightItem]);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "af-header", ...props, children: [_jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "logo AXA" }), _jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children })] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx(Button, { "aria-label": isOpen ? "Fermer le menu" : "Ouvrir le menu", onClick: toggleMenu, variant: "ghost", children: _jsx(IconBg, { children: _jsx(Svg, { src: menu, "aria-hidden": "true" }) }) }))] }), _jsx(BurgerMenu, { isOpen: isOpen, items: burgerMenuItems, setActiveLink: setActiveLink, setIsOpen: setIsOpen })] }), _jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }), burgerMenuItems && burgerMenuItems.length > 0 && (_jsx("div", { className: `af-header-overlay ${isOpen ? "open" : ""}` }))] }));
 };

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

@@ -4,5 +4,5 @@ type NavBarProps = {
     activeLink?: number;
     setActiveLink: Dispatch<SetStateAction<number | undefined>>;
 } & ComponentPropsWithoutRef<"nav">;
-declare const NavBar: ({ activeLink, children, setActiveLink, ...otherProps }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element;
+declare const NavBar: ({ activeLink, children, setActiveLink, ...props }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element | null;
 export { NavBar };

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

@@ -1,10 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isValidElement, useMemo, Children, cloneElement, } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
-const NavBar = ({ activeLink, children, setActiveLink, ...otherProps }) => {
+import classNames from "classnames";
+const NavBar = ({ activeLink, children, setActiveLink, ...props }) => {
     const validChildren = useMemo(() => (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: Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: cloneElement(child, {
-                    className: `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
+    if (validChildren.length === 0)
+        return null;
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...props, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: cloneElement(child, {
+                    className: classNames("af-navbar-item__link", {
+                        "af-navbar-item__link--active": index === activeLink,
+                    }),
                     onClick: () => setActiveLink(index),
                     onFocus: () => setActiveLink(index),
                     role: "menuitem",

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

@@ -3,5 +3,5 @@ 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;
+declare const PreviousLink: ({ handleClick, children, ...otherProps }: PropsWithChildren<PreviousLinkProps>) => import("react/jsx-runtime").JSX.Element | null;
 export { PreviousLink };

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

@@ -5,8 +5,10 @@ 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]);
+    if (validChildren.length === 0)
+        return null;
     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, { src: arrowBack }), child.props.children] })),
+            children: (_jsxs(_Fragment, { children: [_jsx(Svg, { src: arrowBack, "aria-hidden": true }), child.props.children] })),
             className: "af-btn-client af-btn-client--ghost af-btn-client--header-previous-link",
             onClick: handleClick,
         })) }));

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

@@ -1 +1,4 @@
+export { BurgerMenu } from "./BurgerMenu";
 export { Header } from "./Header";
+export { NavBar } from "./NavBar";
+export { PreviousLink } from "./PreviousLink";

package/dist/Layout/Header/index.js

@@ -1 +1,4 @@
+export { BurgerMenu } from "./BurgerMenu";
 export { Header } from "./Header";
+export { NavBar } from "./NavBar";
+export { PreviousLink } from "./PreviousLink";

package/dist/index.d.ts

@@ -17,9 +17,7 @@ export { TextArea } from "./Form/TextArea";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
-export { Header } from "./Layout/Header";
-export { NavBar } from "./Layout/Header/NavBar/NavBar";
-export { PreviousLink } from "./Layout/Header/PreviousLink";
+export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";

package/dist/index.js

@@ -16,9 +16,7 @@ export { TextArea } from "./Form/TextArea";
 export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
-export { Header } from "./Layout/Header";
-export { NavBar } from "./Layout/Header/NavBar/NavBar";
-export { PreviousLink } from "./Layout/Header/PreviousLink";
+export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.118",
+  "version": "1.0.5-ci.119",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.118",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.119",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },