rename Comment to CommentCard

webapp/components/CommentCard/CommentCard.spec.js

@@ -1,12 +1,12 @@
 import { config, shallowMount } from '@vue/test-utils'
-import Comment from './Comment.vue'
+import CommentCard from './CommentCard.vue'
 import Vuex from 'vuex'
 
 const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 
-describe('Comment.vue', () => {
+describe('CommentCard.vue', () => {
   let propsData
   let mocks
   let getters
@@ -61,7 +61,7 @@ describe('Comment.vue', () => {
       const store = new Vuex.Store({
         getters,
       })
-      return shallowMount(Comment, {
+      return shallowMount(CommentCard, {
         store,
         propsData,
         mocks,

webapp/components/CommentCard/CommentCard.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import Comment from './Comment'
+import CommentCard from './CommentCard'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -41,14 +41,14 @@ const comment = {
   __typename: 'Comment',
 }
 
-storiesOf('Comment', module)
+storiesOf('CommentCard', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('Basic comment', () => ({
-    components: { Comment },
+    components: { CommentCard },
     store: helpers.store,
     data: () => ({
       comment,
     }),
-    template: `<comment :key="comment.id" :comment="comment" />`,
+    template: `<comment-card :key="comment.id" :comment="comment" />`,
   }))

webapp/components/CommentCard/CommentCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-card v-if="isUnavailable" class="comment">
+  <base-card v-if="isUnavailable" class="comment-card">
     <p>
       <base-icon name="ban" />
       {{ this.$t('comment.content.unavailable-placeholder') }}
@@ -96,7 +96,7 @@ export default {
       return this.comment.createdAt !== this.comment.updatedAt
     },
     commentClass() {
-      let commentClass = 'comment'
+      let commentClass = 'comment-card'
 
       if (this.comment.deleted || this.comment.disabled) commentClass += ' disabled-content'
       if (this.isTarget) commentClass += ' --target'
@@ -164,7 +164,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.comment {
+.comment-card {
   display: flex;
   flex-direction: column;
   margin-bottom: $space-small;

webapp/components/CommentList/CommentList.vue

@@ -5,7 +5,7 @@
       {{ $t('common.comment', null, 0) }}
     </h3>
     <div v-if="post.comments && post.comments.length" id="comments" class="comments">
-      <comment
+      <comment-card
         v-for="comment in post.comments"
         :key="comment.id"
         :comment="comment"
@@ -19,14 +19,14 @@
 </template>
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import Comment from '~/components/Comment/Comment'
+import CommentCard from '~/components/CommentCard/CommentCard'
 import scrollToAnchor from '~/mixins/scrollToAnchor'
 
 export default {
   mixins: [scrollToAnchor],
   components: {
     CounterIcon,
-    Comment,
+    CommentCard,
   },
   props: {
     post: {