Textarea docs + preview (#178)

* Textarea docs + preview

* Fix styles

@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

@@ -21,6 +21,7 @@ import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { profilePreview } from "@site/src/componentPreview/profilePreview";
 import { projectLogoPreview } from "@site/src/componentPreview/projectLogoPreview";
 import { selectPreview } from "@site/src/componentPreview/selectPreview";
+import { textareaPreview } from "@site/src/componentPreview/textareaPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
 
@@ -43,6 +44,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Profile: profilePreview,
   ProjectLogo: projectLogoPreview,
   Select: selectPreview,
+  Textarea: textareaPreview,
   Title: titlePreview,
   Tooltip: tooltipPreview,
 };

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

@@ -85,7 +85,8 @@
   margin: 0 !important;
 }
 
+.PreviewBlock .Input,
 .PreviewBlock .Select,
-.PreviewBlock .Input {
+.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"] : []),