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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.439",
+  "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.439",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.439",
+    "@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"
   },