@axa-fr/design-system-apollo-react 1.0.5-alpha.438 → 1.0.5-alpha.440

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/Message/Message.helpers.d.ts

@@ -0,0 +1,5 @@
+import type { MessageVariants } from "./types";
+/**
+ * Returns the appropriate ARIA role for a message variant
+ */
+export declare const getAriaRole: (variant: MessageVariants) => "alert" | "status";

package/dist/Message/Message.helpers.js

@@ -0,0 +1,7 @@
+import { messageVariants } from "./constants";
+/**
+ * Returns the appropriate ARIA role for a message variant
+ */
+export const getAriaRole = (variant) => variant === messageVariants.error || variant === messageVariants.warning
+    ? "alert"
+    : "status";

package/dist/Message/MessageApollo.d.ts

@@ -1,2 +1,5 @@
 import "@axa-fr/design-system-apollo-css/dist/Message/MessageApollo.scss";
-export { Message, messageVariants, type MessageVariants, } from "./MessageCommon";
+import { type MessageProps } from "./MessageCommon";
+export { messageVariants } from "./constants";
+export type { MessageVariants } from "./types";
+export declare const Message: (props: MessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Message/MessageApollo.js

@@ -1,2 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Message/MessageApollo.scss";
-export { Message, messageVariants, } from "./MessageCommon";
+import { Icon } from "..";
+import { MessageCommon } from "./MessageCommon";
+export { messageVariants } from "./constants";
+export const Message = (props) => (_jsx(MessageCommon, { ...props, IconComponent: Icon }));

package/dist/Message/MessageCommon.d.ts

@@ -1,21 +1,25 @@
-import { type ComponentPropsWithoutRef, ComponentType, type PropsWithChildren, type ReactElement } from "react";
+import type { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode } from "react";
 import type { ButtonProps } from "../Button/ButtonCommon";
+import type { Icon } from "../Icon/IconCommon";
 import { Link } from "../Link/LinkCommon";
+import type { MessageVariants } from "./types";
 type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
-export declare const messageVariants: {
-    readonly validation: "validation";
-    readonly error: "error";
-    readonly warning: "warning";
-    readonly information: "information";
-    readonly neutral: "neutral";
-};
-export type MessageVariants = keyof typeof messageVariants;
 export type MessageProps = {
+    /** Message variant (validation, error, warning, information, neutral) */
     variant: MessageVariants;
+    /** Title displayed in the message */
     title?: string;
+    /** Main content of the message */
+    children?: ReactNode;
+    /** Action (link or button) displayed on the right side of the message */
     action?: ReactElement<typeof Link | ComponentType<ButtonProps>>;
+    /** Icon size in pixels */
     iconSize?: number;
+    /** HTML heading level used for the title */
     heading?: Headings;
-} & ComponentPropsWithoutRef<"div">;
-export declare const Message: ({ variant, className, title, children, action, iconSize, heading: Heading, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;
+} & ComponentPropsWithoutRef<"section">;
+type MessagePropsWithComponents = MessageProps & {
+    IconComponent: typeof Icon;
+};
+export declare const MessageCommon: ({ variant, className, title, children, action, iconSize, heading: Heading, IconComponent, ...sectionProps }: MessagePropsWithComponents) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Message/MessageCommon.js

@@ -1,28 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
-import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
-import warningIcon from "@material-symbols/svg-400/outlined/warning-fill.svg";
-import neutralIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
-import infoIcon from "@material-symbols/svg-400/outlined/emoji_objects-fill.svg";
-import { useMemo, } from "react";
-import { Svg } from "../Svg/Svg";
-export const messageVariants = {
-    validation: "validation",
-    error: "error",
-    warning: "warning",
-    information: "information",
-    neutral: "neutral",
-};
-const getIconFromType = (variant) => ({
-    [messageVariants.validation]: validationIcon,
-    [messageVariants.error]: errorIcon,
-    [messageVariants.neutral]: neutralIcon,
-    [messageVariants.warning]: warningIcon,
-    [messageVariants.information]: infoIcon,
-})[variant] || infoIcon;
-export const Message = ({ variant = messageVariants.information, className, title, children, action, iconSize = 24, heading: Heading = "h4", }) => {
-    const icon = useMemo(() => getIconFromType(variant), [variant]);
-    return (_jsxs("div", { className: ["af-message", `af-message--${variant}`, className]
+import { iconByVariant, messageVariants } from "./constants";
+import { getAriaRole } from "./Message.helpers";
+const defaultClassName = "af-message";
+export const MessageCommon = ({ variant = messageVariants.information, className, title, children, action, iconSize = 24, heading: Heading = "h4", IconComponent, ...sectionProps }) => {
+    const role = getAriaRole(variant);
+    return (_jsxs("section", { className: [
+            defaultClassName,
+            variant && `${defaultClassName}--${variant}`,
+            className,
+        ]
             .filter(Boolean)
-            .join(" "), role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-message__icon", role: "presentation" }), _jsxs("div", { className: "af-message__content", children: [title ? (_jsx(Heading, { className: "af-message__title", children: title })) : null, children, action ? _jsx("div", { className: "af-message__action", children: action }) : null] })] }));
+            .join(" "), role: role, ...sectionProps, children: [_jsx(IconComponent, { src: iconByVariant[variant], width: iconSize, height: iconSize, className: "af-message__icon", role: "presentation" }), _jsxs("div", { className: "af-message__content", children: [title ? (_jsx(Heading, { className: "af-message__title", children: title })) : null, children, action ? _jsx("div", { className: "af-message__action", children: action }) : null] })] }));
 };

package/dist/Message/MessageLF.d.ts

@@ -1,2 +1,5 @@
 import "@axa-fr/design-system-apollo-css/dist/Message/MessageLF.scss";
-export { Message, messageVariants, type MessageVariants, } from "./MessageCommon";
+import { type MessageProps } from "./MessageCommon";
+export { messageVariants } from "./constants";
+export type { MessageVariants } from "./types";
+export declare const Message: (props: MessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Message/MessageLF.js

@@ -1,2 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Message/MessageLF.scss";
-export { Message, messageVariants, } from "./MessageCommon";
+import { Icon } from "../indexLF";
+import { MessageCommon } from "./MessageCommon";
+export { messageVariants } from "./constants";
+export const Message = (props) => (_jsx(MessageCommon, { ...props, IconComponent: Icon }));

package/dist/Message/constants.d.ts

@@ -0,0 +1,3 @@
+import type { MessageVariants } from "./types";
+export declare const messageVariants: Record<MessageVariants, MessageVariants>;
+export declare const iconByVariant: Record<MessageVariants, string>;

package/dist/Message/constants.js

@@ -0,0 +1,19 @@
+import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import infoIcon from "@material-symbols/svg-400/outlined/emoji_objects-fill.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
+import neutralIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
+import warningIcon from "@material-symbols/svg-400/outlined/warning-fill.svg";
+export const messageVariants = {
+    validation: "validation",
+    error: "error",
+    warning: "warning",
+    information: "information",
+    neutral: "neutral",
+};
+export const iconByVariant = {
+    validation: validationIcon,
+    error: errorIcon,
+    neutral: neutralIcon,
+    warning: warningIcon,
+    information: infoIcon,
+};

package/dist/Message/types.d.ts

@@ -0,0 +1 @@
+export type MessageVariants = "validation" | "error" | "warning" | "information" | "neutral";

package/dist/Message/types.js

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

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.438",
+  "version": "1.0.5-alpha.440",
   "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.438",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.438",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.440",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.440",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },