@indico-data/design-system 2.9.0 → 2.11.0

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

@@ -0,0 +1,129 @@
+import { render, screen, act } from '@testing-library/react';
+import { PasswordInput } from '@/components/forms/passwordInput/PasswordInput';
+import { ChangeEvent } from 'react';
+import userEvent from '@testing-library/user-event';
+
+const handleOnChange = jest.fn();
+const handleShowPassword = jest.fn();
+
+describe('Input', () => {
+  it('renders the input field', () => {
+    render(
+      <PasswordInput
+        isRequired
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    expect(screen.getByText('Enter your name')).toBeInTheDocument();
+  });
+
+  it('clicking on the eye changes the password input to a text input and back and changes the icon from a show icon to hide icon and back', async () => {
+    render(
+      <PasswordInput
+        isRequired
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-password-input-name');
+    const showPasswordIcon = screen.getByTestId('name-show-password-icon');
+    expect(input).toHaveValue('test');
+    await userEvent.click(showPasswordIcon);
+    expect(input).toHaveAttribute('type', 'text');
+    const hidePasswordIcon = screen.getByTestId('name-hide-password-icon');
+    await userEvent.click(hidePasswordIcon);
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('adds the error class when errors exist', () => {
+    render(
+      <PasswordInput
+        isRequired
+        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"
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-password-input-name');
+    expect(input).toHaveClass('error');
+  });
+
+  it('does not highlight the input when no errors exist', () => {
+    render(
+      <PasswordInput
+        isRequired
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-password-input-name');
+    expect(input).not.toHaveClass('error');
+  });
+
+  it('renders help text when help text exists', () => {
+    render(
+      <PasswordInput
+        isRequired
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const helpText = screen.getByText('In order to submit the form, this field is required.');
+    expect(helpText).toBeInTheDocument();
+    expect(helpText).toBeVisible();
+  });
+
+  it('does not render help text when help text does not exist', () => {
+    render(
+      <PasswordInput
+        isRequired
+        label="Enter your name"
+        name="name"
+        placeholder="Please enter a value"
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const helpText = screen.queryByTestId('name-help-text');
+    expect(helpText).not.toBeInTheDocument();
+    expect(helpText).toBeNull();
+  });
+
+  it('emits the value when user types', async () => {
+    const handleOnChange = jest.fn();
+    render(
+      <PasswordInput
+        isRequired
+        label="Enter your name"
+        name="name"
+        placeholder="Please enter a value"
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-password-input-name');
+    await userEvent.type(input, 't');
+    expect(handleOnChange).toHaveBeenCalled();
+  });
+});

package/src/components/forms/passwordInput/index.ts

@@ -0,0 +1 @@
+export { PasswordInput } from './PasswordInput';

package/src/components/forms/passwordInput/styles/PasswordInput.scss

@@ -0,0 +1,120 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  // Typography
+  --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);
+
+  // input Radius
+  --pf-password-input-rounded: var(--pf-rounded);
+}
+
+// Dark Theme Specific Variables
+: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;
+  &::placeholder {
+    color: var(--pf-password-input-placeholder-text-color);
+  }
+
+  &:focus {
+    border-color: var(--pf-primary-color);
+  }
+
+  &.error {
+    border-color: var(--pf-error-color);
+  }
+
+  &.success {
+    border-color: var(--pf-success-color);
+  }
+
+  &.warning {
+    border-color: var(--pf-warning-color);
+  }
+
+  &.info {
+    border-color: var(--pf-info-color);
+  }
+
+  &: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);
+  }
+  &--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);
+  }
+  .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);
+  }
+  .password-input-wrapper {
+    position: relative;
+    .embedded-icon {
+      position: absolute;
+      top: 10px;
+      left: var(--pf-margin-2);
+      color: var(--pf-password-input-text-color);
+    }
+    .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;
+    }
+  }
+  .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-label {
+    margin-bottom: var(--pf-margin-2);
+  }
+}

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);
     };
 

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

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Label } from '../subcomponents/Label';
-import { ErrorList } from '../subcomponents/ErrorList';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
 export interface TextareaProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
   label: string;
   name: string;
   placeholder: string;
-  value: string;
+  value?: string | undefined;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   isRequired?: boolean;
   isDisabled?: boolean;
-  errorList?: string[];
+  errorMessage?: string | undefined;
   helpText?: string;
   hasHiddenLabel?: boolean;
   rows?: number;
@@ -21,65 +21,67 @@ export interface TextareaProps {
   form?: string;
   maxLength?: number;
   autofocus?: boolean;
+  defaultValue?: string;
 }
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      name,
+      placeholder,
+      value,
+      onChange,
+      isRequired,
+      isDisabled,
+      errorMessage,
+      helpText,
+      hasHiddenLabel,
+      rows,
+      cols,
+      readonly,
+      wrap,
+      form,
+      maxLength,
+      autofocus,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.length > 0;
 
-export const Textarea = ({
-  ref,
-  label,
-  name,
-  placeholder,
-  value,
-  onChange,
-  isRequired,
-  isDisabled,
-  errorList,
-  helpText,
-  hasHiddenLabel,
-  rows,
-  cols,
-  readonly,
-  wrap,
-  form,
-  maxLength,
-  autofocus,
-  ...rest
-}: TextareaProps) => {
-  const hasErrors = errorList && errorList.length > 0;
-
-  return (
-    <div className="form-control">
-      <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
-      <div className="textarea-wrapper">
-        <textarea
-          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}
-        />
-      </div>
-      {hasErrors && <ErrorList errorList={errorList} name={name} />}
-      {helpText && (
-        <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
-          {helpText}
+    return (
+      <div className="form-control">
+        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+        <div className="textarea-wrapper">
+          <textarea
+            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}
+          />
         </div>
-      )}
-    </div>
-  );
-};
+        {hasErrors && <DisplayFormError message={errorMessage} />}
+        {helpText && (
+          <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+            {helpText}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/forms/textarea/__tests__/Textarea.test.tsx

@@ -25,7 +25,7 @@ describe('Textarea', () => {
     render(
       <Textarea
         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"

package/src/components/forms/textarea/styles/Textarea.scss

@@ -71,7 +71,7 @@
 }
 
 .form-control {
-  .error-list {
+  .form-errors {
     list-style: none;
     padding: 0;
     margin: 0;