@indico-data/design-system 2.9.0 → 2.10.0

package/lib/index.js

@@ -18666,12 +18666,12 @@ const ErrorList = ({ errorList, name }) => {
 };
 
 const Input = (_a) => {
-    var { ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable } = _a, rest = __rest$1(_a, ["ref", "label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "iconName", "hasHiddenLabel", "isClearable"]);
+    var { ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, className = '' } = _a, rest = __rest$1(_a, ["ref", "label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "iconName", "hasHiddenLabel", "isClearable", "className"]);
     const hasErrors = errorList && errorList.length > 0;
     const handleClear = () => {
         onChange({ target: { value: '' } });
     };
-    return (jsxRuntime.jsxs("div", { className: "form-control", children: [jsxRuntime.jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), 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, required: isRequired, placeholder: placeholder, value: value, onChange: onChange, className: `input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''}`, "aria-invalid": hasErrors, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)), isClearable && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxRuntime.jsxs("div", { className: "form-control", children: [jsxRuntime.jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), 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, required: isRequired, placeholder: placeholder, value: value, onChange: onChange, className: `input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`, "aria-invalid": hasErrors, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)), isClearable && (jsxRuntime.jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsxRuntime.jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 };
 
 const Radio$2 = (_a) => {
@@ -18689,6 +18689,22 @@ const Toggle$1 = (_a) => {
     return (jsxRuntime.jsx("div", { className: "form-control", children: jsxRuntime.jsxs("div", { className: "toggle-wrapper", children: [jsxRuntime.jsx("input", Object.assign({ "data-testid": `form-toggle-input-${name}`, className: "toggle-input", type: "checkbox", id: id, checked: isChecked, name: name, value: value, disabled: isDisabled, ref: ref, onChange: onChange, tabIndex: 0, "aria-describedby": id, "aria-label": label }, rest)), jsxRuntime.jsx("label", { htmlFor: id, className: "switch" }), jsxRuntime.jsx("label", { className: 'toggle-label', htmlFor: id, children: label })] }) }));
 };
 
+const Textarea = (_a) => {
+    var { ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["ref", "label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
+    const hasErrors = errorList && errorList.length > 0;
+    return (jsxRuntime.jsxs("div", { className: "form-control", children: [jsxRuntime.jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxRuntime.jsx("div", { className: "textarea-wrapper", children: jsxRuntime.jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, value: value, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, required: isRequired, placeholder: placeholder, onChange: onChange, className: `textarea ${hasErrors ? 'error' : ''}`, "aria-invalid": hasErrors, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)) }), hasErrors && jsxRuntime.jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+};
+
+const PasswordInput = (_a) => {
+    var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, hasShowPassword = true } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorList", "helpText", "hasHiddenLabel", "hasShowPassword"]);
+    const hasErrors = errorList && errorList.length > 0;
+    const [showPassword, setShowPassword] = e.useState(false);
+    const handleShowPassword = () => {
+        setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
+    return (jsxRuntime.jsxs("div", { className: "form-control", children: [jsxRuntime.jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), 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({ "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, required: isRequired, placeholder: placeholder, value: value, onChange: onChange, className: `password-input ${hasErrors ? 'error' : ''} password-input--has-icon`, "aria-invalid": hasErrors, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, 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(ErrorList, { errorList: errorList, name: name }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+};
+
 const StyledAccordion = styled__default.default.details `
   summary {
     display: inherit;
@@ -41544,6 +41560,7 @@ exports.NoInputDatePicker = NoInputDatePicker;
 exports.NumberInput = NumberInput;
 exports.PADDINGS = padding;
 exports.Pagination = Pagination;
+exports.PasswordInput = PasswordInput;
 exports.PercentageRing = PercentageRing;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
@@ -41564,6 +41581,7 @@ exports.TYPOGRAPHY = typography;
 exports.Table = Table$1;
 exports.TextInput = TextInput;
 exports.TextTruncate = TextTruncate;
+exports.Textarea = Textarea;
 exports.Toggle = Toggle;
 exports.ToggleInput = Toggle$1;
 exports.Tooltip = Tooltip;