use CounterIcon component to show counts

- also adds a 'soft' variant to CounterIcon to make it more adaptable

webapp/components/_new/generic/CounterIcon/CounterIcon.story.js

@@ -26,6 +26,13 @@ storiesOf('Generic/CounterIcon', module)
     `,
   }))
 
+  .add('soft', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="42" soft />
+    `,
+  }))
+
   .add('count is 0', () => ({
     components: { CounterIcon },
     template: `

webapp/components/_new/generic/CounterIcon/CounterIcon.vue

@@ -11,6 +11,7 @@ export default {
     icon: { type: String, required: true },
     count: { type: Number, required: true },
     danger: { type: Boolean, default: false },
+    soft: { type: Boolean, default: false },
   },
   computed: {
     cappedCount() {
@@ -18,7 +19,8 @@ export default {
     },
     counterClass() {
       let counterClass = 'count'
-      if (this.danger) counterClass += ' --danger'
+      if (this.soft) counterClass += ' --soft'
+      else if (this.danger) counterClass += ' --danger'
       if (this.count === 0) counterClass += ' --inactive'
 
       return counterClass
@@ -58,6 +60,11 @@ export default {
     &.--inactive {
       background-color: $color-neutral-60;
     }
+
+    &.--soft {
+      background-color: $color-neutral-90;
+      color: $text-color-soft;
+    }
   }
 }
 </style>

webapp/components/generic/SearchPost/SearchPost.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SearchPost from './SearchPost.vue'
 
 const localVue = global.localVue
@@ -26,7 +26,7 @@ describe('SearchPost.vue', () => {
   })
 
   const Wrapper = () => {
-    return shallowMount(SearchPost, { mocks, localVue, propsData })
+    return mount(SearchPost, { mocks, localVue, propsData })
   }
 
   describe('shallowMount', () => {

webapp/components/generic/SearchPost/SearchPost.vue

@@ -1,22 +1,23 @@
 <template>
   <section class="search-post">
     <p class="label">{{ option.title | truncate(70) }}</p>
-    <span class="metadata">
+    <div class="metadata">
       <span class="counts">
-        {{ option.commentsCount }}
-        <base-icon name="comments" />
-        {{ option.shoutedCount }}
-        <base-icon name="bullhorn" />
+        <counter-icon icon="comments" :count="option.commentsCount" soft />
+        <counter-icon icon="bullhorn" :count="option.shoutedCount" soft />
       </span>
-      <span>
-        {{ option.author.name | truncate(32) }} -
-        {{ option.createdAt | dateTime('dd.MM.yyyy') }}
-      </span>
-    </span>
+      {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
+    </div>
   </section>
 </template>
+
 <script>
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+
 export default {
+  components: {
+    CounterIcon,
+  },
   name: 'SearchPost',
   props: {
     option: { type: Object, required: true },
@@ -29,30 +30,18 @@ export default {
 
   > .label {
     flex-grow: 1;
-    padding-left: $space-x-small;
-    font-size: $font-size-base;
+    padding: 0 $space-x-small;
   }
 
   > .metadata {
     display: flex;
     flex-direction: column;
-    white-space: nowrap;
-    padding-top: $space-xxx-small;
+    align-items: flex-end;
     color: $text-color-softer;
     font-size: $font-size-small;
 
-    > .counts {
-      display: flex;
-      flex-grow: 1;
-      justify-content: flex-end;
-      font-weight: $font-weight-bold;
-      > .base-icon {
-        margin-left: $space-xxx-small;
-      }
-
-      > .base-icon:first-child {
-        margin-right: $font-size-small;
-      }
+    > .counts > .counter-icon {
+      margin: 0 $space-x-small;
     }
   }
 }