@axa-fr/design-system-look-and-feel-react 1.0.5-alpha.278 → 1.0.5-alpha.280

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.
@@ -1,7 +1 @@
1
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
2
- import React, { ReactNode } from "react";
3
- declare const Radio: React.ForwardRefExoticComponent<{
4
- label: string | ReactNode;
5
- errorMessage?: string;
6
- } & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
7
- export { Radio };
1
+ export { Radio } from "@axa-fr/design-system-apollo-react/lf";
@@ -1,15 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
3
- import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
4
- import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
5
- import { forwardRef, useId } from "react";
6
- import { Svg } from "../../Svg";
7
- import { InputError } from "../InputError";
8
- const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
9
- let inputId = useId();
10
- inputId = inputProps.id || inputId;
11
- const idError = useId();
12
- return (_jsxs("div", { 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 })] }));
13
- });
14
- Radio.displayName = "Radio";
15
- export { Radio };
1
+ export { Radio } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { RadioCard } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { RadioCard } from "@axa-fr/design-system-apollo-react/lf";
@@ -1,2 +1,2 @@
1
1
  export { Radio } from "./Radio";
2
- export { RadioSelect } from "./RadioSelect";
2
+ export { RadioCard } from "./RadioCard";
@@ -1,2 +1,2 @@
1
1
  export { Radio } from "./Radio";
2
- export { RadioSelect } from "./RadioSelect";
2
+ export { RadioCard } from "./RadioCard";
package/dist/index.d.ts CHANGED
@@ -13,7 +13,7 @@ export { FileUpload } from "./Form/FileUpload";
13
13
  export { InputError } from "./Form/InputError";
14
14
  export { ItemMessage } from "./Form/ItemMessage/ItemMessage";
15
15
  export { ItemLabel } from "./Form/ItemLabel/ItemLabel";
16
- export { Radio, RadioSelect } from "./Form/Radio";
16
+ export { Radio, RadioCard } from "./Form/Radio";
17
17
  export { Select } from "./Form/Select/Select";
18
18
  export { TextInput } from "./Form/Text/Text";
19
19
  export { TextArea } from "./Form/TextArea/TextArea";
package/dist/index.js CHANGED
@@ -12,7 +12,7 @@ export { FileUpload } from "./Form/FileUpload";
12
12
  export { InputError } from "./Form/InputError";
13
13
  export { ItemMessage } from "./Form/ItemMessage/ItemMessage";
14
14
  export { ItemLabel } from "./Form/ItemLabel/ItemLabel";
15
- export { Radio, RadioSelect } from "./Form/Radio";
15
+ export { Radio, RadioCard } from "./Form/Radio";
16
16
  export { Select } from "./Form/Select/Select";
17
17
  export { TextInput } from "./Form/Text/Text";
18
18
  export { TextArea } from "./Form/TextArea/TextArea";
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.278",
3
+ "version": "1.0.5-alpha.280",
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.278",
50
+ "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.280",
51
51
  "@material-symbols/svg-400": ">= 0.19.0",
52
52
  "react": ">= 18",
53
- "@axa-fr/design-system-apollo-react": "1.0.5-alpha.278"
53
+ "@axa-fr/design-system-apollo-react": "1.0.5-alpha.280"
54
54
  },
55
55
  "peerDependenciesMeta": {
56
56
  "@material-symbols/svg-400": {
@@ -1,21 +0,0 @@
1
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
2
- import React, { ComponentPropsWithRef, ReactNode } from "react";
3
- type RadioSelectProps = ComponentPropsWithRef<"input"> & {
4
- type: "vertical" | "horizontal";
5
- label?: string;
6
- description?: string;
7
- isRequired?: boolean;
8
- options: ({
9
- label: ReactNode;
10
- subtitle?: ReactNode;
11
- description?: ReactNode;
12
- icon?: ReactNode;
13
- } & React.InputHTMLAttributes<HTMLInputElement>)[];
14
- name: string;
15
- errorMessage?: string;
16
- onChange?: React.ChangeEventHandler;
17
- value?: string;
18
- isDisabled?: boolean;
19
- } & Omit<ComponentPropsWithRef<"div">, "className" | "aria-invalid">;
20
- export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
21
- export {};
@@ -1,22 +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/Radio/Radio.scss";
3
- import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
4
- import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
5
- import { forwardRef, useCallback, useId, } from "react";
6
- import { Svg } from "../../Svg";
7
- import { InputError } from "../InputError";
8
- import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
9
- export const RadioSelect = forwardRef(({ className, id, label, description, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
10
- const componentClassName = getComponentClassName("af-radio__container", className);
11
- const radioGroupClassName = getComponentClassName(`af-radio af-radio-select af-radio-select--${type}`, className);
12
- const generatedId = useId();
13
- const optionId = id || generatedId;
14
- const getRef = useCallback((index, reference, val, inputVal) => {
15
- if ((!val && index === 0) || val === inputVal) {
16
- return reference;
17
- }
18
- return null;
19
- }, []);
20
- return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-radio__label-container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), description && (_jsx("span", { className: "af-radio__description", children: description }))] }), _jsx("div", { ...rest, role: "radiogroup", className: radioGroupClassName, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description: inputDescription, 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, "aria-checked": value === inputProps.value, checked: value === inputProps.value, 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 }), inputDescription && _jsx("span", { children: inputDescription }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
21
- });
22
- RadioSelect.displayName = "RadioSelect";