add color variants to CounterIcon

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

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
 import helpers from '~/storybook/helpers'
 import CounterIcon from './CounterIcon.vue'
 
-storiesOf('CounterIcon', module)
+storiesOf('Generic/CounterIcon', module)
   .addDecorator(helpers.layout)
 
   .add('default', () => ({
@@ -15,6 +15,20 @@ storiesOf('CounterIcon', module)
   .add('high count', () => ({
     components: { CounterIcon },
     template: `
-      <counter-icon icon="bell" :count="150" />
+      <counter-icon icon="comments" :count="150" />
+    `,
+  }))
+
+  .add('danger', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="42" danger />
+    `,
+  }))
+
+  .add('count is 0', () => ({
+    components: { CounterIcon },
+    template: `
+      <counter-icon icon="bell" :count="0" />
     `,
   }))

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

@@ -1,7 +1,7 @@
 <template>
   <span class="counter-icon">
     <base-icon :name="icon" />
-    <span class="count">{{ cappedCount }}</span>
+    <span :class="counterClass">{{ cappedCount }}</span>
   </span>
 </template>
 
@@ -10,12 +10,20 @@ export default {
   props: {
     icon: { type: String, required: true },
     count: { type: Number, required: true },
+    danger: { type: Boolean, default: false },
   },
   computed: {
     cappedCount() {
       return this.count <= 99 ? this.count : '99+'
-    }
-  }
+    },
+    counterClass() {
+      let counterClass = 'count'
+      if (this.danger) counterClass += ' --danger'
+      if (this.count === 0) counterClass += ' --inactive'
+
+      return counterClass
+    },
+  },
 }
 </script>
 
@@ -42,6 +50,14 @@ export default {
     font-size: 10px;
     line-height: 1;
     text-align: center;
+
+    &.--danger {
+      background-color: $color-danger;
+    }
+
+    &.--inactive {
+      background-color: $color-neutral-60;
+    }
   }
 }
 </style>