@axa-fr/design-system-look-and-feel-react 1.0.5-ci.15 → 1.0.5-ci.17

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,6 +1,7 @@
1
1
  import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
2
2
  import { ComponentPropsWithRef, MouseEventHandler } from "react";
3
3
  type Props = ComponentPropsWithRef<"input"> & {
4
+ unit?: React.ReactNode;
4
5
  classModifier?: string;
5
6
  helper?: string;
6
7
  error?: string;
@@ -7,12 +7,15 @@ 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, required, ...otherProps }, inputRef) => {
10
+ const Text = forwardRef(({ unit, className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
11
11
  const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
12
12
  let inputId = useId();
13
13
  inputId = otherProps.id || inputId;
14
+ const idDescription = useId();
14
15
  const idError = useId();
15
- return (_jsxs("div", { className: "af-form__input-container", children: [(label || description || buttonLabel) && (_jsxs("div", { className: "af-form__label-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 })] }));
16
+ const idHelp = useId();
17
+ const idLabel = useId();
18
+ return (_jsxs("div", { className: "af-form__input-container", children: [(label || description || buttonLabel) && (_jsxs("div", { className: "af-form__label-container", children: [_jsxs("label", { htmlFor: inputId, "aria-describedby": idDescription, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), description && (_jsx("span", { id: idDescription, 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 }))] })), _jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-labelledby": idLabel, "aria-errormessage": idError, "aria-invalid": Boolean(error), "aria-describedby": idHelp, ...otherProps }), unit] }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), error && _jsx(InputError, { id: idError, message: error })] }));
16
19
  });
17
20
  Text.displayName = "Text";
18
21
  export { Text };
@@ -10,7 +10,7 @@ const TextArea = forwardRef(({ className, classModifier = "", label, description
10
10
  let inputId = useId();
11
11
  inputId = otherProps.id || inputId;
12
12
  const idError = useId();
13
- 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("textarea", { id: inputId, className: componentClassName, 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 })] }));
13
+ return (_jsxs("div", { className: "af-form__input-container", children: [label && (_jsxs("div", { className: "af-form__label-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("textarea", { id: inputId, className: componentClassName, 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
14
  });
15
15
  TextArea.displayName = "TextArea";
16
16
  export { 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-ci.15",
3
+ "version": "1.0.5-ci.17",
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": "1.0.5-ci.15",
48
+ "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.17",
49
49
  "@material-symbols/svg-400": ">= 0.19.0",
50
50
  "react": ">= 18"
51
51
  },