@indico-data/design-system 2.9.0 → 2.10.0

package/lib/src/components/forms/input/Input.d.ts

@@ -14,5 +14,6 @@ export interface InputProps {
     hasHiddenLabel?: boolean;
     iconName?: IconName;
     isClearable?: boolean;
+    className?: string;
 }
-export declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, className, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/passwordInput/PasswordInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface PasswordInputProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    hasShowPassword?: boolean;
+}
+export declare const PasswordInput: ({ label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, hasShowPassword, ...rest }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/passwordInput/PasswordInput.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PasswordInput } from './PasswordInput';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof PasswordInput>;
+export declare const Default: Story;
+export declare const Errors: Story;
+export declare const HiddenLabel: Story;
+export declare const HelpText: Story;
+export declare const Required: Story;
+export declare const NoTogglePasswordVisibility: Story;

package/lib/src/components/forms/passwordInput/__tests__/PasswordInput.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/lib/src/components/index.d.ts

@@ -6,3 +6,5 @@ export { Input } from './forms/input';
 export { Radio } from './forms/radio';
 export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
+export { Textarea } from './forms/textarea';
+export { PasswordInput } from './forms/passwordInput';

package/lib/src/index.d.ts

@@ -11,3 +11,5 @@ export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
 export { Checkbox } from './components/forms/checkbox';
 export { Toggle as ToggleInput } from './components/forms/toggle';
+export { Textarea } from './components/forms/textarea';
+export { PasswordInput } from './components/forms/passwordInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

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

@@ -27,7 +27,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     name: {
       control: 'text',
@@ -38,7 +37,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     placeholder: {
       control: 'text',
@@ -49,7 +47,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     value: {
       control: 'text',
@@ -60,7 +57,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     isRequired: {
       control: 'boolean',
@@ -104,7 +100,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     hasHiddenLabel: {
       control: 'boolean',

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

@@ -18,6 +18,7 @@ export interface InputProps {
   hasHiddenLabel?: boolean;
   iconName?: IconName;
   isClearable?: boolean;
+  className?: string;
 }
 
 export const Input = ({
@@ -34,6 +35,7 @@ export const Input = ({
   iconName,
   hasHiddenLabel,
   isClearable,
+  className = '',
   ...rest
 }: InputProps) => {
   const hasErrors = errorList && errorList.length > 0;
@@ -58,7 +60,7 @@ export const Input = ({
           placeholder={placeholder}
           value={value}
           onChange={onChange}
-          className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''}`}
+          className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`}
           aria-invalid={hasErrors}
           aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
           aria-required={isRequired}

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

@@ -100,6 +100,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,269 @@
+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' },
+    },
+    errorList: {
+      control: false,
+      description: 'An array of error messages',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string[]',
+        },
+      },
+      defaultValue: { summary: '[]' },
+    },
+    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,
+    errorList: [],
+    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 Errors: Story = {
+  args: {
+    ...defaultArgs,
+    errorList: ['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,82 @@
+import React, { useState } from 'react';
+import { Icon } from '@/components/icons';
+import { Label } from '../subcomponents/Label';
+import { ErrorList } from '../subcomponents/ErrorList';
+
+export interface PasswordInputProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
+  label: string;
+  name: string;
+  placeholder: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  errorList?: string[];
+  helpText?: string;
+  hasHiddenLabel?: boolean;
+  hasShowPassword?: boolean;
+}
+
+export const PasswordInput = ({
+  label,
+  name,
+  placeholder,
+  value,
+  onChange,
+  isRequired,
+  isDisabled,
+  errorList,
+  helpText,
+  hasHiddenLabel,
+  hasShowPassword = true,
+  ...rest
+}: PasswordInputProps) => {
+  const hasErrors = errorList && errorList.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
+          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"
+          />
+        )}
+      </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

@@ -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
+        errorList={['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';