@axa-fr/design-system-slash-react 1.2.1-alpha.39 → 1.2.1-alpha.41

package/dist/Form/Radio/RadioInput.d.ts

@@ -37,7 +37,7 @@ declare const RadioInput: import("react").ForwardRefExoticComponent<Omit<{
     optionClassName?: string;
     label?: import("react").ReactNode;
     isChecked?: boolean;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "label" | "className" | "id"> & {
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
     options: import("../core").Option[];
     mode?: keyof typeof RadioModes;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Select/Select.d.ts

@@ -1,61 +1,14 @@
 import { OptionHTMLAttributes } from "react";
 declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<{
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    ref?: import("react").Ref<HTMLSelectElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -281,9 +234,56 @@ declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<{
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
+    ref?: import("react").Ref<HTMLSelectElement> | undefined;
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     classModifier?: string | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
-    name?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
     required?: boolean | undefined | undefined;
     autoComplete?: string | undefined | undefined;

package/dist/Form/Select/SelectInput.d.ts

@@ -33,62 +33,15 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     isLabelContainerLinkedToInput?: boolean;
     errorId?: string;
 } & Omit<Omit<{
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    ref?: import("react").Ref<HTMLSelectElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -314,9 +267,56 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
+    ref?: import("react").Ref<HTMLSelectElement> | undefined;
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     classModifier?: string | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
-    name?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
     required?: boolean | undefined | undefined;
     autoComplete?: string | undefined | undefined;

package/dist/Messages/Message.d.ts

@@ -0,0 +1,47 @@
+import "@axa-fr/design-system-slash-css/dist/Message/Message.css";
+import { MouseEventHandler, PropsWithChildren, ReactNode } from "react";
+export type MessageVariants = "error" | "warning" | "info" | "success";
+export type MessageProps = {
+    /**
+     * Content of the message title. Can be a string or a ReactNode.
+     */
+    title: ReactNode;
+    /**
+     * URL of an svg icon to display in the sidebar of the message.
+     * If not provided, a default icon based on the classModifier will be used.
+     * <strong>This not recommended to use</strong>. Only use as an escape hatch.
+     */
+    icon?: string;
+    /**
+     * handler for the close button click event.
+     * If not provided, the close button will not be displayed.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * If you want to add a custom class to the component.
+     * @example
+     * ```tsx
+     * <Message className="my-custom-class" title="My message">
+     * ```
+     * will produce
+     * ```html
+     * <div class="my-custom-class af-alert">My message</div>
+     */
+    className?: string;
+    /**
+     * @deprecated Use `variant` instead.
+     */
+    classModifier?: MessageVariants | "danger";
+    /**
+     * Variant of the message.
+     * This will determine the icon and the style of the message.
+     */
+    variant?: MessageVariants;
+    /**
+     * Aria label for the close button.
+     * This is important for accessibility, use a meaningful label to describe the action.
+     * @default "close"
+     */
+    closeButtonAriaLabel?: string;
+};
+export declare const Message: ({ className, onClose, icon, title, children, classModifier, variant, closeButtonAriaLabel, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Messages/Message.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Message/Message.css";
+import successSvg from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import closeSvg from "@material-symbols/svg-400/outlined/close.svg";
+import errorSvg from "@material-symbols/svg-400/outlined/error-fill.svg";
+import infoSvg from "@material-symbols/svg-400/outlined/info-fill.svg";
+import warningSvg from "@material-symbols/svg-400/outlined/warning-fill.svg";
+import { Svg } from "../Svg";
+import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
+const getIconUrl = (type) => {
+    switch (type) {
+        case "info":
+            return infoSvg;
+        case "success":
+            return successSvg;
+        case "error":
+            return errorSvg;
+        case "warning":
+            return warningSvg;
+        default:
+            return errorSvg;
+    }
+};
+const getVariant = (classModifier, variant) => {
+    if (variant) {
+        return variant;
+    }
+    if (classModifier) {
+        return classModifier === "danger" ? "warning" : classModifier;
+    }
+    return "error"; // Default variant
+};
+export const Message = ({ className, onClose, icon, title, children, classModifier = "error", variant, // Backward compatibility
+closeButtonAriaLabel = "close", }) => {
+    const safeVariant = getVariant(classModifier, variant);
+    const componentClassName = getComponentClassNameWithUserClassname({
+        componentClassName: "af-alert",
+        userClassName: className,
+        classModifier: safeVariant,
+    });
+    const iconSrc = icon ?? getIconUrl(safeVariant);
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsx("div", { className: "af-alert__sidebar", children: _jsx("div", { className: "af-alert__indicator", children: _jsx(Svg, { src: iconSrc, className: "af-alert__icon", role: "presentation" }) }) }), _jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__title", children: title }), children] }), onClose ? (_jsx("button", { onClick: onClose, "aria-label": closeButtonAriaLabel, type: "button", className: "af-alert__close-button", children: _jsx(Svg, { src: closeSvg, className: "af-alert__close-icon", role: "presentation" }) })) : null] }));
+};

package/dist/Summary/index.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { Alert } from "../Alert/Alert";
-type SummaryProps = Omit<ComponentPropsWithoutRef<typeof Alert>, "title"> & {
+import { ReactNode } from "react";
+import { type MessageProps } from "../Messages/Message";
+type SummaryProps = Omit<MessageProps, "title"> & {
     title?: string;
     messages?: ReactNode[];
     isVisible?: boolean;

package/dist/Summary/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Alert } from "../Alert/Alert";
+import { Message } from "../Messages/Message";
 import { generateId } from "../utilities/helpers/generateId";
 export const Summary = ({ messages = [], isVisible = true, title = "Invalid form", classModifier = "error", ...args }) => {
     const messagesNotBlank = messages.filter((message) => Boolean(message));
     if (!messages || !isVisible || messagesNotBlank.length === 0) {
         return null;
     }
-    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
+    const variant = classModifier === "danger" ? "warning" : classModifier;
+    return (_jsx(Message, { icon: "glyphicon glyphicon-warning-sign", title: title, variant: variant, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
 };

package/dist/Table/Pagination/Li.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
 const onClick = ({ onChange, value }) => (event) => {
     event.preventDefault();
     onChange({
@@ -10,8 +9,6 @@ const Li = ({ isVisible, active, value, ...props }) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx("li", { className: classNames("af-pager__item", {
-            "af-pager__item--active": active,
-        }), children: _jsx("a", { className: "af-pager__item-link", href: "/#", onClick: onClick({ ...props, value }), children: _jsx("span", { children: value }) }) }));
+    return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { "aria-current": active ? "page" : undefined, className: "af-pager__item-link", href: "/#", onClick: onClick({ ...props, value }), children: _jsx("span", { children: value }) }) }));
 };
 export { Li };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ 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 { Message } from "./Messages/Message";
 export { Action } from "./Action/Action";
-export { Alert } from "./Alert/Alert";
 export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
@@ -31,8 +31,15 @@ export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+/**
+ * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
+ * @see {@link Message}
+ */
+declare const Alert: ({ className, onClose, icon, title, children, classModifier, variant, closeButtonAriaLabel, }: import("react").PropsWithChildren<import("./Messages/Message").MessageProps>) => import("react/jsx-runtime").JSX.Element;
 export * from "./Accordion";
+export { type MessageProps, type MessageVariants } from "./Messages/Message";
 export * from "./Popover";
 export * from "./Table";
+export { Alert, Message };
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";

package/dist/index.js

@@ -2,8 +2,8 @@ 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 { Message } from "./Messages/Message";
 export { Action } from "./Action/Action";
-export { Alert } from "./Alert/Alert";
 export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
@@ -31,8 +31,14 @@ export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+/**
+ * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
+ * @see {@link Message}
+ */
+const Alert = Message;
 export * from "./Accordion";
 export * from "./Popover";
 export * from "./Table";
+export { Alert, Message };
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";

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

@@ -1 +1,8 @@
 export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
+type getComponentClassNameWithUserClassnameParams = {
+    userClassName?: string;
+    classModifier?: string;
+    componentClassName: string;
+};
+export declare const getComponentClassNameWithUserClassname: ({ componentClassName, userClassName, classModifier, }: getComponentClassNameWithUserClassnameParams) => string;
+export {};

package/dist/utilities/helpers/getComponentClassName.js

@@ -26,3 +26,17 @@ export const getComponentClassName = (className, classModifier, defaultClassName
     });
     return classNames(classNameToUse, modifiersObject);
 };
+export const getComponentClassNameWithUserClassname = ({ componentClassName, userClassName, classModifier, }) => {
+    // Fail fast, when no className or componentClassName we don't want to loop on modifier
+    if (!componentClassName) {
+        return "";
+    }
+    const classWithoutModifier = getLastClassName(componentClassName);
+    const modifiers = listClassModifier(classModifier);
+    const modifiersObject = modifiers
+        .filter((it) => /\S/.test(it))
+        .map((it) => {
+        return `${classWithoutModifier}--${it}`;
+    });
+    return classNames(componentClassName, modifiersObject, userClassName);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.2.1-alpha.39",
+  "version": "1.2.1-alpha.41",
   "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.39",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.41",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },

package/dist/Alert/Alert.d.ts

@@ -1,17 +0,0 @@
-import { MouseEventHandler, PropsWithChildren } from "react";
-import "@axa-fr/design-system-slash-css/dist/Alert/Alert.scss";
-export declare enum TypeIcons {
-    error = "glyphicon glyphicon-minus-sign",
-    danger = "glyphicon glyphicon-alert",
-    info = "glyphicon glyphicon-info-sign",
-    success = "glyphicon glyphicon-ok"
-}
-export type AlertCoreComponentProps = {
-    title: string;
-    icon?: string;
-    onClose?: MouseEventHandler<HTMLButtonElement>;
-    className?: string;
-    classModifier?: "error" | "danger" | "info" | "success";
-    closeButtonAriaLabel?: string;
-};
-export declare const Alert: ({ className, onClose, icon, title, children, classModifier, closeButtonAriaLabel, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
-import "@axa-fr/design-system-slash-css/dist/Alert/Alert.scss";
-export var TypeIcons;
-(function (TypeIcons) {
-    TypeIcons["error"] = "glyphicon glyphicon-minus-sign";
-    TypeIcons["danger"] = "glyphicon glyphicon-alert";
-    TypeIcons["info"] = "glyphicon glyphicon-info-sign";
-    TypeIcons["success"] = "glyphicon glyphicon-ok";
-})(TypeIcons || (TypeIcons = {}));
-export const Alert = ({ className, onClose, icon, title, children, classModifier = "error", closeButtonAriaLabel = "close", }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-alert");
-    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { role: "presentation", className: icon || TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": closeButtonAriaLabel, children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
-};