Merge pull request #142 from guastallaigor/add-textarea-component

feat(textarea): add textarea component

docs/textarea.stories.js

@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Textareas', module);
+stories.addDecorator(withKnobs);
+
+stories.add('textarea', () => {
+  const selectedClass = radios('class', {
+    default: '',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+  }, '');
+
+  return `<textarea id="textarea_field" class="textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
+});

index.html

@@ -112,6 +112,10 @@
         <label for="error_field">.input.is-error</label>
         <input type="text" id="error_field" class="input is-error" placeholder="awesome.css">
       </div>
+      <div class="field">
+        <label for="textarea_field">Textarea</label>
+        <textarea id="textarea_field" class="textarea"></textarea>
+      </div>
     </section>
 
     <section class="balloon container with-title">

scss/form/inputs.scss

@@ -1,4 +1,5 @@
-.input {
+.input,
+.textarea {
   @mixin border-style($border, $outline) {
     outline-color: $outline;
     // prettier-ignore
@@ -31,7 +32,8 @@
   > label {
     display: block;
   }
-  .input {
+  .input,
+  .textarea {
     display: block;
   }
 
@@ -47,7 +49,8 @@
       text-align: right;
     }
 
-    .input {
+    .input,
+    .textarea {
       flex-basis: 0;
       flex-grow: 5;
     }