@axa-fr/design-system-apollo-react 1.0.5-alpha.273 → 1.0.5-alpha.274

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss";
 import { Icon } from "../../../Icon/IconApollo";
+import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
 import { Checkbox } from "../Checkbox/CheckboxApollo";
 import { CheckboxCardCommon } from "./CheckboxCardCommon";
-export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox }));
+export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
 CheckboxCard.displayName = "CheckboxCard";

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

@@ -1,4 +1,5 @@
-import React, { ComponentPropsWithRef } from "react";
+import React, { ComponentPropsWithRef, type ComponentProps, type ComponentType } from "react";
+import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { type TCheckboxCardItem } from "./CheckboxCardItem";
 import type { CheckboxComponent, IconComponent } from "./types";
 export type CheckboxCardProps = ComponentPropsWithRef<"input"> & {
@@ -8,10 +9,13 @@ export type CheckboxCardProps = ComponentPropsWithRef<"input"> & {
     isRequired?: boolean;
     options: TCheckboxCardItem[];
     onChange?: React.ChangeEventHandler;
+    error?: string;
+};
+type CheckboxCardCommonProps = CheckboxCardProps & CheckboxComponent & IconComponent & {
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
-type CheckboxCardCommonProps = CheckboxCardProps & CheckboxComponent & IconComponent;
 export declare const CheckboxCardCommon: {
-    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, }: CheckboxCardCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, error, ItemMessageComponent, }: CheckboxCardCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, } from "react";
 import { BREAKPOINT } from "../../../utilities/constants";
 import { getComponentClassName } from "../../../utilities/getComponentClassName";
 import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
 import { CheckboxCardItem } from "./CheckboxCardItem";
-export const CheckboxCardCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", }) => {
+export const CheckboxCardCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", error, ItemMessageComponent, }) => {
     const componentClassName = getComponentClassName("af-checkbox-card__container", className);
     const checkboxGroupClassName = getComponentClassName("af-checkbox-card-group", className, type);
     const errorId = useId();
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     const size = isMobile ? "M" : "L";
-    return (_jsxs("fieldset", { className: componentClassName, children: [_jsx("div", { className: "af-checkbox-card__label-container", children: labelGroup && (_jsxs("legend", { className: "af-checkbox-card__legend", children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" }), descriptionGroup && (_jsx("p", { className: "af-checkbox-card__description", children: descriptionGroup }))] })) }), _jsx("ul", { className: checkboxGroupClassName, children: options.map((inputProps) => (_jsx("li", { children: _jsx(CheckboxCardItem, { size: size, errorId: errorId, onChange: onChange, CheckboxComponent: CheckboxComponent, IconComponent: IconComponent, ...inputProps }) }, crypto.randomUUID()))) })] }));
+    return (_jsxs("fieldset", { className: componentClassName, children: [_jsx("div", { className: "af-checkbox-card__label-container", children: labelGroup && (_jsxs("legend", { className: "af-checkbox-card__legend", children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" }), descriptionGroup && (_jsx("p", { className: "af-checkbox-card__description", children: descriptionGroup }))] })) }), _jsxs("div", { className: "af-checkbox-card__choices", children: [_jsx("ul", { className: checkboxGroupClassName, children: options.map(({ hasError, ...inputProps }) => (_jsx("li", { children: _jsx(CheckboxCardItem, { size: size, errorId: errorId, onChange: onChange, CheckboxComponent: CheckboxComponent, IconComponent: IconComponent, hasError: Boolean(error) || hasError, ...inputProps }) }, crypto.randomUUID()))) }), error && (_jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" }))] })] }));
 };
 CheckboxCardCommon.displayName = "CheckboxCardCommon";

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss";
 import { Icon } from "../../../Icon/IconLF";
+import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { Checkbox } from "../Checkbox/CheckboxLF";
 import { CheckboxCardCommon } from "./CheckboxCardCommon";
-export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox }));
+export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
 CheckboxCard.displayName = "CheckboxCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.273",
+  "version": "1.0.5-alpha.274",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.273",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.273",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.274",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.274",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },