@indico-data/design-system 2.10.0 → 2.12.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/select/Select.stories.tsx

@@ -0,0 +1,118 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectProps } from './Select';
+import { SelectOption } from './types';
+
+const meta: Meta<SelectProps<SelectOption>> = {
+  title: 'Forms/Select',
+  component: Select,
+  argTypes: {
+    options: {
+      control: 'object',
+      description: 'Options for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: '{ value: string, label: string, detail?: string }[]',
+        },
+      },
+      defaultValue: { summary: '[]' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Toggles the loading state of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Enables the clearable feature of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isSearchable: {
+      control: 'boolean',
+      description: 'Enables the searchable feature of the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'true' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'The placeholder text for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: 'Select...' },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class for the select component',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    onChange: {
+      control: false,
+      description: 'Event handler for when the selected value changes',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary:
+            '(newValue: SingleValue<SelectOption> | MultiValue<SelectOption>, actionMeta: ActionMeta<SelectOption>) => void',
+        },
+      },
+      action: 'onChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<SelectProps<SelectOption>>;
+
+export const Default: Story = {
+  args: {
+    options: [
+      { value: 'option1', label: 'Option 1', detail: '123 Count' },
+      { value: 'option2', label: 'Option 2', detail: '456 Count' },
+      { value: 'option3', label: 'Option 3', detail: '789 Count' },
+    ],
+    placeholder: 'Select an option...',
+    isClearable: false,
+    isSearchable: true,
+    isDisabled: false,
+    isLoading: false,
+  },
+};

package/src/components/forms/select/Select.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
+import { SelectOption } from './types';
+
+export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
+  options: OptionType[];
+}
+
+const OptionComponent = <OptionType extends SelectOption>({
+  ...props
+}: OptionProps<OptionType>) => {
+  return (
+    <components.Option {...props}>
+      <div className="select__items">
+        <div className="select__item-value">{props?.data?.label}</div>
+        {props?.data?.detail && <div className="select__item-detail">{props?.data?.detail}</div>}
+      </div>
+    </components.Option>
+  );
+};
+
+export const Select = <OptionType extends SelectOption>({
+  classNamePrefix = 'select',
+  className,
+  components: customComponents,
+  ...props
+}: SelectProps<OptionType>) => {
+  const defaultComponents = {
+    Option: OptionComponent as React.ComponentType<OptionProps<OptionType>>,
+  };
+
+  const mergedComponents = { ...defaultComponents, ...customComponents };
+
+  return (
+    <ReactSelect
+      classNamePrefix={classNamePrefix}
+      className={classNames('select-wrapper', className)}
+      components={mergedComponents}
+      {...props}
+    />
+  );
+};

package/src/components/forms/select/__tests__/Select.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Select } from '../Select';
+import { SelectOption } from '../types';
+import { OptionProps, components } from 'react-select';
+
+const options: SelectOption[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+describe('Select Component', () => {
+  it('displays options correctly', () => {
+    render(<Select options={options} menuIsOpen />);
+    options.forEach((option) => {
+      expect(screen.getByText(option.label)).toBeInTheDocument();
+    });
+  });
+
+  it('handles onChange event', () => {
+    const handleChange = jest.fn();
+    render(<Select options={options} menuIsOpen onChange={handleChange} />);
+    const option = screen.getByText('Option 1');
+    fireEvent.click(option);
+    expect(handleChange).toHaveBeenCalledWith(options[0], expect.any(Object));
+  });
+
+  it('applies custom class names', () => {
+    const customClassName = 'custom-select-class';
+    render(<Select options={options} className={customClassName} />);
+    const selectWrapper = screen.getByRole('combobox').closest('.select-wrapper');
+    expect(selectWrapper).toHaveClass(customClassName);
+  });
+
+  it('applies custom class name prefix', () => {
+    const customClassNamePrefix = 'custom-prefix';
+    render(<Select options={options} classNamePrefix={customClassNamePrefix} />);
+    const selectWrapper = screen.getByRole('combobox');
+    expect(selectWrapper).toHaveClass(`${customClassNamePrefix}__input`);
+  });
+
+  it('displays detail when present', () => {
+    const optionsWithDetail = options.map((option, index) => ({
+      ...option,
+      detail: `${index + 1}23 Count`,
+    }));
+
+    render(<Select options={optionsWithDetail} menuIsOpen />);
+    optionsWithDetail.forEach((option) => {
+      expect(screen.getByText(option.detail)).toBeInTheDocument();
+    });
+  });
+
+  it('uses custom components', () => {
+    const oneOption = options.slice(0, 1);
+    const CustomOptionComponent = (props: OptionProps<SelectOption>) => (
+      <div data-testid="custom-option">{props.data.label}</div>
+    );
+
+    render(
+      <Select options={oneOption} components={{ Option: CustomOptionComponent }} menuIsOpen />,
+    );
+
+    expect(screen.getByTestId('custom-option')).toHaveTextContent(oneOption[0].label);
+  });
+});

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

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