@axa-fr/design-system-apollo-react 1.0.5-alpha.268 → 1.0.5-alpha.270

package/dist/BasePicture/BasePictureCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
+import logo from "@axa-fr/design-system-apollo-css/logo-axa.svg";
 import { getComponentClassName } from "../utilities/getComponentClassName";
 export const BasePicture = ({ className, src, ...rest }) => {
     const componentClassName = useMemo(() => getComponentClassName("af-basepicture", className), [className]);

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

@@ -1,29 +1,17 @@
-import React, { type ComponentProps, ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
-import { Icon } from "../../../Icon/IconCommon";
-import { CheckboxProps } from "../Checkbox/CheckboxCommon";
-type CheckboxComponent = {
-    CheckboxComponent: ComponentType<CheckboxProps>;
-};
-type IconComponent = {
-    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
-};
+import React, { ComponentPropsWithRef } from "react";
+import { type TCheckboxCardItem } from "./CheckboxCardItem";
+import type { CheckboxComponent, IconComponent } from "./types";
 export type CheckboxCardProps = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;
     isRequired?: boolean;
-    options: ({
-        label: ReactNode;
-        subtitle?: ReactNode;
-        description?: ReactNode;
-        hasError?: boolean;
-        icon?: string;
-    } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">)[];
+    options: TCheckboxCardItem[];
     onChange?: React.ChangeEventHandler;
 };
-export type CheckboxCardCommonProps = CheckboxCardProps & CheckboxComponent & IconComponent;
-declare const CheckboxCardCommon: {
+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;
     displayName: string;
 };
-export { CheckboxCardCommon };
+export {};

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

@@ -1,16 +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";
-const CheckboxCardCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", }) => {
+import { CheckboxCardItem } from "./CheckboxCardItem";
+export const CheckboxCardCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", }) => {
     const componentClassName = getComponentClassName("af-checkbox-card__container", className);
     const checkboxGroupClassName = getComponentClassName("af-checkbox-card-group", className, type);
-    const optionId = useId();
     const errorId = useId();
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
     const size = isMobile ? "M" : "L";
-    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-checkbox-card__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox-card__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox-card__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: checkboxGroupClassName, children: options.map(({ label, description, subtitle, icon, hasError, ...inputProps }) => (_jsxs("label", { "aria-invalid": hasError, htmlFor: `id-${inputProps.name}`, className: "af-checkbox-card-label", children: [_jsx(CheckboxComponent, { id: `id-${inputProps.name}`, errorId: errorId, hasError: hasError, onChange: onChange, ...inputProps }), _jsxs("div", { className: "af-checkbox-card-content", children: [icon && _jsx(IconComponent, { src: icon, size: size }), _jsxs("div", { className: "af-checkbox-card-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) })] }));
+    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()))) })] }));
 };
 CheckboxCardCommon.displayName = "CheckboxCardCommon";
-export { CheckboxCardCommon };

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import type { CheckboxComponent, IconComponent } from "./types";
+export type TCheckboxCardItem = {
+    label: ReactNode;
+    subtitle?: ReactNode;
+    description?: ReactNode;
+    hasError?: boolean;
+    icon?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "size">;
+type CheckboxCardItemProps = {
+    size: "M" | "L";
+    errorId: string;
+} & TCheckboxCardItem & CheckboxComponent & IconComponent;
+export declare const CheckboxCardItem: ({ CheckboxComponent, IconComponent, id, label, description, subtitle, icon, errorId, hasError, size, ...inputProps }: CheckboxCardItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export const CheckboxCardItem = ({ CheckboxComponent, IconComponent, id, label, description, subtitle, icon, errorId, hasError, size, ...inputProps }) => {
+    let inputId = useId();
+    inputId = id ?? inputId;
+    return (_jsxs("label", { htmlFor: inputId, className: "af-checkbox-card-label", "aria-invalid": hasError, children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: hasError, ...inputProps }), _jsxs("div", { className: "af-checkbox-card-content", children: [icon && _jsx(IconComponent, { src: icon, size: size }), _jsxs("div", { className: "af-checkbox-card-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }));
+};

package/package.json

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