@axa-fr/design-system-apollo-react 1.0.3-alpha.211 → 1.0.3-alpha.217

package/dist/Message/MessageApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Message/MessageApollo.scss";
+export { Message, messageVariants, type MessageVariants, } from "./MessageCommon";

package/dist/Message/MessageApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Message/MessageApollo.scss";
+export { Message, messageVariants, } from "./MessageCommon";

package/dist/Message/MessageCommon.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type ReactElement } from "react";
+import { Button } from "../Button/ButtonCommon";
+import { Link } from "../Link/LinkCommon";
+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 = {
+    variant: MessageVariants;
+    title?: string;
+    action?: ReactElement<typeof Link | typeof Button>;
+    iconSize?: number;
+    heading?: Headings;
+} & ComponentPropsWithoutRef<"div">;
+export declare const Message: ({ variant, className, title, children, action, iconSize, heading: Heading, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Message/MessageCommon.js

@@ -0,0 +1,28 @@
+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]
+            .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 }), children, action && _jsx("div", { className: "af-message__action", children: action })] })] }));
+};

package/dist/Message/MessageLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Message/MessageLF.scss";
+export { Message, messageVariants, type MessageVariants, } from "./MessageCommon";

package/dist/Message/MessageLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Message/MessageLF.scss";
+export { Message, messageVariants, } from "./MessageCommon";

package/dist/index.d.ts

@@ -15,3 +15,4 @@ export { Icon, iconVariants, type IconVariants, iconSizeVariants, type IconSizeV
 export { Divider } from "./Divider/DividerApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
 export { BasePicture } from "./BasePicture/BasePictureApollo";
+export { Message, messageVariants, type MessageVariants, } from "./Message/MessageApollo";

package/dist/index.js

@@ -15,3 +15,4 @@ export { Icon, iconVariants, iconSizeVariants, } from "./Icon/IconApollo";
 export { Divider } from "./Divider/DividerApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
 export { BasePicture } from "./BasePicture/BasePictureApollo";
+export { Message, messageVariants, } from "./Message/MessageApollo";

package/dist/indexLF.d.ts

@@ -14,3 +14,4 @@ export { Icon, iconVariants, type IconVariants, iconSizeVariants, type IconSizeV
 export { Divider } from "./Divider/DividerLF";
 export { Toggle } from "./Toggle/ToggleLF";
 export { BasePicture } from "./BasePicture/BasePictureLF";
+export { Message, messageVariants, type MessageVariants, } from "./Message/MessageLF";

package/dist/indexLF.js

@@ -14,3 +14,4 @@ export { Icon, iconVariants, iconSizeVariants, } from "./Icon/IconLF";
 export { Divider } from "./Divider/DividerLF";
 export { Toggle } from "./Toggle/ToggleLF";
 export { BasePicture } from "./BasePicture/BasePictureLF";
+export { Message, messageVariants, } from "./Message/MessageLF";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.3-alpha.211",
+  "version": "1.0.3-alpha.217",
   "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.3-alpha.211",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.211",
+    "@axa-fr/design-system-apollo-css": "1.0.3-alpha.217",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.217",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },