From 91e16cd5fa760bfbb5c164605b6dbc5f7def13b6 Mon Sep 17 00:00:00 2001
From: "v.zheleztsov" <v.zheleztsov@qvant.ru>
Date: Thu, 21 Jan 2021 12:32:09 +0300
Subject: [PATCH 1/3] update QTag

---
 src/qComponents/QTag/QTag.test.js             | 20 +++++++++++++++++++
 .../QTag/__snapshots__/QTag.test.js.snap      | 13 ++++++++++++
 src/qComponents/QTag/index.js                 |  5 ++---
 src/qComponents/QTag/src/QTag.vue             |  8 ++++++--
 src/qComponents/QTag/src/q-tag.scss           |  5 +++++
 stories/components/QTag.stories.js            |  5 +++--
 6 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 src/qComponents/QTag/QTag.test.js
 create mode 100644 src/qComponents/QTag/__snapshots__/QTag.test.js.snap

diff --git a/src/qComponents/QTag/QTag.test.js b/src/qComponents/QTag/QTag.test.js
new file mode 100644
index 00000000..95db09df
--- /dev/null
+++ b/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();
+      });
+    });
+  });
+});
diff --git a/src/qComponents/QTag/__snapshots__/QTag.test.js.snap b/src/qComponents/QTag/__snapshots__/QTag.test.js.snap
new file mode 100644
index 00000000..ab58b0ad
--- /dev/null
+++ b/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>
+`;
diff --git a/src/qComponents/QTag/index.js b/src/qComponents/QTag/index.js
index 044bc388..a22b99a2 100644
--- a/src/qComponents/QTag/index.js
+++ b/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);
 };
 
diff --git a/src/qComponents/QTag/src/QTag.vue b/src/qComponents/QTag/src/QTag.vue
index 18f8f286..e75f6ed3 100644
--- a/src/qComponents/QTag/src/QTag.vue
+++ b/src/qComponents/QTag/src/QTag.vue
@@ -6,9 +6,10 @@
     }"
   >
     <div class="q-tag__text">
+      <!-- @slot text of QTag -->
       <slot />
     </div>
-    <div
+    <button
       v-if="closable"
       class="q-tag__close q-icon-close"
       @click.stop="handleClose"
@@ -23,7 +24,7 @@ export default {
 
   props: {
     /**
-     * whether Tag can be removed
+     * whether close button shown
      */
     closable: {
       type: Boolean,
@@ -33,6 +34,9 @@ export default {
 
   methods: {
     handleClose(event) {
+      /**
+       * triggers when the close button is clicked
+       */
       this.$emit('close', event);
     }
   }
diff --git a/src/qComponents/QTag/src/q-tag.scss b/src/qComponents/QTag/src/q-tag.scss
index ef0f6bca..607d9008 100644
--- a/src/qComponents/QTag/src/q-tag.scss
+++ b/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);
     }
diff --git a/stories/components/QTag.stories.js b/stories/components/QTag.stories.js
index 884e9522..7b0b4fb2 100644
--- a/stories/components/QTag.stories.js
+++ b/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>

From a566ea79ace0b82c2ff55bb6ff16faa3fb496715 Mon Sep 17 00:00:00 2001
From: "v.zheleztsov" <v.zheleztsov@qvant.ru>
Date: Thu, 21 Jan 2021 16:39:46 +0300
Subject: [PATCH 2/3] Add type button

---
 src/qComponents/QTag/src/QTag.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/qComponents/QTag/src/QTag.vue b/src/qComponents/QTag/src/QTag.vue
index e75f6ed3..b6622f44 100644
--- a/src/qComponents/QTag/src/QTag.vue
+++ b/src/qComponents/QTag/src/QTag.vue
@@ -11,6 +11,7 @@
     </div>
     <button
       v-if="closable"
+      type="button"
       class="q-tag__close q-icon-close"
       @click.stop="handleClose"
     />

From dd18458cd19921ba2d5a46fc33510f47239fc6fd Mon Sep 17 00:00:00 2001
From: "v.zheleztsov" <v.zheleztsov@qvant.ru>
Date: Fri, 22 Jan 2021 11:36:43 +0300
Subject: [PATCH 3/3] fix text

---
 src/qComponents/QTag/src/QTag.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/qComponents/QTag/src/QTag.vue b/src/qComponents/QTag/src/QTag.vue
index b6622f44..d4248ea9 100644
--- a/src/qComponents/QTag/src/QTag.vue
+++ b/src/qComponents/QTag/src/QTag.vue
@@ -25,7 +25,7 @@ export default {
 
   props: {
     /**
-     * whether close button shown
+     * whether is close button shown
      */
     closable: {
       type: Boolean,