@brightspace-ui/labs 2.29.0 → 2.31.0

package/demo/components/ou-filter/demoDataManager.js

@@ -0,0 +1,128 @@
+import { action, decorate, observable } from 'mobx';
+import { COURSE_OFFERING, includesSearch, Tree } from '../../../src/components/ou-filter/tree-filter.js';
+import { OuFilterDataManager } from '../../../src/components/ou-filter/ou-filter.js';
+
+const orgUnitChildrenCache = new Map();
+function fetchCachedChildren() {
+	return orgUnitChildrenCache;
+}
+
+const OU_TYPES = {
+	ORG: 1,
+	DEPT: 2,
+	COURSE: 3,
+	FAC: 7,
+	SEM: 25
+};
+
+/* eslint-disable no-console */
+export class DemoDataManager extends OuFilterDataManager {
+
+	constructor(searchFn) {
+		super();
+		this._orgUnitTree = new Tree({});
+		this._searchFn = searchFn;
+	}
+
+	get orgUnitTree() {
+		return this._orgUnitTree;
+	}
+
+	// the method called only when Tree.isDynamic === true
+	async fetchRelevantChildren(id, bookmark) {
+		console.log(`fetchRelevantChildren ${id}, ${bookmark}`);
+
+		let results;
+		// one case for each child in "Faculty 2 - children loaded on open" (id 9)
+		switch (id) {
+			case 9:
+				if (bookmark !== 'orgUnit-9') {
+					results = { PagingInfo: { HasMoreItems: true, Bookmark: 'orgUnit-9' }, Items: [
+						{ Id: 20, Name: 'Department 3', Type: OU_TYPES.DEPT, Parents: [9], IsActive: false }
+					] };
+				} else {
+					results = { PagingInfo: { HasMoreItems: false, Bookmark: null }, Items: [
+						{ Id: 30, Name: 'Department 4', Type: OU_TYPES.DEPT, Parents: [9], IsActive: false }
+					] };
+				}
+				break;
+			case 20:
+				results = { PagingInfo: { HasMoreItems: false, Bookmark: null }, Items: [
+					{ Id: 21, Name: 'Department 3 Course 1', Type: OU_TYPES.COURSE, Parents: [20], IsActive: false },
+					{ Id: 22, Name: 'Department 3 Course 2', Type: OU_TYPES.COURSE, Parents: [20], IsActive: false }
+				] };
+				break;
+			case 30:
+				results = { PagingInfo: { HasMoreItems: false, Bookmark: null }, Items: [
+					{ Id: 31, Name: 'Department 3 Course 1', Type: OU_TYPES.COURSE, Parents: [20], IsActive: false }
+				] };
+				break;
+			default:
+				// no-op: return object with no children
+				return await super.fetchRelevantChildren(id, bookmark);
+		}
+
+		// example of handling cache
+		if (!orgUnitChildrenCache.has(id)) {
+			orgUnitChildrenCache.set(id, results);
+		} else {
+			const cached = orgUnitChildrenCache.get(id);
+			cached.PagingInfo = results.PagingInfo;
+			cached.Items.push(...results.Items);
+		}
+
+		// return result in 2 sec to show loading spinner
+		return await new Promise(resolve => setTimeout(() => resolve(results), 2000));
+	}
+
+	loadData() {
+		const lastSearchResults = null;
+		const orgUnits = [
+			{ Id: 1, Name: 'Course 1', Type: OU_TYPES.COURSE, Parents: [3, 4], IsActive: false },
+			{ Id: 2, Name: 'Course 2', Type: OU_TYPES.COURSE, Parents: [3, 10], IsActive: true },
+			{ Id: 6, Name: 'Course 3 has a surprisingly long name, but nonetheless this kind of thing is bound to happen sometimes and we do need to design for it. Is that not so?', Type: OU_TYPES.COURSE, Parents: [7, 4], IsActive: true },
+			{ Id: 8, Name: 'ZCourse 4', Type: OU_TYPES.COURSE, Parents: [5], IsActive: false },
+			{ Id: 3, Name: 'Department 1', Type: OU_TYPES.DEPT, Parents: [5], IsActive: false },
+			{ Id: 7, Name: 'Department 2 has a longer name', Type: OU_TYPES.DEPT, Parents: [5], IsActive: false },
+			{ Id: 4, Name: 'Semester 1', Type: OU_TYPES.SEM, Parents: [6606], IsActive: false },
+			{ Id: 10, Name: 'Semester 2', Type: OU_TYPES.SEM, Parents: [6606], IsActive: false },
+			{ Id: 5, Name: 'Faculty 1 - children loaded on first load', Type: OU_TYPES.FAC, Parents: [6606], IsActive: false },
+			{ Id: 9, Name: 'Faculty 2 - children loaded on open', Type: OU_TYPES.FAC, Parents: [6606, 10], IsActive: false },
+			{ Id: 6606, Name: 'Dev', Type: OU_TYPES.ORG, Parents: [0], IsActive: false }
+		];
+		const isOrgUnitsTruncated = true;
+
+		this._orgUnitTree = new Tree({
+			// add in any nodes from the most recent search; otherwise
+			// the search will blink out and come back, and also drop any "load more" results
+			nodes: lastSearchResults ? [...orgUnits, ...lastSearchResults] : orgUnits,
+			leafTypes: [COURSE_OFFERING],
+			invisibleTypes: [OU_TYPES.SEM],
+			selectedIds: [1, 21],
+			ancestorIds: [],
+			oldTree: this.orgUnitTree,
+			isDynamic: isOrgUnitsTruncated,
+			// preload the tree with any children queries we've already run: otherwise parts of the
+			// tree blink out and then come back as they are loaded again
+			extraChildren: isOrgUnitsTruncated ?
+				fetchCachedChildren() || new Map() :
+				null,
+			searchFn: this._searchFn ? this._searchFn : includesSearch
+		});
+
+		// for perf testing
+		// this._orgUnitTree = createNaryTree(5, 5000);
+	}
+
+	// the method called only when Tree.isDynamic === true
+	async orgUnitSearch(searchString, bookmark) {
+		console.log(`orgUnitSearch ${searchString}, ${bookmark}`);
+
+		return await super.orgUnitSearch(searchString, bookmark);
+	}
+}
+
+decorate(DemoDataManager, {
+	_orgUnitTree: observable,
+	loadData: action
+});

package/demo/components/ou-filter/ouFilterDemoPage.js

@@ -0,0 +1,103 @@
+import '@brightspace-ui/core/components/inputs/input-search.js';
+
+import { css, html } from 'lit';
+import { DemoDataManager } from './demoDataManager.js';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { startsWithSearch } from '../../../src/components/ou-filter/tree-filter.js';
+
+function parseHash(hash) {
+	return hash.substring(1).split(';').reduce((acc, curr) => {
+		const [key, val] = curr.split('=');
+		acc.set(key, val);
+		return acc;
+	}, new Map());
+}
+
+/* eslint-disable no-console */
+class OuFilterDemoPage extends MobxLitElement {
+
+	static get styles() {
+		return [
+			css`
+				:host {
+					display: inline-block;
+				}
+				div {
+					padding: 30px;
+				}
+				label {
+					display: block;
+					margin-top: 25px;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this.dataManager = new DemoDataManager();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		const hashMap = parseHash(window.location.hash);
+
+		if (hashMap.has('dir')) {
+			document.documentElement.setAttribute('dir', hashMap.get('dir'));
+		}
+
+		if (hashMap.has('search') && hashMap.get('search') === 'startswith') {
+			this.dataManager = new DemoDataManager(startsWithSearch);
+		}
+	}
+
+	firstUpdated() {
+		this.dataManager.loadData();
+	}
+
+	render() {
+		return html`
+			<div>
+				<d2l-labs-ou-filter
+					.dataManager=${this.dataManager}
+					select-all-ui
+					@d2l-labs-ou-filter-change="${this._handleOrgUnitFilterChange}"
+				></d2l-labs-ou-filter>
+				<label for="org-unit-id-search">Test visibility modifiers: show only branches containing org unit ids</label>
+				<d2l-input-search
+					id="org-unit-id-search"
+					label="Demo search input"
+					@d2l-input-search-searched="${this._handleInputSearchChange}">
+				</d2l-input-search>
+			</div>
+		`;
+	}
+
+	_handleInputSearchChange(event) {
+		const searchInput = event.detail.value;
+		const visibilityModifierKey = 'searchInputFilter';
+		if (!searchInput) {
+			this.dataManager.orgUnitTree.removeVisibilityModifier(visibilityModifierKey);
+			return;
+		}
+
+		// expect CSV of org unit ids
+		const searchedOrgUnitIds = searchInput.split(',').map(orgUnitIdStr => Number(orgUnitIdStr));
+		const tree = this.dataManager.orgUnitTree;
+
+		// example: only load branches that contain any of the searched orgUnitIds
+		tree.setVisibilityModifier(
+			visibilityModifierKey,
+			(id) => tree.hasDescendantsInList(id, searchedOrgUnitIds)
+		);
+	}
+
+	_handleOrgUnitFilterChange(event) {
+		event.stopPropagation();
+		console.log(event.target.selected);
+	}
+
+}
+
+customElements.define('d2l-labs-oufilter-demo-page', OuFilterDemoPage);

package/demo/components/ou-filter/util.js

@@ -0,0 +1,38 @@
+import { Tree } from '../../../src/components/ou-filter/tree-filter.js';
+
+let idCounter = 1;
+
+function createNode(id, parents, type) {
+	return { Id: id, Name: `Node ${id}`, Type: type, Parents: parents, IsActive: true };
+}
+
+function spawnChildren(node, n) {
+	const newNodes = [];
+	for (let i = 1; i <= n; i++) {
+		newNodes.push(createNode(++idCounter, [node.Id], node.Type + 1));
+	}
+	return newNodes;
+}
+
+export function createNaryTree(n, numNodes) {
+
+	idCounter = 1;
+
+	const nodes = [createNode(1, [0], 0)];
+	let newNodes = [...nodes];
+
+	// create each layer of the tree until we have the requisite total number of nodes; drop any excess nodes
+	while (nodes.length < numNodes) {
+
+		let children = newNodes.flatMap(node => spawnChildren(node, n));
+		if (children.length + nodes.length > numNodes) {
+			children = children.slice(0, numNodes - nodes.length);
+		}
+
+		nodes.push(...children);
+		newNodes = children;
+	}
+
+	const numLevels = Math.ceil(Math.log(numNodes - 1) / Math.log(n)); // including level 0 (root node)
+	return new Tree({ nodes, leafTypes: [numLevels] });
+}

package/package.json

@@ -51,6 +51,7 @@
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js",
+    "./demo/components/ou-filter/*.js": "./demo/components/ou-filter/*.js",
     "./utilities/pub-sub.js": "./src/utilities/pub-sub/pub-sub.js",
     "./utilities/reactive-store.js": "./src/utilities/reactive-store/reactive-store.js",
     "./utilities/lit-router": "./src/utilities/router/index.js"
@@ -93,7 +94,8 @@
   "files": [
     "labs.serge.json",
     "/src",
-    "/demo/components/media-player/static"
+    "/demo/components/media-player/static",
+    "/demo/components/ou-filter/*.js"
   ],
   "publishConfig": {
     "access": "public"
@@ -112,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.29.0"
+  "version": "2.31.0"
 }

package/src/components/accordion/README.md

@@ -1,19 +1,53 @@
-# d2l-labs-accordion
+# Accordion
 
 A Lit-based widget that displays a list of collapsible components. When a collapsible component is clicked, it expands or collapses the associated content.
 
-## Usage
+## Accordion [d2l-labs-accordion]
 
+The accordion panel to manage multiple accordions.
+
+<!-- docs: demo code display:block autoSize:false size:medium -->
 ```html
 <script type="module">
-    import '@brightspace-ui/labs/components/accordion.js';
-	import '@brightspace-ui/labs/components/accordion-collapse.js';
+  import '@brightspace-ui/labs/components/accordion.js';
+  import '@brightspace-ui/labs/components/accordion-collapse.js';
 </script>
+<d2l-labs-accordion auto-close>
+  <d2l-labs-accordion-collapse label="AutoClose">
+    <d2l-labs-accordion-collapse label="Child 1">Demo</d2l-labs-accordion-collapse>
+    <d2l-labs-accordion-collapse label="Child 2">Demo</d2l-labs-accordion-collapse>
+  </d2l-labs-accordion-collapse>
+</d2l-labs-accordion>
 <d2l-labs-accordion>
-	<d2l-labs-accordion-collapse></d2l-labs-accordion-collapse>
+  <d2l-labs-accordion-collapse label="No AutoClose">
+    <d2l-labs-accordion-collapse label="- Child 1">Demo</d2l-labs-accordion-collapse>
+    <d2l-labs-accordion-collapse label="- Child 2">Demo </d2l-labs-accordion-collapse>
+  </d2l-labs-accordion-collapse>
 </d2l-labs-accordion>
 ```
 
+## Accordion Collapse [d2l-labs-accordion-collapse]
+
+The accordion component that expands or collapses the content.
+
+<!-- docs: demo code display:block autoSize:false size:medium -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/accordion-collapse.js';
+</script>
+<d2l-labs-accordion-collapse label="Summary" flex>
+  <ul slot="summary" style="list-style-type: none; padding-left: 0;">
+    <li>Availability starts 4/13/2020 and ends 4/23/2020</li>
+    <li>One release condition</li>
+    <li>Special access</li>
+  </ul>
+  <p>More info here!</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lectus erat, dignissim quis efficitur non, iaculis nec ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla eu orci sed tristique. Aliquam pellentesque turpis ut vehicula volutpat. Quisque euismod felis nec dolor scelerisque, ullamcorper gravida ante suscipit. Nam eget libero vel mauris tincidunt molestie. Maecenas tortor purus, sodales vel lacus vel, molestie tempor tellus.</p>
+</d2l-labs-accordion-collapse>
+```
+
+<!-- docs: start hidden content -->
+
 ## Lit components:
 ### **d2l-labs-accordion** - accordion panel.
 #### Attributes:
@@ -106,4 +140,6 @@ Example 6:
 		<a href="https://www.d2l.com/">D2L</a>
 	</span>
 </d2l-labs-accordion-collapse>
-```
+```
+
+<!-- docs: end hidden content -->

package/src/components/ou-filter/README.md

@@ -0,0 +1,74 @@
+# Org Unit Filter
+
+A Lit component that renders an org unit structure tree. It supports load more and searching functionality.
+
+## Org Unit Filter [d2l-labs-ou-filter]
+
+<!-- docs: demo align:flex-start autoSize:false size:xlarge -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/demo/components/ou-filter/ouFilterDemoPage.js';
+</script> 
+<d2l-labs-oufilter-demo-page></d2l-labs-oufilter-demo-page>
+```
+
+### General Usage
+
+```js
+import { action, decorate, observable } from 'mobx';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { OuFilterDataManager } from '@brightspace-ui-labs/ou-filter/ou-filter.js';
+
+class FooDataManager extends OuFilterDataManager {
+
+	constructor() {
+		super();
+		this._orgUnitTree = new Tree({});
+	}
+
+	async loadData() {
+		this._orgUnitTree = new Tree({ nodes: ..., ... });
+	}
+}
+
+decorate(FooDataManager, {
+	_orgUnitTree: observable,
+	loadData: action
+});
+
+class FooPage extends MobxLitElement {
+  constructor() {
+    this.dataManager = new FooDataManager();
+  }
+
+  firstUpdated() {
+    this.dataManager.loadData();
+  }
+
+  render () {
+    return html`
+      <d2l-labs-ou-filter
+        .dataManager=${this.dataManager}
+        select-all-ui
+        @d2l-labs-ou-filter-change="${this._orgUnitFilterChange}"
+      ></d2l-labs-ou-filter>`;
+  }
+
+  _orgUnitFilterChange() {
+    console.log(event.target.selected);
+  }
+}
+```
+
+<!-- docs: start hidden content -->
+
+**Properties:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| dataManager | Object | {empty} | Object that extends OuFilterDataManager. It provides and manages data for d2l-labs-ou-filter |
+| select-all-ui | Boolean | {empty} | Shows Select all button |
+| d2l-labs-ou-filter-change | Function | {empty} | Event handler that is fired when selection is changed |
+| disabled | Boolean | {empty} | Render the filter in a disabled state |
+
+<!-- docs: end hidden content -->

package/src/components/pagination/README.md

@@ -1,16 +1,32 @@
-# d2l-labs-pager-numeric
+# Pagination
 
-A component to indicate the existence of and provide navigation for multiple pages of content.
+A numeric paging component to indicate the existence of and provide navigation for multiple pages of content. For Load More Paging, see the [`core` component](https://daylight.d2l.dev/components/paging/).
 
-## Usage
+## Numeric Pager [d2l-labs-pager-numeric]
 
+<!-- docs: demo code -->
 ```html
 <script type="module">
-    import '@brightspace-ui/labs/components/pager-numeric.js';
+  import '@brightspace-ui/labs/components/pager-numeric.js';
+  // <!-- docs: start hidden content -->
+  requestAnimationFrame(() => {
+    const pager = document.querySelector('d2l-labs-pager-numeric');
+    pager.addEventListener('d2l-labs-pager-numeric-page-change', (e) => {
+      e.target.pageNumber = e.detail.page;
+    });
+  });
+  // <!-- docs: end hidden content -->
 </script>
-<d2l-labs-pager-numeric></d2l-labs-pager-numeric>
+<d2l-labs-pager-numeric
+  max-page-number="5"
+  show-page-size-selector
+  page-sizes="[1,10,20,100,250,1000]"
+  page-size="10">
+</d2l-labs-pager-numeric>
 ```
 
+<!-- docs: start hidden content -->
+
 ## Properties
 
 | Property | Type | Description |
@@ -27,3 +43,5 @@ A component to indicate the existence of and provide navigation for multiple pag
   * `page`: the new page number value
 * `d2l-labs-pager-numeric-page-size-change`: dispatched when the item count selector's value is changed. Event `detail` includes:
   * `itemCount`: the value the item count selector was just set to
+
+<!-- docs: end hidden content -->

package/src/components/wizard/README.md

@@ -1,34 +1,52 @@
 # Wizard
 
-The `<d2l-labs-wizard>` can be used to be display a stepped workflow.
+The wizard component can be used to display a stepped workflow.
 
-## Usage
+## Wizard [d2l-labs-wizard]
 
+<!-- docs: demo code -->
 ```html
 <script type="module">
-    import '@brightspace-ui/labs/components/wizard.js';
-	import '@brightspace-ui/labs/components/wizard-step.js';
+  import '@brightspace-ui/labs/components/wizard.js';
+  import '@brightspace-ui/labs/components/wizard-step.js';
+  // <!-- docs: start hidden content -->
+  requestAnimationFrame(() => {
+    const wizard = document.getElementById('wizard');
+    wizard.addEventListener('stepper-next', function() {
+      wizard.next();
+    });
+    wizard.addEventListener('stepper-restart', function() {
+      wizard.restart();
+    });
+  })
+  // <!-- docs: end hidden content -->
 </script>
-<d2l-labs-wizard id="wizard">
-	<d2l-labs-wizard-step step-title="Step 1">
-		<p> First step </p>
-	</d2l-labs-wizard-step>
-
-	<d2l-labs-wizard-step step-title="Step 2">
-		<p> Second step </p>
-	</d2l-labs-wizard-step>
+<d2l-labs-wizard
+  id="wizard"
+  selected-step="1">
+  <d2l-labs-wizard-step
+    next-button-aria-label="Go to step 2"
+    step-title="Get Started"
+    hide-restart-button="true">
+    <p>First Step</p>
+  </d2l-labs-wizard-step>
+
+  <d2l-labs-wizard-step
+    aria-title="This is the second step"
+    restart-button-tooltip="Restart this wizard">
+    <p>Second Step</p>
+  </d2l-labs-wizard-step>
+
+  <d2l-labs-wizard-step
+    step-title="Almost Done"
+    next-button-title="Done"
+    next-button-tooltip="Save this wizard">
+    <p>Last Step</p>
+  </d2l-labs-wizard-step>
 </d2l-labs-wizard>
-<script>
-	var wizard = document.getElementById('wizard');
-	wizard.addEventListener('stepper-next', function() {
-		wizard.next();
-	});
-	wizard.addEventListener('stepper-restart', function() {
-		wizard.restart();
-	});
-</script>
 ```
 
+<!-- docs: start hidden content -->
 
 ### Properties:
 
@@ -47,3 +65,4 @@ The `<d2l-labs-wizard>` can be used to be display a stepped workflow.
 - `stepper-next`: dispatched when the Next button is clicked
 - `stepper-restart`: dispatched when the Restart button is clicked
 
+<!-- docs: end hidden content -->