@axa-fr/design-system-slash-react 1.2.1-alpha.62 → 1.2.1-alpha.63

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

@@ -1,14 +1,31 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithoutRef } from "react";
 import type { Option } from "../core";
-import { RadioItem } from "./RadioItem";
+import { RadioCardGroup } from "./RadioCardGroup";
 export declare enum RadioModes {
     classic = "classic",
     default = "default",
-    inline = "inline"
+    inline = "inline",
+    card = "card"
 }
-type Props = Omit<ComponentPropsWithRef<typeof RadioItem>, "id" | "label" | "className"> & {
+declare const Radio: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
+    classModifier?: string;
+    optionClassName?: string;
+    label?: import("react").ReactNode;
+    isChecked?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
     options: Option[];
-    mode?: keyof typeof RadioModes;
-};
-declare const Radio: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & {
+    mode?: "classic" | "default" | "inline";
+}, "ref"> | Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
+    classModifier?: string;
+    optionClassName?: string;
+    label?: import("react").ReactNode;
+    isChecked?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
+    options: Option[];
+} & {
+    mode: "card";
+    className?: string;
+    orientation?: ComponentPropsWithoutRef<typeof RadioCardGroup>["orientation"];
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export { Radio };

package/dist/Form/Radio/Radio.js

@@ -1,11 +1,14 @@
 import { createElement as _createElement } from "react";
-import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
 import { RadioItem } from "./RadioItem";
+import { RadioCardGroup } from "./RadioCardGroup";
 export var RadioModes;
 (function (RadioModes) {
     RadioModes["classic"] = "classic";
     RadioModes["default"] = "default";
     RadioModes["inline"] = "inline";
+    RadioModes["card"] = "card";
 })(RadioModes || (RadioModes = {}));
 const getClassNameMode = (mode) => {
     switch (mode) {
@@ -13,13 +16,21 @@ const getClassNameMode = (mode) => {
             return "af-form__radio";
         case RadioModes.inline:
             return "af-form__radio-inline";
+        case RadioModes.card:
+            return "af-form__radio-card";
         default:
             return "af-form__radio-custom";
     }
 };
-const Radio = forwardRef(({ classModifier, options, value = "", mode = RadioModes.default, children, disabled, ...otherProps }, inputRef) => {
-    const classNameMode = getClassNameMode(mode);
-    return options.map((option) => (_createElement(RadioItem, { ...otherProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, classModifier: classModifier, ref: inputRef, ...option }, children)));
+const Radio = forwardRef(({ classModifier, options, value = "", children, disabled, ...otherProps }, inputRef) => {
+    const classNameMode = getClassNameMode(otherProps.mode ?? "default");
+    // ICI - le if qui permet de rendre un autre composant
+    if (otherProps.mode === "card") {
+        return (_jsx(RadioCardGroup, { className: otherProps.className, options: options, error: classModifier === "error", disabled: disabled, orientation: otherProps.orientation, children: children }));
+    }
+    const onlyNecessaryProps = { ...otherProps };
+    delete onlyNecessaryProps.mode;
+    return options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, classModifier: classModifier, ref: inputRef, ...option }, children)));
 });
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

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

@@ -0,0 +1,12 @@
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
+import { PropsWithChildren } from "react";
+import type { Option } from "../core";
+type Props = PropsWithChildren & {
+    options: Option[];
+    orientation?: "horizontal" | "vertical";
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare const RadioCardGroup: ({ children, options, className, orientation, disabled, error, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/Radio/RadioCardGroup.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
+import { useId, useRef } from "react";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const DEFAULT_CLASSNAME = "af-card";
+const DEFAULT_CONTAINER_CLASSNAME = "af-form__radio-card-group";
+export const RadioCardGroup = ({ children, options, className, orientation = "vertical", disabled = false, error = false, }) => {
+    const idGenerated = useId();
+    const radioGroupRef = useRef(null);
+    return (_jsxs("div", { ref: radioGroupRef, role: "radiogroup", className: classNames([
+            DEFAULT_CONTAINER_CLASSNAME,
+            className,
+            orientation === "horizontal" &&
+                `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
+        ]), children: [options.map(({ name, icon, label, disabled: optionDisabled, checked, ...otherOptionProps }) => {
+                const newName = name ?? idGenerated;
+                const allClassNames = classNames([
+                    DEFAULT_CLASSNAME,
+                    orientation === "horizontal" && `${DEFAULT_CLASSNAME}--horizontal`,
+                    error && `${DEFAULT_CLASSNAME}--error`,
+                ]);
+                const isDisabled = disabled || optionDisabled;
+                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : checked, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, otherOptionProps.value));
+            }), children] }));
+};

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

@@ -1,12 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
 import { type ConsumerFieldProps } from "../core";
-import { RadioModes } from "./Radio";
-declare const RadioInput: import("react").ForwardRefExoticComponent<ConsumerFieldProps & Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
-    classModifier?: string;
-    optionClassName?: string;
-    label?: import("react").ReactNode;
-    isChecked?: boolean;
-}, "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>>;
+import { Radio } from "./Radio";
+type RadioInputProps = ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>;
+declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export { RadioInput };

package/dist/Form/core/index.d.ts

@@ -17,9 +17,11 @@ export type Option = {
     id?: string;
     icon?: ReactNode;
     label: ReactNode;
+    /**
+     * @deprecated Ne semble pas utilisé
+     */
     description?: ReactNode;
     value: string;
-    disabled?: boolean;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 type BaseFormEvent = {
     id: string;

package/package.json

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