fix(textarea): allow multi-row textarea (#16)

* feat(component): allow multi-row textarea

when rows are provided to a textarea, the fixed height is removed and set to "auto"

* fix: fix storybook and adjust scss

* Update docs/components/text-field.md

Co-Authored-By: i8ramin <49030+i8ramin@users.noreply.github.com>

* Update packages/core/src/components/text-field/_text-field.scss

Co-Authored-By: i8ramin <49030+i8ramin@users.noreply.github.com>

docs/components/text-field.md

@@ -19,6 +19,13 @@ title: Text Field
     >
 </component>
 
+<component
+    name="Text area with rows"
+    component="text-area"
+    variation="text-area-multi-row"
+    >
+</component>
+
 <component
     name="Text field with hints"
     component="text-field"

docs/html/text-area/text-area-multi-row.html

@@ -0,0 +1,12 @@
+<div class="ray-text-area">
+  <textarea
+    rows="4"
+    class="ray-text-area__input"
+    id="notes"
+    type="email"
+    placeholder="adding `rows` overrides default height"
+  ></textarea>
+  <label class="ray-text-area__label" for="notes">
+    Long notes
+  </label>
+</div>

packages/core/src/components/text-field/_text-field.scss

@@ -169,4 +169,11 @@
       }
     }
   }
+
+  [rows].#{$ray-class-prefix}text-area {
+    &__input {
+      height: auto; // ie11 fallback
+      height: unset;
+    }
+  }
 }

packages/core/stories/text-field.stories.js

@@ -65,7 +65,7 @@ storiesOf('Text Field', module)
       <div className="ray-text-area">
         <textarea
           className="ray-text-area__input"
-          row="4"
+          rows="4"
           id="textarea"
           placeholder="Few people are aware..."
         />