@indico-data/design-system 2.10.0 → 2.11.0

package/src/components/forms/input/__tests__/Input.test.tsx

@@ -17,7 +17,6 @@ describe('Input', () => {
         iconName="user"
         isClearable={true}
         ref={undefined}
-        value={''}
         onChange={handleOnChange}
       />,
     );
@@ -34,7 +33,6 @@ describe('Input', () => {
         iconName="user"
         isClearable={true}
         ref={undefined}
-        value={''}
         onChange={handleOnChange}
       />,
     );
@@ -53,7 +51,6 @@ describe('Input', () => {
         iconName="user"
         isClearable={false}
         ref={undefined}
-        value={''}
         onChange={handleOnChange}
       />,
     );
@@ -71,9 +68,8 @@ describe('Input', () => {
         placeholder="Please enter a value"
         iconName="user"
         isClearable={true}
-        ref={undefined}
-        value={'test'}
         onChange={handleOnChange}
+        value="test"
       />,
     );
     const input = screen.getByTestId('form-input-name');
@@ -95,8 +91,6 @@ describe('Input', () => {
         placeholder="Please enter a value"
         iconName="user"
         isClearable={true}
-        ref={undefined}
-        value={'test'}
         onChange={handleOnChange}
       />,
     );
@@ -113,8 +107,6 @@ describe('Input', () => {
         name="name"
         placeholder="Please enter a value"
         isClearable={true}
-        ref={undefined}
-        value={'test'}
         onChange={handleOnChange}
       />,
     );
@@ -126,13 +118,12 @@ describe('Input', () => {
     render(
       <Input
         isRequired={true}
-        errorList={['You require a username value.']}
+        errorMessage="You require a username value."
         label="Enter your name"
         helpText="In order to submit the form, this field is required."
         name="name"
         placeholder="Please enter a value"
         isClearable={true}
-        ref={undefined}
         value={'test'}
         onChange={handleOnChange}
       />,
@@ -201,8 +192,6 @@ describe('Input', () => {
         label="Enter your name"
         name="name"
         placeholder="Please enter a value"
-        ref={undefined}
-        value={''}
         onChange={handleOnChange}
       />,
     );

package/src/components/forms/input/styles/Input.scss

@@ -73,14 +73,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);
-  }
+  margin-bottom: var(--pf-margin-3);
   .help-text {
     margin-top: var(--pf-margin-2);
     margin-bottom: var(--pf-margin-2);

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -91,16 +91,16 @@ const meta: Meta = {
       },
       defaultValue: { summary: 'false' },
     },
-    errorList: {
+    errorMessage: {
       control: false,
       description: 'An array of error messages',
       table: {
         category: 'Props',
         type: {
-          summary: 'string[]',
+          summary: 'string',
         },
       },
-      defaultValue: { summary: '[]' },
+      defaultValue: { summary: undefined },
     },
     helpText: {
       control: 'text',
@@ -151,14 +151,13 @@ export const Default: Story = {
     hasHiddenLabel: false,
     hasShowPassword: true,
     isDisabled: false,
-    errorList: [],
-    value: '',
+    errorMessage: '',
   },
   render: (args) => {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -171,13 +170,13 @@ export const Default: Story = {
 export const Errors: Story = {
   args: {
     ...defaultArgs,
-    errorList: ['You require a password value.'],
+    errorMessage: 'You require a password value.',
   },
   render: (args) => {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -197,7 +196,7 @@ export const HiddenLabel: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -217,7 +216,7 @@ export const HelpText: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -237,7 +236,7 @@ export const Required: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
@@ -257,7 +256,7 @@ export const NoTogglePasswordVisibility: Story = {
     const [value, setValue] = useState('');
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -1,82 +1,86 @@
 import React, { useState } from 'react';
 import { Icon } from '@/components/icons';
 import { Label } from '../subcomponents/Label';
-import { ErrorList } from '../subcomponents/ErrorList';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
 export interface PasswordInputProps {
   ref?: React.LegacyRef<HTMLInputElement>;
   label: string;
+  value?: string | undefined;
   name: string;
   placeholder: string;
-  value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isRequired?: boolean;
   isDisabled?: boolean;
-  errorList?: string[];
+  errorMessage?: string | undefined;
   helpText?: string;
   hasHiddenLabel?: boolean;
   hasShowPassword?: boolean;
+  defaultValue?: string;
 }
 
-export const PasswordInput = ({
-  label,
-  name,
-  placeholder,
-  value,
-  onChange,
-  isRequired,
-  isDisabled,
-  errorList,
-  helpText,
-  hasHiddenLabel,
-  hasShowPassword = true,
-  ...rest
-}: PasswordInputProps) => {
-  const hasErrors = errorList && errorList.length > 0;
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      label,
+      name,
+      placeholder,
+      onChange,
+      isRequired,
+      isDisabled,
+      errorMessage,
+      helpText,
+      hasHiddenLabel,
+      hasShowPassword = true,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.length > 0;
 
-  const [showPassword, setShowPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
-  const handleShowPassword = () => {
-    setShowPassword((prevShowPassword) => !prevShowPassword);
-  };
+    const handleShowPassword = () => {
+      setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
 
-  return (
-    <div className="form-control">
-      <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
-      <div className="password-input-wrapper">
-        <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" />
-        <input
-          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 && (
-          <Icon
-            name={showPassword ? 'fa-eye-slash' : 'eye'}
-            data-testid={`${name}-${showPassword ? 'hide' : 'show'}-password-icon`}
-            size="md"
-            onClick={handleShowPassword}
-            className="toggle-show-password-icon"
+    return (
+      <div className="form-control">
+        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+        <div className="password-input-wrapper">
+          <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+          <input
+            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 && (
+            <Icon
+              name={showPassword ? 'fa-eye-slash' : 'eye'}
+              data-testid={`${name}-${showPassword ? 'hide' : 'show'}-password-icon`}
+              size="md"
+              onClick={handleShowPassword}
+              className="toggle-show-password-icon"
+            />
+          )}
+        </div>
+        {hasErrors && <DisplayFormError message={errorMessage} />}
+        {helpText && (
+          <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+            {helpText}
+          </div>
         )}
       </div>
-      {hasErrors && <ErrorList errorList={errorList} name={name} />}
-      {helpText && (
-        <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
-          {helpText}
-        </div>
-      )}
-    </div>
-  );
-};
+    );
+  },
+);

package/src/components/forms/passwordInput/__tests__/PasswordInput.test.tsx

@@ -48,7 +48,7 @@ describe('Input', () => {
     render(
       <PasswordInput
         isRequired
-        errorList={['You require a username value.']}
+        errorMessage="You require a username value."
         label="Enter your name"
         helpText="In order to submit the form, this field is required."
         name="name"

package/src/components/forms/radio/Radio.tsx

@@ -8,40 +8,37 @@ export interface RadioProps {
   value?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
+  defaultChecked?: boolean;
 }
-
-export const Radio = ({
-  ref,
-  id,
-  label,
-  name,
-  value,
-  onChange,
-  isDisabled,
-  ...rest
-}: RadioProps) => {
-  return (
-    <div className="form-control">
-      <div className="radio-wrapper">
-        <input
-          data-testid={`form-radio-input-${name}`}
-          {...rest}
-          className="radio-input"
-          type="radio"
-          id={id}
-          name={name}
-          value={value}
-          disabled={isDisabled}
-          ref={ref}
-          onChange={onChange}
-          tabIndex={0}
-          aria-describedby={id}
-          aria-label={label}
-        />
-        <label htmlFor={id} className="radio-input-label" data-testid={`label-radio-input-${name}`}>
-          {label}
-        </label>
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  ({ id, label, name, value, onChange, isDisabled, ...rest }, ref) => {
+    return (
+      <div className="form-control">
+        <div className="radio-wrapper">
+          <input
+            data-testid={`form-radio-input-${name}`}
+            className="radio-input"
+            type="radio"
+            id={id}
+            name={name}
+            value={value}
+            disabled={isDisabled}
+            ref={ref}
+            onChange={onChange}
+            tabIndex={0}
+            aria-describedby={id}
+            aria-label={label}
+            {...rest}
+          />
+          <label
+            htmlFor={id}
+            className="radio-input-label"
+            data-testid={`label-radio-input-${name}`}
+          >
+            {label}
+          </label>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);

package/src/components/forms/subcomponents/DisplayFormError.tsx

@@ -0,0 +1,7 @@
+interface DisplayFormErrorProps {
+  message: string | undefined;
+}
+
+export const DisplayFormError = ({ message }: DisplayFormErrorProps) => {
+  return <p className="form-errors">{message}</p>;
+};

package/src/components/forms/textarea/Textarea.stories.tsx

@@ -83,7 +83,7 @@ const meta: Meta = {
       },
       defaultValue: { summary: 'false' },
     },
-    errorList: {
+    errorMessage: {
       control: false,
       description: 'An array of error messages',
       table: {
@@ -214,8 +214,7 @@ export const Default: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: false,
     isDisabled: false,
-    errorList: [],
-    value: '',
+    errorMessage: '',
     readonly: false,
     cols: 0,
     rows: 0,
@@ -228,10 +227,10 @@ export const Default: Story = {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -247,17 +246,16 @@ export const Errors: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: false,
     isDisabled: false,
-    errorList: ['This Is An Error', 'This Is Another Error'],
-    value: '',
+    errorMessage: 'This Is An Error',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -273,16 +271,15 @@ export const HiddenLabel: Story = {
     placeholder: 'Please enter a value',
     hasHiddenLabel: true,
     isDisabled: false,
-    value: '',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -297,16 +294,15 @@ export const HelpText: Story = {
     name: 'textarea',
     placeholder: 'Please enter a value',
     isDisabled: false,
-    value: '',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -321,16 +317,15 @@ export const Disabled: Story = {
     name: 'textarea',
     placeholder: 'Please enter a value',
     isDisabled: true,
-    value: '',
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };
 
@@ -344,17 +339,16 @@ export const Readonly: Story = {
     label: 'Label Name',
     name: 'textarea',
     placeholder: 'Please enter a value',
-    value: '',
     readonly: true,
   },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
     useEffect(() => {
-      setValue(args.value);
+      setValue(args.value || '');
     }, [args.value]);
 
-    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(e.target.value);
     };