@indico-data/design-system 2.34.3 → 2.34.4
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/lib/index.d.ts +5 -1
- package/lib/index.esm.js +4 -4
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/lib/src/components/forms/input/Input.d.ts +3 -1
- package/lib/src/components/forms/passwordInput/PasswordInput.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/forms/input/Input.tsx +8 -2
- package/src/components/forms/numberInput/NumberInput.tsx +4 -0
- package/src/components/forms/passwordInput/PasswordInput.tsx +6 -0
- package/src/storybook/formArgTypes.ts +24 -0
package/lib/index.js
CHANGED
|
@@ -20989,7 +20989,7 @@ const DisplayFormError = ({ message }) => {
|
|
|
20989
20989
|
};
|
|
20990
20990
|
|
|
20991
20991
|
const Input = React__namespace.default.forwardRef((_a, ref) => {
|
|
20992
|
-
var { name, placeholder,
|
|
20992
|
+
var { name, placeholder, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
|
|
20993
20993
|
const hasErrors = errorMessage && errorMessage.length > 0;
|
|
20994
20994
|
const handleClear = () => {
|
|
20995
20995
|
onChange({ target: { value: '' } });
|
|
@@ -20998,7 +20998,7 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
|
|
|
20998
20998
|
error: hasErrors,
|
|
20999
20999
|
'input--has-icon': iconName,
|
|
21000
21000
|
}, className);
|
|
21001
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [iconName && (jsxRuntime.jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
21001
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "input-wrapper", children: [iconName && (jsxRuntime.jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
21002
21002
|
});
|
|
21003
21003
|
const LabeledInput = withLabel(Input);
|
|
21004
21004
|
|
|
@@ -21026,7 +21026,7 @@ const Textarea = React__namespace.default.forwardRef((_a, ref) => {
|
|
|
21026
21026
|
const LabeledTextarea = withLabel(Textarea);
|
|
21027
21027
|
|
|
21028
21028
|
const PasswordInput = React__namespace.default.forwardRef((_a, ref) => {
|
|
21029
|
-
var { name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
|
|
21029
|
+
var { name, placeholder, onChange, onBlur, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "onBlur", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
|
|
21030
21030
|
const hasErrors = errorMessage && errorMessage.length > 0;
|
|
21031
21031
|
const [showPassword, setShowPassword] = React$1.useState(false);
|
|
21032
21032
|
const handleShowPassword = () => {
|
|
@@ -21035,7 +21035,7 @@ const PasswordInput = React__namespace.default.forwardRef((_a, ref) => {
|
|
|
21035
21035
|
const inputClasses = classNames('password-input', {
|
|
21036
21036
|
error: hasErrors,
|
|
21037
21037
|
}, 'password-input--has-icon');
|
|
21038
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "password-input-wrapper", children: [jsxRuntime.jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsxRuntime.jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
21038
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "password-input-wrapper", children: [jsxRuntime.jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsxRuntime.jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
21039
21039
|
});
|
|
21040
21040
|
const LabeledPasswordInput = withLabel(PasswordInput);
|
|
21041
21041
|
|