@indico-data/design-system 2.4.2 → 2.5.0

package/lib/index.css

@@ -862,6 +862,109 @@
   fill: var(--pf-gray-color-300);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --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);
+  --pf-input-rounded: var(--pf-rounded);
+}
+
+: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;
+}
+.input::-moz-placeholder {
+  color: var(--pf-input-placeholder-text-color);
+}
+.input::placeholder {
+  color: var(--pf-input-placeholder-text-color);
+}
+.input:focus {
+  border-color: var(--pf-primary-color);
+}
+.input.error {
+  border-color: var(--pf-error-color);
+}
+.input.success {
+  border-color: var(--pf-success-color);
+}
+.input.warning {
+  border-color: var(--pf-warning-color);
+}
+.input.info {
+  border-color: var(--pf-info-color);
+}
+.input:disabled {
+  background-color: var(--pf-gray-color-100);
+  border-color: var(--pf-gray-color-300);
+  color: var(--pf-gray-color-400);
+}
+.input--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);
+}
+.form-control .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);
+}
+.form-control .input-wrapper {
+  position: relative;
+}
+.form-control .input-wrapper .embedded-icon {
+  position: absolute;
+  top: 10px;
+  left: var(--pf-margin-2);
+  color: var(--pf-input-text-color);
+}
+.form-control .input-wrapper .clearable-icon {
+  position: absolute;
+  top: var(--pf-margin-3);
+  right: var(--pf-margin-2);
+  color: var(--pf-input-text-color);
+}
+.form-control .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-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;
@@ -1119,6 +1222,22 @@ p,
   overflow-wrap: break-word;
 }
 
+.text-error {
+  color: var(--pf-error-color);
+}
+
+.text-warning {
+  color: var(--pf-warning-color);
+}
+
+.text-success {
+  color: var(--pf-success-color);
+}
+
+.text-info {
+  color: var(--pf-info-color);
+}
+
 .color-primary {
   color: var(--pf-primary-color);
 }

package/lib/index.esm.css

@@ -862,6 +862,109 @@
   fill: var(--pf-gray-color-300);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --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);
+  --pf-input-rounded: var(--pf-rounded);
+}
+
+: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;
+}
+.input::-moz-placeholder {
+  color: var(--pf-input-placeholder-text-color);
+}
+.input::placeholder {
+  color: var(--pf-input-placeholder-text-color);
+}
+.input:focus {
+  border-color: var(--pf-primary-color);
+}
+.input.error {
+  border-color: var(--pf-error-color);
+}
+.input.success {
+  border-color: var(--pf-success-color);
+}
+.input.warning {
+  border-color: var(--pf-warning-color);
+}
+.input.info {
+  border-color: var(--pf-info-color);
+}
+.input:disabled {
+  background-color: var(--pf-gray-color-100);
+  border-color: var(--pf-gray-color-300);
+  color: var(--pf-gray-color-400);
+}
+.input--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);
+}
+.form-control .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);
+}
+.form-control .input-wrapper {
+  position: relative;
+}
+.form-control .input-wrapper .embedded-icon {
+  position: absolute;
+  top: 10px;
+  left: var(--pf-margin-2);
+  color: var(--pf-input-text-color);
+}
+.form-control .input-wrapper .clearable-icon {
+  position: absolute;
+  top: var(--pf-margin-3);
+  right: var(--pf-margin-2);
+  color: var(--pf-input-text-color);
+}
+.form-control .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-control .form-label {
+  margin-bottom: var(--pf-margin-2);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;
@@ -1119,6 +1222,22 @@ p,
   overflow-wrap: break-word;
 }
 
+.text-error {
+  color: var(--pf-error-color);
+}
+
+.text-warning {
+  color: var(--pf-warning-color);
+}
+
+.text-success {
+  color: var(--pf-success-color);
+}
+
+.text-info {
+  color: var(--pf-info-color);
+}
+
 .color-primary {
   color: var(--pf-primary-color);
 }

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconName } from '@/types';
+export interface InputProps {
+    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;
+    iconName?: IconName;
+    isClearable?: boolean;
+}
+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;

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

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

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

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

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

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

package/lib/src/components/forms/subcomponents/ErrorList.d.ts

@@ -0,0 +1,6 @@
+interface ErrorListProps {
+    name: string;
+    errorList: string[];
+}
+export declare const ErrorList: ({ errorList, name }: ErrorListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/forms/subcomponents/Label.d.ts

@@ -0,0 +1,8 @@
+interface LabelProps {
+    label: string;
+    name: string;
+    isRequired?: boolean;
+    hasHiddenLabel?: boolean;
+}
+export declare const Label: ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/forms/subcomponents/__tests__/ErrorList.test.d.ts

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

package/lib/src/components/forms/subcomponents/__tests__/Label.test.d.ts

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

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

@@ -2,3 +2,4 @@ export { Container, Col, Row } from './grid';
 export { Button } from './button';
 export { Icon } from './icons';
 export { Table } from './table';
+export { Input } from './forms/input';

package/package.json

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

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

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Input from './Input.stories';
+
+<Meta title="Forms/Input" name="Input" />
+
+# Input
+
+The 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={Input.Default}
+  source={{
+    code: `
+    <Input name="first_name" required={true} isRequired helpText="This Is Help Text" isClearable label="Label Name" iconName="user" />
+    `,
+  }}
+/>
+
+<Controls of={Input.Default} />

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

@@ -0,0 +1,301 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input, InputProps } from './Input';
+import { useState } from 'react';
+import { iconNames } from 'build/generated/iconTypes';
+
+const meta: Meta = {
+  title: 'Forms/Input',
+  component: Input,
+  argTypes: {
+    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 input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'The placeholder for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    value: {
+      control: 'text',
+      description: 'The value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Toggles the required astherisc 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 input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    hasHiddenLabel: {
+      control: 'boolean',
+      description: 'Hides the label visually (retains it for screen readers)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    iconName: {
+      control: 'select',
+      options: iconNames,
+      description: 'Adds an icon to the left hand side of the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Adds a clear x icon to the right hand side of the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    ref: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+const defaultArgs = {
+  label: 'Enter your name',
+  name: 'first_name',
+  placeholder: 'Please enter a value',
+} as InputProps;
+
+export const Default: Story = {
+  args: {
+    isRequired: true,
+    iconName: 'user',
+    helpText: 'This Is Help Text',
+    isClearable: true,
+    label: 'Label Name',
+    name: 'firsT_name',
+    placeholder: 'Please enter a value',
+    hasHiddenLabel: false,
+    isDisabled: false,
+    errorList: [],
+    value: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    errorList: ['You require a username value.'],
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    ...defaultArgs,
+    hasHiddenLabel: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    ...defaultArgs,
+    helpText: 'In order to submit the form, this field is required.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    ...defaultArgs,
+    isClearable: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    ...defaultArgs,
+    iconName: 'user',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Icon } from '@/components/icons';
+import { IconName } from '@/types';
+import { Label } from '../subcomponents/Label';
+import { ErrorList } from '../subcomponents/ErrorList';
+
+export interface InputProps {
+  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;
+  iconName?: IconName;
+  isClearable?: boolean;
+}
+
+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>);
+  };
+
+  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"
+          />
+        )}
+      </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

@@ -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/subcomponents/ErrorList.tsx

@@ -0,0 +1,14 @@
+interface ErrorListProps {
+  name: string;
+  errorList: string[];
+}
+
+export const ErrorList = ({ errorList, name }: ErrorListProps) => {
+  return (
+    <ul className="error-list" id={`${name}-helper`}>
+      {(errorList ?? []).map((error, index) => (
+        <li key={index}>{error}</li>
+      ))}
+    </ul>
+  );
+};

package/src/components/forms/subcomponents/Label.tsx

@@ -0,0 +1,20 @@
+interface LabelProps {
+  label: string;
+  name: string;
+  isRequired?: boolean;
+  hasHiddenLabel?: boolean;
+}
+
+export const Label = ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => {
+  return (
+    <div
+      data-testid={`${name}-testId`}
+      className={`form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`}
+    >
+      <label htmlFor={`${name}`}>
+        {label}
+        {isRequired ? <span className="text-error"> *</span> : ''}
+      </label>
+    </div>
+  );
+};

package/src/components/forms/subcomponents/__tests__/ErrorList.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { ErrorList } from '@/components/forms/subcomponents/ErrorList';
+
+describe('ErrorList', () => {
+  it('renders the error list', () => {
+    render(<ErrorList name="name" errorList={['error1', 'error2']} />);
+    expect(screen.getByText('error1')).toBeInTheDocument();
+    expect(screen.getByText('error2')).toBeInTheDocument();
+  });
+
+  it('does not render the error list when it is empty', () => {
+    render(<ErrorList name="name" errorList={[]} />);
+    expect(screen.queryByText('error1')).not.toBeInTheDocument();
+    expect(screen.queryByText('error2')).not.toBeInTheDocument();
+  });
+});

package/src/components/forms/subcomponents/__tests__/Label.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { Label } from '@/components/forms/subcomponents/Label';
+
+describe('Label', () => {
+  it('renders the `required` astherisc when the label is required', () => {
+    render(<Label label={'name'} name={'name'} isRequired={true} hasHiddenLabel={false} />);
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeVisible();
+  });
+  it('does not render the `required` astherisc when the label is not required', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+    expect(screen.queryByText('*')).toBeNull();
+  });
+  it('renders the label for screen readers while hidden visually', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('name')).toBeVisible();
+  });
+  it('renders the label text', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    const label = screen.getByTestId('name-testId');
+    expect(label).toBeInTheDocument();
+    expect(label).toBeVisible();
+    expect(label).not.toHaveClass('is-visually-hidden');
+  });
+
+  it('renders the label text when the label is hidden', () => {
+    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+    const label = screen.getByTestId('name-testId');
+    expect(label).toHaveClass('is-visually-hidden');
+  });
+});

package/src/components/index.ts

@@ -2,3 +2,4 @@ export { Container, Col, Row } from './grid';
 export { Button } from './button';
 export { Icon } from './icons';
 export { Table } from './table';
+export { Input } from './forms/input';

package/src/styles/_typography.scss

@@ -5,14 +5,17 @@ html {
   font-family: var(--pf-font-family-base);
 }
 // Font Sizing and Family
-@each $tag, $size in (
-  h1: --pf-font-size-h1,
-  h2: --pf-font-size-h2,
-  h3: --pf-font-size-h3,
-  h4: --pf-font-size-h4,
-  h5: --pf-font-size-h5,
-  p: --pf-font-size-body) {
-
+@each $tag,
+  $size
+    in (
+      h1: --pf-font-size-h1,
+      h2: --pf-font-size-h2,
+      h3: --pf-font-size-h3,
+      h4: --pf-font-size-h4,
+      h5: --pf-font-size-h5,
+      p: --pf-font-size-body
+    )
+{
   #{$tag},
   .text-#{$tag} {
     font-size: var(#{$size});
@@ -21,9 +24,8 @@ html {
     padding: 0;
 
     // If the tag is not 'p', make it bold
-    @if $tag !='p' {
+    @if $tag != 'p' {
       font-weight: var(--pf-font-weight-bold);
-
     }
   }
 }
@@ -46,7 +48,6 @@ html {
   font-size: var(--pf-font-size-overine);
 }
 
-
 // Transform
 .text-capitalize {
   text-transform: capitalize;
@@ -114,3 +115,20 @@ html {
 .text-break--word {
   overflow-wrap: break-word;
 }
+
+// Text Colors
+.text-error {
+  color: var(--pf-error-color);
+}
+
+.text-warning {
+  color: var(--pf-warning-color);
+}
+
+.text-success {
+  color: var(--pf-success-color);
+}
+
+.text-info {
+  color: var(--pf-info-color);
+}

package/src/styles/index.scss

@@ -6,6 +6,7 @@
 @import '../components/icons/styles/Icon.scss';
 @import '../components/grid/styles/Grid.scss';
 @import '../components/table/styles/Table.scss';
+@import '../components/forms/input/styles/Input.scss';
 
 @import 'typography';
 @import 'colors';