@axa-fr/canopee-react 1.3.1-alpha.2 → 1.3.1-alpha.3

package/dist/distributeur/EditorialMessage/EditorialMessage.d.ts

@@ -0,0 +1,34 @@
+import "@axa-fr/canopee-css/distributeur/EditorialMessage/EditorialMessage.css";
+import { type ReactNode } from "react";
+export type EditorialMessageType = "green" | "information" | "promotion";
+export type EditorialMessageProps = {
+    /**
+     * Type of the editorial message. Used to determine the style.
+     */
+    type: EditorialMessageType;
+    /**
+     * Icon source for the editorial message.
+     */
+    icon: string;
+    /**
+     * Additional class name(s) to apply to the component.
+     */
+    className?: string;
+} & ({
+    /**
+     * Title of the message. Either title or children must be provided.
+     */
+    title: string;
+    /**
+     * Content of message
+     */
+    children?: ReactNode;
+} | {
+    title?: string;
+    children: ReactNode;
+});
+/**
+ * This component is a visual element used to promote information about accessibility, promotions, eco-design...
+ * Its display does not depend on a user action.
+ */
+export declare const EditorialMessage: ({ children: message, type, title, icon, className, }: EditorialMessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/EditorialMessage/EditorialMessage.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/EditorialMessage/EditorialMessage.css";
+import { useId } from "react";
+import { Svg } from "../Svg";
+import { getClassName } from "../utilities/helpers/getClassName";
+/**
+ * This component is a visual element used to promote information about accessibility, promotions, eco-design...
+ * Its display does not depend on a user action.
+ */
+export const EditorialMessage = ({ children: message, type, title, icon, className, }) => {
+    const computedClassName = getClassName({
+        baseClassName: `af-editorial-message`,
+        modifiers: [type],
+        className,
+    });
+    const titleId = useId();
+    return (_jsxs("article", { className: computedClassName, "aria-labelledby": titleId, children: [_jsx("div", { className: "af-editorial-message__icon", children: _jsx(Svg, { src: icon, role: "presentation" }) }), title ? (_jsx("h4", { className: "af-editorial-message__title", id: titleId, children: title })) : null, message ? (_jsx("div", { className: "af-editorial-message__content", children: message })) : null] }));
+};

package/dist/distributeur.d.ts

@@ -61,3 +61,4 @@ export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
 export { CardData } from "./distributeur/CardData/CardData";
 export type { CardDataVariant } from "./distributeur/CardData/CardData";
+export { EditorialMessage, type EditorialMessageProps, type EditorialMessageType, } from "./distributeur/EditorialMessage/EditorialMessage";

package/dist/distributeur.js

@@ -52,3 +52,4 @@ export { Alert, Message };
 export { HelpButton } from "./distributeur/HelpButton";
 export { Loader } from "./distributeur/Loader/Loader";
 export { CardData } from "./distributeur/CardData/CardData";
+export { EditorialMessage, } from "./distributeur/EditorialMessage/EditorialMessage";

package/package.json

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