@indico-data/design-system 2.9.0 → 2.10.0

package/lib/index.css

@@ -956,6 +956,7 @@
   top: var(--pf-margin-3);
   right: var(--pf-margin-2);
   color: var(--pf-input-text-color);
+  cursor: pointer;
 }
 .form-control .is-visually-hidden {
   position: absolute;
@@ -1243,6 +1244,117 @@
   margin-bottom: var(--pf-margin-2);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-password-input-background-color: var(--pf-white-color);
+  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-text-color: var(--pf-gray-color);
+  --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-password-input-help-text-color: var(--pf-gray-color-400);
+  --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-disabled-color: var(--pf-gray-color-400);
+  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-password-input-background-color: var(--pf-primary-color);
+  --pf-password-input-border-color: var(--pf-gray-color-100);
+  --pf-password-input-text-color: var(--pf-gray-color-100);
+  --pf-password-input-placeholder-text-color: var(--pf-gray-color);
+  --pf-password-input-help-text-color: var(--pf-gray-color-200);
+  --pf-password-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-password-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-password-input-disabled-color: var(--pf-gray-color-400);
+}
+
+.password-input {
+  background-color: var(--pf-password-input-background-color);
+  border: 1px solid var(--pf-password-input-border-color);
+  border-radius: var(--pf-password-input-rounded);
+  color: var(--pf-password-input-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 36px;
+}
+.password-input::-moz-placeholder {
+  color: var(--pf-password-input-placeholder-text-color);
+}
+.password-input::placeholder {
+  color: var(--pf-password-input-placeholder-text-color);
+}
+.password-input:focus {
+  border-color: var(--pf-primary-color);
+}
+.password-input.error {
+  border-color: var(--pf-error-color);
+}
+.password-input.success {
+  border-color: var(--pf-success-color);
+}
+.password-input.warning {
+  border-color: var(--pf-warning-color);
+}
+.password-input.info {
+  border-color: var(--pf-info-color);
+}
+.password-input:disabled {
+  background-color: var(--pf-password-input-disabled-background-color);
+  border-color: var(--pf-password-input-disabled-border-color);
+  color: var(--pf-password-input-disabled-color);
+}
+.password-input--has-icon {
+  padding-left: var(--pf-padding-7);
+}
+
+.form-control .error-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-error-color);
+}
+.form-control .help-text {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-password-input-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.form-control .password-input-wrapper {
+  position: relative;
+}
+.form-control .password-input-wrapper .embedded-icon {
+  position: absolute;
+  top: 10px;
+  left: var(--pf-margin-2);
+  color: var(--pf-password-input-text-color);
+}
+.form-control .password-input-wrapper .toggle-show-password-icon {
+  position: absolute;
+  top: var(--pf-margin-3);
+  right: var(--pf-margin-2);
+  color: var(--pf-password-input-text-color);
+  cursor: pointer;
+}
+.form-control .is-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.form-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {

package/lib/index.d.ts

@@ -936,8 +936,9 @@ interface InputProps {
     hasHiddenLabel?: boolean;
     iconName?: IconName$1;
     isClearable?: boolean;
+    className?: string;
 }
-declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, className, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
 
 interface RadioProps {
     ref?: React$1.LegacyRef<HTMLInputElement>;
@@ -974,4 +975,42 @@ interface ToggleProps {
 }
 declare const Toggle: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: ToggleProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+interface TextareaProps {
+    ref?: React$1.LegacyRef<HTMLTextAreaElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    rows?: number;
+    cols?: number;
+    readonly?: boolean;
+    wrap?: 'hard' | 'soft';
+    form?: string;
+    maxLength?: number;
+    autofocus?: boolean;
+}
+declare const Textarea: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
+
+interface PasswordInputProps {
+    ref?: React$1.LegacyRef<HTMLInputElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    hasShowPassword?: boolean;
+}
+declare const PasswordInput: ({ label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, hasShowPassword, ...rest }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };

package/lib/index.esm.css

@@ -956,6 +956,7 @@
   top: var(--pf-margin-3);
   right: var(--pf-margin-2);
   color: var(--pf-input-text-color);
+  cursor: pointer;
 }
 .form-control .is-visually-hidden {
   position: absolute;
@@ -1243,6 +1244,117 @@
   margin-bottom: var(--pf-margin-2);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-password-input-background-color: var(--pf-white-color);
+  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-text-color: var(--pf-gray-color);
+  --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-password-input-help-text-color: var(--pf-gray-color-400);
+  --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-disabled-color: var(--pf-gray-color-400);
+  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-password-input-background-color: var(--pf-primary-color);
+  --pf-password-input-border-color: var(--pf-gray-color-100);
+  --pf-password-input-text-color: var(--pf-gray-color-100);
+  --pf-password-input-placeholder-text-color: var(--pf-gray-color);
+  --pf-password-input-help-text-color: var(--pf-gray-color-200);
+  --pf-password-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-password-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-password-input-disabled-color: var(--pf-gray-color-400);
+}
+
+.password-input {
+  background-color: var(--pf-password-input-background-color);
+  border: 1px solid var(--pf-password-input-border-color);
+  border-radius: var(--pf-password-input-rounded);
+  color: var(--pf-password-input-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 36px;
+}
+.password-input::-moz-placeholder {
+  color: var(--pf-password-input-placeholder-text-color);
+}
+.password-input::placeholder {
+  color: var(--pf-password-input-placeholder-text-color);
+}
+.password-input:focus {
+  border-color: var(--pf-primary-color);
+}
+.password-input.error {
+  border-color: var(--pf-error-color);
+}
+.password-input.success {
+  border-color: var(--pf-success-color);
+}
+.password-input.warning {
+  border-color: var(--pf-warning-color);
+}
+.password-input.info {
+  border-color: var(--pf-info-color);
+}
+.password-input:disabled {
+  background-color: var(--pf-password-input-disabled-background-color);
+  border-color: var(--pf-password-input-disabled-border-color);
+  color: var(--pf-password-input-disabled-color);
+}
+.password-input--has-icon {
+  padding-left: var(--pf-padding-7);
+}
+
+.form-control .error-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-error-color);
+}
+.form-control .help-text {
+  margin-top: var(--pf-margin-2);
+  margin-bottom: var(--pf-margin-2);
+  color: var(--pf-password-input-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.form-control .password-input-wrapper {
+  position: relative;
+}
+.form-control .password-input-wrapper .embedded-icon {
+  position: absolute;
+  top: 10px;
+  left: var(--pf-margin-2);
+  color: var(--pf-password-input-text-color);
+}
+.form-control .password-input-wrapper .toggle-show-password-icon {
+  position: absolute;
+  top: var(--pf-margin-3);
+  right: var(--pf-margin-2);
+  color: var(--pf-password-input-text-color);
+  cursor: pointer;
+}
+.form-control .is-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.form-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {

package/lib/index.esm.js

@@ -18641,12 +18641,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 (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), 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 && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), 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 && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 };
 
 const Radio$2 = (_a) => {
@@ -18664,6 +18664,22 @@ const Toggle$1 = (_a) => {
     return (jsx("div", { className: "form-control", children: jsxs("div", { className: "toggle-wrapper", children: [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)), jsx("label", { htmlFor: id, className: "switch" }), 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 (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsx("div", { className: "textarea-wrapper", children: 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 && jsx(ErrorList, { errorList: errorList, name: name }), helpText && (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] = useState(false);
+    const handleShowPassword = () => {
+        setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
+    return (jsxs("div", { className: "form-control", children: [jsx(Label, { label: label, name: name, isRequired: isRequired, hasHiddenLabel: hasHiddenLabel }), jsxs("div", { className: "password-input-wrapper", children: [jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), 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 && (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 && jsx(ErrorList, { errorList: errorList, name: name }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+};
+
 const StyledAccordion = styled.details `
   summary {
     display: inherit;
@@ -41485,5 +41501,5 @@ const Tooltip = (props) => {
                 openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map