Textarea docs + preview

@stellar/design-system-website/docs/components/inputs/_category_.json

@@ -0,0 +1,6 @@
+{
+  "label": "Inputs",
+  "link": {
+    "type": "generated-index"
+  }
+}

@stellar/design-system-website/docs/components/inputs/textarea.mdx

@@ -0,0 +1,19 @@
+---
+slug: /textarea
+---
+
+# Textarea
+
+<ComponentDescription componentName="Textarea" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Textarea">
+  <Textarea fieldSize="md" id="textarea"></Textarea>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Textarea" />

@stellar/design-system-website/src/componentPreview/textareaPreview.tsx

@@ -0,0 +1,104 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const textareaPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "label",
+      customValue: "Label",
+      options: [
+        {
+          value: "",
+          label: "No label",
+        },
+        {
+          value: "label",
+          label: "Label",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "placeholder",
+      customValue: "Placeholder",
+      options: [
+        {
+          value: "",
+          label: "No placeholder",
+        },
+        {
+          value: "placeholder",
+          label: "Placeholder",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "fieldSize",
+      options: [
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "xs",
+          label: "XS",
+        },
+      ],
+    },
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "checkbox",
+      prop: "isLabelUppercase",
+      label: "Uppercase label",
+    },
+    {
+      type: "checkbox",
+      prop: "isError",
+      label: "Error",
+    },
+    {
+      type: "checkbox",
+      prop: "isExtraPadding",
+      label: "Extra padding",
+    },
+    {
+      type: "select",
+      prop: "note",
+      customValue: "Note message",
+      options: [
+        {
+          value: "",
+          label: "No note",
+        },
+        {
+          value: "note",
+          label: "Note",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "error",
+      customValue: "Error message",
+      options: [
+        {
+          value: "",
+          label: "No error",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -19,6 +19,7 @@ import { notificationPreview } from "@site/src/componentPreview/notificationPrev
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
+import { textareaPreview } from "@site/src/componentPreview/textareaPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 
 // =============================================================================
@@ -38,6 +39,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Paragraph: paragraphPreview,
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,
+  Textarea: textareaPreview,
   Title: titlePreview,
 };
 

@stellar/design-system-website/src/components/PreviewBlock/styles.css

@@ -29,7 +29,7 @@
 }
 
 .PreviewBlock__selects__content .Select {
-  width: 8rem;
+  width: 9rem;
 }
 
 /* Checkboxes */
@@ -84,3 +84,7 @@
 .PreviewBlock .Heading {
   margin: 0 !important;
 }
+
+.PreviewBlock .Textarea {
+  max-width: 24rem;
+}

@stellar/design-system/src/components/Textarea/index.tsx

@@ -3,22 +3,42 @@ import { Label } from "../Label";
 import { FieldNote } from "../utils/FieldNote";
 import "./styles.scss";
 
-interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+/** Including all valid [textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes) */
+export interface TextareaProps {
+  /** ID of the textarea should be unique */
   id: string;
   // Note: cannot use "size" here because it's input's native property
+  /** Size of the textarea */
   fieldSize: "md" | "sm" | "xs";
+  /** Content of the textarea */
   children?: string;
+  /** Label of the textarea */
   label?: string | React.ReactNode;
+  /** Note message of the textarea */
   note?: string | React.ReactNode;
+  /** Error message of the textarea */
   error?: string | React.ReactNode;
+  /** Textarea error without a message */
   isError?: boolean;
+  /** Make label uppercase */
   isLabelUppercase?: boolean;
+  /** Textarea with extra padding */
   isExtraPadding?: boolean;
+  /** Use a specific textarea rather than a generic HTML textarea (useful for Formik or otherwise controlled inputs) */
   customTextarea?: React.ReactElement;
 }
 
-export const Textarea: React.FC<TextareaProps> = ({
+interface Props
+  extends TextareaProps,
+    React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  id: string;
+  children?: string;
+}
+
+/**
+ * `Textarea` component is a multi-line text input element, which inherits all native HTML `textarea` element attributes.
+ */
+export const Textarea: React.FC<Props> = ({
   id,
   fieldSize,
   children = "",
@@ -32,7 +52,7 @@ export const Textarea: React.FC<TextareaProps> = ({
   spellCheck = false,
   autoComplete = "off",
   ...props
-}: TextareaProps) => {
+}: Props) => {
   const additionalClasses = [
     `Textarea--${fieldSize}`,
     ...(props.disabled ? ["Textarea--disabled"] : []),