Inline Add Button Component

components/button/button-add.js

@@ -7,18 +7,19 @@ 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 FocusMixin(LocalizeCoreElement(LitElement)) {
+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 },
+			text: { type: String, required: true },
 			/**
 			 * When true, show the button with icon and visible text. When false, only show icon.
 			 * @type {boolean}

components/button/test/button-add.test.js

@@ -1,5 +1,6 @@
 import '../button-add.js';
-import { clickElem, fixture, html, oneEvent, runConstructor } from '@brightspace-ui/testing';
+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', () => {
 
@@ -19,6 +20,17 @@ describe('d2l-button-add', () => {
 			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();
+		});
+
 	});
 
 });

components/button/test/button-add.vdiff.js

@@ -18,8 +18,7 @@ describe('button-add', () => {
 						{ name: 'click', action: clickElem }
 					].forEach(({ action, name }) => {
 						it(name, async() => {
-							let elem = await fixture(template);
-							if (elem.tagName !== 'D2L-BUTTON-ADD') elem = elem.querySelector('d2l-button-add');
+							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();

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}",

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}",

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}",

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",

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}",

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}",

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}",

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}",

lang/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é(e)",
 	"components.calendar.selected": "Sélectionné(e).",
 	"components.calendar.show": "Afficher {month}",

lang/hi.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} दिखाएँ",

lang/ja.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} を表示",

lang/ko.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} 표시",

lang/nl.js

@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Niet geselecteerd.",
 	"components.calendar.selected": "Geselecteerd.",
 	"components.calendar.show": "{month} weergeven",

lang/pt.js

@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Fechar alerta",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Não selecionado.",
 	"components.calendar.selected": "Selecionado.",
 	"components.calendar.show": "Mostrar {month}",

lang/sv.js

@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Stängningsvarning",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Inte vald.",
 	"components.calendar.selected": "Markerad.",
 	"components.calendar.show": "Visa {month}",

lang/tr.js

@@ -1,6 +1,7 @@
 export default {
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
+	"components.button-add.addItem": "Add Item",
 	"components.calendar.notSelected": "Seçili Değil.",
 	"components.calendar.selected": "Seçili.",
 	"components.calendar.show": "{month} Göster",

lang/zh-cn.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}",

lang/zh-tw.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}",