Add emoji bar and comment input to article view

client/cypress/integration/frontend/rooms/article-page.spec.js

@@ -15,10 +15,10 @@ describe('Article page', () => {
       operations
     });
 
-    const commentText = 'First!';
+    const commentText = 'First! 🖐️';
     cy.visit('/article/this-article-has-a-slug');
-    cy.getByDataCy('emoji-button').should('have.length', 9);
+    cy.getByDataCy('comment-textarea').type(commentText);
-    cy.getByDataCy('add-comment-input').type(commentText);
+    cy.getByDataCy('emoji-button').should('have.length', 9).first().click();
     cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();
     cy.getByDataCy('comment').first().should('contain', commentText);
   });

client/src/components/rooms/CommentInput.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="comment-input">
+    <emoji-bar/>
+    <textarea
+      v-auto-grow
+      :value="value"
+      data-cy="comment-textarea"
+      class="comment-input__textarea"
+      placeholder="Kommentar erfassen"
+      @input="$emit('input', $event.target.value)"/>
+  </div>
+</template>
+
+<script>
+  import EmojiBar from '@/components/ui/EmojiBar';
+
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: '',
+      },
+    },
+    components: {
+      EmojiBar,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .comment-input {
+    @include form-with-border;
+
+    &__textarea {
+      @include borderless-textarea;
+    }
+  }
+</style>

client/src/pages/article.vue

@@ -14,6 +14,9 @@
         v-bind="component"
         v-for="component in roomEntry.contents"/>
     </div>
+    <div class="article__comments">
+      <comment-input />
+    </div>
   </div>
 </template>
 
@@ -27,9 +30,11 @@
   import UserMetaWidget from '@/components/UserMetaWidget';
 
   import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
+  import CommentInput from '@/components/rooms/CommentInput';
 
   export default {
     components: {
+      CommentInput,
       'text_block': TextBlock,
       'image_block': ImageBlock,
       'image_url_block': ImageUrlBlock,

client/src/styles/_mixins.scss

@@ -281,3 +281,24 @@
     border-bottom: 1px solid $color;
   }
 }
+
+
+@mixin form-with-border {
+  @include input-box-shadow;
+  background-color: $color-white;
+  border-radius: $input-border-radius;
+  border: 1px solid $color-silver;
+  padding: $medium-spacing;
+}
+
+@mixin borderless-textarea {
+  display: flex;
+  width: 95%;
+  padding: 0;
+  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  line-height: 1.5;
+  border: 0;
+  min-height: 110px;
+}