feat: button toggle: Allow consumer to control pressed state (#5143)

* feat: button toggle: Allow consumer to control pressed state

* code review feedback: use an event approach instead

* add vdiffs

* code review feedback: add unit tests instead of vdiff tests. fix wca

* code review feedback: fix up tests

* test tweak: await clickElem instead

components/button/button-toggle.js

@@ -2,6 +2,7 @@ import { css, html, LitElement } from 'lit';
 
 /**
  * A button container component for button toggles.
+ * @fires click - Internal event
  */
 class ButtonToggle extends LitElement {
 
@@ -78,17 +79,28 @@ class ButtonToggle extends LitElement {
 		elem.focus();
 	}
 
+	_clickCancelled(e) {
+		e.stopPropagation();
+		const customClick = new CustomEvent('click', {
+			cancelable: true
+		});
+		e.target.dispatchEvent(customClick);
+		return customClick.defaultPrevented;
+	}
+
 	async _handleClick(pressed) {
 		this.pressed = pressed;
 		await this.updateComplete;
 		this.focus();
 	}
 
-	_handleNotPressedClick() {
+	_handleNotPressedClick(e) {
+		if (this._clickCancelled(e)) return;
 		this._handleClick(true);
 	}
 
-	_handlePressedClick() {
+	_handlePressedClick(e) {
+		if (this._clickCancelled(e)) return;
 		this._handleClick(false);
 	}
 

components/button/demo/button-toggle.html

@@ -54,6 +54,30 @@ <h2>Toggle Button (disabled)</h2>
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Toggle Button (consumer manages state)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle id="toggle-button-icon-consumer-manage-state">
+						<d2l-button-icon slot="not-pressed" icon="tier1:pin-hollow" text="Unpinned, click to pin." id="button-icon-not-pressed"></d2l-button-icon>
+						<d2l-button-icon slot="pressed" icon="tier1:pin-filled" text="Pinned, click to unpin." id="button-icon-pressed"></d2l-button-icon>
+					</d2l-button-toggle>
+					<script>
+						const buttonToggle = document.querySelector('#toggle-button-icon-consumer-manage-state');
+						buttonToggle.addEventListener('d2l-button-toggle-change', e => console.log(e));
+
+						document.querySelector('#button-icon-not-pressed').addEventListener('click', (e) => {
+							e.preventDefault();
+							buttonToggle.pressed = true;
+						});
+						document.querySelector('#button-icon-pressed').addEventListener('click', (e) => {
+							e.preventDefault();
+							buttonToggle.pressed = false;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

components/button/test/button-toggle.test.js

@@ -63,4 +63,39 @@ describe('d2l-button-toggle', () => {
 
 	});
 
+	describe('consumer manages state', () => {
+
+		let el;
+		beforeEach(async() => {
+			el = await fixture(html`
+				<d2l-button-toggle>
+					<d2l-button-icon slot="not-pressed" icon="tier1:pin-hollow" text="Unpinned, click to pin."></d2l-button-icon>
+					<d2l-button-icon slot="pressed" icon="tier1:pin-filled" text="Pinned, click to unpin."></d2l-button-icon>
+				</d2l-button-toggle>
+			`);
+		});
+
+		it('click with no state management', async() => {
+			el.querySelectorAll('d2l-button-icon')
+				.forEach(b => b.addEventListener('click', e => e.preventDefault()));
+			await clickElem(el.querySelector('[slot="not-pressed"]'));
+			expect(el.pressed).to.equal(false);
+		});
+
+		it('click once with state management', async() => {
+			const buttonIcons = el.querySelectorAll('d2l-button-icon');
+			buttonIcons[0].addEventListener('click', (e) => {
+				e.preventDefault();
+				el.pressed = true;
+			});
+			buttonIcons[1].addEventListener('click', (e) => {
+				e.preventDefault();
+				el.pressed = false;
+			});
+			clickElem(el.querySelector('[slot="not-pressed"]'));
+			const e = await oneEvent(el, 'd2l-button-toggle-change');
+			expect(e.target.pressed).to.equal(true);
+		});
+	});
+
 });