From 2015c484d0e76eb43da02c0c3b887b3defdb311c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Fri, 2 Aug 2024 09:57:19 +0200
Subject: [PATCH] :books: Add Input component documentation

---
 frontend/src/app/main/ui/ds/forms/input.mdx | 51 +++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 frontend/src/app/main/ui/ds/forms/input.mdx

diff --git a/frontend/src/app/main/ui/ds/forms/input.mdx b/frontend/src/app/main/ui/ds/forms/input.mdx
new file mode 100644
index 000000000..2d6d9946a
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/forms/input.mdx
@@ -0,0 +1,51 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as InputStories from "./input.stories";
+
+<Meta title="Forms/Input" />
+
+# Input
+
+The `input*` component is a wrapper to the HTML `<input>` element with custom styling
+and additional elements that adds context and, in some cases, adds extra
+functionality.
+
+<Canvas of={InputStories.Default} />
+
+
+## Technical notes
+
+### Icons
+
+`input*` accepts an `icon` prop, which must contain an [icon ID](../foundations/assets/icon.mdx).
+These are available in the `app.main.ds.foundations.assets.icon` namespace.
+
+```clj
+(ns app.main.ui.foo
+  (:require
+   [app.main.ui.ds.foundations.assets.icon :as i]))
+```
+
+```clj
+[:> input* {:icon i/effects}]
+```
+
+<Canvas of={InputStories.WithIcon} />
+
+## Usage guidelines (design)
+
+### Where to use
+
+In forms where the user needs to input any short text or number.
+
+### When to use
+
+When the information that is needed is short and needs an element to add context
+for using it or additional functionality (like color picker).
+
+### Size
+
+The width of the component depends on the content and layout. They can expand to
+fill the container or the content area to which they relate (e.g. tabs) and adapt
+depending on whether there are one or two input elements with or without buttons
+next to them. Their height is always fixed, `32px`, with text area being used for
+larger text blocks.