@axa-fr/design-system-slash-react 1.2.1-alpha.112 → 1.2.1-alpha.118

package/dist/Button/Button.d.ts

@@ -1,7 +1,11 @@
-import "@axa-fr/design-system-slash-css/dist/Button/Button.scss";
-import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
-type ButtonProps = {
-    classModifier?: string;
-} & ComponentPropsWithoutRef<"button">;
-export declare const Button: ({ children, classModifier, className, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Button/Button.css";
+export type ButtonVariant = "primary" | "secondary" | "validated" | "danger" | "ghost" | "ghost-reverse";
+export declare const Button: import("react").ForwardRefExoticComponent<{
+    variant?: ButtonVariant;
+    small?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button/Button.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Button/Button.scss";
-import { getComponentClassName } from "../utilities";
-export const Button = ({ children, classModifier, className, ...args }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-btn");
-    return (_jsx("button", { className: componentClassName, type: "button", ...args, children: children }));
-};
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import classNames from "classnames";
+import "@axa-fr/design-system-slash-css/dist/Button/Button.css";
+const DEFAULT_CLASS_NAME = "af-btn";
+export const Button = forwardRef(({ variant = "primary", small, leftIcon, rightIcon, className, children, ...props }, ref) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, variant !== "primary" && `${DEFAULT_CLASS_NAME}--${variant}`, small && `${DEFAULT_CLASS_NAME}--small`, className), ...props, ref: ref, children: [leftIcon, children, rightIcon] })));
+Button.displayName = "Button";

package/dist/Form/File/File.js

@@ -55,6 +55,6 @@ const File = ({ className, classModifier, id, name, disabled, onChange, multiple
         disabled,
     });
     const componentClassName = getComponentClassName(className, classModifier, "af-form__file-input");
-    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsxs(Button, { type: "button", className: "af-btn", classModifier: "file hasIconLeft", onClick: open, disabled: disabled, children: [_jsx("i", { className: `glyphicon glyphicon-${icon}` }), " ", label] })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsx(Button, { className: "af-btn--file", leftIcon: _jsx("i", { className: `glyphicon glyphicon-${icon}` }), onClick: open, disabled: disabled, children: label })] }));
 };
 export { File };

package/dist/ModalAgent/BooleanModal.js

@@ -7,7 +7,7 @@ import { Header } from "./components/Header";
 const defaultClassName = "af-modal";
 const BooleanModal = forwardRef(({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { classModifier: "reverse", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, classModifier: "success", children: submitTitle })] })] }));
+    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, variant: "validated", children: submitTitle })] })] }));
 });
 BooleanModal.displayName = "BooleanModal";
 export { BooleanModal };

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+type TagModifier = "success" | "information" | "warning" | "error" | "default" | "dark" | "purple" | "gray";
+/**
+ * @deprecated instead use warning
+ */
+type TagModifierDecrepated = "danger";
+type TagProps = ComponentPropsWithRef<"span"> & {
+    classModifier?: `${TagModifier | TagModifierDecrepated}` | string;
+    disabled?: boolean;
+};
+/**
+ * Tag component to display a label with various styles.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Tag classModifier="success">Success Tag</Tag>
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the tag.
+ * @param {string} [props.className] - Additional class names to apply to the tag.
+ * @param {string} [props.classModifier] - Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead.
+ * @param {boolean} [props.disabled] - If true, the tag will be disabled.
+ * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
+ * @returns {JSX.Element} The rendered Tag component.
+ */
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TagProps>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/Tag/Tag.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../utilities";
+import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+/**
+ * Tag component to display a label with various styles.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Tag classModifier="success">Success Tag</Tag>
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} props.children - The content to be displayed inside the tag.
+ * @param {string} [props.className] - Additional class names to apply to the tag.
+ * @param {string} [props.classModifier] - Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead.
+ * @param {boolean} [props.disabled] - If true, the tag will be disabled.
+ * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
+ * @returns {JSX.Element} The rendered Tag component.
+ */
+export const Tag = forwardRef(({ children, className, classModifier = "default", ...otherProps }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-tag");
+    // Kept for backward compatibility. May be removed in a future version
+    const badgeClassName = getComponentClassName(className, classModifier, "af-badge");
+    return (_jsx("span", { ref: ref, className: `${componentClassName} ${badgeClassName}`, ...otherProps, children: children }));
+});
+Tag.displayName = "Tag";

package/dist/index.d.ts

@@ -2,10 +2,18 @@ import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
+import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";
+import { Tag } from "./Tag/Tag";
 export { Action } from "./Action/Action";
-export { Badge } from "./Badge/Badge";
+/** @deprecated Use `Tag` instead. */
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    classModifier?: `${("error" | "warning" | "success" | "information" | "default" | "dark" | "purple" | "gray") | "danger"}` | string;
+    disabled?: boolean;
+}>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export { Badge, Tag };
 export { Button } from "./Button/Button";
+export type { ButtonVariant } from "./Button/Button";
 export { Card } from "./Card/Card";
 export { Divider } from "./Divider/Divider";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";

package/dist/index.js

@@ -2,9 +2,13 @@ import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
+import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";
+import { Tag } from "./Tag/Tag";
 export { Action } from "./Action/Action";
-export { Badge } from "./Badge/Badge";
+/** @deprecated Use `Tag` instead. */
+const Badge = Tag;
+export { Badge, Tag };
 export { Button } from "./Button/Button";
 export { Card } from "./Card/Card";
 export { Divider } from "./Divider/Divider";

package/dist/utilities/helpers/getComponentClassName.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Generates a component class name string based on provided class names and modifiers.
+ *
+ * @param {string} [className] - The base class name.
+ * @param {string} [classModifier] - A space-separated string of class modifiers.
+ * @param {string} [defaultClassName] - The default class name to use if className is not provided.
+ * @returns {string} The generated class name string.
+ */
 export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
 type getComponentClassNameWithUserClassnameParams = {
     userClassName?: string;

package/dist/utilities/helpers/getComponentClassName.js

@@ -11,6 +11,14 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
+/**
+ * Generates a component class name string based on provided class names and modifiers.
+ *
+ * @param {string} [className] - The base class name.
+ * @param {string} [classModifier] - A space-separated string of class modifiers.
+ * @param {string} [defaultClassName] - The default class name to use if className is not provided.
+ * @returns {string} The generated class name string.
+ */
 export const getComponentClassName = (className, classModifier, defaultClassName) => {
     const classNameToUse = className || defaultClassName;
     // Fail fast, when no className or defaultClassName we don't want to loop on modifier

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.112",
+  "version": "1.2.1-alpha.118",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.2.1-alpha.112",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.118",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },

package/dist/Badge/Badge.d.ts

@@ -1,8 +0,0 @@
-import { ComponentPropsWithRef, PropsWithChildren } from "react";
-import "@axa-fr/design-system-slash-css/dist/Badge/Badge.scss";
-type BadgeProps = ComponentPropsWithRef<"span"> & {
-    classModifier?: string;
-    disabled?: boolean;
-};
-export declare const Badge: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<BadgeProps>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export {};

package/dist/Badge/Badge.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { getComponentClassName } from "../utilities";
-import "@axa-fr/design-system-slash-css/dist/Badge/Badge.scss";
-export const Badge = forwardRef(({ children, className, classModifier, ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-badge");
-    return (_jsx("span", { ref: ref, className: componentClassName, ...otherProps, children: children }));
-});
-Badge.displayName = "Badge";