@axa-fr/design-system-look-and-feel-react 1.0.5-ci.24 → 1.0.5-ci.25

package/dist/Form/Checkbox/Checkbox.d.ts

@@ -1,7 +1,11 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
 import React, { ReactNode } from "react";
 declare const Checkbox: React.ForwardRefExoticComponent<{
-    label: string | ReactNode;
+    label: ReactNode;
+    subtitle?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
     errorMessage?: string;
+    showErrorMessage?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label"> & React.RefAttributes<HTMLInputElement>>;
 export { Checkbox };

package/dist/Form/Checkbox/Checkbox.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
 import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
 import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
-import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { forwardRef, useId } from "react";
 import classNames from "classnames";
 import { Svg } from "../../Svg";
-const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
+import { InputError } from "../InputError";
+const Checkbox = forwardRef(({ label, icon, description, subtitle, errorMessage, className, showErrorMessage = true, ...inputProps }, ref) => {
     const idError = useId();
     let inputId = useId();
     inputId = inputProps.id || inputId;
-    return (_jsxs("div", { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name) }), errorMessage && showErrorMessage && (_jsx(InputError, { id: idError, message: errorMessage }))] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/Form/Checkbox/CheckboxSelect.d.ts

@@ -1,7 +1,8 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
-import React, { ComponentPropsWithRef, type ReactNode } from "react";
-type CheckboxProps = ComponentPropsWithRef<"input"> & {
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+type Props = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
+    border?: boolean;
     labelGroup?: string;
     descriptionGroup?: string;
     isRequired?: boolean;
@@ -12,7 +13,8 @@ type CheckboxProps = ComponentPropsWithRef<"input"> & {
         icon?: ReactNode;
     } & React.InputHTMLAttributes<HTMLInputElement>)[];
     errorMessage?: string;
-    onChange?: React.ChangeEventHandler;
+    onChange?: (...event: unknown[]) => void;
+    value?: unknown[];
 };
-export declare const CheckboxSelect: ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const CheckboxSelect: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { CheckboxSelect };

package/dist/Form/Checkbox/CheckboxSelect.js

@@ -1,14 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
-import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
-import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
-import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import { useId } from "react";
-import { Svg } from "../../Svg";
-import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
-export const CheckboxSelect = ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
-    const componentClassName = getComponentClassName("af-checkbox__container", className);
-    const checkboxGroupClassName = getComponentClassName(`af-checkbox af-checkbox-select af-checkbox-select--${type}`, className);
+import { forwardRef, useEffect, useId, useState, } from "react";
+import { Checkbox } from "./Checkbox";
+import { getComponentClassName } from "../core";
+import { InputError } from "../InputError";
+const CheckboxSelect = forwardRef(({ options, errorMessage, onChange, value, type = "vertical", className, labelGroup, descriptionGroup, isRequired, border = true, }, ref) => {
+    const [checkedState, setCheckedState] = useState(options.map((x) => Boolean(value?.includes(x.value))));
     const optionId = useId();
-    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-checkbox__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: checkboxGroupClassName, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
-};
+    const idError = useId();
+    const handleOnChange = (position) => {
+        const updatedCheckedState = checkedState.map((item, index) => index === position ? !item : item);
+        setCheckedState(updatedCheckedState);
+        if (onChange) {
+            const arr = [];
+            updatedCheckedState.forEach((x, idx) => {
+                if (x === true) {
+                    arr.push(options[idx].value);
+                }
+            });
+            onChange(arr);
+        }
+    };
+    useEffect(() => {
+        setCheckedState(options.map((x) => Boolean(value?.includes(x.value))));
+    }, [setCheckedState, options, value]);
+    const componentClassName = getComponentClassName("af-checkbox__container", className);
+    const checkboxGroupClassName = getComponentClassName(`af-checkbox${border ? " af-checkbox-select" : ""} af-checkbox-select--${type}`, className);
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-checkbox__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: checkboxGroupClassName, children: _jsx("ul", { children: options.map(({ label, value: valueOption, ...inputProps }, idx) => (_jsx("li", { children: _jsx(Checkbox, { ...inputProps, showErrorMessage: false, ref: idx === 0 ? ref : null, value: valueOption, checked: checkedState[idx], onChange: () => handleOnChange(idx), id: `id-${inputProps.name}`, label: label, errorMessage: errorMessage, "aria-errormessage": Boolean(errorMessage) && !inputProps.disabled
+                                ? idError
+                                : undefined }) }, `key-${inputProps.name}`))) }) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
+});
+CheckboxSelect.displayName = "CheckboxSelect";
+export { CheckboxSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.24",
+  "version": "1.0.5-ci.25",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.24",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.25",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },