@brightspace-ui/labs 1.4.0 → 1.5.0

package/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/labs.git",
   "exports": {
+    "./components/checkbox-drawer.js": "./src/components/checkbox-drawer/checkbox-drawer.js",
     "./components/community-button.js": "./src/components/community/community-button.js",
     "./components/community-link.js": "./src/components/community/community-link.js",
     "./components/community-url-factory.js": "./src/components/community/community-url-factory.js",
@@ -46,5 +47,5 @@
     "@brightspace-ui/core": "^2",
     "lit": "^2"
   },
-  "version": "1.4.0"
+  "version": "1.5.0"
 }

package/src/components/checkbox-drawer/README.md

@@ -0,0 +1,29 @@
+# d2l-labs-checkbox-drawer
+
+The `d2l-labs-checkbox-drawer` element can be used to get a checkbox with a description. When checked, drawer contents are revealed underneath.
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui/labs/components/checkbox-drawer.js';
+</script>
+<d2l-labs-checkbox-drawer>
+  <p>My drawer content.</p>
+</d2l-labs-checkbox-drawer>
+```
+
+**Properties:**
+
+| Property | Type | Description |
+|--|--|--|
+| `checked` | Boolean | True if the checkbox is checked. False if not checked. |
+| `description` | String | Extra information that is displayed beneath the `label`. Optionally used when `label` is used. |
+| `label` | String | Provides visible information about the component. |
+| `read-only` | Boolean | Makes the checkbox non-interactable, replacing it with checkmark if checked is true or an X otherwise |
+
+**Events:**
+
+- `d2l-labs-checkbox-drawer-checked-change`: dispatched when checkbox's state changes.
+- `d2l-labs-checkbox-drawer-expand`: dispatched when the drawer starts to expand. As per the [expand collapse component](https://github.com/BrightspaceUI/core/tree/master/components/expand-collapse), the `detail` contains an `expandComplete` promise that can be waited on to determine when the content has finished expanding.
+- `d2l-labs-checkbox-drawer-collapse`: dispatched when the drawer starts to collapse. As per the [expand collapse component](https://github.com/BrightspaceUI/core/tree/master/components/expand-collapse), the `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.

package/src/components/checkbox-drawer/checkbox-drawer.js

@@ -0,0 +1,111 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/expand-collapse/expand-collapse-content.js';
+import '@brightspace-ui/core/components/inputs/input-checkbox.js';
+import '@brightspace-ui/core/components/inputs/input-checkbox-spacer.js';
+import '@brightspace-ui/core/components/icons/icon.js';
+import { css, html, LitElement } from 'lit';
+import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
+
+class CheckboxDrawer extends LocalizeLabsElement(SkeletonMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			checked: { type: Boolean },
+			description: { type: String },
+			label: { type: String },
+			readOnly: { type: Boolean, attribute: 'read-only' },
+			_expandCollapseBusy: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [super.styles, bodyCompactStyles, css`
+			:host {
+				display: block;
+			}
+
+			.d2l-input-checkbox, .d2l-input-checkbox-spacer {
+				margin-bottom: 0;
+			}
+
+			.d2l-input-checkbox-description {
+				color: var(--d2l-color-tungsten);
+				font-size: 0.7rem;
+				width: fit-content;
+			}
+
+			.d2l-checkbox-content-margin {
+				margin-top: 18px;
+			}
+
+			.d2l-input-read-only-label {
+				display: inline-block;
+				margin-left: 0.5rem;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.checked = false;
+		this._expandCollapseBusy = false;
+	}
+
+	render() {
+		return html`
+			${this.readOnly ? html `
+				<d2l-icon class="d2l-skeletize" icon="${this.checked ? 'tier1:check' : 'tier1:close-default'}"></d2l-icon>
+				<div class="d2l-body-compact d2l-input-read-only-label d2l-skeletize">${this.label}</div>
+			` : html`
+				<d2l-input-checkbox
+					?checked="${this.checked}"
+					class="d2l-input-checkbox"
+					?skeleton="${this.skeleton}"
+					description=${this.localize(`components:checkboxDrawer:checkbox${this.checked ? 'Expanded' : 'Collapsed'}`)}
+					@change="${this._onCheckboxChange}">${this.label}</d2l-input-checkbox>
+			`}
+			<d2l-input-checkbox-spacer class="d2l-input-checkbox-spacer">
+				<div class="d2l-input-checkbox-description d2l-skeletize">${this.description}</div>
+			</d2l-input-checkbox-spacer>
+			<d2l-input-checkbox-spacer class="d2l-input-checkbox-spacer">
+				<d2l-expand-collapse-content ?expanded="${this.checked}" aria-busy=${this._expandCollapseBusy ? 'true' : 'false'} @d2l-expand-collapse-content-expand="${this._onExpandCollapseContentToggled}" @d2l-expand-collapse-content-collapse="${this._onExpandCollapseContentToggled}">
+					<div class="d2l-checkbox-content-margin"></div>
+					<slot></slot>
+				</d2l-expand-collapse-content>
+			</d2l-input-checkbox-spacer>
+		`;
+	}
+
+	_onCheckboxChange(e) {
+		this.checked = e.target.checked;
+
+		this.dispatchEvent(
+			new CustomEvent('d2l-labs-checkbox-drawer-checked-change', {
+				bubbles: true,
+				composed: false,
+				detail: { checked: this.checked }
+			})
+		);
+	}
+
+	async _onExpandCollapseContentToggled(e) {
+		const action = e.target.expanded ? 'expandComplete' : 'collapseComplete';
+		const eventName = e.target.expanded ? 'd2l-labs-checkbox-drawer-expand' : 'd2l-labs-checkbox-drawer-collapse';
+
+		this.dispatchEvent(
+			new CustomEvent(eventName, {
+				bubbles: true,
+				composed: false,
+				detail: e.detail
+			})
+		);
+
+		this._expandCollapseBusy = true;
+		await e.detail[action];
+		this._expandCollapseBusy = false;
+	}
+}
+
+customElements.define('d2l-labs-checkbox-drawer', CheckboxDrawer);

package/src/lang/ar.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "تم طي خانة الاختيار", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "تم توسيع خانة الاختيار", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "إلغاء",
 	"components:optInFlyout:close": "إغلاق مربع الحوار هذا",
 	"components:optInFlyout:done": "تم",

package/src/lang/cy.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Wedi crebachu blwch ticio", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Wedi ehangu blwch ticio", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Canslo",
 	"components:optInFlyout:close": "Cau’r deialog hwn",
 	"components:optInFlyout:done": "Wedi Gorffen",

package/src/lang/da.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Afkrydsningsfelt skjult", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Afkrydsningsfelt udvidet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuller",
 	"components:optInFlyout:close": "Luk denne dialogboks",
 	"components:optInFlyout:done": "Udført",

package/src/lang/de.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Kontrollkästchen ausgeblendet", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Kontrollkästchen eingeblendet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Abbrechen",
 	"components:optInFlyout:close": "Dieses Dialogfeld schließen",
 	"components:optInFlyout:done": "Fertig",

package/src/lang/en.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Checkbox collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Checkbox expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancel",
 	"components:optInFlyout:close": "Close this dialog",
 	"components:optInFlyout:done": "Done",

package/src/lang/es-es.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Casilla de verificación contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Casilla de verificación expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
 	"components:optInFlyout:done": "Listo",

package/src/lang/es.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Casilla de selección contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Casilla de selección expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
 	"components:optInFlyout:done": "Listo",

package/src/lang/fr-fr.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Case à cocher développée", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuler",
 	"components:optInFlyout:close": "Fermer cette boîte de dialogue",
 	"components:optInFlyout:done": "Terminé",

package/src/lang/fr.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Case à cocher agrandie", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuler",
 	"components:optInFlyout:close": "Fermer cette boîte de dialogue",
 	"components:optInFlyout:done": "Terminé",

package/src/lang/hi.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "चेकबॉक्स छोटा हो गया", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "चेकबॉक्स बड़ा हो गया", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "रद्द करें",
 	"components:optInFlyout:close": "यह संवाद बंद करें",
 	"components:optInFlyout:done": "पूर्ण हो गया",

package/src/lang/ja.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "折りたたまれたチェックボックス", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "展開されたチェックボックス", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "キャンセル",
 	"components:optInFlyout:close": "このダイアログを閉じる",
 	"components:optInFlyout:done": "終了",

package/src/lang/ko.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "확인란이 축소됨", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "확인란이 확장됨", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "취소",
 	"components:optInFlyout:close": "이 대화 상자 닫기",
 	"components:optInFlyout:done": "완료",

package/src/lang/nl.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Selectievakje samengevouwen", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Selectievakje uitgevouwen", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuleren",
 	"components:optInFlyout:close": "Dit dialoogvenster sluiten",
 	"components:optInFlyout:done": "Gereed",

package/src/lang/pt.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Caixa de seleção recolhida", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Caixa de seleção expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Fechar esta caixa de diálogo",
 	"components:optInFlyout:done": "Concluído",

package/src/lang/sv.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Komprimerad kryssruta", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Expanderad kryssruta", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Avbryt",
 	"components:optInFlyout:close": "Stäng dialogrutan",
 	"components:optInFlyout:done": "Klar",

package/src/lang/tr.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "Onay kutusu daraltıldı", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Onay kutusu genişletildi", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "İptal Et",
 	"components:optInFlyout:close": "Bu iletişim kutusunu kapat",
 	"components:optInFlyout:done": "Bitti",

package/src/lang/zh-cn.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "复选框已折叠", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "复选框已展开", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "取消",
 	"components:optInFlyout:close": "关闭此对话框",
 	"components:optInFlyout:done": "完成",

package/src/lang/zh-tw.js

@@ -1,4 +1,6 @@
 export default {
+	"components:checkboxDrawer:checkboxCollapsed": "核取方塊已摺疊", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "核取方塊已展開", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "取消",
 	"components:optInFlyout:close": "關閉此對話方塊",
 	"components:optInFlyout:done": "完成",