@axa-fr/design-system-look-and-feel-react 0.3.0-ci.311 → 0.3.0-ci.317
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.js +2 -1
- package/dist/Form/FileUpload/FileUpload.js +3 -1
- package/dist/Form/Radio/Radio.js +2 -1
- package/dist/Form/Radio/RadioSelect.d.ts +1 -1
- package/dist/Form/Radio/RadioSelect.js +9 -3
- package/dist/Form/Select/Select.js +2 -2
- package/dist/Form/Text/Text.js +6 -4
- package/package.json +2 -2
@@ -7,9 +7,10 @@ import { forwardRef, useId } from "react";
|
|
7
7
|
import classNames from "classnames";
|
8
8
|
import { Svg } from "../../Svg";
|
9
9
|
const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
|
10
|
+
const idError = useId();
|
10
11
|
let inputId = useId();
|
11
12
|
inputId = inputProps.id || inputId;
|
12
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "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", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
|
13
|
+
return (_jsxs(_Fragment, { 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] }))] }));
|
13
14
|
});
|
14
15
|
Checkbox.displayName = "Checkbox";
|
15
16
|
export { Checkbox };
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
+
import { useId } from "react";
|
2
3
|
import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
|
3
4
|
import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
|
4
5
|
import close from "@material-symbols/svg-400/outlined/close-fill.svg";
|
@@ -23,6 +24,7 @@ function getReadableFileSizeString(fileSizeInBytes) {
|
|
23
24
|
return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
|
24
25
|
}
|
25
26
|
const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
|
27
|
+
const idError = useId();
|
26
28
|
const getIcon = (isInError, isLoading) => {
|
27
29
|
if (isInError) {
|
28
30
|
return (_jsx(Svg, { src: error, className: "af-form__file-title-container-icon-error" }));
|
@@ -32,7 +34,7 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
|
|
32
34
|
}
|
33
35
|
return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
|
34
36
|
};
|
35
|
-
return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
|
37
|
+
return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
|
36
38
|
const effectiveSize = getReadableFileSizeString(size);
|
37
39
|
const isInError = errors.some((fileError) => fileError.id === fileId);
|
38
40
|
const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
|
package/dist/Form/Radio/Radio.js
CHANGED
@@ -8,7 +8,8 @@ import { InputError } from "../InputError";
|
|
8
8
|
const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
|
9
9
|
let inputId = useId();
|
10
10
|
inputId = inputProps.id || inputId;
|
11
|
-
|
11
|
+
const idError = useId();
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), "aria-errormessage": idError, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
|
12
13
|
});
|
13
14
|
Radio.displayName = "Radio";
|
14
15
|
export { Radio };
|
@@ -16,5 +16,5 @@ type RadioSelectProps = {
|
|
16
16
|
value?: string;
|
17
17
|
isDisabled?: boolean;
|
18
18
|
} & Omit<ComponentPropsWithRef<"div">, "className" | "aria-invalid">;
|
19
|
-
export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<
|
19
|
+
export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
20
20
|
export {};
|
@@ -2,15 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
|
3
3
|
import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
|
4
4
|
import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
|
5
|
-
import { forwardRef, useId, } from "react";
|
5
|
+
import { forwardRef, useCallback, useId, } from "react";
|
6
6
|
import { Svg } from "../../Svg";
|
7
7
|
import { InputError } from "../InputError";
|
8
8
|
export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
|
9
9
|
const generatedId = useId();
|
10
10
|
const optionId = id || generatedId;
|
11
|
-
|
11
|
+
const getRef = useCallback((index, reference, val, inputVal) => {
|
12
|
+
if ((!val && index === 0) || val === inputVal) {
|
13
|
+
return reference;
|
14
|
+
}
|
15
|
+
return null;
|
16
|
+
}, []);
|
17
|
+
return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
|
12
18
|
"aria-checked": value === inputProps.value,
|
13
19
|
checked: value === inputProps.value,
|
14
|
-
}) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
|
20
|
+
}), ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
|
15
21
|
});
|
16
22
|
RadioSelect.displayName = "RadioSelect";
|
@@ -7,7 +7,7 @@ import { DropdownIndicator } from "./DropdownIndicator";
|
|
7
7
|
import { Svg } from "../../Svg";
|
8
8
|
import { CustomOption } from "./CustomOption";
|
9
9
|
const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }) => {
|
10
|
-
return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
|
10
|
+
return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, "aria-errormessage": `${id}__error`, "aria-invalid": Boolean(errorLabel), unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
|
11
11
|
DropdownIndicator,
|
12
12
|
Option: CustomOption,
|
13
13
|
}, classNames: {
|
@@ -21,7 +21,7 @@ const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, .
|
|
21
21
|
option: ({ isSelected, isFocused, }) => classNames("af-form__input-select-menu-options", isSelected && "af-form__input-select-menu-options-selected", isFocused && "af-form__input-select-menu-options-focused"),
|
22
22
|
singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
|
23
23
|
dropdownIndicator: () => "af-form__select-dropdown-indicator",
|
24
|
-
}, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { className: "af-form__select-error", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
|
24
|
+
}, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { id: `${id}__error`, className: "af-form__select-error", "aria-live": "assertive", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
|
25
25
|
};
|
26
26
|
Select.displayName = "Select";
|
27
27
|
export { Select };
|
package/dist/Form/Text/Text.js
CHANGED
@@ -1,16 +1,18 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
|
3
|
-
import { forwardRef } from "react";
|
3
|
+
import { forwardRef, useId, } from "react";
|
4
4
|
import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
|
5
5
|
import { Button } from "../..";
|
6
6
|
import { Variants } from "../../Button/Button";
|
7
7
|
import { Svg } from "../../Svg";
|
8
8
|
import { getComponentClassName } from "../../utilities";
|
9
9
|
import { InputError } from "../InputError";
|
10
|
-
const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, ...otherProps }, inputRef) => {
|
10
|
+
const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
|
11
11
|
const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
|
12
|
-
|
13
|
-
|
12
|
+
let inputId = useId();
|
13
|
+
inputId = otherProps.id || inputId;
|
14
|
+
const idError = useId();
|
15
|
+
return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
|
14
16
|
});
|
15
17
|
Text.displayName = "Text";
|
16
18
|
export { Text };
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@axa-fr/design-system-look-and-feel-react",
|
3
|
-
"version": "0.3.0-ci.
|
3
|
+
"version": "0.3.0-ci.317",
|
4
4
|
"description": "",
|
5
5
|
"exports": {
|
6
6
|
".": {
|
@@ -45,7 +45,7 @@
|
|
45
45
|
},
|
46
46
|
"homepage": "https://github.com/AxaFrance/design-system#readme",
|
47
47
|
"peerDependencies": {
|
48
|
-
"@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.
|
48
|
+
"@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.317",
|
49
49
|
"@material-symbols/svg-400": ">= 0.19.0",
|
50
50
|
"react": ">= 18"
|
51
51
|
},
|