**IMPORTANT!** Before picking this up for the sprint, arrange a task breakdown, as the work here can be parallelized
**States**
List of the states that the component should display, mapping [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8451%3A12 | the specs in Figma ]]:
[] Disabled
[] ReadOnly (please see notes)
[] Loading (please see notes)
[] Error
[] Warning
**Props:** The following props should be implemented to support these additional states
[] readOnly: Puts input in readonly state. Default: False
[] Error
[] Disabled
**Notes:**
* All states should be displayed in Storybook on the "All" page.
* This is development happening in Wikit, not the Mismatch Finder anymore.
* Pulled originally from https://phabricator.wikimedia.org/T287568
* Loading state: The loading state of the component needs to be implemented in this first iteration due to product needs (displaying that the user input is being processed). 1) The assumption is that the `loading` state can be developed as a `prop` (like `error` or `disabled`). 2) The inline loading bar is a small, separate component (most likely a mixin): should we implement both elements (text area + inline loading bar) as part of the same task?
* Read only state: The text area presents a "read only" state. This state can be used to present a prefilled text area, and it's also triggered while the component is loading. The only visual change that the component experiences while on "read only" is a background color change. While on read only, the entered value or placeholder of the text area can be selected and copied, but they cannot be modified. The read only text area should respond to hover and focus (in both cases, this imply a visual change of the input border).
* The inline loader tokens are created according to the naming convention and used to style it (a draft is available in this PR: https://github.com/wmde/wikit/pull/458)