@indico-data/design-system 2.4.2 → 2.6.0

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

@@ -0,0 +1,213 @@
+import { render, screen, act } from '@testing-library/react';
+import { Input } from '@/components/forms/input/Input';
+import { ChangeEvent } from 'react';
+import userEvent from '@testing-library/user-event';
+
+const handleOnChange = jest.fn();
+
+describe('Input', () => {
+  it('renders the input field', () => {
+    render(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        iconName="user"
+        isClearable={true}
+        ref={undefined}
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    expect(screen.getByText('Enter your name')).toBeInTheDocument();
+  });
+  it('shows an x when the text is clearable', () => {
+    render(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        iconName="user"
+        isClearable={true}
+        ref={undefined}
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    const icon = screen.getByTestId('name-clearable-icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toBeVisible();
+  });
+  it('does not show an x when the text is not clearable', () => {
+    render(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        iconName="user"
+        isClearable={false}
+        ref={undefined}
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    const icon = screen.queryByTestId('name-clearable-icon');
+    expect(icon).not.toBeInTheDocument();
+    expect(icon).toBe(null);
+  });
+  it('clicking on the x clears the value', async () => {
+    render(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        iconName="user"
+        isClearable={true}
+        ref={undefined}
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-input-name');
+    const icon = screen.getByTestId('name-clearable-icon');
+    expect(input).toHaveValue('test');
+    await userEvent.click(icon);
+    expect(handleOnChange).toHaveBeenCalledWith({
+      target: { value: '' },
+    } as ChangeEvent<HTMLInputElement>);
+  });
+
+  it('it renders an icon on the left when one exists', () => {
+    render(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        helpText="In order to submit the form, this field is required."
+        name="name"
+        placeholder="Please enter a value"
+        iconName="user"
+        isClearable={true}
+        ref={undefined}
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const icon = screen.getByTestId('name-embedded-icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toBeVisible();
+  });
+  it('it does not render an embedded icon when one does not exist', () => {
+    render(
+      <Input
+        isRequired={true}
+        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}
+      />,
+    );
+    const icon = screen.queryByTestId('name-embedded-icon');
+    expect(icon).not.toBeInTheDocument();
+    expect(icon).toBe(null);
+  });
+  it('adds the error class when errors exist', () => {
+    render(
+      <Input
+        isRequired={true}
+        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"
+        isClearable={true}
+        ref={undefined}
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-input-name');
+    expect(input).toHaveClass('error');
+  });
+  it('does not highlight the input when no errors exist', () => {
+    render(
+      <Input
+        isRequired={true}
+        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}
+      />,
+    );
+    const input = screen.getByTestId('form-input-name');
+    expect(input).not.toHaveClass('error');
+  });
+  it('renders help text when help text exists', () => {
+    render(
+      <Input
+        isRequired={true}
+        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}
+      />,
+    );
+    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(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        name="name"
+        placeholder="Please enter a value"
+        isClearable={true}
+        ref={undefined}
+        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(
+      <Input
+        isRequired={true}
+        label="Enter your name"
+        name="name"
+        placeholder="Please enter a value"
+        ref={undefined}
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    const input = screen.getByTestId('form-input-name');
+    await userEvent.type(input, 't');
+    expect(handleOnChange).toHaveBeenCalled();
+  });
+});

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

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

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

@@ -0,0 +1,112 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  // Typography
+  --pf-input-background-color: var(--pf-white-color);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-text-color: var(--pf-gray-color);
+  --pf-input-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-input-help-text-color: var(--pf-gray-color-400);
+
+  // input Radius
+  --pf-input-rounded: var(--pf-rounded);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-input-background-color: var(--pf-primary-color);
+  --pf-input-border-color: var(--pf-gray-color-100);
+  --pf-input-text-color: var(--pf-gray-color-100);
+  --pf-input-placeholder-text-color: var(--pf-gray-color);
+  --pf-input-help-text-color: var(--pf-gray-color-200);
+}
+
+.input {
+  background-color: var(--pf-input-background-color);
+  border: 1px solid var(--pf-input-border-color);
+  border-radius: var(--pf-input-rounded);
+  color: var(--pf-input-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 36px;
+  &::placeholder {
+    color: var(--pf-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-gray-color-100);
+    border-color: var(--pf-gray-color-300);
+    color: var(--pf-gray-color-400);
+  }
+  &--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-input-help-text-color);
+    font-size: var(--pf-font-size-subtitle2);
+  }
+  .input-wrapper {
+    position: relative;
+    .embedded-icon {
+      position: absolute;
+      top: 10px;
+      left: var(--pf-margin-2);
+      color: var(--pf-input-text-color);
+    }
+    .clearable-icon {
+      position: absolute;
+      top: var(--pf-margin-3);
+      right: var(--pf-margin-2);
+      color: var(--pf-input-text-color);
+    }
+  }
+  .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.mdx

@@ -0,0 +1,83 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Radio from './Radio.stories';
+
+<Meta title="Forms/Radio" name="Radio" />
+
+# Radio
+This component is intended to use as part of a group. You would apply multiple radio button components and they share the same ID field to form a group.
+
+<Canvas of={Radio.Default} source={{
+    code: `
+    const radioList = [
+  { id: 'one', label: 'Radio Label One', name: 'radio', value: 'radio' },
+  { id: 'two', label: 'Radio Label Two', name: 'radio', value: 'radio' },
+  { id: 'three', label: 'Radio Label Three', name: 'radio', value: 'radio' },
+];
+ <h2 className="mb-2">Radio Buttons</h2>
+  {radioList.map((radio) => (
+    <Radio
+      key={radio.id}
+      onChange={handleChange}
+      id={radio.id}
+      label={radio.label}
+      name={radio.name}
+      value={radio.value}
+      isDisabled={args.isDisabled}
+    />
+  ))}
+    `,
+  }} />
+<Controls of={Radio.Default} />
+
+## Handling Required State
+The radio component does not have a required state. If you need to enforce a required state. This will be managed in a parent component or wrapper element which handles the state. You will need to verify against a value that matches the ID group for the radio buttons and make sure it is not null.
+
+### Rough code example
+This is a temporary measure until we build our own component to manage this state.
+
+```
+const RadioGroupForm = () => {
+  const [selectedValue, setSelectedValue] = useState('');
+  const [isSubmittedWithoutSelection, setIsSubmittedWithoutSelection] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!selectedValue) {
+      setIsSubmittedWithoutSelection(true);
+    } else {
+      setIsSubmittedWithoutSelection(false);
+      console.log('Form submitted with selected value:', selectedValue);
+    }
+  };
+  
+  const radioList = [
+  { id: 'one', label: 'Radio Label One', name: 'radio', value: 'radio' },
+  { id: 'two', label: 'Radio Label Two', name: 'radio', value: 'radio' },
+  { id: 'three', label: 'Radio Label Three', name: 'radio', value: 'radio' },
+];
+
+  const handleChange = (e) => {
+    setSelectedValue(e.target.value);
+    if (isSubmittedWithoutSelection) {
+      setIsSubmittedWithoutSelection(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {radioList.map((radio) => (
+          <Radio
+            key={radio.id}
+            onChange={handleChange}
+            id={radio.id}
+            label={radio.label}
+            name={radio.name}
+            value={radio.value}
+            isDisabled={args.isDisabled}
+          />
+        ))}
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+```

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

@@ -0,0 +1,121 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Radio, RadioProps } from './Radio';
+import { SetStateAction, useState } from 'react';
+
+const meta: Meta = {
+  title: 'Forms/Radio',
+  component: Radio,
+  argTypes: {
+    ref: {
+      table: {
+        disable: 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 Radio field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the Radio field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    value: {
+      control: 'text',
+      description: 'This holds the value that will be emitted when the radio is selected',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: null },
+    },
+    id: {
+      control: 'text',
+      description: 'This explains what button group this radio belongs to.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the Radio field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio>;
+
+const radioList = [
+  { id: 'one', label: 'Radio Label One', name: 'radio', value: 'radio' },
+  { id: 'two', label: 'Radio Label Two', name: 'radio', value: 'radio' },
+  { id: 'three', label: 'Radio Label Three', name: 'radio', value: 'radio' },
+];
+export const Default: Story = {
+  args: {
+    id: 'one',
+    label: 'Radio Label',
+    name: 'radio',
+    value: 'radio',
+    isDisabled: false,
+  },
+  render: (args) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value);
+    };
+    return (
+      <div>
+        <h2 className="mb-2">Radio Buttons</h2>
+        {radioList.map((radio) => (
+          <Radio
+            key={radio.id}
+            onChange={handleChange}
+            id={radio.id}
+            label={radio.label}
+            name={radio.name}
+            value={radio.value}
+            isDisabled={args.isDisabled}
+          />
+        ))}
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export interface RadioProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
+  id: string;
+  label: string;
+  name: string;
+  value?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isDisabled?: 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>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { render, screen, act } from '@testing-library/react';
+import { Radio } from '@/components/forms/radio/Radio';
+import userEvent from '@testing-library/user-event';
+
+const handleOnChange = jest.fn();
+
+describe('radio', () => {
+  it('renders the radio input field', () => {
+    render(
+      <Radio
+        label="Option 1"
+        name="name"
+        ref={undefined}
+        onChange={handleOnChange}
+        id={'ButtonGroup'}
+      />,
+    );
+    expect(screen.getByLabelText('Option 1')).toBeInTheDocument();
+  });
+
+  it('calls the onChange function when the radio input is clicked', async () => {
+    render(
+      <Radio
+        label="Option 1"
+        name="name"
+        ref={undefined}
+        onChange={handleOnChange}
+        id={'ButtonGroup'}
+      />,
+    );
+    expect(handleOnChange).toHaveBeenCalledTimes(0);
+    await userEvent.click(screen.getByLabelText('Option 1'));
+    expect(handleOnChange).toHaveBeenCalledTimes(1);
+  });
+});

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

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