@brightspace-ui/core 3.118.0 → 3.119.0

package/components/list/demo/list-nested.html

@@ -10,10 +10,12 @@
 			import '../../demo/demo-page.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../dropdown/dropdown-more.js';
+			import '../../icons/icon.js';
 			import '../list-item-button.js';
 			import '../list-item-content.js';
 			import './list-item-custom.js';
 			import '../list-item.js';
+			import '../list-item-nav-button.js';
 			import '../list-controls.js';
 			import '../list.js';
 			import '../../menu/menu.js';
@@ -21,6 +23,7 @@
 			import '../../paging/pager-load-more.js';
 			import '../../selection/selection-action.js';
 			import '../../switch/switch.js';
+			import '../../tooltip/tooltip-help.js';
 
 			import './demo-list-nested-iterations-helper.js';
 		</script>
@@ -29,7 +32,6 @@
 
 		<d2l-demo-page page-title="d2l-list (nested)">
 
-
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
@@ -224,6 +226,66 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Side nav item</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list grid style="width: 334px;">
+						<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded draggable>
+							<d2l-list-item-content>
+								<div>Welcome!</div>
+							</d2l-list-item-content>
+							<d2l-list slot="nested" grid>
+								<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation" draggable>
+									<d2l-list-item-content>
+										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
+										<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm">Due: May 2, 2023</d2l-tooltip-help></div>
+									</d2l-list-item-content>
+								</d2l-list-item-nav-button>
+							</d2l-list>
+						</d2l-list-item-nav-button>
+						<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded draggable>
+							<d2l-list-item-content>
+								<div>Unit 1: Fiction</div>
+								<div slot="secondary"><d2l-tooltip-help text="Starts: May 2, 2023 at 2 pm">Starts: May 2, 2023</d2l-tooltip-help></div>
+							</d2l-list-item-content>
+							<d2l-list slot="nested" grid>
+								<d2l-list-item-nav-button key="L3-2" label="Fiction" draggable>
+									<d2l-list-item-content>
+										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
+									</d2l-list-item-content>
+								</d2l-list-item-nav-button>
+								<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction" draggable>
+									<d2l-list-item-content>
+										<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
+									</d2l-list-item-content>
+								</d2l-list-item-nav-button>
+							</d2l-list>
+						</d2l-list-item-nav-button>
+					</d2l-list>
+					<script>
+						(demo => {
+							let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
+							demo.addEventListener('d2l-list-item-button-click', (e) => {
+								console.log('d2l-list-item-nav-button: click event');
+
+								if (!e.target.expandable) {
+									currentItem = e.target;
+									return;
+								}
+
+								if (currentItem !== e.target) {
+									e.target.expanded = true;
+									currentItem = e.target;
+								} else {
+									e.target.expanded = !e.target.expanded;
+								}
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>All Iterations</h2>
 
 			<d2l-demo-snippet full-width>

package/components/list/list-item-button-mixin.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import { css, html, nothing } from 'lit';
 import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
 	static get properties() {
@@ -10,7 +11,8 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			 * Disables the primary action button
 			 * @type {boolean}
 			 */
-			buttonDisabled : { type: Boolean, attribute: 'button-disabled', reflect: true }
+			buttonDisabled : { type: Boolean, attribute: 'button-disabled', reflect: true },
+			_ariaCurrent: { type: String }
 		};
 	}
 
@@ -75,6 +77,12 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		this.buttonDisabled = false;
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this._button = this.shadowRoot.querySelector(`#${this._primaryActionId}`);
+	}
+
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('buttonDisabled') && this.buttonDisabled === true) this._hoveringPrimaryAction = false;
@@ -115,6 +123,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	_renderPrimaryAction(labelledBy, content) {
 		return html`<button 
 			id="${this._primaryActionId}" 
+			aria-current="${ifDefined(this._ariaCurrent)}"
 			aria-labelledby="${labelledBy}" 
 			@click="${this._onButtonClick}" 
 			@focusin="${this._onButtonFocus}"

package/components/list/list-item-nav-button-mixin.js

@@ -0,0 +1,124 @@
+import '../colors/colors.js';
+import { css } from 'lit';
+import { ListItemButtonMixin } from './list-item-button-mixin.js';
+
+export const ListItemNavButtonMixin = superclass => class extends ListItemButtonMixin(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * Whether the list item is the current page in a navigation context
+			 * @type {boolean}
+			 */
+			current: { type: Boolean, reflect: true },
+			_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
+		};
+	}
+
+	static get styles() {
+
+		const styles = [ css`
+			:host(:not([button-disabled])) {
+				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
+			}
+			.d2l-list-item-content ::slotted(*) {
+				width: 100%;
+			}
+			:host([current]) [slot="outside-control-container"] {
+				border: 3px solid var(--d2l-color-celestine);
+				margin-block: -1px;
+			}
+			:host([_focusing-primary-action]:not([current])) [slot="outside-control-container"] {
+				border: 2px solid var(--d2l-color-celestine);
+			}
+			:host([current]) [slot="control-container"]::before,
+			:host([current]) [slot="control-container"]::after {
+				border-color: transparent;
+			}
+			:host([_focusing-primary-action]) .d2l-list-item-content {
+				--d2l-list-item-content-text-outline: none;
+			}
+			:host([_hovering-primary-action]) .d2l-list-item-content,
+			:host([_focusing-primary-action]) .d2l-list-item-content {
+				--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
+				--d2l-list-item-content-text-decoration: none;
+			}
+
+		` ];
+
+		super.styles && styles.unshift(super.styles);
+		return styles;
+	}
+
+	constructor() {
+		super();
+		this.current = false;
+		this._childCurrent = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-list-item-nav-set-child-current', this.#setChildCurrent);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('d2l-list-item-nav-set-child-current', this.#setChildCurrent);
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		if (this.current) {
+			this.dispatchSetChildCurrentEvent(true);
+		}
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.get('current') !== undefined) {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent('d2l-list-item-property-change', { bubbles: true, composed: true, detail: { name: 'current', value: this.current } }));
+		}
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('current') || changedProperties.has('_childCurrent')) {
+			if (this.current) {
+				this.#setAriaCurrent('page');
+			} else if (this._childCurrent) {
+				this.#setAriaCurrent('location');
+			} else {
+				this.#setAriaCurrent(undefined);
+			}
+		}
+	}
+
+	/**
+	 * Internal. Do not use.
+	 */
+	dispatchSetChildCurrentEvent(val) {
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent('d2l-list-item-nav-set-child-current', { bubbles: true, composed: true, detail: { value: val } }));
+	}
+
+	_onButtonClick(e) {
+		if (!this._getDescendantClicked(e)) {
+			this.current = true;
+			this._childCurrent = false;
+		}
+		super._onButtonClick(e);
+	}
+
+	#setAriaCurrent(val) {
+		this._ariaCurrent = val;
+	}
+
+	async #setChildCurrent(e) {
+		await this.updateComplete; // ensure button exists
+		if (e.target === this) return;
+		this._childCurrent = e.detail.value;
+	}
+
+};

package/components/list/list-item-nav-button.js

@@ -0,0 +1,19 @@
+import { ListItemNavButtonMixin } from './list-item-nav-button-mixin.js';
+import { LitElement } from 'lit';
+
+/**
+ * A component for a "listitem" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.
+ * @slot - Default content placed inside of the component
+ * @slot illustration - Image associated with the list item located at the left of the item
+ * @slot actions - Actions (e.g., button icons) associated with the listen item located at the right of the item
+ * @slot nested - Nested d2l-list element
+ */
+class ListItemNavButton extends ListItemNavButtonMixin(LitElement) {
+
+	render() {
+		return this._renderListItem();
+	}
+
+}
+
+customElements.define('d2l-list-item-nav-button', ListItemNavButton);

package/components/list/list.js

@@ -370,8 +370,8 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 	}
 
 	_handleListItemPropertyChange(e) {
-		e.stopPropagation();
 		if (e.detail.name === 'color') {
+			e.stopPropagation();
 			if (e.detail.value) {
 				this._childHasColor = true;
 				this._listChildrenUpdatedSubscribers.updateSubscribers();
@@ -379,6 +379,46 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 				// if color has had its value removed then need to loop through all the items to determine if there are still others with colors
 				this._handleListItemNestedChange(e);
 			}
+		} else if (e.detail.name === 'current') {
+			if (this.slot === 'nested') return;
+			e.stopPropagation();
+
+			if (!e.detail.value) {
+				e.target.dispatchSetChildCurrentEvent(false);
+				return;
+			}
+
+			/**
+			 * When a nav item is set to current, do the following:
+			 * - If previous current item:
+			 *   - Set its current to FALSE
+			 *   	- This triggers the d2l-list-item-nav-set-child-current with value of false, causing
+			 * 		  the previous current item to set its aria-current to undefined if it is not the current item
+			 * - After the reset event has worked its way up OR if there is no previous current item:
+			 *   - Trigger the d2l-list-item-nav-set-child-current event with value of true, which sets all parent item aria-current to "location"
+			 */
+			const currentItems = this.querySelectorAll('[current]');
+			// length of 2 is fine as long as one is e.target and the other is the previous current item
+			if (currentItems.length > 2) {
+				console.warn('d2l-list: More than one list item has been set to current. This is not allowed and will cause unexpected behavior.');
+			}
+			const target = e.target;
+
+			let prevCurrent = false;
+			currentItems.forEach((item) => {
+				if (item === target) return;
+				prevCurrent = item;
+			});
+
+			if (prevCurrent) {
+				this.addEventListener('d2l-list-item-nav-set-child-current', (e) => {
+					e.stopPropagation();
+					target.dispatchSetChildCurrentEvent(true);
+				}, { once: true });
+				prevCurrent.current = false;
+			} else {
+				target.dispatchSetChildCurrentEvent(true);
+			}
 		}
 	}
 

package/custom-elements.json

@@ -9394,6 +9394,291 @@
         }
       ]
     },
+    {
+      "name": "d2l-list-item-nav-button",
+      "path": "./components/list/list-item-nav-button.js",
+      "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
+      "attributes": [
+        {
+          "name": "current",
+          "description": "Whether the list item is the current page in a navigation context",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
+        {
+          "name": "color",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
+          "type": "string"
+        },
+        {
+          "name": "no-primary-action",
+          "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'none'",
+          "default": "\"normal\""
+        },
+        {
+          "name": "selectable",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "description": "**Selection:** Whether the item is selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drag-handle-text",
+          "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
+          "type": "string"
+        },
+        {
+          "name": "drop-text",
+          "description": "**Drag & drop:** Text to drag and drop",
+          "type": "string"
+        },
+        {
+          "name": "key",
+          "description": "**Selection:** Value to identify item if selectable",
+          "type": "string"
+        },
+        {
+          "name": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "drop-nested",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "description": "Whether to show the expand collapse toggle",
+          "type": "boolean"
+        },
+        {
+          "name": "expanded",
+          "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
+          "type": "boolean"
+        },
+        {
+          "name": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        },
+        {
+          "name": "labelled-by",
+          "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "current",
+          "attribute": "current",
+          "description": "Whether the list item is the current page in a navigation context",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "buttonDisabled",
+          "attribute": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
+        {
+          "name": "color",
+          "attribute": "color",
+          "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
+          "type": "string"
+        },
+        {
+          "name": "first",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noPrimaryAction",
+          "attribute": "no-primary-action",
+          "description": "Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'none'",
+          "default": "\"normal\""
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "description": "**Selection:** Indicates an input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "**Selection:** Whether the item is selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionDisabled",
+          "attribute": "selection-disabled",
+          "description": "**Selection:** Disables selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionInfo"
+        },
+        {
+          "name": "dragHandleText",
+          "attribute": "drag-handle-text",
+          "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
+          "type": "string"
+        },
+        {
+          "name": "dropText",
+          "attribute": "drop-text",
+          "description": "**Drag & drop:** Text to drag and drop",
+          "type": "string"
+        },
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "**Selection:** Value to identify item if selectable",
+          "type": "string"
+        },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dropNested",
+          "attribute": "drop-nested",
+          "description": "**Drag & drop:** Whether nested items can be dropped on this item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "attribute": "expandable",
+          "description": "Whether to show the expand collapse toggle",
+          "type": "boolean"
+        },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
+          "type": "boolean"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-list-item-button-click",
+          "description": "Dispatched when the item's primary button action is clicked"
+        },
+        {
+          "name": "d2l-list-item-selected",
+          "description": "Dispatched when the component item is selected"
+        },
+        {
+          "name": "d2l-list-item-position-change",
+          "description": "Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change)."
+        },
+        {
+          "name": "d2l-list-item-expand-collapse-toggled",
+          "description": "Dispatched whenever the list item expand state is toggled."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content placed inside of the component"
+        },
+        {
+          "name": "illustration",
+          "description": "Image associated with the list item located at the left of the item"
+        },
+        {
+          "name": "actions",
+          "description": "Actions (e.g., button icons) associated with the listen item located at the right of the item"
+        },
+        {
+          "name": "nested",
+          "description": "Nested d2l-list element"
+        }
+      ]
+    },
     {
       "name": "d2l-list-item-placement-marker",
       "path": "./components/list/list-item-placement-marker.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.118.0",
+  "version": "3.119.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",