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`] = `
+
+`;
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..d4248ea9 100644
--- a/src/qComponents/QTag/src/QTag.vue
+++ b/src/qComponents/QTag/src/QTag.vue
@@ -6,10 +6,12 @@
}"
>
+
-
@@ -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);
}
}
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 }}