refactor counter icon

webapp/components/CommentList/CommentList.vue

@@ -1,9 +1,8 @@
 <template>
-  <div id="comments">
-    <h3 style="margin-top: -10px;">
-      <counter-icon icon="comments" :count="post.comments.length">
-        {{ $t('common.comment', null, 0) }}
-      </counter-icon>
+  <div id="comments" class="comment-list">
+    <h3 class="title">
+      <counter-icon icon="comments" :count="post.comments.length" />
+      {{ $t('common.comment', null, 0) }}
     </h3>
     <ds-space margin-bottom="large" />
     <div v-if="post.comments && post.comments.length" id="comments" class="comments">
@@ -50,3 +49,15 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.comment-list {
+  > .title {
+    margin-top: 0;
+
+    > .counter-icon {
+      margin-right: 12px;
+    }
+  }
+}
+</style>

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

@@ -4,16 +4,17 @@ import CounterIcon from './CounterIcon.vue'
 
 storiesOf('CounterIcon', module)
   .addDecorator(helpers.layout)
-  .add('flag icon with button in slot position', () => ({
+
+  .add('default', () => ({
     components: { CounterIcon },
-    data() {
-      return { icon: 'flag', count: 3 }
-    },
     template: `
-      <counter-icon icon="pizza" :count="count">
-        <ds-button ghost primary>
-          Report Details
-        </ds-button>
-      </counter-icon>
+      <counter-icon icon="flag" :count="3" />
+    `,
+  }))
+
+  .add('high count', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="150" />
     `,
   }))

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

@@ -1,29 +1,47 @@
 <template>
-  <span>
+  <span class="counter-icon">
     <base-icon :name="icon" />
-    <ds-tag
-      style="margin-top: -4px; margin-left: -12px; position: absolute;"
-      color="primary"
-      size="small"
-      round
-    >
-      {{ count }}
-    </ds-tag>
-    <span class="counter-icon-text">
-      <slot />
-    </span>
+    <span class="count">{{ cappedCount }}</span>
   </span>
 </template>
+
 <script>
 export default {
   props: {
     icon: { type: String, required: true },
     count: { type: Number, required: true },
   },
+  computed: {
+    cappedCount() {
+      return this.count <= 99 ? this.count : '99+'
+    }
+  }
 }
 </script>
-<style lang="scss" scoped>
-.counter-icon-text {
-  margin-left: $space-xx-small;
+
+<style lang="scss">
+.counter-icon {
+  position: relative;
+
+  > .count {
+    position: absolute;
+    top: -4px;
+    right: 0;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 16px;
+    min-width: 16px;
+    padding: 3px;
+    border-radius: 50%;
+    transform: translateX(50%);
+
+    color:$color-neutral-100;
+    background-color: $color-primary;
+    font-size: 10px;
+    line-height: 1;
+    text-align: center;
+  }
 }
 </style>