@brightspace-ui/core 2.120.0 → 2.121.0

package/components/filter/README.md

@@ -189,6 +189,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 
 | Property | Type | Description |
 |---|---|---|
+| `header-text` | String | A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users. |
 | `introductory-text` | String | The introductory text to display at the top of the filter dropdown |
 | `key` | String, required | Unique identifier for the dimension |
 | `loading` | Boolean | Whether the values for this dimension are still loading and a loading spinner should be displayed |

package/components/filter/demo/filter.html

@@ -57,11 +57,30 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Single Set Dimension - Header Text</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter id="filter-single">
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all>
+						<d2l-filter-dimension-set-value key="art" text="Art" count="12"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="2" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="biology" text="Biology" count="15"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="1"disabled></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="drama" text="Drama" count="23" disabled></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="english" text="English" count="100"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="physics" text="Physics" count="23"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="stats" text="Statistics" count="333"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft" count="2211"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
+				</d2l-filter>
+			</template>
+		</d2l-demo-snippet>
+
 		<h2>Multiple Dimensions</h2>
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." text="Course" select-all>
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" text="Course" select-all>
 						<d2l-filter-dimension-set-value key="art" text="Art" count="0"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="1" selected></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="biology" text="Biology" count="-12"></d2l-filter-dimension-set-value>

package/components/filter/filter-dimension-set.js

@@ -11,6 +11,11 @@ class FilterDimensionSet extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.
+			 * @type {string}
+			 */
+			headerText: { type: String, attribute: 'header-text' },
 			/**
 			 * The introductory text to display at the top of the filter dropdown
 			 * @type {string}
@@ -56,6 +61,7 @@ class FilterDimensionSet extends LitElement {
 
 	constructor() {
 		super();
+		this.headerText = '';
 		this.introductoryText = '';
 		this.loading = false;
 		this.searchType = 'automatic';

package/components/filter/filter.js

@@ -18,7 +18,7 @@ import '../menu/menu-item.js';
 import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
 
-import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
+import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -69,7 +69,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	static get styles() {
-		return [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, offscreenStyles, css`
+		return [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles, offscreenStyles, css`
 			[slot="header"] {
 				padding: 0.9rem 0.3rem;
 			}
@@ -164,6 +164,13 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				padding: 0.9rem;
 			}
 
+			.list-header-text {
+				color: var(--d2l-color-ferrite);
+				margin: 0;
+				padding-bottom: 0.05rem;
+				padding-top: 0.65rem;
+			}
+
 			.d2l-filter-dimension-info-message {
 				color: var(--d2l-color-ferrite);
 				text-align: center;
@@ -487,6 +494,17 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			if (count === 0) return searchResults;
 		}
 
+		let listHeader = nothing;
+		let listLabel = undefined;
+		if (dimension.headerText && dimension.searchValue === '') {
+			listHeader = html`
+				<d2l-list-item>
+					<h4 class="d2l-heading-4 list-header-text" aria-hidden="true">${dimension.headerText}</h4>
+				</d2l-list-item>
+			`;
+			listLabel = dimension.headerText;
+		}
+
 		return html`
 			${searchResults}
 			<d2l-list
@@ -494,8 +512,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				@d2l-list-selection-change="${this._handleChangeSetDimension}"
 				extend-separators
 				grid
+				label="${ifDefined(listLabel)}"
 				?selection-single="${dimension.selectionSingle}"
 				separators="between">
+				${listHeader}
 				${dimension.values.map(item => html`
 					<d2l-list-item
 						?selection-disabled="${item.disabled}"
@@ -739,8 +759,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 			switch (type) {
 				case 'd2l-filter-dimension-set': {
+					info.headerText = dimension.headerText;
 					info.introductoryText = dimension.introductoryText;
 					info.searchType = dimension.searchType;
+					info.searchValue = '';
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
 					info.searchEmptyState = dimension.getSearchEmptyState();

package/components/inputs/input-date.js

@@ -123,6 +123,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				visibility: hidden;
 				width: auto;
 			}
+			.d2l-input-date-hidden-text > div {
+				padding-left: 2rem; /* simulates space taken up by the icon */
+			}
 			d2l-calendar {
 				padding: 0.25rem 0.6rem;
 			}
@@ -268,9 +271,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			</d2l-dropdown-content>` : null;
 		return html`
 			<div aria-hidden="true" class="d2l-input-date-hidden-text">
-				<div><d2l-icon icon="tier1:calendar"></d2l-icon>${formattedWideDate}</div>
-				<div><d2l-icon icon="tier1:calendar"></d2l-icon>${shortDateFormat}</div>
-				<div><d2l-icon icon="tier1:calendar"></d2l-icon>${this.emptyText}</div>
+				<div>${formattedWideDate}</div>
+				<div>${shortDateFormat}</div>
+				<div>${this.emptyText}</div>
 			</div>
 			${errorTooltip}
 			${infoTooltip}

package/components/list/demo/demo-list-nested-iterations-helper.js

@@ -0,0 +1,149 @@
+import '../../colors/colors.js';
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list.js';
+import { css, html, LitElement, nothing } from 'lit';
+
+class ListNestedIterationsHelper extends LitElement {
+	static get properties() {
+		return {
+			draggable: { type: Boolean }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: block;
+			}
+			table {
+				border-collapse: collapse;
+				font-size: 0.8rem;
+				table-layout: fixed;
+				width: 100%;
+			}
+			table > * > tr > * {
+				border: 1px solid var(--d2l-color-mica);
+				font-weight: 400;
+				height: 41px;
+				padding: 0.5rem 1rem;
+				text-align: start;
+				vertical-align: middle;
+			}
+			table > * > tr > td {
+				vertical-align: top;
+			}
+			table > thead > tr > th,
+			table > * > tr.header > th {
+				background-color: var(--d2l-color-regolith);
+				font-size: 0.7rem;
+				height: 27px;
+				line-height: 0.9rem;
+			}
+
+			d2l-list:not([slot="nested"]) {
+				border: solid 1px black;
+				margin: 1rem;
+				padding: 1rem;
+			}
+			.minimize-width {
+				width: 4.5rem;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.draggable = false;
+	}
+
+	render() {
+		const selectableOptions = [
+			{ name: 'All are Selectable', parent: true, child: true },
+			{ name: 'None are Selectable', parent: false, child: false },
+			{ name: 'Children Selectable (Parent Not)', parent: false, child: true },
+			{ name: 'Parent Selectable (Children Not)', parent: true, child: false }
+		];
+
+		const tableRows = selectableOptions.map(option => html`
+			<tr class="header">
+				<th rowspan="2" scope="rowgroup">${option.name}</th>
+				<th scope="row">Exp/Collapsible Children</th>
+				<td>${this._createList([option.parent, true], [option.child, true])}</td>
+				<td>${this._createList([option.parent, false], [option.child, true])}</td>
+			</tr>
+			<tr class="header">
+				<th scope="row">Non-Exp/Collapsible Children</th>
+				<td>${this._createList([option.parent, true], [option.child, false])}</td>
+				<td>${this._createList([option.parent, false], [option.child, false])}</td>
+			</tr>
+		`);
+
+		return html`
+			<table>
+				<thead>
+					<tr>
+						<th class="minimize-width"></th>
+						<th class="minimize-width"></th>
+						<th scope="col">Exp/Collapsible Parent</th>
+						<th scope="col">Non-Exp/Collapsible Parent</th>
+					</tr>
+				</thead>
+				<tbody>
+					${tableRows}
+				</tbody>
+			</table>
+		`;
+	}
+
+	_createList(parentOptions, childrenOptions) {
+		return html`
+			<d2l-list>
+				${this._getParentItems(parentOptions, this._getChildItems(childrenOptions))}
+			</d2l-list>
+		`;
+	}
+
+	_getChildItems(childOptions) {
+		const childL2Text = 'L2 List Item';
+		const childL3Text = 'L3 List Item';
+		const items = [];
+
+		for (let i = 0; i < 3; i++) {
+			const childKey = `child-${i}-${childOptions[0]}-${childOptions[1]}`;
+			items.push(html`
+				<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}" ?expandable="${childOptions[1] && i !== 1}">
+					<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
+					${i === 1  || !childOptions[1] ? nothing : html`
+						<d2l-list slot="nested">
+							<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.draggable}">
+								<d2l-list-item-content>${childL3Text}</d2l-list-item-content>
+							</d2l-list-item>
+						</d2l-list>
+					`}
+				</d2l-list-item>
+			`);
+		}
+		return items;
+	}
+
+	_getParentItems(parentOptions, nested) {
+		const parentText = 'L1 List Item';
+		const items = [];
+
+		for (let i = 0; i < 3; i++) {
+			const parentKey = `parent-${i}-${parentOptions[0]}-${parentOptions[1]}`;
+			items.push(html`
+				<d2l-list-item key="${parentKey}" label="${parentText}" ?selectable="${!!parentOptions[0]}" ?draggable="${this.draggable}" ?expandable="${parentOptions[1] && i !== 1}" ?expanded="${parentOptions[1] && i === 0}">
+					<d2l-list-item-content>${parentText}</d2l-list-item-content>
+					${i === 1 || (i === 2 && !parentOptions[1]) ? nothing : html`
+						<d2l-list slot="nested">${nested}</d2l-list>
+					`}
+				</d2l-list-item>
+			`);
+		}
+		return items;
+	}
+}
+
+customElements.define('d2l-demo-list-nested-iterations-helper', ListNestedIterationsHelper);

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

@@ -20,6 +20,9 @@
 			import '../../menu/menu-item.js';
 			import '../../paging/pager-load-more.js';
 			import '../../selection/selection-action.js';
+			import '../../switch/switch.js';
+
+			import './demo-list-nested-iterations-helper.js';
 		</script>
 	</head>
 	<body unresolved>
@@ -222,6 +225,15 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>All Iterations</h2>
+
+			<d2l-demo-snippet full-width>
+				<template>
+					<d2l-switch id="draggable-switch" text="Draggable"></d2l-switch>
+					<d2l-demo-list-nested-iterations-helper></d2l-demo-list-nested-iterations-helper>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 		<script>
@@ -238,6 +250,20 @@
 						setTimeout(() => e.detail.complete(), 2000);
 					});
 				});
+
+				const setupSwitch = () => {
+					const draggableSwitch = document.querySelector('#draggable-switch');
+					if (!draggableSwitch) {
+						setTimeout(setupSwitch, 1000);
+					} else {
+						draggableSwitch.addEventListener('change', (e) => {
+							const listIterations = document.querySelector('d2l-demo-list-nested-iterations-helper');
+							listIterations.draggable = e.target.on;
+						});
+					}
+				};
+
+				setupSwitch();
 			}, 1000);
 		</script>
 

package/custom-elements.json

@@ -3766,6 +3766,12 @@
           "description": "REQUIRED: Unique key to represent this dimension in the filter",
           "type": "string"
         },
+        {
+          "name": "header-text",
+          "description": "A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "introductory-text",
           "description": "The introductory text to display at the top of the filter dropdown",
@@ -3816,6 +3822,13 @@
           "description": "REQUIRED: Unique key to represent this dimension in the filter",
           "type": "string"
         },
+        {
+          "name": "headerText",
+          "attribute": "header-text",
+          "description": "A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "introductoryText",
           "attribute": "introductory-text",
@@ -7592,6 +7605,25 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-list-nested-iterations-helper",
+      "path": "./components/list/demo/demo-list-nested-iterations-helper.js",
+      "attributes": [
+        {
+          "name": "draggable",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "d2l-demo-list-nested-lazy-load",
       "path": "./components/list/demo/demo-list-nested-lazy-load.js"
@@ -9007,14 +9039,6 @@
         }
       ]
     },
-    {
-      "name": "d2l-nested-list-iterations-separate",
-      "path": "./components/list/test/nested-list-iterations-helper.js"
-    },
-    {
-      "name": "d2l-nested-list-iterations-combined",
-      "path": "./components/list/test/nested-list-iterations-helper.js"
-    },
     {
       "name": "d2l-loading-spinner-demo-override",
       "path": "./components/loading-spinner/demo/loading-spinner-override.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.120.0",
+  "version": "2.121.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -61,7 +61,7 @@
     "glob-all": "^3",
     "lit-analyzer": "^1",
     "messageformat-validator": "^2",
-    "node-sass": "^8",
+    "node-sass": "^9",
     "rollup": "^3",
     "rollup-plugin-copy": "^3",
     "rollup-plugin-delete": "^2",