feat(tag): add remove tag event (#1361)

* Add the remove tag event and removeEventOnly property * Update docs Remove obsolete props and add relevant ones
Vonage · Nov 30, 2022 · 73aa22f · 73aa22f
1 parent b1c4af9
commit 73aa22f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 28 deletions.
diff --git a/components/tags/readme.md b/components/tags/readme.md
@@ -1,34 +1,25 @@
-# vwc-tags
+# vwc-tag
 
 ## Properties
 
-| Property       | Attribute      | Type                                                  |
-| -------------- | -------------- | ----------------------------------------------------- |
-| `connotation`  | `connotation`  | `Connotation.Primary \| Connotation.CTA \| undefined` |
-| `dense`        | `dense`        | `boolean \| undefined`                                |
-| `enlarged`     | `enlarged`     | `boolean \| undefined`                                |
-| `icon`         | `icon`         | `string \| undefined`                                 |
-| `layout`       | `layout`       | `string \| undefined`                                 |
-| `selected`     | `selected`     | `boolean \| undefined`                                |
-| `shape`        | `shape`        | `Shape.Rounded \| Shape.Pill \| undefined`            |
-| `text`         | `text`         | `string \| undefined`                                 |
-| `trailingIcon` | `trailingIcon` | `string \| undefined`                                 |
-
-# vwc-tag
+| Property         | Type                                                  |
+| --------------   | ----------------------------------------------------- |
+| `connotation`    | `Connotation.Primary \| Connotation.CTA \| undefined` |
+| `dense`          | `boolean \| undefined`                                |
+| `enlarged`       | `boolean \| undefined`                                |
+| `icon`           | `string \| undefined`                                 |
+| `layout`         | `string \| undefined`                                 |
+| `selected`       | `boolean \| undefined`                                |
+| `shape`          | `Shape.Rounded \| Shape.Pill \| undefined`            |
+| `text`           | `string \| undefined`                                 |
+| `removable`      | `boolean \| undefined`                                |
+| `removeEventOnly`| `boolean \| undefined`                                |
 
-## Properties
+## Events
 
-| Property       | Type                                                  |
-| -------------- | ----------------------------------------------------- |
-| `connotation`  | `Connotation.Primary \| Connotation.CTA \| undefined` |
-| `dense`        | `boolean \| undefined`                                |
-| `enlarged`     | `boolean \| undefined`                                |
-| `icon`         | `string \| undefined`                                 |
-| `layout`       | `string \| undefined`                                 |
-| `selected`     | `boolean \| undefined`                                |
-| `shape`        | `Shape.Rounded \| Shape.Pill \| undefined`            |
-| `text`         | `string \| undefined`                                 |
-| `trailingIcon` | `string \| undefined`                                 |
+| Event        | Description      |
+|------------  |------------------|
+| `remove-tag` |    {VwcTag}      |
 
 ## Accessibility
 

diff --git a/components/tags/src/vwc-tag-base.ts b/components/tags/src/vwc-tag-base.ts
@@ -48,6 +48,9 @@ export class VWCTagBase extends LitElement {
 	@property({ type: Boolean, reflect: true })
 		removable = false;
 
+	@property({ type: Boolean, reflect: true })
+		removeEventOnly = false;
+
 	@state() protected shouldRenderRipple = false;
 
 	protected rippleHandlers = new RippleHandlers(() => {
@@ -124,8 +127,15 @@ export class VWCTagBase extends LitElement {
 		</span>`;
 	}
 
+	protected removeTag(): void {
+		this.dispatchEvent(new CustomEvent('remove-tag', {detail: this}));
+		if (!this.removeEventOnly) {
+			this.remove();
+		}
+	}
+
 	protected renderRemoveButton(): TemplateResult {
-		return html`<button class="remove-button" @click="${()=> this.remove()}">
+		return html`<button class="remove-button" @click="${()=> this.removeTag()}">
 			${this.renderIcon('close-line')}
 		</button>`;
 	}

diff --git a/components/tags/test/tag.test.js b/components/tags/test/tag.test.js
@@ -57,7 +57,7 @@ describe('Tag', () => {
 
 		it('should reflect from attribute to property', async () => {
 			const [actualElement] = addElement(
-				textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation=cta></${COMPONENT_NAME}>`)
+				textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
 			);
 			await actualElement.updateComplete;
 			expect(actualElement.layout)
@@ -68,4 +68,48 @@ describe('Tag', () => {
 				.equal('cta');
 		});
 	});
+
+	describe('removable', () => {
+		it('should remove the tag if remove button clicked', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
+			);
+			actualElement.removable = true;
+			await actualElement.updateComplete;
+			const removeButton = actualElement.shadowRoot?.querySelector('.remove-button');
+			removeButton?.click();
+			expect(Array.from(document.body.children).includes(actualElement)).to.equal(false);
+		});
+
+		it('should fire an event remove tag with tag in detail', async () => {
+			let elementFromRemoveEvent = null;
+			const [actualElement] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
+			);
+			actualElement.removable = true;
+			await actualElement.updateComplete;
+			const removeButton = actualElement.shadowRoot?.querySelector('.remove-button');
+			actualElement.addEventListener('remove-tag', (event) => {
+				elementFromRemoveEvent = event.detail;
+			});
+			removeButton?.click();
+			expect(elementFromRemoveEvent).to.equal(actualElement);
+		});
+
+		it('should fire an event remove-tag leaving the element in the dom with removeEventOnly true', async () => {
+			let elementFromRemoveEvent = null;
+			const [actualElement] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME} layout=outlined connotation="cta"></${COMPONENT_NAME}>`)
+			);
+			actualElement.removable = true;
+			actualElement.removeEventOnly = true;
+			await actualElement.updateComplete;
+			const removeButton = actualElement.shadowRoot?.querySelector('.remove-button');
+			actualElement.addEventListener('remove-tag', (event) => {
+				elementFromRemoveEvent = event.detail;
+			});
+			removeButton?.click();
+			expect(Array.from(document.body.children).includes(elementFromRemoveEvent)).to.equal(true);
+		});
+	});
 });