@axa-fr/canopee-react 2.0.0-alpha.43 → 2.0.0-alpha.45

package/dist/client.d.ts

@@ -78,3 +78,4 @@ export { TagList, type TagListProps, } from "./prospect-client/TagList/TagListLF
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./prospect-client/Toggle/ToggleLF";
 export type { GridContainerProps } from "./prospect-client/utilities/types/GridContainerProps";
+export { MessageBar, type MessageBarProps, type MessageBarVariant, } from "./prospect-client/MessageBar/MessageBarLF";

package/dist/client.js

@@ -77,3 +77,4 @@ export { Tag, tagVariants, } from "./prospect-client/Tag/TagLF";
 export { TagList, } from "./prospect-client/TagList/TagListLF";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./prospect-client/Toggle/ToggleLF";
+export { MessageBar, } from "./prospect-client/MessageBar/MessageBarLF";

package/dist/prospect-client/AccordionCore/AccordionCoreCommon.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentProps, type ComponentType, type MouseEventHandler, type ReactNode } from "react";
+import type { ClickIconVariant } from "../ClickIcon/ClickIconCommon";
 import type { IconProps } from "../Icon/IconCommon";
 type SummaryOnClick = MouseEventHandler<HTMLElement>;
 export type AccordionCoreProps = {
@@ -6,10 +7,11 @@ export type AccordionCoreProps = {
     summaryProps?: Omit<ComponentProps<"summary">, "onClick">;
     onClick?: SummaryOnClick;
     showArrowAsClickIcon?: boolean;
+    arrowClickIconVariant?: ClickIconVariant;
     arrowIconVariant?: IconProps["variant"];
 } & ComponentProps<"details">;
 export type AccordionPropsCommonProps = AccordionCoreProps & {
     IconComponent: ComponentType<IconProps>;
 };
-export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, IconComponent, onClick, showArrowAsClickIcon, arrowIconVariant, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, IconComponent, onClick, showArrowAsClickIcon, arrowClickIconVariant, arrowIconVariant, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/prospect-client/AccordionCore/AccordionCoreCommon.js

@@ -2,13 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import keyboardDown from "@material-symbols/svg-400/rounded/keyboard_arrow_down-fill.svg";
 import { useCallback, } from "react";
 import { getClassName } from "../utilities/getClassName";
-export const AccordionCoreCommon = ({ summary, children, className, summaryProps, IconComponent, onClick, showArrowAsClickIcon = true, arrowIconVariant, ...detailsProps }) => {
+export const AccordionCoreCommon = ({ summary, children, className, summaryProps, IconComponent, onClick, showArrowAsClickIcon = true, arrowClickIconVariant = "default", arrowIconVariant, ...detailsProps }) => {
     const handleSummaryClick = useCallback((event) => {
         if (onClick) {
             event.preventDefault();
             onClick(event);
         }
     }, [onClick]);
+    const arrowClassName = showArrowAsClickIcon
+        ? getClassName({
+            baseClassName: "af-click-icon",
+            modifiers: [arrowClickIconVariant === "ghost" && arrowClickIconVariant],
+        })
+        : undefined;
     return (_jsxs("details", { className: getClassName({
             baseClassName: "af-apollo-accordion",
             className,
@@ -17,6 +23,6 @@ export const AccordionCoreCommon = ({ summary, children, className, summaryProps
                     className: summaryProps?.className,
                 }), children: [summary, _jsx("div", { className: getClassName({
                             baseClassName: "af-accordion__arrow",
-                            className: showArrowAsClickIcon ? "af-click-icon" : "",
+                            className: arrowClassName,
                         }), children: _jsx(IconComponent, { src: keyboardDown, role: "presentation", variant: arrowIconVariant }) })] }), children] }));
 };

package/dist/prospect-client/MessageBar/MessageBarAction.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+import type { ButtonProps } from "../Button/ButtonCommon";
+type MessageBarActionProps = {
+    buttonProps?: ButtonProps;
+    ButtonComponent: ComponentType<ButtonProps>;
+};
+export declare const MessageBarAction: ({ buttonProps, ButtonComponent, }: MessageBarActionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/prospect-client/MessageBar/MessageBarAction.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../utilities/getClassName";
+export const MessageBarAction = ({ buttonProps, ButtonComponent, }) => {
+    if (!buttonProps) {
+        return null;
+    }
+    return (_jsx(ButtonComponent, { ...buttonProps, className: getClassName({
+            baseClassName: "af-message-bar__action",
+            className: buttonProps.className,
+        }) }));
+};

package/dist/prospect-client/MessageBar/MessageBarApollo.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/prospect/MessageBar/MessageBarAll.css";
+import { type MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarVariant } from "./types";
+export declare const MessageBar: (props: MessageBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/MessageBar/MessageBarApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/MessageBar/MessageBarAll.css";
+import { AccordionCore } from "../AccordionCore/AccordionCoreApollo";
+import { Button } from "../Button/ButtonApollo";
+import { Icon } from "../Icon/IconApollo";
+import { MessageBarCommon } from "./MessageBarCommon";
+export const MessageBar = (props) => (_jsx(MessageBarCommon, { ...props, AccordionCoreComponent: AccordionCore, ButtonComponent: Button, IconComponent: Icon }));

package/dist/prospect-client/MessageBar/MessageBarCommon.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef, type ComponentType, type ReactNode } from "react";
+import type { AccordionCoreProps } from "../AccordionCore/AccordionCoreCommon";
+import type { ButtonProps } from "../Button/ButtonCommon";
+import type { IconProps } from "../Icon/IconCommon";
+import type { MessageBarVariant } from "./types";
+export type MessageBarProps = {
+    /** Message title. */
+    title: string;
+    /** Description. Always visible on desktop and collapsible on mobile. */
+    description?: ReactNode;
+    /** Icon displayed before the title. */
+    icon: string;
+    /** Visual variant. */
+    variant?: MessageBarVariant;
+    /** Initial mobile expanded state for the description. */
+    defaultDescriptionOpen?: boolean;
+    /** Action button props. No button is rendered when omitted. */
+    buttonProps?: ButtonProps;
+} & Omit<ComponentPropsWithoutRef<"section">, "children">;
+type MessageBarCommonProps = MessageBarProps & {
+    AccordionCoreComponent: ComponentType<AccordionCoreProps>;
+    ButtonComponent: ComponentType<ButtonProps>;
+    IconComponent: ComponentType<IconProps>;
+};
+export declare const MessageBarCommon: ({ title, description, icon, variant, defaultDescriptionOpen, buttonProps, className, AccordionCoreComponent, ButtonComponent, IconComponent, ...sectionProps }: MessageBarCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/MessageBar/MessageBarCommon.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { BREAKPOINT } from "../utilities/constants";
+import { getClassName } from "../utilities/getClassName";
+import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
+import { MessageBarAction } from "./MessageBarAction";
+import { MessageBarDescription } from "./MessageBarDescription";
+import { MessageBarSummary } from "./MessageBarSummary";
+const iconVariantByMessageBarVariant = {
+    info: "primary",
+    error: "error",
+};
+export const MessageBarCommon = ({ title, description, icon, variant = "info", defaultDescriptionOpen = false, buttonProps, className, AccordionCoreComponent, ButtonComponent, IconComponent, ...sectionProps }) => {
+    const titleId = useId();
+    const isMobile = useIsSmallScreen(BREAKPOINT.MD);
+    const hasDescription = Boolean(description);
+    const sectionAriaLabelledBy = sectionProps["aria-label"] || sectionProps["aria-labelledby"]
+        ? undefined
+        : titleId;
+    const iconVariant = iconVariantByMessageBarVariant[variant];
+    const componentClassName = getClassName({
+        baseClassName: "af-message-bar",
+        modifiers: [variant],
+        className,
+    });
+    const summary = (_jsx(MessageBarSummary, { title: title, titleId: titleId, icon: icon, iconVariant: iconVariant, IconComponent: IconComponent }));
+    const action = (_jsx(MessageBarAction, { buttonProps: buttonProps, ButtonComponent: ButtonComponent }));
+    const body = _jsx(MessageBarDescription, { description: description });
+    if (hasDescription && isMobile) {
+        return (_jsxs(AccordionCoreComponent, { className: componentClassName, role: "region", "aria-labelledby": sectionAriaLabelledBy, open: defaultDescriptionOpen, summary: summary, summaryProps: { className: "af-message-bar__header" }, arrowClickIconVariant: "ghost", arrowIconVariant: iconVariant, ...sectionProps, children: [body, action] }));
+    }
+    return (_jsxs("section", { className: componentClassName, "aria-labelledby": sectionAriaLabelledBy, ...sectionProps, children: [_jsx("div", { className: "af-message-bar__header", children: summary }), body, action] }));
+};

package/dist/prospect-client/MessageBar/MessageBarDescription.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+type MessageBarDescriptionProps = {
+    description?: ReactNode;
+};
+export declare const MessageBarDescription: ({ description, }: MessageBarDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/prospect-client/MessageBar/MessageBarDescription.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MessageBarDescription = ({ description, }) => {
+    if (!description) {
+        return null;
+    }
+    const Component = typeof description === "string" ? "p" : "div";
+    return _jsx(Component, { className: "af-message-bar__body", children: description });
+};

package/dist/prospect-client/MessageBar/MessageBarLF.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/client/MessageBar/MessageBarAll.css";
+import { type MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarProps } from "./MessageBarCommon";
+export type { MessageBarVariant } from "./types";
+export declare const MessageBar: (props: MessageBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/MessageBar/MessageBarLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/MessageBar/MessageBarAll.css";
+import { AccordionCore } from "../AccordionCore/AccordionCoreLF";
+import { Button } from "../Button/ButtonLF";
+import { Icon } from "../Icon/IconLF";
+import { MessageBarCommon } from "./MessageBarCommon";
+export const MessageBar = (props) => (_jsx(MessageBarCommon, { ...props, AccordionCoreComponent: AccordionCore, ButtonComponent: Button, IconComponent: Icon }));

package/dist/prospect-client/MessageBar/MessageBarSummary.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from "react";
+import type { IconProps } from "../Icon/IconCommon";
+type MessageBarSummaryProps = {
+    title: string;
+    titleId: string;
+    icon: string;
+    iconVariant: IconProps["variant"];
+    IconComponent: ComponentType<IconProps>;
+};
+export declare const MessageBarSummary: ({ title, titleId, icon, iconVariant, IconComponent, }: MessageBarSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/MessageBar/MessageBarSummary.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const MessageBarSummary = ({ title, titleId, icon, iconVariant, IconComponent, }) => (_jsxs(_Fragment, { children: [_jsx(IconComponent, { src: icon, className: "af-message-bar__icon", role: "presentation", variant: iconVariant }), _jsx("p", { id: titleId, className: "af-message-bar__title", children: title })] }));

package/dist/prospect-client/MessageBar/types.d.ts

@@ -0,0 +1 @@
+export type MessageBarVariant = "info" | "error";

package/dist/prospect-client/MessageBar/types.js

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

package/dist/prospect.d.ts

@@ -78,3 +78,4 @@ export { TagList, type TagListProps, } from "./prospect-client/TagList/TagListAp
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export type { GridContainerProps } from "./prospect-client/utilities/types/GridContainerProps";
+export { MessageBar, type MessageBarProps, type MessageBarVariant, } from "./prospect-client/MessageBar/MessageBarApollo";

package/dist/prospect.js

@@ -77,3 +77,4 @@ export { Tag, tagVariants, } from "./prospect-client/Tag/TagApollo";
 export { TagList, } from "./prospect-client/TagList/TagListApollo";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
+export { MessageBar, } from "./prospect-client/MessageBar/MessageBarApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "2.0.0-alpha.43",
+  "version": "2.0.0-alpha.45",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "2.0.0-alpha.43",
+    "@axa-fr/canopee-css": "2.0.0-alpha.45",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 19"