@axa-fr/design-system-apollo-react 1.0.5-alpha.437 → 1.0.5-alpha.439

package/dist/Layout/Footer/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/DynamicIcons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import facebook from "@axa-fr/design-system-apollo-css/facebook.svg";
+import linkedin from "@axa-fr/design-system-apollo-css/linkedin.svg";
+import twitterx from "@axa-fr/design-system-apollo-css/twitterx.svg";
+import youtube from "@axa-fr/design-system-apollo-css/youtube.svg";
+import { Svg } from "../../Svg/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/FooterApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Layout/Footer/FooterApollo.scss";
+export { type FooterProps, Footer } from "./FooterCommon";

package/dist/Layout/Footer/FooterApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Layout/Footer/FooterApollo.scss";
+export { Footer } from "./FooterCommon";

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

@@ -0,0 +1,10 @@
+import { SocialMedia } from "./MenuIcons";
+import { Link } from "./MenuLink";
+export type FooterProps = {
+    links: Link[];
+    socialMedias?: SocialMedia[];
+    copyright: string;
+    expandLinkText: string;
+    id?: string;
+};
+export declare const Footer: ({ links, socialMedias, copyright, expandLinkText, id, }: FooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layout/Footer/FooterCommon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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/Svg";
+export const Footer = ({ links, socialMedias = [], copyright, expandLinkText, id, }) => {
+    const [isAboutOpen, setIsAboutOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setIsAboutOpen((isOpen) => !isOpen);
+    }, []);
+    return (_jsxs("footer", { role: "contentinfo", id: id, className: "af-footer", children: [_jsxs("div", { className: "af-footer__footerTop", children: [_jsxs("nav", { role: "navigation", 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/FooterLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Layout/Footer/FooterLF.scss";
+export { type FooterProps, Footer } from "./FooterCommon";

package/dist/Layout/Footer/FooterLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Layout/Footer/FooterLF.scss";
+export { Footer } from "./FooterCommon";

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", { role: "navigation", className: "af-footer__footerMenuIcons", children: _jsx("ul", { children: socialMedias.map((socialItem) => (_jsx("li", { children: _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/hook/useIsSmallScreen";
+import { BREAKPOINT } from "../../utilities/constants";
+export const MenuLink = ({ links, isAboutOpen = false }) => {
+    const isSmallScreen = useIsSmallScreen(BREAKPOINT.MD);
+    if (links.length === 0) {
+        return null;
+    }
+    return (_jsx("ul", { className: classNames("af-footer__menuLinks", isAboutOpen && "af-footer__menuLinks--display"), children: links.map((menuItem) => (_jsx("li", { children: _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/index.d.ts

@@ -47,3 +47,4 @@ export { Toggle } from "./Toggle/ToggleApollo";
 export { InputPhone } from "./Form/InputPhone/InputPhoneApollo";
 export { type OptionType } from "./Form/InputPhone/InputPhone.types";
 export { Dropdown } from "./Form/Dropdown/DropdownApollo";
+export { Footer, type FooterProps } from "./Layout/Footer/FooterApollo";

package/dist/index.js

@@ -46,3 +46,4 @@ export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
 export { InputPhone } from "./Form/InputPhone/InputPhoneApollo";
 export { Dropdown } from "./Form/Dropdown/DropdownApollo";
+export { Footer } from "./Layout/Footer/FooterApollo";

package/dist/indexLF.d.ts

@@ -51,3 +51,4 @@ export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
 export { type OptionType } from "./Form/InputPhone/InputPhone.types";
 export { Dropdown } from "./Form/Dropdown/DropdownLF";
+export { Footer, type FooterProps } from "./Layout/Footer/FooterLF";

package/dist/indexLF.js

@@ -50,3 +50,4 @@ export { Tag, tagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
 export { Dropdown } from "./Form/Dropdown/DropdownLF";
+export { Footer } from "./Layout/Footer/FooterLF";

package/package.json

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