@axa-fr/design-system-slash-react 1.2.1-alpha.9 → 1.2.1-alpha.91

package/dist/ModalAgent/Modal.js

@@ -1,8 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getComponentClassName } from "..";
-const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, ...props }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal");
+const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, size, ...props }, ref) => {
+    // If size is set to 'lg' or 'sm', use it as the classModifier, otherwise use the provided classModifier
+    let effectiveClassModifier;
+    if (size) {
+        if (classModifier && classModifier !== "lg" && classModifier !== "sm") {
+            effectiveClassModifier = `${size} ${classModifier}`;
+        }
+        else {
+            effectiveClassModifier = size;
+        }
+    }
+    else {
+        effectiveClassModifier = classModifier;
+    }
+    const componentClassName = getComponentClassName(className, effectiveClassModifier, "af-modal");
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));

package/dist/ModalAgent/components/Header.d.ts

@@ -1,10 +1,30 @@
-import type { MouseEventHandler } from "react";
+import type { MouseEventHandler, ReactNode } from "react";
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-    className?: string;
-    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Text displayed in the header.
+     * @deprecated Use `children` instead to allow for more flexible content.
+     */
     title?: string;
-    classModifier?: string;
+    /**
+     * Text displayed in the header, overrides `title` if both are set.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when the close button is clicked.
+     */
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Aria label for the close button, used for accessibility.
+     */
     closeButtonAriaLabel?: string;
+    /**
+     * Class modifier for the header. Can be used to apply custom styles.
+     */
+    classModifier?: string;
+    /**
+     * Prop to override the style of the header. Will totally remove the default styles.
+     */
+    className?: string;
 };
-declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/ModalAgent/components/Header.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../..";
-const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, ...props }) => {
+import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
+import { getComponentClassName, Svg } from "../..";
+const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, children, ...props }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
-    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx("span", { className: "glyphicon glyphicon-close", "aria-hidden": "true" }) })] }));
+    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: children ?? title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx(Svg, { src: closeIcon }) })] }));
 };
 export { Header };

package/dist/Popover/AnimatedPopover.js

@@ -14,5 +14,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" })] }))] }));
+    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] }));
 };

package/dist/Steps/StepBase.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "..";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevronSvg from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import checkSvg from "@material-symbols/svg-400/outlined/check.svg";
+import { getComponentClassName, Svg } from "..";
 const StepBase = ({ children, id, title, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-steps-list-step");
-    return (_jsx("li", { className: componentClassName, title: title, children: children }, id));
+    return (_jsxs("li", { className: componentClassName, title: title, children: [_jsx(Svg, { src: checkSvg }), children, _jsx(Svg, { src: chevronSvg })] }, id));
 };
 export { StepBase };

package/dist/Steps/VerticalStep.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import type { VerticalStepMode } from "./types";
+import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
+type Props = {
+    title: string;
+    id: string;
+    stepMode: VerticalStepMode;
+    onEdit: React.MouseEventHandler<HTMLButtonElement>;
+    form: ReactNode;
+    restitution: ReactNode;
+    editButtonLabel?: string;
+    editButtonAriaLabel?: string;
+    showRestitution?: boolean;
+};
+export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Steps/VerticalStep.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import edit from "@material-symbols/svg-400/sharp/edit-fill.svg";
+import check from "@material-symbols/svg-400/sharp/check.svg";
+import lock from "@material-symbols/svg-400/sharp/lock-fill.svg";
+import { Title } from "../Title/Title";
+import { Svg } from "../Svg";
+import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
+import { Button } from "../Button/Button";
+const defaultClassName = "af-vertical-step";
+export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, onEdit, form, restitution, showRestitution = true, }) => {
+    const isStepInEdition = stepMode === "edited";
+    const isStepValidated = stepMode === "validated";
+    const isStepLocked = stepMode === "locked";
+    return (_jsxs("div", { className: classNames(defaultClassName, {
+            [`${defaultClassName}--edition`]: isStepInEdition,
+        }), children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
+                    [`${defaultClassName}-icon--validated`]: isStepValidated,
+                    [`${defaultClassName}-icon--locked`]: isStepLocked,
+                    [`${defaultClassName}-icon--edited`]: isStepInEdition,
+                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { className: classNames("af-title", `${defaultClassName}-title`), id: id, contentLeft: isStepValidated ? (_jsxs(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, className: "af-vertical-step-title-button", children: [_jsx(Svg, { role: "presentation", src: edit }), editButtonLabel] })) : undefined, children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
+};

package/dist/Steps/index.d.ts

@@ -2,3 +2,4 @@ import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export { VerticalStep } from "./VerticalStep";

package/dist/Steps/index.js

@@ -2,3 +2,4 @@ import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export { VerticalStep } from "./VerticalStep";

package/dist/Steps/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export type CustomClickEvent = {
+    href: string;
+    number?: ReactNode;
+    id: string;
+    title: string;
+};
+export type VerticalStepMode = "edited" | "locked" | "validated";

package/dist/Steps/types.js

@@ -0,0 +1 @@
+export {};

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/Svg/Svg.js

@@ -46,5 +46,5 @@ export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
     if (hasError) {
         return alt ? (_jsx("span", { ...props, children: alt })) : null;
     }
-    return _jsx("svg", { ref: rootRef, "data-src": src, ...props });
+    return _jsx("svg", { ref: rootRef, "data-src": src, role: "presentation", ...props });
 };

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,10 +2,11 @@ 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 { Card } from "./Card/Card";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
@@ -25,14 +26,21 @@ export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase,
 export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
-export { Step, StepBase, Steps } from "./Steps";
+export { Step, StepBase, Steps, VerticalStep } from "./Steps";
 export { Summary } from "./Summary";
 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,10 +2,11 @@ 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 { Card } from "./Card/Card";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { LegacyField as Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
@@ -25,14 +26,20 @@ export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase,
 export { Link } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
-export { Step, StepBase, Steps } from "./Steps";
+export { Step, StepBase, Steps, VerticalStep } from "./Steps";
 export { Summary } from "./Summary";
 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.9",
+  "version": "1.2.1-alpha.91",
   "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.9",
+    "@axa-fr/design-system-slash-css": "1.2.1-alpha.91",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -77,10 +77,10 @@
     "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
-    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.0.7",
     "copyfiles": "^2.4.1",
-    "jest-axe": "^9.0.0",
+    "jest-axe": "^10.0.0",
     "jsdom": "^25.0.1",
     "react": "^19.0.0",
     "rimraf": "^6.0.1",

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 })] }))] }));
-};