@axa-fr/canopee-react 2.0.0-alpha.76 → 2.0.0-alpha.78

package/dist/distributeur/Button/Button.d.ts

@@ -1,11 +1,10 @@
-import { type ComponentPropsWithRef, type PropsWithChildren, type ReactNode } from "react";
+import { type ComponentPropsWithRef, type PropsWithChildren } from "react";
 import "@axa-fr/canopee-css/distributeur/Button/Button.css";
+import { type ClickableComponentProps } from "../ClickableGhost";
 export type ButtonVariant = "primary" | "secondary" | "validated" | "danger" | "ghost" | "ghost-reverse";
-type ButtonProps = PropsWithChildren<{
+type ButtonProps = ClickableComponentProps & PropsWithChildren<{
     variant?: ButtonVariant;
     small?: boolean;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
 } & ComponentPropsWithRef<"button">>;
 export declare const Button: {
     ({ variant, small, leftIcon, rightIcon, className, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Button/Button.js

@@ -2,6 +2,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import {} from "react";
 import "@axa-fr/canopee-css/distributeur/Button/Button.css";
+import { ClickableGhost, } from "../ClickableGhost";
 const DEFAULT_CLASS_NAME = "af-btn";
-export const Button = ({ variant = "primary", small, leftIcon, rightIcon, className, children, ...props }) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, variant !== "primary" && `${DEFAULT_CLASS_NAME}--${variant}`, small && `${DEFAULT_CLASS_NAME}--small`, className), ...props, children: [leftIcon, children, rightIcon] }));
+export const Button = ({ variant = "primary", small, leftIcon, rightIcon, className, children, ...props }) => {
+    if (variant === "ghost" || variant === "ghost-reverse") {
+        return (_jsxs(ClickableGhost, { component: "button", type: "button", variant: variant === "ghost-reverse" ? "reverse" : "ghost", ...props, children: [leftIcon, children, rightIcon] }));
+    }
+    return (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, variant !== "primary" && `${DEFAULT_CLASS_NAME}--${variant}`, small && `${DEFAULT_CLASS_NAME}--small`, className), ...props, children: [leftIcon, children, rightIcon] }));
+};
 Button.displayName = "Button";

package/dist/distributeur/ClickableGhost.d.ts

@@ -0,0 +1,36 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { Svg } from "./Svg";
+import "@axa-fr/canopee-css/distributeur/Link/Link.css";
+export type ClickableComponentProps = {
+    /**
+     * The content to be displayed inside the clickable component.
+     */
+    children: ReactNode;
+    /**
+     * The icon to be displayed on the left side of the clickable component.
+     */
+    leftIcon?: ReactElement<typeof Svg>;
+    /**
+     * The icon to be displayed on the right side of the clickable component.
+     */
+    rightIcon?: ReactElement<typeof Svg>;
+};
+type Props = ClickableComponentProps & {
+    className?: string;
+    variant?: "ghost" | "reverse";
+} & (({
+    component: "a";
+} & AnchorHTMLAttributes<HTMLAnchorElement>) | ({
+    component: "button";
+} & ButtonHTMLAttributes<HTMLButtonElement>));
+/**
+ * Internal component to render the "ghost" style of interactive elements.
+ * This component supports both anchor and button elements, and allows for optional left and right icons.
+ *
+ * This is used to share the look of the link and the ghost button.
+ *
+ * @param props The props for the ClickableGhost component.
+ * @returns
+ */
+export declare const ClickableGhost: ({ children, className, leftIcon, rightIcon, variant, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/ClickableGhost.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { getClassName } from "../prospect-client/utilities/getClassName";
+import { Svg } from "./Svg";
+import "@axa-fr/canopee-css/distributeur/Link/Link.css";
+import { linkClassName } from "./Link/linkClassName";
+/**
+ * Internal component to render the "ghost" style of interactive elements.
+ * This component supports both anchor and button elements, and allows for optional left and right icons.
+ *
+ * This is used to share the look of the link and the ghost button.
+ *
+ * @param props The props for the ClickableGhost component.
+ * @returns
+ */
+export const ClickableGhost = ({ children, className, leftIcon, rightIcon, variant = "ghost", ...props }) => {
+    const componentClassName = getClassName({
+        baseClassName: linkClassName,
+        modifiers: [variant === "reverse" ? "reverse" : ""],
+        className,
+    });
+    if (props.component === "a") {
+        return (_jsxs("a", { className: componentClassName, ...props, children: [leftIcon, children, rightIcon] }));
+    }
+    return (_jsxs("button", { className: componentClassName, type: "button", ...props, children: [leftIcon, children, rightIcon] }));
+};

package/dist/distributeur/Link/LinkAnchor.d.ts

@@ -1,13 +1,11 @@
-import { type ComponentPropsWithRef, type ReactElement } from "react";
-import { Svg } from "../Svg";
-type AnchorLinkProps = {
-    leftIcon?: ReactElement<typeof Svg>;
-    rightIcon?: ReactElement<typeof Svg>;
+import { type AnchorHTMLAttributes } from "react";
+import { type ClickableComponentProps } from "../ClickableGhost";
+type AnchorLinkProps = ClickableComponentProps & {
     className?: string;
     disabled?: boolean;
     variant?: "default" | "reverse";
 };
-type LinkComponentProps = ComponentPropsWithRef<"a"> & AnchorLinkProps;
+type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & AnchorLinkProps;
 declare const LinkAnchor: {
     ({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }: LinkComponentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/distributeur/Link/LinkAnchor.js

@@ -1,13 +1,13 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import {} from "react";
-import { Svg } from "../Svg";
 import { linkClassName } from "./linkClassName";
+import { ClickableGhost, } from "../ClickableGhost";
 const LinkAnchor = ({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }) => {
     const finalClassName = classnames(linkClassName, className, {
         [`${linkClassName}--reverse`]: variant === "reverse",
     });
-    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
+    return (_jsxs(ClickableGhost, { component: "a", className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
 };
 LinkAnchor.displayName = "LinkAnchor";
 export { LinkAnchor };

package/dist/distributeur.d.ts

@@ -54,5 +54,6 @@ export type { CardDataVariant } from "./distributeur/CardData/CardData";
 export { EditorialMessage, type EditorialMessageProps, type EditorialMessageType, } from "./distributeur/EditorialMessage/EditorialMessage";
 export { Timeline, type TimelineProps, type TimelineVariants, } from "./distributeur/Timeline/Timeline";
 export { CardButton, type CardButtonProps, } from "./distributeur/CardButton/CardButton";
+export type { ClickableComponentProps } from "./distributeur/ClickableGhost";
 export { BaseCard, type BaseCardProps } from "./distributeur/Card/BaseCard";
 export { ItemFormHelper, type ItemFormHelperProps, type ItemFormHelperVariant, } from "./distributeur/ItemFormHelper/ItemFormHelper";

package/package.json

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