Add story/spec for CounterIcon component

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import CounterIcon from './CounterIcon'
+import BaseIcon from '../BaseIcon/BaseIcon'
+
+const localVue = global.localVue
+
+describe('CounterIcon.vue', () => {
+  let propsData, wrapper, tag
+
+  const Wrapper = () => {
+    return mount(CounterIcon, { propsData, localVue })
+  }
+
+  describe('given a valid icon name and count', () => {
+    beforeEach(() => {
+      propsData = { icon: 'comments', count: 1 }
+      wrapper = Wrapper()
+      tag = wrapper.find('.ds-tag')
+    })
+
+    it('renders BaseIcon', () => {
+      expect(wrapper.find(BaseIcon).exists()).toBe(true)
+    })
+
+    it('renders the count', () => {
+      expect(tag.text()).toEqual('1')
+    })
+
+    it('uses a round tag', () => {
+      expect(tag.classes()).toContain('ds-tag-round')
+    })
+
+    it('uses a primary button', () => {
+      expect(tag.classes()).toContain('ds-tag-primary')
+    })
+  })
+})

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

@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import CounterIcon from './CounterIcon.vue'
+
+storiesOf('CounterIcon', module)
+  .addDecorator(helpers.layout)
+  .add('flag icon with button in slot position', () => ({
+    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>
+    `,
+  }))