Feature: ResizableTextArea in widget and dashboard (#969)

* Create ResizableTextArea component
* Rubocop fixes and spec fixes

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -3,7 +3,7 @@
   border-bottom: 0;
   margin: $space-normal;
   margin-top: 0;
-  max-height: $space-jumbo * 2;
+  max-height: $space-mega * 3;
   transition: height 2s $ease-in-out-cubic;
 
   .reply-box__top {
@@ -68,13 +68,14 @@
       padding: 0 $space-small;
     }
 
-    >textarea {
+    > textarea {
       @include ghost-input();
       @include margin(0);
       background: transparent;
       // Override min-height : 50px in foundation
       //
-      min-height: 1rem;
+      max-height: $space-mega * 2.4;
+      min-height: 4rem;
       resize: none;
     }
   }

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -13,13 +13,12 @@
         v-on-clickaway="hideEmojiPicker"
         :on-click="emojiOnClick"
       />
-      <textarea
+      <resizable-text-area
         ref="messageInput"
         v-model="message"
-        rows="1"
         class="input"
-        type="text"
         :placeholder="$t(messagePlaceHolder())"
+        :min-height="4"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -93,12 +92,14 @@ import FileUpload from 'vue-upload-component';
 
 import EmojiInput from '../emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 
 export default {
   components: {
     EmojiInput,
     CannedResponse,
     FileUpload,
+    ResizableTextArea,
   },
   mixins: [clickaway],
   data() {