@indico-data/design-system 2.9.0 → 2.11.0

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

@@ -2,85 +2,88 @@ import React from 'react';
 import { Icon } from '@/components/icons';
 import { IconName } from '@/types';
 import { Label } from '../subcomponents/Label';
-import { ErrorList } from '../subcomponents/ErrorList';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
 export interface InputProps {
-  ref?: React.LegacyRef<HTMLInputElement>;
   label: string;
   name: string;
+  value?: string | undefined;
   placeholder: string;
-  value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isRequired?: boolean;
   isDisabled?: boolean;
-  errorList?: string[];
+  errorMessage?: string | undefined;
   helpText?: string;
   hasHiddenLabel?: boolean;
   iconName?: IconName;
   isClearable?: boolean;
+  className?: string;
+  defaultValue?: string;
 }
 
-export const Input = ({
-  ref,
-  label,
-  name,
-  placeholder,
-  value,
-  onChange,
-  isRequired,
-  isDisabled,
-  errorList,
-  helpText,
-  iconName,
-  hasHiddenLabel,
-  isClearable,
-  ...rest
-}: InputProps) => {
-  const hasErrors = errorList && errorList.length > 0;
-  const handleClear = () => {
-    onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
-  };
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      name,
+      placeholder,
+      onChange,
+      isRequired,
+      isDisabled,
+      isClearable,
+      errorMessage,
+      helpText,
+      iconName,
+      hasHiddenLabel,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.length > 0;
+    const handleClear = () => {
+      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+    };
 
-  return (
-    <div className="form-control">
-      <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
-      <div className="input-wrapper">
-        {iconName && (
-          <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
-        )}
-        <input
-          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 && (
-          <Icon
-            name="x-close"
-            data-testid={`${name}-clearable-icon`}
-            size="sm"
-            onClick={handleClear}
-            className="clearable-icon"
+    return (
+      <div className="form-control">
+        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+        <div className="input-wrapper">
+          {iconName && (
+            <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+          )}
+          <input
+            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 && (
+            <Icon
+              name="x-close"
+              data-testid={`${name}-clearable-icon`}
+              size="sm"
+              onClick={handleClear}
+              className="clearable-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/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);
@@ -100,6 +93,7 @@
       top: var(--pf-margin-3);
       right: var(--pf-margin-2);
       color: var(--pf-input-text-color);
+      cursor: pointer;
     }
   }
   .is-visually-hidden {

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

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as PasswordInput from './PasswordInput.stories';
+
+<Meta title="Forms/PasswordInput" name="PasswordInput" />
+
+# Password Input
+
+The password input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+
+<Canvas
+  of={PasswordInput.Default}
+  source={{
+    code: `
+<PasswordInput 
+  name="first_name" 
+  isRequired
+  hasShowPassword
+  placeholder="Placeholder Text"
+  value=''
+  onChange={() => {}}
+  helpText="This Is Help Text" 
+  label="Label Name" 
+/>
+    `,
+  }}
+/>
+
+<Controls of={PasswordInput.Default} />

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

@@ -0,0 +1,268 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PasswordInput, PasswordInputProps } from './PasswordInput';
+import { SetStateAction, useEffect, useState } from 'react';
+import { iconNames } from 'build/generated/iconTypes';
+
+const meta: Meta = {
+  title: 'Forms/PasswordInput',
+  component: PasswordInput,
+  argTypes: {
+    hasShowPassword: {
+      control: 'boolean',
+      description: 'Toggles the visibility of the password',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: true },
+    },
+    onChange: {
+      control: false,
+      description: 'onChange event handler',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
+        },
+      },
+      action: 'onChange',
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the password field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the password field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'The placeholder for the password field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'The value for the password field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Toggles the required astherisk on the label',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the input',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    errorMessage: {
+      control: false,
+      description: 'An array of error messages',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: undefined },
+    },
+    helpText: {
+      control: 'text',
+      description: 'The help text for the password field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    hasHiddenLabel: {
+      control: 'boolean',
+      description: 'Hides the label visually (retains it for screen readers)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    ref: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PasswordInput>;
+
+const defaultArgs = {
+  label: 'Enter your name',
+  name: 'first_name',
+  placeholder: 'Please enter a value',
+} as PasswordInputProps;
+
+export const Default: Story = {
+  args: {
+    isRequired: false,
+    helpText: 'This Is Help Text',
+    label: 'Label Name',
+    name: 'first_name',
+    placeholder: 'Please enter a value',
+    hasHiddenLabel: false,
+    hasShowPassword: true,
+    isDisabled: false,
+    errorMessage: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+    return <PasswordInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    errorMessage: 'You require a password value.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <PasswordInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    ...defaultArgs,
+    hasHiddenLabel: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <PasswordInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    ...defaultArgs,
+    helpText: 'In order to submit the form, this field is required.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <PasswordInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <PasswordInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const NoTogglePasswordVisibility: Story = {
+  args: {
+    ...defaultArgs,
+    hasShowPassword: false,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <PasswordInput {...args} value={value} onChange={handleChange} />;
+  },
+};

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

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Icon } from '@/components/icons';
+import { Label } from '../subcomponents/Label';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
+
+export interface PasswordInputProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
+  label: string;
+  value?: string | undefined;
+  name: string;
+  placeholder: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  errorMessage?: string | undefined;
+  helpText?: string;
+  hasHiddenLabel?: boolean;
+  hasShowPassword?: boolean;
+  defaultValue?: string;
+}
+
+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 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
+            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>
+    );
+  },
+);