feat: Inline Add Button Component (#4270)

BrightspaceUI · Nov 24, 2023 · 6124689 · 6124689
1 parent a9d3343
commit 6124689
Show file tree

Hide file tree

Showing 50 changed files with 321 additions and 1 deletion.
diff --git a/.vdiff.json b/.vdiff.json
@@ -2,7 +2,7 @@
 	"browsers": [
 		{
 			"name": "Chromium",
-			"version": 117
+			"version": 119
 		}
 	]
 }
diff --git a/components/button/button-add.js b/components/button/button-add.js
@@ -0,0 +1,127 @@
+import '../colors/colors.js';
+import '../icons/icon.js';
+import '../tooltip/tooltip.js';
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * A component for quickly adding items to a specific locaiton.
+ */
+class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
+	static get properties() {
+		return {
+			/**
+			 * When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.
+			 * @type {string}
+			 */
+			text: { type: String, required: true },
+			/**
+			 * When true, show the button with icon and visible text. When false, only show icon.
+			 * @type {boolean}
+			 */
+			textVisible: { type: Boolean, reflect: true, attribute: 'text-visible' }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				--d2l-button-add-line-style: solid;
+			}
+			button {
+				align-items: center;
+				background-color: transparent;
+				border: 0;
+				box-shadow: none;
+				cursor: pointer;
+				display: flex;
+				font-family: inherit;
+				justify-content: center;
+				outline: none;
+				padding: 0;
+				position: relative;
+				user-select: none;
+				white-space: nowrap;
+				width: 100%;
+			}
+
+			.line {
+				border-top: 1px var(--d2l-button-add-line-style) var(--d2l-color-mica);
+				margin: 3px 0; /** hover/click target */
+				width: 100%;
+			}
+			button:hover .line,
+			button:${unsafeCSS(getFocusPseudoClass())} .line {
+				border-top-color: var(--d2l-color-celestine);
+			}
+
+			.content {
+				align-items: center;
+				background-color: white;
+				display: flex;
+				position: absolute;
+			}
+			:host([text-visible]) .content {
+				color: var(--d2l-color-celestine);
+				height: 1.5rem;
+				padding: 0 0.3rem;
+			}
+
+			:host([text-visible]) d2l-icon,
+			:host(:not([text-visible])) button:hover d2l-icon,
+			:host(:not([text-visible])) button:${unsafeCSS(getFocusPseudoClass())} d2l-icon {
+				color: var(--d2l-color-celestine);
+			}
+			:host(:not([text-visible])) d2l-icon {
+				color: var(--d2l-color-galena);
+				margin: -3px; /** hover/click target */
+				padding: 3px; /** hover/click target */
+			}
+			:host([text-visible]) d2l-icon {
+				padding-inline-end: 0.2rem;
+			}
+
+			span {
+				font-size: 0.7rem;
+				font-weight: 700;
+				letter-spacing: 0.2px;
+				line-height: 1rem;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+
+		this.textVisible = false;
+		this._buttonId = getUniqueId();
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	render() {
+		const text = this.text || this.localize('components.button-add.addItem');
+		const id = !this.textVisible ? this._buttonId : undefined;
+
+		return html`
+			<button class="d2l-label-text" id="${ifDefined(id)}">
+				<div class="line"></div>
+				<div class="content">
+					<d2l-icon icon="tier1:plus-default"></d2l-icon>
+					${this.textVisible
+		? html`<span>${text}</span>`
+		: html`<d2l-tooltip class="vdiff-target" offset="18" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`}
+				</div>
+			</button>
+		`;
+	}
+}
+customElements.define('d2l-button-add', ButtonAdd);
+
diff --git a/components/button/demo/button-add.html b/components/button/demo/button-add.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../button-add.js';
+		</script>
+		<style>
+			.d2l-button-add-dashed {
+				--d2l-button-add-line-style: dashed;
+			}
+		</style>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-button-add">
+
+			<h2>Add Button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-add></d2l-button-add>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Add Button, dashed line</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-add class="d2l-button-add-dashed"></d2l-button-add>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Add Button, custom text</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-add text="Custom Tooltip"></d2l-button-add>
+				</template>
+			</d2l-demo-snippet>
+
+
+			<h2>Add Button, text-visible</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-add text-visible></d2l-button-add>
+				</template>
+			</d2l-demo-snippet>
+
+
+			<h2>Add Button, text-visible, custom text</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-add text-visible text="Custom Text"></d2l-button-add>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+
+		<script>
+			document.addEventListener('click', e => {
+				if (e.target.tagName !== 'D2L-BUTTON-ADD') return;
+				console.log('add button clicked', e.target);
+			});
+		</script>
+
+	</body>
+</html>
diff --git a/components/button/test/button-add.axe.js b/components/button/test/button-add.axe.js
@@ -0,0 +1,33 @@
+import '../button-add.js';
+import { expect, fixture, focusElem, html } from '@brightspace-ui/testing';
+
+describe('d2l-button-add', () => {
+
+	it('default', async() => {
+		const el = await fixture(html`<d2l-button-add></d2l-button-add>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('text', async() => {
+		const el = await fixture(html`<d2l-button-add text="Custom Text"></d2l-button-add>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('visible text', async() => {
+		const el = await fixture(html`<d2l-button-add text-visible></d2l-button-add>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('focused', async() => {
+		const el = await fixture(html`<d2l-button-add></d2l-button-add>`);
+		await focusElem(el);
+		await expect(el).to.be.accessible();
+	});
+
+	it('focused, visible text', async() => {
+		const el = await fixture(html`<d2l-button-add text-visible></d2l-button-add>`);
+		await focusElem(el);
+		await expect(el).to.be.accessible();
+	});
+
+});
diff --git a/components/button/test/button-add.test.js b/components/button/test/button-add.test.js
@@ -0,0 +1,36 @@
+import '../button-add.js';
+import { clickElem, expect, fixture, html, oneEvent, runConstructor } from '@brightspace-ui/testing';
+import { createMessage } from '../../../mixins/property-required/property-required-mixin.js';
+
+describe('d2l-button-add', () => {
+
+	describe('constructor', () => {
+
+		it('should construct', () => {
+			runConstructor('d2l-button-add');
+		});
+
+	});
+
+	describe('events', () => {
+
+		it('dispatches click event when clicked', async() => {
+			const el = await fixture(html`<d2l-button-add></d2l-button-add>`);
+			setTimeout(() => clickElem(el));
+			await oneEvent(el, 'click');
+		});
+
+		it('throws error when no text', async() => {
+			const el = await fixture(html`<d2l-button-add></d2l-button-add>`);
+			expect(() => el.flushRequiredPropertyErrors())
+				.to.throw(TypeError, createMessage(el, 'text'));
+		});
+
+		it('does not throw when text is provided', async() => {
+			const el = await fixture(html`<d2l-button-add text="Custom Text"></d2l-button-add>`);
+			expect(() => el.flushRequiredPropertyErrors()).to.not.throw();
+		});
+
+	});
+
+});
diff --git a/components/button/test/button-add.vdiff.js b/components/button/test/button-add.vdiff.js
@@ -0,0 +1,31 @@
+import '../button-add.js';
+import { clickElem, expect, fixture, focusElem, hoverElem, html, oneEvent } from '@brightspace-ui/testing';
+
+describe('button-add', () => {
+	[ true, false ].forEach((textVisible) => {
+		describe(`text-visible ${textVisible}`, () => {
+			[
+				{ category: 'basic', template: html`<d2l-button-add ?text-visible="${textVisible}"></d2l-button-add>` },
+				{ category: 'text', template: html`<d2l-button-add text="Custom Text" ?text-visible="${textVisible}"></d2l-button-add>` },
+				{ category: 'dashed line', template: html`<d2l-button-add style="--d2l-button-add-line-style: dashed;" ?text-visible="${textVisible}"></d2l-button-add>` }
+			].forEach(({ category, template }) => {
+
+				describe(category, () => {
+					[
+						{ name: 'normal' },
+						{ name: 'hover', action: hoverElem },
+						{ name: 'focus', action: focusElem },
+						{ name: 'click', action: clickElem }
+					].forEach(({ action, name }) => {
+						it(name, async() => {
+							const elem = await fixture(template);
+							if (action) await action(elem);
+							if ((name === 'hover' || name === 'focus') && !elem.textVisible) await oneEvent(elem, 'd2l-tooltip-show');
+							await expect(elem).to.be.golden();
+						});
+					});
+				});
+			});
+		});
+	});
+});
diff --git a/...nents/button/test/golden/button-add/chromium/text-visible-false-basic-click.png b/...nents/button/test/golden/button-add/chromium/text-visible-false-basic-click.png
diff --git a/...nents/button/test/golden/button-add/chromium/text-visible-false-basic-focus.png b/...nents/button/test/golden/button-add/chromium/text-visible-false-basic-focus.png
diff --git a/...nents/button/test/golden/button-add/chromium/text-visible-false-basic-hover.png b/...nents/button/test/golden/button-add/chromium/text-visible-false-basic-hover.png
diff --git a/...ents/button/test/golden/button-add/chromium/text-visible-false-basic-normal.png b/...ents/button/test/golden/button-add/chromium/text-visible-false-basic-normal.png
diff --git a/...button/test/golden/button-add/chromium/text-visible-false-dashed-line-click.png b/...button/test/golden/button-add/chromium/text-visible-false-dashed-line-click.png
diff --git a/...button/test/golden/button-add/chromium/text-visible-false-dashed-line-focus.png b/...button/test/golden/button-add/chromium/text-visible-false-dashed-line-focus.png
diff --git a/...button/test/golden/button-add/chromium/text-visible-false-dashed-line-hover.png b/...button/test/golden/button-add/chromium/text-visible-false-dashed-line-hover.png
diff --git a/...utton/test/golden/button-add/chromium/text-visible-false-dashed-line-normal.png b/...utton/test/golden/button-add/chromium/text-visible-false-dashed-line-normal.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-false-text-click.png b/...onents/button/test/golden/button-add/chromium/text-visible-false-text-click.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-false-text-focus.png b/...onents/button/test/golden/button-add/chromium/text-visible-false-text-focus.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-false-text-hover.png b/...onents/button/test/golden/button-add/chromium/text-visible-false-text-hover.png
diff --git a/...nents/button/test/golden/button-add/chromium/text-visible-false-text-normal.png b/...nents/button/test/golden/button-add/chromium/text-visible-false-text-normal.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-true-basic-click.png b/...onents/button/test/golden/button-add/chromium/text-visible-true-basic-click.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-true-basic-focus.png b/...onents/button/test/golden/button-add/chromium/text-visible-true-basic-focus.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-true-basic-hover.png b/...onents/button/test/golden/button-add/chromium/text-visible-true-basic-hover.png
diff --git a/...nents/button/test/golden/button-add/chromium/text-visible-true-basic-normal.png b/...nents/button/test/golden/button-add/chromium/text-visible-true-basic-normal.png
diff --git a/.../button/test/golden/button-add/chromium/text-visible-true-dashed-line-click.png b/.../button/test/golden/button-add/chromium/text-visible-true-dashed-line-click.png
diff --git a/.../button/test/golden/button-add/chromium/text-visible-true-dashed-line-focus.png b/.../button/test/golden/button-add/chromium/text-visible-true-dashed-line-focus.png
diff --git a/.../button/test/golden/button-add/chromium/text-visible-true-dashed-line-hover.png b/.../button/test/golden/button-add/chromium/text-visible-true-dashed-line-hover.png
diff --git a/...button/test/golden/button-add/chromium/text-visible-true-dashed-line-normal.png b/...button/test/golden/button-add/chromium/text-visible-true-dashed-line-normal.png
diff --git a/components/button/test/golden/button-add/chromium/text-visible-true-text-click.png b/components/button/test/golden/button-add/chromium/text-visible-true-text-click.png
diff --git a/components/button/test/golden/button-add/chromium/text-visible-true-text-focus.png b/components/button/test/golden/button-add/chromium/text-visible-true-text-focus.png
diff --git a/components/button/test/golden/button-add/chromium/text-visible-true-text-hover.png b/components/button/test/golden/button-add/chromium/text-visible-true-text-hover.png
diff --git a/...onents/button/test/golden/button-add/chromium/text-visible-true-text-normal.png b/...onents/button/test/golden/button-add/chromium/text-visible-true-text-normal.png
diff --git a/index.html b/index.html
@@ -36,6 +36,7 @@ <h2 class="d2l-heading-3">Components</h2>
 			Buttons
 			<ul>
 				<li><a href="components/button/demo/button.html">d2l-button</a></li>
+				<li><a href="components/button/demo/button-add.html">d2l-button-add</a></li>
 				<li><a href="components/button/demo/button-icon.html">d2l-button-icon</a></li>
 				<li><a href="components/button/demo/button-subtle.html">d2l-button-subtle</a></li>
 				<li><a href="components/button/demo/floating-buttons.html">d2l-floating-buttons</a></li>

diff --git a/lang/ar.js b/lang/ar.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "لم يتم التحديد.",
 	"components.calendar.selected": "تم التحديد.",
 	"components.calendar.show": "إظهار {month}",

diff --git a/lang/cy.js b/lang/cy.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Heb ei Ddewis.",
 	"components.calendar.selected": "Wedi'i Ddewis.",
 	"components.calendar.show": "Dangos {month}",

diff --git a/lang/da.js b/lang/da.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Ikke valgt.",
 	"components.calendar.selected": "Valgt.",
 	"components.calendar.show": "Vis {month}",

diff --git a/lang/de.js b/lang/de.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Nicht ausgewählt.",
 	"components.calendar.selected": "Ausgewählt.",
 	"components.calendar.show": "{month} anzeigen",

diff --git a/lang/en-gb.js b/lang/en-gb.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Not Selected.",
 	"components.calendar.selected": "Selected.",
 	"components.calendar.show": "Show {month}",

diff --git a/lang/en.js b/lang/en.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Not Selected.",
 	"components.calendar.selected": "Selected.",
 	"components.calendar.show": "Show {month}",

diff --git a/lang/es-es.js b/lang/es-es.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",
 	"components.calendar.show": "Mostrar {month}",

diff --git a/lang/es.js b/lang/es.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",
 	"components.calendar.show": "Mostrar {month}",

diff --git a/lang/fr-fr.js b/lang/fr-fr.js
@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Non sélectionné.",
 	"components.calendar.selected": "Sélectionné.",
 	"components.calendar.show": "Afficher {month}",