@axa-fr/design-system-slash-react 1.2.1-alpha.104 → 1.2.1-alpha.106

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

@@ -1,4 +1,5 @@
-import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 type FooterProps = {
     href?: string;
     title?: string;

package/dist/Layout/Footer/Footer.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import logo from "@axa-fr/design-system-slash-css/logo-axa.svg";
-import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 import { forwardRef } from "react";
-export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", version, 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", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children }), version ? (_jsxs("span", { className: "af-footer-version", children: ["Version ", version] })) : null] }) })));
+import classNames from "classnames";
+export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", version, children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsxs("footer", { ref: ref, className: classNames("af-container", className), ...props, children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children }), version ? (_jsxs("span", { className: "af-footer-version", children: ["Version ", version] })) : null] })));
 Footer.displayName = "Footer";

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

@@ -1,15 +1,38 @@
 import { ReactNode } from "react";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export type AnchorNavBarItem = {
+    /**
+     * name - The display name of the navigation item.
+     */
     name: string;
+    /**
+     * isActive - If true, the item is highlighted as active.
+     */
     isActive?: boolean;
+    /**
+     * onClick - Optional click handler for the navigation item.
+     */
     onClick?: () => void;
+    /**
+     * link - The URL or anchor to navigate to when the item is clicked.
+     */
     link?: string;
+    /**
+     * externalLink - If true, the link will open in a new tab and show an external link icon.
+     */
     externalLink?: boolean;
+    /**
+     * render - Optional custom render function for the navigation item. If provided, it overrides the default rendering.
+     */
     render?: (props: {
         className: string;
     }) => ReactNode;
 };
+/**
+ * Props for the AnchorNavBar component.
+ * items - An array of navigation items to display in the navigation bar.
+ */
 export type AnchorNavBarProps = {
     items: AnchorNavBarItem[];
 };

package/dist/Layout/Header/AnchorNavBar/AnchorNavBar.js

@@ -5,9 +5,10 @@ import { Svg } from "../../../Svg";
 import { Link } from "../../../Link/Link";
 import { linkClassName } from "../../../Link/linkClassName";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/AnchorNavBar/AnchorNavBar.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 const defaultClassName = "af-anchor-navbar";
 export const AnchorNavBar = ({ items }) => {
-    return (_jsx("nav", { className: defaultClassName, children: _jsx("ul", { children: items.map((item) => {
+    return (_jsx("nav", { className: classNames("af-container", defaultClassName), children: _jsx("ul", { children: items.map((item) => {
                 if (item.render) {
                     return (_jsx("li", { children: _jsx(Link, { render: item.render, className: classNames(`${linkClassName} ${defaultClassName}-link`, {
                                 [`${defaultClassName}-link--active`]: item.isActive,
@@ -15,6 +16,6 @@ export const AnchorNavBar = ({ items }) => {
                 }
                 return (_jsx("li", { children: _jsxs(Link, { href: item.link, "aria-current": item.isActive ? "page" : undefined, onClick: item.onClick, className: classNames(`${defaultClassName}-link`, {
                             [`${defaultClassName}-link--active`]: item.isActive,
-                        }), children: [item.name, item.externalLink ? (_jsx(Svg, { role: "presentation", src: externalLinkIcon, className: `${defaultClassName}-external-link-svg` })) : null] }) }, `nav-item-${item.name}`));
+                        }), target: item.externalLink ? "_blank" : undefined, children: [item.name, item.externalLink ? (_jsx(Svg, { role: "presentation", src: externalLinkIcon, className: `${defaultClassName}-external-link-svg` })) : null] }) }, `nav-item-${item.name}`));
             }) }) }));
 };

package/dist/Layout/Header/Header.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/Header.scss";
+import classNames from "classnames";
 import { getComponentClassName } from "../../utilities";
 const defaultClassName = "af-header";
 const Header = ({ 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 }) }) }));
+    return (_jsx("div", { className: classNames("af-container", componentClassName), children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }));
 };
 export { Header };

package/dist/Layout/Header/HeaderTitle/HeaderTitle.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
 import classNames from "classnames";
 import { getComponentClassName } from "../../../utilities";
@@ -10,8 +10,8 @@ const defaultClassName = "af-title-bar";
 const HeaderTitle = ({ children, classModifier, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
     const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);
     const isAnchorNavBarPresent = anchorNavBarItems && anchorNavBarItems.length > 0;
-    return (_jsxs("div", { className: classNames(componentClassName, {
-            [`${defaultClassName}__shadow`]: isAnchorNavBarPresent,
-        }), children: [_jsxs("div", { className: `container ${defaultClassName}__wrapper`, children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("div", { className: `${defaultClassName}__leftSection`, children: [contentLeft, _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle ? (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle })) : null] }), children] }), contentRight ? (_jsx("div", { className: `${defaultClassName}__rightSection`, children: contentRight })) : null] }), isAnchorNavBarPresent ? (_jsx(AnchorNavBar, { items: anchorNavBarItems })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames("af-container", componentClassName, {
+                    [`${defaultClassName}__shadow`]: isAnchorNavBarPresent,
+                }), children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("div", { className: `${defaultClassName}__leftSection`, children: [contentLeft, _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle ? (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle })) : null] }), children] }), contentRight ? (_jsx("div", { className: `${defaultClassName}__rightSection`, children: contentRight })) : null] }), isAnchorNavBarPresent ? (_jsx(AnchorNavBar, { items: anchorNavBarItems })) : null] }));
 };
 export { HeaderTitle };

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

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 import { getComponentClassName } from "../../../utilities";
 const defaultClassName = "af-nav-container";
 const NavBarBase = ({ isVisible = true, onClick, id = "mainmenu", toggleMenuId = "togglemenu", isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: `mask fade ${isVisible ? "show" : ""}`, id: `open-${toggleMenuId}`, "aria-label": "Open Menu" }), _jsx("nav", { className: `af-nav af-drawer left ${isVisible ? "show" : ""}`, role: "navigation", "aria-label": "Menu principal", children: _jsxs("div", { className: "container af-nav__wrapper", children: [_jsxs("div", { className: "af-nav__aside-header", children: [_jsx("h4", { className: "af-nav__aside-title", children: "Menu" }), _jsx("button", { "aria-controls": id, "aria-haspopup": "true", onClick: onClick, type: "button", className: "af-nav__aside-close", id: `close-${toggleMenuId}`, "aria-label": "Close Menu", children: "\u00D7" })] }), _jsx("ul", { onKeyDown: (e) => {
-                                e.preventDefault();
-                                handleKeys(e.key);
-                            }, onFocus: (e) => {
-                                onFocus({ e });
-                            }, onBlur: (e) => {
-                                onBlur({ e });
-                            }, className: `af-nav__list ${isMenuFocused ? "af-nav__list--focused" : ""}`, role: "menubar", id: id, children: children })] }) })] }));
+    return (_jsxs("div", { className: classNames("af-container", componentClassName), children: [_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: `mask fade ${isVisible ? "show" : ""}`, id: `open-${toggleMenuId}`, "aria-label": "Open Menu" }), _jsxs("nav", { className: `af-nav af-drawer left ${isVisible ? "show" : ""}`, role: "navigation", "aria-label": "Menu principal", children: [_jsxs("div", { className: "af-nav__aside-header", children: [_jsx("h4", { className: "af-nav__aside-title", children: "Menu" }), _jsx("button", { "aria-controls": id, "aria-haspopup": "true", onClick: onClick, type: "button", className: "af-nav__aside-close", id: `close-${toggleMenuId}`, "aria-label": "Close Menu", children: "\u00D7" })] }), _jsx("ul", { onKeyDown: (e) => {
+                            e.preventDefault();
+                            handleKeys(e.key);
+                        }, onFocus: (e) => {
+                            onFocus({ e });
+                        }, onBlur: (e) => {
+                            onBlur({ e });
+                        }, className: `af-nav__list ${isMenuFocused ? "af-nav__list--focused" : ""}`, role: "menubar", id: id, children: children })] })] }));
 };
 export { NavBarBase };

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

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.scss";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export { NavBar } from "./NavBar";
 export { NavBarBase } from "./NavBarBase";
 export { NavBarItem, NavBarItemBase, NavBarItemLink } from "./NavBarItem";

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

@@ -1,4 +1,5 @@
 import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.scss";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export { NavBar } from "./NavBar";
 export { NavBarBase } from "./NavBarBase";
 export { NavBarItem, NavBarItemBase, NavBarItemLink } from "./NavBarItem";

package/dist/Layout/MainContainer/MainContainer.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Layout/MainContainer/MainContainer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
+type MainContainerProps = ComponentPropsWithoutRef<"main"> & PropsWithChildren;
+export declare const MainContainer: ({ children, ...othersProps }: MainContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Layout/MainContainer/MainContainer.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Layout/MainContainer/MainContainer.css";
+import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
+export const MainContainer = ({ children, ...othersProps }) => (_jsx("main", { className: "af-container", ...othersProps, children: children }));

package/dist/Link/LinkAnchor.js

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { linkClassName } from "./linkClassName";
 const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, ...restProps }, ref) => {
     const finalClassName = classnames(linkClassName, className);
-    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, ...restProps, children: [leftIcon, children, rightIcon] }));
+    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
 });
 LinkAnchor.displayName = "LinkAnchor";
 export { LinkAnchor };

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
 export { Footer } from "./Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { MainContainer } from "./Layout/MainContainer/MainContainer";
 export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";

package/dist/index.js

@@ -24,6 +24,7 @@ export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
 export { Footer } from "./Layout/Footer";
 export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { MainContainer } from "./Layout/MainContainer/MainContainer";
 export { Link } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.104",
+  "version": "1.2.1-alpha.106",
   "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-slash-css": "1.2.1-alpha.104",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.106",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },