@axa-fr/design-system-look-and-feel-react 1.0.5-alpha.250 → 1.0.5-alpha.252
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Form/Checkbox/Checkbox.d.ts +1 -7
- package/dist/Form/Checkbox/Checkbox.js +1 -16
- package/dist/Form/Checkbox/CheckboxCard.d.ts +1 -0
- package/dist/Form/Checkbox/CheckboxCard.js +1 -0
- package/dist/Form/Checkbox/CheckboxText.d.ts +1 -0
- package/dist/Form/Checkbox/CheckboxText.js +1 -0
- package/dist/Form/Checkbox/index.d.ts +2 -1
- package/dist/Form/Checkbox/index.js +2 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +3 -3
- package/dist/Form/Checkbox/CheckboxSelect.d.ts +0 -18
- package/dist/Form/Checkbox/CheckboxSelect.js +0 -14
@@ -1,7 +1 @@
|
|
1
|
-
|
2
|
-
import React, { ReactNode } from "react";
|
3
|
-
declare const Checkbox: React.ForwardRefExoticComponent<{
|
4
|
-
label: string | ReactNode;
|
5
|
-
errorMessage?: string;
|
6
|
-
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label"> & React.RefAttributes<HTMLInputElement>>;
|
7
|
-
export { Checkbox };
|
1
|
+
export { Checkbox } from "@axa-fr/design-system-apollo-react/lf";
|
@@ -1,16 +1 @@
|
|
1
|
-
|
2
|
-
import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
|
3
|
-
import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
|
4
|
-
import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
|
5
|
-
import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
|
6
|
-
import { forwardRef, useId } from "react";
|
7
|
-
import classNames from "classnames";
|
8
|
-
import { Svg } from "../../Svg";
|
9
|
-
const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
|
10
|
-
const idError = useId();
|
11
|
-
let inputId = useId();
|
12
|
-
inputId = inputProps.id || inputId;
|
13
|
-
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) }), _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] }))] }));
|
14
|
-
});
|
15
|
-
Checkbox.displayName = "Checkbox";
|
16
|
-
export { Checkbox };
|
1
|
+
export { Checkbox } from "@axa-fr/design-system-apollo-react/lf";
|
@@ -0,0 +1 @@
|
|
1
|
+
export { CheckboxCard } from "@axa-fr/design-system-apollo-react/lf";
|
@@ -0,0 +1 @@
|
|
1
|
+
export { CheckboxCard } from "@axa-fr/design-system-apollo-react/lf";
|
@@ -0,0 +1 @@
|
|
1
|
+
export { CheckboxText } from "@axa-fr/design-system-apollo-react/lf";
|
@@ -0,0 +1 @@
|
|
1
|
+
export { CheckboxText } from "@axa-fr/design-system-apollo-react/lf";
|
package/dist/index.d.ts
CHANGED
@@ -8,7 +8,7 @@ export { Message, messageVariants, type MessageVariants, } from "./Message/Messa
|
|
8
8
|
export { Button, buttonVariants, type ButtonVariants } from "./Button/Button";
|
9
9
|
export { Card } from "./Card";
|
10
10
|
export { Divider } from "./Divider/Divider";
|
11
|
-
export { Checkbox,
|
11
|
+
export { Checkbox, CheckboxText, CheckboxCard } from "./Form/Checkbox";
|
12
12
|
export { FileUpload } from "./Form/FileUpload";
|
13
13
|
export { InputError } from "./Form/InputError";
|
14
14
|
export { ItemMessage } from "./Form/ItemMessage/ItemMessage";
|
package/dist/index.js
CHANGED
@@ -7,7 +7,7 @@ export { Message, messageVariants, } from "./Message/Message";
|
|
7
7
|
export { Button, buttonVariants } from "./Button/Button";
|
8
8
|
export { Card } from "./Card";
|
9
9
|
export { Divider } from "./Divider/Divider";
|
10
|
-
export { Checkbox,
|
10
|
+
export { Checkbox, CheckboxText, CheckboxCard } from "./Form/Checkbox";
|
11
11
|
export { FileUpload } from "./Form/FileUpload";
|
12
12
|
export { InputError } from "./Form/InputError";
|
13
13
|
export { ItemMessage } from "./Form/ItemMessage/ItemMessage";
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@axa-fr/design-system-look-and-feel-react",
|
3
|
-
"version": "1.0.5-alpha.
|
3
|
+
"version": "1.0.5-alpha.252",
|
4
4
|
"description": "",
|
5
5
|
"main": "./dist/index.js",
|
6
6
|
"types": "./dist/index.d.ts",
|
@@ -47,10 +47,10 @@
|
|
47
47
|
},
|
48
48
|
"homepage": "https://github.com/AxaFrance/design-system#readme",
|
49
49
|
"peerDependencies": {
|
50
|
-
"@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.
|
50
|
+
"@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.252",
|
51
51
|
"@material-symbols/svg-400": ">= 0.19.0",
|
52
52
|
"react": ">= 18",
|
53
|
-
"@axa-fr/design-system-apollo-react": "1.0.5-alpha.
|
53
|
+
"@axa-fr/design-system-apollo-react": "1.0.5-alpha.252"
|
54
54
|
},
|
55
55
|
"peerDependenciesMeta": {
|
56
56
|
"@material-symbols/svg-400": {
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
|
2
|
-
import React, { ComponentPropsWithRef, type ReactNode } from "react";
|
3
|
-
type CheckboxProps = ComponentPropsWithRef<"input"> & {
|
4
|
-
type: "vertical" | "horizontal";
|
5
|
-
labelGroup?: string;
|
6
|
-
descriptionGroup?: string;
|
7
|
-
isRequired?: boolean;
|
8
|
-
options: ({
|
9
|
-
label: ReactNode;
|
10
|
-
subtitle?: ReactNode;
|
11
|
-
description?: ReactNode;
|
12
|
-
icon?: ReactNode;
|
13
|
-
} & React.InputHTMLAttributes<HTMLInputElement>)[];
|
14
|
-
errorMessage?: string;
|
15
|
-
onChange?: React.ChangeEventHandler;
|
16
|
-
};
|
17
|
-
export declare const CheckboxSelect: ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
18
|
-
export {};
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
|
3
|
-
import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
|
4
|
-
import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
|
5
|
-
import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
|
6
|
-
import { useId } from "react";
|
7
|
-
import { Svg } from "../../Svg";
|
8
|
-
import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
|
9
|
-
export const CheckboxSelect = ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
|
10
|
-
const componentClassName = getComponentClassName("af-checkbox__container", className);
|
11
|
-
const checkboxGroupClassName = getComponentClassName(`af-checkbox af-checkbox-select af-checkbox-select--${type}`, className);
|
12
|
-
const optionId = useId();
|
13
|
-
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] }))] }));
|
14
|
-
};
|