Input docs + preview (#176)

* Input docs + preview

* Disabled 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/input.mdx

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

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

@@ -0,0 +1,131 @@
+import React from "react";
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+import CheckIconSvg from "@site/static/img/check-icon.svg";
+
+export const inputPreview: 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: "isPill",
+      label: "Pill",
+    },
+    {
+      type: "checkbox",
+      prop: "isError",
+      label: "Error",
+    },
+    {
+      type: "checkbox",
+      prop: "isExtraPadding",
+      label: "Extra padding",
+    },
+    {
+      type: "checkbox",
+      prop: "isPassword",
+      label: "Password",
+    },
+    {
+      type: "select",
+      prop: "rightElement",
+      customValue: <CheckIconSvg />,
+      options: [
+        {
+          value: "",
+          label: "No element",
+        },
+        {
+          value: "element",
+          label: "Element",
+        },
+      ],
+    },
+    {
+      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

@@ -13,6 +13,7 @@ import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
+import { inputPreview } from "@site/src/componentPreview/inputPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
@@ -33,6 +34,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Button: buttonPreview,
   Caption: captionPreview,
   Heading: headingPreview,
+  Input: inputPreview,
   Link: linkPreview,
   Loader: loaderPreview,
   Notification: notificationPreview,

@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 .Input {
+  max-width: 24rem;
+}

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

@@ -4,23 +4,45 @@ import { Icon } from "../../icons";
 import { FieldNote } from "../utils/FieldNote";
 import "./styles.scss";
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+/** Including all valid [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) */
+export interface InputProps {
+  /** ID of the input should be unique */
   id: string;
   // Note: cannot use "size" here because it's input's native property
+  /** Size of the input */
   fieldSize: "md" | "sm" | "xs";
+  /** Label of the input */
   label?: string | React.ReactNode;
+  /** Make label uppercase */
   isLabelUppercase?: boolean;
+  /** Pill shaped input */
   isPill?: boolean;
+  /** Input error without a message */
   isError?: boolean;
+  /** Input with extra padding */
   isExtraPadding?: boolean;
+  /** Password input preset with show/hide button */
   isPassword?: boolean;
+  /** Right side element of the input */
   rightElement?: string | React.ReactNode;
+  /** Note message of the input */
   note?: string | React.ReactNode;
+  /** Error message of the input */
   error?: string | React.ReactNode;
+  /** Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs) */
   customInput?: React.ReactElement;
 }
 
-export const Input: React.FC<InputProps> = ({
+interface Props
+  extends InputProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+}
+
+/**
+ * `Input` component is a form input element, which inherits all native HTML `input` element attributes.
+ */
+export const Input: React.FC<Props> = ({
   customInput,
   id,
   label,
@@ -34,7 +56,7 @@ export const Input: React.FC<InputProps> = ({
   note,
   error,
   ...props
-}: InputProps) => {
+}: Props) => {
   const [sideElWidthRem, setSideElWidthRem] = useState(0);
   const [isPasswordMasked, setIsPasswordMasked] = useState(true);
   const sideEl = useRef<HTMLDivElement | null>(null);