@axa-fr/canopee-react 1.7.1-alpha.10 → 1.7.1-alpha.12

package/dist/distributeur/HelpButton/index.d.ts

@@ -1,8 +1,9 @@
-import "@axa-fr/canopee-css/distributeur/Action/Action.css";
+import "@axa-fr/canopee-css/distributeur/HelpButton/HelpButton.css";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Popover } from "../Popover";
 type HelpProps = Omit<ComponentPropsWithoutRef<typeof Popover>, "popoverElement"> & {
     helpButtonContent?: ReactNode;
+    variant?: "default" | "inverse";
 };
-export declare const HelpButton: ({ className, classModifier, children, mode, placement, helpButtonContent, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HelpButton: ({ className, classModifier, children, mode, placement, variant, helpButtonContent, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/distributeur/HelpButton/index.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/canopee-css/distributeur/Action/Action.css";
+import "@axa-fr/canopee-css/distributeur/HelpButton/HelpButton.css";
 import classNames from "classnames";
+import info from "@material-symbols/svg-400/rounded/info_i-fill.svg";
 import { Popover } from "../Popover";
 import { getClassName } from "../utilities/helpers/getClassName";
-export const HelpButton = ({ className, classModifier, children, mode = "click", placement = "right", helpButtonContent = _jsx("span", { className: "af-more-help", children: "i" }), }) => {
+import { Svg } from "../Svg";
+export const HelpButton = ({ className, classModifier, children, mode = "click", placement = "right", variant = "default", helpButtonContent = _jsx(Svg, { src: info, alt: "Help" }), }) => {
     const buttonClassName = classNames("btn", getClassName({
         baseClassName: "af-btn--circle",
-        modifiers: classModifier?.split(" "),
+        modifiers: [
+            ...(classModifier?.split(" ") ?? []),
+            ...(variant === "inverse" ? ["inverse"] : []),
+        ],
     }));
-    return (_jsx(Popover, { className: className, classModifier: classModifier, placement: placement, mode: mode, popoverElement: children, children: _jsx("div", { className: buttonClassName, children: helpButtonContent }) }));
+    return (_jsx(Popover, { className: classNames("af-help-button", className), classModifier: classModifier, placement: placement, mode: mode, popoverElement: children, children: _jsx("div", { className: buttonClassName, children: helpButtonContent }) }));
 };

package/dist/distributeur/Popover/AnimatedPopover.js

@@ -18,5 +18,5 @@ export const AnimatedPopover = ({ placement, children, isOpen, target, className
         elements: { reference: referenceElement, floating: popperElement },
         middleware: [offset(12), arrow({ element: arrowRef })],
     });
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen ? (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: floatingStyles, "data-popper-placement": placement, className: "af-popover__container-pop", children: [_jsx("div", { children: children }), _jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "white" })] })) : null] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen ? (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: floatingStyles, "data-popper-placement": placement, className: "af-popover__container-pop", children: [_jsx("div", { children: children }), _jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "white", width: 16, height: 10 })] })) : null] }));
 };

package/package.json

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