@indico-data/design-system 2.18.0 → 2.19.0

package/lib/index.js

@@ -18614,22 +18614,38 @@ const Table$1 = (props) => {
     return (jsxRuntime.jsx("div", { className: "table-wrapper", children: jsxRuntime.jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: `${striped ? 'pf__table--striped' : ''}`, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsxRuntime.jsx(LoadingComponent, {}) }, rest)) }));
 };
 
-const Label = ({ label, name, isRequired, hasHiddenLabel }) => {
-    return (jsxRuntime.jsx("div", { "data-testid": `${name}-testId`, className: `form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`, children: jsxRuntime.jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsxRuntime.jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
-};
+const Label = ({ label, name, isRequired }) => {
+    return (jsxRuntime.jsx("div", { "data-testid": `${name}-testId`, className: `form-label`, children: jsxRuntime.jsxs("label", { htmlFor: `${name}`, children: [label, isRequired ? jsxRuntime.jsx("span", { className: "text-error", children: " *" }) : ''] }) }));
+};
+// HOC to add common label functionality to components
+function withLabel(WrappedComponent) {
+    const WithLabelComponent = (_a, ref) => {
+        var { label, hasHiddenLabel = false, name, isRequired } = _a, rest = __rest$1(_a, ["label", "hasHiddenLabel", "name", "isRequired"]);
+        const ariaLabel = hasHiddenLabel
+            ? { 'aria-label': isRequired ? `${label} (required)` : label }
+            : {};
+        return (jsxRuntime.jsxs("div", { className: "form-control", children: [!hasHiddenLabel && jsxRuntime.jsx(Label, { label: label, name: name, isRequired: isRequired }), jsxRuntime.jsx(WrappedComponent, Object.assign({}, rest, { id: name, name: name }, ariaLabel, { ref: ref }))] }));
+    };
+    return e.forwardRef(WithLabelComponent);
+}
 
 const DisplayFormError = ({ message }) => {
     return jsxRuntime.jsx("p", { className: "form-errors", children: message });
 };
 
 const Input = e__namespace.default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, hasHiddenLabel, className } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "hasHiddenLabel", "className"]);
+    var { name, placeholder, onChange, isRequired, isDisabled, isClearable, errorMessage, helpText, iconName, className } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "isClearable", "errorMessage", "helpText", "iconName", "className"]);
     const hasErrors = errorMessage && errorMessage.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, placeholder: placeholder, onChange: onChange, className: `input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`, "aria-invalid": hasErrors ? true : undefined, "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(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    const inputClasses = y$1('input', {
+        error: hasErrors,
+        'input--has-icon': iconName,
+    }, className);
+    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 && (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 }))] }));
 });
+const LabeledInput = withLabel(Input);
 
 const Radio$2 = e__namespace.default.forwardRef((_a, ref) => {
     var { id, label, name, value, onChange, isDisabled } = _a, rest = __rest$1(_a, ["id", "label", "name", "value", "onChange", "isDisabled"]);
@@ -18649,18 +18665,24 @@ const Toggle$1 = e__namespace.default.forwardRef((_a, ref) => {
 const Textarea = e__namespace.default.forwardRef((_a, ref) => {
     var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
     const hasErrors = errorMessage && errorMessage.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, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: `textarea ${hasErrors ? 'error' : ''}`, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, "aria-label": label }, rest)) }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    const textareaClasses = y$1('textarea', { error: hasErrors });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "textarea-wrapper", children: jsxRuntime.jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)) }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
+const LabeledTextarea = withLabel(Textarea);
 
 const PasswordInput = e__namespace.default.forwardRef((_a, ref) => {
-    var { label, name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, hasShowPassword = true } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "hasShowPassword"]);
+    var { name, placeholder, onChange, isRequired, isDisabled, errorMessage, helpText, hasShowPassword = true } = _a, rest = __rest$1(_a, ["name", "placeholder", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasShowPassword"]);
     const hasErrors = errorMessage && errorMessage.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({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: `password-input ${hasErrors ? 'error' : ''} password-input--has-icon`, "aria-invalid": hasErrors ? 'true' : 'false', "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(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    const inputClasses = y$1('password-input', {
+        error: hasErrors,
+    }, 'password-input--has-icon');
+    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 }))] }));
 });
+const LabeledPasswordInput = withLabel(PasswordInput);
 
 const OptionComponent = (_a) => {
     var _b, _c, _d;
@@ -41100,7 +41122,7 @@ exports.Form = Form;
 exports.GlobalStyles = GlobalStyles;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
-exports.Input = Input;
+exports.Input = LabeledInput;
 exports.LegacyButton = Button$1;
 exports.ListTable = ListTable;
 exports.LoadingAwareContainer = LoadingAwareContainer;
@@ -41114,7 +41136,7 @@ exports.NoInputDatePicker = NoInputDatePicker;
 exports.NumberInput = NumberInput;
 exports.PADDINGS = padding;
 exports.Pagination = Pagination;
-exports.PasswordInput = PasswordInput;
+exports.PasswordInput = LabeledPasswordInput;
 exports.PercentageRing = PercentageRing;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
@@ -41137,7 +41159,7 @@ exports.TYPOGRAPHY = typography;
 exports.Table = Table$1;
 exports.TextInput = TextInput;
 exports.TextTruncate = TextTruncate;
-exports.Textarea = Textarea;
+exports.Textarea = LabeledTextarea;
 exports.Toggle = Toggle;
 exports.ToggleInput = Toggle$1;
 exports.Tooltip = Tooltip;