Merge pull request #46 from Qvant-lab/tags-update

[QTag] Update docs, add tests, fix button

src/qComponents/QTag/QTag.test.js

@@ -0,0 +1,20 @@
+import Component from './src/QTag';
+
+describe('QTag', () => {
+  it('should match snapshot', async () => {
+    const { element } = shallowMount(Component);
+    expect(element).toMatchSnapshot();
+  });
+
+  describe('methods', () => {
+    describe('handleClose', () => {
+      it('should emit close', () => {
+        const instance = shallowMount(Component);
+
+        instance.vm.handleClose();
+
+        expect(instance.emitted().close).toBeTruthy();
+      });
+    });
+  });
+});

src/qComponents/QTag/__snapshots__/QTag.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QTag should match snapshot 1`] = `
+<div
+  class="q-tag"
+>
+  <div
+    class="q-tag__text"
+  />
+   
+  <!---->
+</div>
+`;

src/qComponents/QTag/index.js

@@ -1,7 +1,6 @@
-import QTag from './src/QTag.vue';
+import QTag from './src/QTag';
 
-/* istanbul ignore next */
-QTag.install = function(Vue) {
+QTag.install = Vue => {
   Vue.component(QTag.name, QTag);
 };
 

src/qComponents/QTag/src/QTag.vue

@@ -6,10 +6,12 @@
     }"
   >
     <div class="q-tag__text">
+      <!-- @slot text of QTag -->
       <slot />
     </div>
-    <div
+    <button
       v-if="closable"
+      type="button"
       class="q-tag__close q-icon-close"
       @click.stop="handleClose"
     />
@@ -23,7 +25,7 @@ export default {
 
   props: {
     /**
-     * whether Tag can be removed
+     * whether is close button shown
      */
     closable: {
       type: Boolean,
@@ -33,6 +35,9 @@ export default {
 
   methods: {
     handleClose(event) {
+      /**
+       * triggers when the close button is clicked
+       */
       this.$emit('close', event);
     }
   }

src/qComponents/QTag/src/q-tag.scss

@@ -34,12 +34,17 @@
     width: 16px;
     height: 16px;
     margin-left: 4px;
+    padding: 0;
     font-size: 16px;
     line-height: 1;
     text-align: center;
+    color: rgba(var(--color-rgb-gray), 0.64);
+    background-color: transparent;
+    border: none;
     cursor: pointer;
     pointer-events: auto;
 
+    &:focus,
     &:hover {
       color: var(--color-primary-black);
     }

stories/components/QTag.stories.js

@@ -13,8 +13,9 @@ export const QTagStory = (_, { argTypes }) => ({
     };
   },
   methods: {
-    handleCloseClick() {
+    handleCloseClick(clickedTag) {
       console.log('Close tag clicked');
+      this.tags = this.tags.filter(tag => tag !== clickedTag);
     }
   },
   template: `
@@ -23,7 +24,7 @@ export const QTagStory = (_, { argTypes }) => ({
         v-for="tag in tags"
         :key="tag"
         :closable="closable"
-        @close="handleCloseClick"
+        @close="handleCloseClick(tag)"
       >
         {{ tag }}
       </q-tag>