@axa-fr/design-system-slash-react 2.0.0-RC.3 → 2.0.0-RC.4

package/dist/Accordion/Accordion.d.ts

@@ -1,12 +1,14 @@
 import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
 import React from "react";
 import { CollapseProps } from "./CollapseCard";
-import { TDefaultProps } from "./types";
+import { AccordionVariant, TDefaultProps } from "./types";
 export type EnhancedProps = Partial<TDefaultProps> & {
     onlyOne?: boolean;
     className?: string;
+    /** @deprecated Use `variant` instead. */
     classModifier?: string;
+    variant?: AccordionVariant;
     children: React.ReactElement<CollapseProps>[] | React.ReactElement<CollapseProps>;
 };
-declare const Accordion: ({ className, classModifier, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
+declare const Accordion: ({ className, classModifier, variant, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
 export { Accordion };

package/dist/Accordion/Accordion.js

@@ -2,13 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
 import { useId } from "react";
-import { getComponentClassName } from "../utilities";
+import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
 import { CollapseCard } from "./CollapseCard";
 const defaultClassName = "af-accordion";
-const Accordion = ({ className, classModifier, children, onlyOne = false, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+const Accordion = ({ className, classModifier, variant = "default", children, onlyOne = false, }) => {
+    const componentClassName = getComponentClassNameWithUserClassname({
+        componentClassName: defaultClassName,
+        userClassName: className,
+        classModifier: classModifier || (variant !== "default" && variant) || "",
+    });
     const id = useId();
     const childrenArray = Array.isArray(children) ? children : [children];
-    return (_jsx("div", { className: componentClassName, children: childrenArray.map((child) => (_createElement(CollapseCard, { ...child.props, name: onlyOne ? id : undefined, key: child.props.id }, child.props.children))) }));
+    return (_jsx("div", { className: componentClassName, children: childrenArray.map((child) => (_createElement(CollapseCard, { ...child.props, name: onlyOne ? id : undefined, key: child.props.id, variant: variant }, child.props.children))) }));
 };
 export { Accordion };

package/dist/Accordion/CollapseCard.d.ts

@@ -1,4 +1,5 @@
 import type { DetailsHTMLAttributes, ReactNode } from "react";
+import type { AccordionActions, AccordionVariant } from "./types";
 export type CollapseProps = {
     id: string;
     title: ReactNode;
@@ -8,5 +9,7 @@ export type CollapseProps = {
     onToggle?: DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
     className?: string;
     classModifier?: string;
+    actions?: AccordionActions;
+    variant?: AccordionVariant;
 };
-export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, actions, variant, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/CollapseCard.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Body } from "./Body";
 import { Header } from "./Header";
 import { getComponentClassName } from "../utilities";
-export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", }) => {
+export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", actions, variant, }) => {
     const headerId = id;
     let newClassModifier = open ? "open" : "";
     newClassModifier += ` ${classModifier}`;
     const componentClassName = getComponentClassName(className, newClassModifier.trim(), "af-accordion__details");
-    return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, children: title }), _jsx(Body, { children: children })] }));
+    return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, actions: actions, variant: variant, children: title }), _jsx(Body, { children: children })] }));
 };

package/dist/Accordion/Header.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { AccordionActions, AccordionVariant } from "./types";
 export type HeaderToggleElement = {
     isOpen: boolean;
     index: number;
@@ -9,6 +10,8 @@ export type HeaderProps = {
     className?: string;
     classModifier?: string;
     id?: string;
+    actions?: AccordionActions;
+    variant?: AccordionVariant;
 };
-declare const Header: ({ children, className, classModifier, id }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ children, className, classModifier, id, actions, variant, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/Accordion/Header.js

@@ -1,8 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import arrow from "@material-symbols/svg-400/rounded/keyboard_arrow_down.svg";
+import { Title } from "../Title/Title";
+import { Button } from "../Button/Button";
+import { Svg } from "../Svg/Svg";
 import { getComponentClassName } from "../utilities";
 const defaultClassName = "af-accordion__item-header";
-const Header = ({ children, className, classModifier, id }) => {
+const Header = ({ children, className, classModifier, id, actions, variant, }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("summary", { className: componentClassName, id: id, children: [_jsx("h3", { className: "af-accordion__item-title", children: children }), _jsx("span", { className: "glyphicon glyphicon-menu-down" })] }));
+    return (_jsx("summary", { className: componentClassName, id: id, children: variant === "light" ? (_jsxs(Title, { heading: "h3", children: [_jsx(Svg, { src: arrow, className: "af-accordion__item-header-icon" }), children, actions
+                    ? actions
+                        .filter((action) => Boolean(action))
+                        .map(({ key, label, leftIcon, rightIcon, onClick }) => (_jsx(Button, { onClick: onClick, leftIcon: leftIcon ? _jsx(Svg, { src: leftIcon }) : undefined, rightIcon: rightIcon ? _jsx(Svg, { src: rightIcon }) : undefined, variant: "ghost", children: label }, key)))
+                    : null] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-accordion__header-left", children: _jsx("h3", { className: "af-accordion__item-title", children: children }) }), _jsxs("div", { className: "af-accordion__header-right", children: [actions
+                            ? actions
+                                .filter((action) => Boolean(action))
+                                .map(({ key, label, leftIcon, rightIcon, onClick }) => (_jsx(Button, { onClick: onClick, leftIcon: leftIcon ? _jsx(Svg, { src: leftIcon }) : undefined, rightIcon: rightIcon ? _jsx(Svg, { src: rightIcon }) : undefined, variant: variant === "white" ? "ghost" : "ghost-reverse", children: label }, key)))
+                            : null, _jsx(Svg, { src: arrow, className: "af-accordion__item-header-icon" })] })] })) }));
 };
 export { Header };

package/dist/Accordion/index.d.ts

@@ -1,2 +1,3 @@
 export { Accordion } from "./Accordion";
 export { CollapseCard, type CollapseProps } from "./CollapseCard";
+export type * from "./types";

package/dist/Card/Card.d.ts

@@ -8,6 +8,7 @@ type CardProps = ComponentProps<"button"> & {
      *  import villaIcon from "@material-symbols/svg-400/outlined/villa.svg"; */
     iconSrc?: string;
     error?: boolean;
+    active?: boolean;
 };
-export declare const Card: ({ children, className, iconSrc, orientation, error, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, className, iconSrc, orientation, error, active, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Card/Card.js

@@ -3,4 +3,4 @@ import classNames from "classnames";
 import { Svg } from "../Svg";
 import "@axa-fr/design-system-slash-css/dist/Card/Card.css";
 const DEFAULT_CLASS_NAME = "af-card";
-export const Card = ({ children, className, iconSrc, orientation = "vertical", error = false, ...otherProps }) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, error && `${DEFAULT_CLASS_NAME}--error`, orientation === "horizontal" && `${DEFAULT_CLASS_NAME}--${orientation}`, className), ...otherProps, children: [iconSrc ? _jsx(Svg, { src: iconSrc }) : null, children] }));
+export const Card = ({ children, className, iconSrc, orientation = "vertical", error = false, active = false, ...otherProps }) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, active && `${DEFAULT_CLASS_NAME}--active`, error && `${DEFAULT_CLASS_NAME}--error`, orientation === "horizontal" && `${DEFAULT_CLASS_NAME}--${orientation}`, className), ...otherProps, children: [iconSrc ? _jsx(Svg, { src: iconSrc }) : null, children] }));

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

@@ -3,7 +3,7 @@ export declare enum RadioModes {
     classic = "classic",
     default = "default",
     inline = "inline",
-    card = "card"
+    cardRadio = "cardRadio"
 }
 declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
@@ -12,7 +12,7 @@ declare const Radio: import("react").ForwardRefExoticComponent<(({
     orientation?: "horizontal" | "vertical";
     error?: boolean;
 }, "ref"> & {
-    mode: "card";
+    mode: "cardRadio";
 }) | Omit<{
     options: Option[];
 } & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {

package/dist/Form/Radio/Radio.js

@@ -1,6 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from "react";
+import classNames from "classnames";
 import { RadioCardGroup } from "./RadioCardGroup";
 import { RadioItem } from "./RadioItem";
 export var RadioModes;
@@ -8,7 +9,7 @@ export var RadioModes;
     RadioModes["classic"] = "classic";
     RadioModes["default"] = "default";
     RadioModes["inline"] = "inline";
-    RadioModes["card"] = "card";
+    RadioModes["cardRadio"] = "cardRadio";
 })(RadioModes || (RadioModes = {}));
 const getClassNameMode = (mode) => {
     switch (mode) {
@@ -16,7 +17,7 @@ const getClassNameMode = (mode) => {
             return "af-form__radio";
         case RadioModes.inline:
             return "af-form__radio-inline";
-        case RadioModes.card:
+        case RadioModes.cardRadio:
             return "af-form__radio-card";
         default:
             return "af-form__radio-custom";
@@ -25,10 +26,12 @@ const getClassNameMode = (mode) => {
 const Radio = forwardRef(({ options, value = "", children, disabled, ...otherProps }, inputRef) => {
     const { mode, ...onlyNecessaryProps } = otherProps;
     const classNameMode = getClassNameMode(mode ?? "default");
-    if (mode === "card") {
+    if (mode === "cardRadio") {
         return (_jsx(RadioCardGroup, { ...onlyNecessaryProps, options: options, disabled: disabled, value: value, children: children }));
     }
-    return (_jsx("div", { className: "af-form__radio-group", children: options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children))) }));
+    return (_jsx("div", { className: classNames("af-form__radio-group", [
+            { "af-form__radio-group-classic": mode === RadioModes.classic },
+        ]), children: options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children))) }));
 });
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

package/dist/Form/Radio/RadioInput.js

@@ -5,7 +5,7 @@ import { Radio, RadioModes } from "./Radio";
 const RadioInput = forwardRef(({ label, mode = "default", options, children, ...props }, inputRef) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "card" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), children] })) }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "cardRadio" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), children] })) }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

package/dist/Steps/VerticalStep.d.ts

@@ -2,47 +2,28 @@ import { ReactNode } from "react";
 import type { VerticalStepMode } from "./types";
 import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
 type Props = {
-    /**
-     * title - The title of the step.
-     */
+    /** The title of the step. */
     title: string;
-    /**
-     * id - The id of the step, used for accessibility.
-     * It should be unique within the document.
-     */
+    /** The id of the step, used for accessibility. It should be unique within the document. */
     id: string;
-    /**
-     * stepMode - The mode of the step, can be "edited", "validated", or "locked".
-     */
+    /** The mode of the step, can be "edited", "validated", or "locked". */
     stepMode: VerticalStepMode;
-    /**
-     * onEdit - The function to call when the edit button is clicked.
-     */
+    /** The function to call when the edit button is clicked. */
     onEdit: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * form - The content of the form to display when the step is in "edited" mode.
-     */
+    /** The content of the form to display when the step is in "edited" mode. */
     form: ReactNode;
-    /**
-     * restitution - The content to display when the step is in "validated" mode.
-     */
+    /** The content to display when the step is in "validated" mode. */
     restitution: ReactNode;
-    /**
-     * editButtonLabel - The label of the edit button.
-     */
+    /** The label of the edit button. */
     editButtonLabel?: string;
-    /**
-     * editButtonAriaLabel - The aria-label of the edit button.
-     */
+    /** The aria-label of the edit button. */
     editButtonAriaLabel?: string;
-    /**
-     * showRestitution - Whether to show the restitution content when the step is validated.
-     */
+    /** Whether to show the restitution content when the step is validated. */
     showRestitution?: boolean;
-    /**
-     * contentRight - Additional content to display on the right side of the title.
-     */
+    /** Additional content to display on the right side of the title. */
     contentRight?: string;
+    /** The aria-label for the additional content on the right side of the title. */
+    contentRightAriaLabel?: string;
 };
-export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, contentRightAriaLabel, onEdit, form, restitution, showRestitution, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Steps/VerticalStep.js

@@ -8,15 +8,15 @@ import { Title } from "../Title/Title";
 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, contentRight, }) => {
+export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, contentRightAriaLabel = `Contenu supplémentaire étape verticale ${title}`, onEdit, form, restitution, showRestitution = true, contentRight, }) => {
     const isStepInEdition = stepMode === "edited";
     const isStepValidated = stepMode === "validated";
     const isStepLocked = stepMode === "locked";
-    return (_jsxs("div", { className: classNames(defaultClassName, {
+    return (_jsxs("section", { className: classNames(defaultClassName, {
             [`${defaultClassName}--edition`]: isStepInEdition,
-        }), children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
+        }), "aria-label": `Étape verticale ${title}`, 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, { id: id, contentLeft: isStepValidated ? (_jsx(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, variant: "ghost", leftIcon: _jsx(Svg, { role: "presentation", src: edit }), children: editButtonLabel })) : undefined, contentRight: contentRight, 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] }));
+                }), 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, { id: id, contentLeft: isStepValidated ? (_jsx(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, variant: "ghost", leftIcon: _jsx(Svg, { role: "presentation", src: edit }), children: editButtonLabel })) : undefined, contentRight: _jsx("section", { "aria-label": contentRightAriaLabel, children: contentRight }), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.0-RC.3",
+  "version": "2.0.0-RC.4",
   "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": "2.0.0-RC.3",
+    "@axa-fr/design-system-slash-css": "2.0.0-RC.4",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"