@axa-fr/design-system-look-and-feel-react 1.0.3-ci.1 → 1.0.3-ci.3

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

@@ -3,6 +3,7 @@ import React, { type ReactNode } from "react";
 type CheckboxProps = {
     type: "vertical" | "horizontal";
     labelGroup?: string;
+    descriptionGroup?: string;
     isRequired?: boolean;
     options: ({
         label: ReactNode;
@@ -13,5 +14,5 @@ type CheckboxProps = {
     errorMessage?: string;
     onChange?: React.ChangeEventHandler;
 };
-export declare const CheckboxSelect: ({ labelGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxSelect: ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Checkbox/CheckboxSelect.js

@@ -5,7 +5,7 @@ import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_b
 import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { useId } from "react";
 import { Svg } from "../../Svg";
-export const CheckboxSelect = ({ labelGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
+export const CheckboxSelect = ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
     const optionId = useId();
-    return (_jsxs("div", { className: "af-checkbox__container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { role: "group", className: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, 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] }))] }));
+    return (_jsxs("div", { className: "af-checkbox__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: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, 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] }))] }));
 };

package/dist/List/ClickList/ClickItem/ClickItem.d.ts

@@ -1,2 +1,2 @@
 import type { TClickItem } from "./types";
-export declare const ClickItem: ({ children, icon, parentClickComponent: ClickComponent, isDisabled, className, classModifier, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ClickItem: ({ children, icon, parentClickComponent: ClickComponent, isDisabled, className, classModifier, actionIcon, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;

package/dist/List/ClickList/ClickItem/ClickItem.js

@@ -3,7 +3,7 @@ import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
 import { useMemo } from "react";
 import { Svg } from "../../../Svg";
 import { getComponentClassName } from "../../../utilities";
-export const ClickItem = ({ children, icon, parentClickComponent: ClickComponent = ({ children: parentClickComponentChildren, ...parentClickComponentProps }) => (_jsx("button", { type: "button", ...parentClickComponentProps, children: parentClickComponentChildren })), isDisabled = false, className, classModifier = "", ...otherProps }) => {
+export const ClickItem = ({ children, icon, parentClickComponent: ClickComponent = ({ children: parentClickComponentChildren, ...parentClickComponentProps }) => (_jsx("button", { type: "button", ...parentClickComponentProps, children: parentClickComponentChildren })), isDisabled = false, className, classModifier = "", actionIcon = _jsx(Svg, { src: chevron, "aria-hidden": true }), ...otherProps }) => {
     const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
-    return (_jsxs(ClickComponent, { className: componentClassName, disabled: isDisabled, "aria-disabled": isDisabled, ...otherProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children })] }), _jsx("div", { className: "af-click-item__action", children: _jsx(Svg, { src: chevron, "aria-hidden": true }) })] }));
+    return (_jsxs(ClickComponent, { className: componentClassName, disabled: isDisabled, "aria-disabled": isDisabled, ...otherProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children })] }), _jsx("div", { className: "af-click-item__action", children: actionIcon })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.3-ci.1",
+  "version": "1.0.3-ci.3",
   "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.3-ci.1",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.3-ci.3",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },