@indico-data/design-system 2.8.0 → 2.9.0

package/lib/index.css

@@ -870,6 +870,10 @@
   --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-disabled-background-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
+  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-rounded: var(--pf-rounded);
 }
 
@@ -879,6 +883,9 @@
   --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);
+  --pf-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .input {
@@ -913,9 +920,9 @@
   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);
+  background-color: var(--pf-input-disabled-background-color);
+  border-color: var(--pf-input-disabled-border-color);
+  color: var(--pf-input-disabled-color);
 }
 .input--has-icon {
   padding-left: var(--pf-padding-7);
@@ -1064,7 +1071,7 @@
 }
 
 :root [data-theme=dark] {
-  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-background-color: var(--pf-primary-color-200);
   --pf-checkbox-check-color: var(--pf-white-color);
   --pf-checkbox-border-color: var(--pf-white-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
@@ -1143,6 +1150,99 @@
   background: var(--pf-checkbox-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-white-color);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-text-color: var(--pf-gray-color);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-textarea-help-text-color: var(--pf-gray-color-400);
+  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+  --pf-textarea-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-primary-color);
+  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-text-color: var(--pf-gray-color-100);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
+  --pf-textarea-help-text-color: var(--pf-gray-color-200);
+  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
+  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+}
+
+.textarea {
+  background-color: var(--pf-textarea-background-color);
+  border: 1px solid var(--pf-textarea-border-color);
+  border-radius: var(--pf-textarea-rounded);
+  color: var(--pf-textarea-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.textarea::-moz-placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea::placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea:focus {
+  border-color: var(--pf-primary-color);
+}
+.textarea.error {
+  border-color: var(--pf-error-color);
+}
+.textarea.success {
+  border-color: var(--pf-success-color);
+}
+.textarea.warning {
+  border-color: var(--pf-warning-color);
+}
+.textarea.info {
+  border-color: var(--pf-info-color);
+}
+.textarea:disabled {
+  background-color: var(--pf-textarea-disabled-background-color);
+  border-color: var(--pf-textarea-disabled-border-color);
+  color: var(--pf-textarea-disabled-color);
+}
+.textarea--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-textarea-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.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,
 :root [data-theme=light],
 :root [data-theme=dark] {

package/lib/index.esm.css

@@ -870,6 +870,10 @@
   --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-disabled-background-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
+  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-rounded: var(--pf-rounded);
 }
 
@@ -879,6 +883,9 @@
   --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);
+  --pf-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .input {
@@ -913,9 +920,9 @@
   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);
+  background-color: var(--pf-input-disabled-background-color);
+  border-color: var(--pf-input-disabled-border-color);
+  color: var(--pf-input-disabled-color);
 }
 .input--has-icon {
   padding-left: var(--pf-padding-7);
@@ -1064,7 +1071,7 @@
 }
 
 :root [data-theme=dark] {
-  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-background-color: var(--pf-primary-color-200);
   --pf-checkbox-check-color: var(--pf-white-color);
   --pf-checkbox-border-color: var(--pf-white-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
@@ -1143,6 +1150,99 @@
   background: var(--pf-checkbox-disabled-color);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-white-color);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-text-color: var(--pf-gray-color);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-textarea-help-text-color: var(--pf-gray-color-400);
+  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+  --pf-textarea-rounded: var(--pf-rounded);
+}
+
+:root [data-theme=dark] {
+  --pf-textarea-background-color: var(--pf-primary-color);
+  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-text-color: var(--pf-gray-color-100);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
+  --pf-textarea-help-text-color: var(--pf-gray-color-200);
+  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
+  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+}
+
+.textarea {
+  background-color: var(--pf-textarea-background-color);
+  border: 1px solid var(--pf-textarea-border-color);
+  border-radius: var(--pf-textarea-rounded);
+  color: var(--pf-textarea-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.textarea::-moz-placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea::placeholder {
+  color: var(--pf-textarea-placeholder-text-color);
+}
+.textarea:focus {
+  border-color: var(--pf-primary-color);
+}
+.textarea.error {
+  border-color: var(--pf-error-color);
+}
+.textarea.success {
+  border-color: var(--pf-success-color);
+}
+.textarea.warning {
+  border-color: var(--pf-warning-color);
+}
+.textarea.info {
+  border-color: var(--pf-info-color);
+}
+.textarea:disabled {
+  background-color: var(--pf-textarea-disabled-background-color);
+  border-color: var(--pf-textarea-disabled-border-color);
+  color: var(--pf-textarea-disabled-color);
+}
+.textarea--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-textarea-help-text-color);
+  font-size: var(--pf-font-size-subtitle2);
+}
+.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,
 :root [data-theme=light],
 :root [data-theme=dark] {

package/lib/src/components/forms/textarea/Textarea.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface TextareaProps {
+    ref?: React.LegacyRef<HTMLTextAreaElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    rows?: number;
+    cols?: number;
+    readonly?: boolean;
+    wrap?: 'hard' | 'soft';
+    form?: string;
+    maxLength?: number;
+    autofocus?: boolean;
+}
+export declare const Textarea: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/textarea/Textarea.stories.d.ts

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

package/lib/src/components/forms/textarea/__tests__/Textarea.test.d.ts

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

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

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

package/package.json

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

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -10,7 +10,7 @@
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-checkbox-background-color: transparent;
+  --pf-checkbox-background-color: var(--pf-primary-color-200);
   --pf-checkbox-check-color: var(--pf-white-color);
   --pf-checkbox-border-color: var(--pf-white-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Input, InputProps } from './Input';
-import { useState } from 'react';
+import { SetStateAction, useEffect, useState } from 'react';
 import { iconNames } from 'build/generated/iconTypes';
 
 const meta: Meta = {
@@ -174,15 +174,15 @@ export const Default: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -193,15 +193,16 @@ export const Errors: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -212,15 +213,16 @@ export const HiddenLabel: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -231,15 +233,16 @@ export const HelpText: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -250,15 +253,16 @@ export const Clearable: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -269,15 +273,16 @@ export const Icon: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };
 
@@ -288,14 +293,15 @@ export const Required: Story = {
   },
   render: (args) => {
     const [value, setValue] = useState('');
-    return (
-      <Input
-        {...args}
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-      />
-    );
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Input {...args} value={value} onChange={handleChange} />;
   },
 };

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

@@ -8,6 +8,10 @@
   --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-disabled-background-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
+  --pf-input-border-color: var(--pf-gray-color);
 
   // input Radius
   --pf-input-rounded: var(--pf-rounded);
@@ -20,6 +24,9 @@
   --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);
+  --pf-input-disabled-background-color: var(--pf-primary-color-200);
+  --pf-input-disabled-border-color: var(--pf-gray-color-300);
+  --pf-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .input {
@@ -56,9 +63,9 @@
   }
 
   &:disabled {
-    background-color: var(--pf-gray-color-100);
-    border-color: var(--pf-gray-color-300);
-    color: var(--pf-gray-color-400);
+    background-color: var(--pf-input-disabled-background-color);
+    border-color: var(--pf-input-disabled-border-color);
+    color: var(--pf-input-disabled-color);
   }
   &--has-icon {
     padding-left: var(--pf-padding-7);

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

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

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

@@ -0,0 +1,363 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Textarea, TextareaProps } from './Textarea';
+import { SetStateAction, useEffect, useState } from 'react';
+
+const meta: Meta = {
+  title: 'Forms/Textarea',
+  component: Textarea,
+  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 textarea field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the textarea field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'The placeholder for the textarea field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    value: {
+      control: 'text',
+      description: 'The value for the textarea 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 textarea field',
+      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 textarea 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' },
+    },
+    autofocus: {
+      control: 'boolean',
+      description: '	Specifies that a text area should automatically get focus when the page loads',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    rows: {
+      control: 'number',
+      description: 'The number of rows for the textarea field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      defaultValue: { summary: undefined },
+    },
+    cols: {
+      control: 'number',
+      description: 'Specifies the visible width of a text area',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      defaultValue: { summary: undefined },
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Sets the textarea field to readonly',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    wrap: {
+      control: 'text',
+      description: 'Sets the wrap attribute for the textarea field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: 'soft' },
+    },
+    form: {
+      control: 'text',
+      description: 'Specifies which form the text area belongs to',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Specifies the maximum number of characters allowed in the text area',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      defaultValue: { summary: undefined },
+    },
+    ref: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  args: {
+    isRequired: true,
+    helpText: 'This Is Help Text',
+    label: 'Label Name',
+    name: 'textarea',
+    placeholder: 'Please enter a value',
+    hasHiddenLabel: false,
+    isDisabled: false,
+    errorList: [],
+    value: '',
+    readonly: false,
+    cols: 0,
+    rows: 0,
+    wrap: 'soft',
+    form: '',
+    maxLength: 200,
+    autofocus: false,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Textarea {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    isRequired: true,
+    label: 'Label Name',
+    name: 'textarea',
+    placeholder: 'Please enter a value',
+    hasHiddenLabel: false,
+    isDisabled: false,
+    errorList: ['This Is An Error', 'This Is Another Error'],
+    value: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Textarea {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    isRequired: true,
+    label: 'Label Name',
+    name: 'textarea',
+    placeholder: 'Please enter a value',
+    hasHiddenLabel: true,
+    isDisabled: false,
+    value: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Textarea {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    helpText: 'This Is Help Text',
+    label: 'Label Name',
+    name: 'textarea',
+    placeholder: 'Please enter a value',
+    isDisabled: false,
+    value: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Textarea {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    helpText: 'This Is Help Text',
+    label: 'Label Name',
+    name: 'textarea',
+    placeholder: 'Please enter a value',
+    isDisabled: true,
+    value: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Textarea {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    helpText: 'This Is Help Text',
+    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);
+    }, [args.value]);
+
+    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
+      setValue(e.target.value);
+    };
+
+    return <Textarea {...args} value={value} onChange={handleChange} />;
+  },
+};

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Label } from '../subcomponents/Label';
+import { ErrorList } from '../subcomponents/ErrorList';
+
+export interface TextareaProps {
+  ref?: React.LegacyRef<HTMLTextAreaElement>;
+  label: string;
+  name: string;
+  placeholder: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  errorList?: string[];
+  helpText?: string;
+  hasHiddenLabel?: boolean;
+  rows?: number;
+  cols?: number;
+  readonly?: boolean;
+  wrap?: 'hard' | 'soft';
+  form?: string;
+  maxLength?: number;
+  autofocus?: boolean;
+}
+
+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}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,103 @@
+import { render, screen, act } from '@testing-library/react';
+import { Textarea } from '@/components/forms/textarea/Textarea';
+import { ChangeEvent } from 'react';
+import userEvent from '@testing-library/user-event';
+
+const handleOnChange = jest.fn();
+
+describe('Textarea', () => {
+  it('renders the input field', () => {
+    render(
+      <Textarea
+        isRequired={true}
+        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('adds the error class when errors exist', () => {
+    render(
+      <Textarea
+        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"
+        value={'test'}
+        onChange={handleOnChange}
+      />,
+    );
+    const textareaElement = screen.getByTestId('form-textarea-name');
+    expect(textareaElement).toHaveClass('error');
+  });
+  it('does not highlight the Textarea when no errors exist', () => {
+    render(
+      <Textarea
+        isRequired={true}
+        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 textareaElement = screen.getByTestId('form-textarea-name');
+    expect(textareaElement).not.toHaveClass('error');
+  });
+  it('renders help text when help text exists', () => {
+    render(
+      <Textarea
+        isRequired={true}
+        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(
+      <Textarea
+        isRequired={true}
+        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(
+      <Textarea
+        isRequired={true}
+        label="Enter your name"
+        name="name"
+        placeholder="Please enter a value"
+        value={''}
+        onChange={handleOnChange}
+      />,
+    );
+    const textareaElement = screen.getByTestId('form-textarea-name');
+    await userEvent.type(textareaElement, 't');
+    expect(handleOnChange).toHaveBeenCalled();
+  });
+});

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

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

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

@@ -0,0 +1,102 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  // Typography
+  --pf-textarea-background-color: var(--pf-white-color);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-text-color: var(--pf-gray-color);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
+  --pf-textarea-help-text-color: var(--pf-gray-color-400);
+  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+
+  // textarea Radius
+  --pf-textarea-rounded: var(--pf-rounded);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-textarea-background-color: var(--pf-primary-color);
+  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-text-color: var(--pf-gray-color-100);
+  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
+  --pf-textarea-help-text-color: var(--pf-gray-color-200);
+  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
+  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
+  --pf-textarea-disabled-color: var(--pf-gray-color-400);
+}
+
+.textarea {
+  background-color: var(--pf-textarea-background-color);
+  border: 1px solid var(--pf-textarea-border-color);
+  border-radius: var(--pf-textarea-rounded);
+  color: var(--pf-textarea-text-color);
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  &::placeholder {
+    color: var(--pf-textarea-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-textarea-disabled-background-color);
+    border-color: var(--pf-textarea-disabled-border-color);
+    color: var(--pf-textarea-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-textarea-help-text-color);
+    font-size: var(--pf-font-size-subtitle2);
+  }
+  .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/styles/index.scss

@@ -9,6 +9,7 @@
 @import '../components/forms/input/styles/Input.scss';
 @import '../components/forms/radio/styles/Radio.scss';
 @import '../components/forms/checkbox/styles/Checkbox.scss';
+@import '../components/forms/textarea/styles/Textarea.scss';
 
 @import '../components/forms/toggle/styles/Toggle.scss';
 @import 'typography';