@axa-fr/canopee-react 1.3.0 → 1.3.1-alpha.14

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import "@axa-fr/canopee-css/client/common/rebootLF.css";
-import "@axa-fr/canopee-css/client/common/tokensLF.css";
+import "@axa-fr/canopee-css/client/common/tokens.css";
 import "@axa-fr/canopee-css/client/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
 export { AccordionContextual, accordionContextualVariants, type AccordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualLF";

package/dist/client.js

@@ -1,5 +1,5 @@
 import "@axa-fr/canopee-css/client/common/rebootLF.css";
-import "@axa-fr/canopee-css/client/common/tokensLF.css";
+import "@axa-fr/canopee-css/client/common/tokens.css";
 import "@axa-fr/canopee-css/client/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
 export { AccordionContextual, accordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualLF";

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/dist/prospect-client/ClickIcon/ClickIconCommon.d.ts

@@ -1,9 +1,12 @@
-import { ComponentPropsWithRef } from "react";
-import { IconVariants } from "../Icon/IconCommon";
+import { type ComponentPropsWithRef } from "react";
+import { IconVariants, IconSizeVariants } from "../Icon/IconCommon";
+export type ClickIconVariant = "default" | "ghost";
 export type ClickIconProps = ComponentPropsWithRef<"button"> & {
     src: string;
     className?: string;
     iconVariant?: IconVariants;
     iconClassName?: string;
+    size?: IconSizeVariants;
+    variant?: ClickIconVariant;
 };
-export declare const ClickIcon: ({ src, className, iconVariant, iconClassName, ...props }: ClickIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClickIcon: ({ src, className, iconVariant, iconClassName, size, variant, ...props }: ClickIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/ClickIcon/ClickIconCommon.js

@@ -1,3 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from "../Icon/IconCommon";
-export const ClickIcon = ({ src, className, iconVariant = "primary", iconClassName, ...props }) => (_jsx("button", { type: "button", className: ["af-click-icon", className].filter(Boolean).join(" "), disabled: iconVariant === "disabled", ...props, children: _jsx(Icon, { src: src, variant: iconVariant, className: iconClassName }) }));
+import { Icon, iconSizeVariants, } from "../Icon/IconCommon";
+import { getClassName } from "../utilities/getClassName";
+export const ClickIcon = ({ src, className, iconVariant = "primary", iconClassName, size = "S", variant = "default", ...props }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-click-icon",
+        modifiers: [variant, iconSizeVariants[size]],
+        className,
+    });
+    return (_jsx("button", { type: "button", className: componentClassName, disabled: iconVariant === "disabled", ...props, children: _jsx(Icon, { src: src, variant: iconVariant, className: iconClassName, size: size }) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.3.0",
+  "version": "1.3.1-alpha.14",
   "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.0",
+    "@axa-fr/canopee-css": "1.3.1-alpha.14",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"