@brightspace-ui/core 3.173.1 → 3.174.0

package/components/demo/demo-flags.js

@@ -0,0 +1,10 @@
+import { mockFlag } from '../../helpers/flags.js';
+
+const urlParams = new URLSearchParams(window.location.search);
+
+urlParams.forEach((value, key) => {
+	if (!key.startsWith('demo-flag-')) return;
+	key = key.substring(10);
+	if (value?.toLowerCase?.() === 'true') mockFlag(key, true);
+	else if (value?.toLowerCase?.() === 'false') mockFlag(key, false);
+});

package/components/demo/demo-page.js

@@ -1,11 +1,17 @@
+import './demo-flags.js';
+import '../button/button.js';
 import './demo-snippet.js';
+import '../inputs/input-checkbox-group.js';
+import '../inputs/input-checkbox.js';
 import './code-view.js';
+import '../collapsible-panel/collapsible-panel.js';
+import '../collapsible-panel/collapsible-panel-summary-item.js';
 import '../colors/colors.js';
 import '../typography/typography.js';
 import { css, html, LitElement } from 'lit';
 import { getDocumentLocaleSettings, supportedLocalesDetails } from '@brightspace-ui/intl/lib/common.js';
+import { getFlagOverrides, getKnownFlags } from '../../helpers/flags.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { heading2Styles } from '../typography/styles.js';
 import { inputLabelStyles } from '../inputs/input-label-styles.js';
 import { selectStyles } from '../inputs/input-select-styles.js';
 
@@ -32,7 +38,7 @@ class DemoPage extends LitElement {
 	}
 
 	static get styles() {
-		return [ heading2Styles, inputLabelStyles, selectStyles, css`
+		return [ inputLabelStyles, selectStyles, css`
 			:host {
 				background-color: var(--d2l-color-sylvite);
 				display: block;
@@ -49,9 +55,8 @@ class DemoPage extends LitElement {
 				margin-bottom: 1.5rem;
 				max-width: 900px;
 			}
-			.d2l-heading-2 {
-				flex-grow: 1;
-				margin: 0;
+			d2l-collapsible-panel {
+				width: 100%;
 			}
 			.d2l-input-label {
 				margin-bottom: 0;
@@ -68,20 +73,36 @@ class DemoPage extends LitElement {
 			.d2l-demo-page-content > ::slotted(d2l-demo-snippet) {
 				margin-bottom: 36px;
 			}
+
+			#applyFlagsButton {
+				margin-block-start: 1rem;
+			}
 		`];
 	}
 
+	constructor() {
+		super();
+		this.#handleFlagsKnownBound = this.#handleFlagsKnown.bind(this);
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		const title = document.createElement('title');
 		title.textContent = this.pageTitle;
 		document.head.insertBefore(title, document.head.firstChild);
+		document.addEventListener('d2l-flags-known', this.#handleFlagsKnownBound);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener('d2l-flags-known', this.#handleFlagsKnownBound);
 	}
 
 	render() {
 		const classes = {
 			'no-scroll': this._noScroll
 		};
+
 		let selectedLanguageCode = getDocumentLocaleSettings().language;
 		if (selectedLanguageCode === 'en') selectedLanguageCode = 'en-us';
 		let foundSelected = false;
@@ -90,21 +111,79 @@ class DemoPage extends LitElement {
 			foundSelected = foundSelected || selected;
 			return html`<option value="${l.code}" ?selected="${selected}">${l.code} - ${l.name}</option>`;
 		});
+
+		const knownFlags = this.#getKnownFlagsSorted();
+		const knownFlagCheckboxes = [];
+		knownFlags.forEach((knownFlag, key) => {
+			knownFlagCheckboxes.push(html`<d2l-input-checkbox label="${key}" data-flag-key="${key}" ?checked="${knownFlag.value}"></d2l-input-checkbox>`);
+		});
+
+		const flagOverrides = getFlagOverrides();
+		const flagOverrideItems = [];
+		flagOverrides.forEach((value, key) => {
+			const knownFlag = knownFlags.get(key);
+			const defaultValue = knownFlag ? knownFlag.defaultValue : 'unknown';
+			flagOverrideItems.push(html`<d2l-collapsible-panel-summary-item slot="summary" text="${key} (default: ${defaultValue}; override: ${value})"></d2l-collapsible-panel-summary-item>`);
+		});
+
 		return html`
 			<header>
-				<h1 class="d2l-heading-2">${this.pageTitle}</h1>
-				<label class="d2l-input-label">
-					Language: 
-					<select class="d2l-input-select" @change="${this._handleLanguageChange}">${languageOptions}</select>
-				</label>
+				<d2l-collapsible-panel panel-title="${this.pageTitle}" heading-level="1" heading-style="3" type="subtle">
+					<label class="d2l-input-label" slot="actions">
+						Language:
+						<select class="d2l-input-select" @change="${this.#handleLanguageChange}">${languageOptions}</select>
+					</label>
+					${knownFlagCheckboxes.length > 0 ? html`
+						<d2l-input-checkbox-group id="flagsCheckboxGroup" label="Flags">
+							${knownFlagCheckboxes}
+						</d2l-input-checkbox-group>
+						<d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply</d2l-button>
+					` : 'No known flags'}
+					${flagOverrideItems}
+				</d2l-collapsible-panel>
 			</header>
 			<main class="${classMap(classes)}">
-				<div class="d2l-demo-page-content" @d2l-demo-snippet-fullscreen-toggle="${this._handleFullscreenToggle}"><slot></slot></div>
+				<div class="d2l-demo-page-content" @d2l-demo-snippet-fullscreen-toggle="${this.#handleFullscreenToggle}"><slot></slot></div>
 			</main>
 		`;
 	}
 
-	async _handleFullscreenToggle() {
+	#handleFlagsKnownBound;
+
+	#getKnownFlagsSorted() {
+		return new Map([...getKnownFlags().entries()].sort((entry1, entry2) => {
+			const key1 = entry1[0].toLowerCase();
+			const key2 = entry2[0].toLowerCase();
+			if (key1 < key2) return -1;
+			else if (key1 > key2) return 1;
+			else return 0;
+		}));
+	}
+
+	#handleApplyFlagsClick() {
+		const urlParams = new URLSearchParams(window.location.search);
+		const elems = [...this.shadowRoot.querySelectorAll('#flagsCheckboxGroup > d2l-input-checkbox')];
+
+		const knownFlags = getKnownFlags();
+		elems.forEach(elem => {
+			const key = elem.dataset.flagKey;
+			const flag = knownFlags.get(key);
+
+			if (flag.defaultValue === elem.checked) {
+				urlParams.delete(`demo-flag-${key}`);
+			} else if (flag.defaultValue !== elem.checked) {
+				urlParams.set(`demo-flag-${key}`, elem.checked);
+			}
+		});
+
+		window.location.search = urlParams.toString();
+	}
+
+	#handleFlagsKnown() {
+		this.requestUpdate();
+	}
+
+	async #handleFullscreenToggle() {
 		if (this._noScroll) {
 			this._noScroll = false;
 			await this.updateComplete;
@@ -116,7 +195,7 @@ class DemoPage extends LitElement {
 		}
 	}
 
-	_handleLanguageChange(e) {
+	#handleLanguageChange(e) {
 		const newLanguageCode = e.target[e.target.selectedIndex].value;
 		document.documentElement.dir = newLanguageCode === 'ar-sa' ? 'rtl' : 'ltr';
 		document.documentElement.lang = newLanguageCode;

package/components/dropdown/demo/dropdown-menu.html

@@ -5,13 +5,6 @@
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script>
-		const urlParams = new URLSearchParams(window.location.search);
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
-			if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
-			return false;
-		} } } } } };
-	</script>
 	<script type="module">
 		import '../../demo/demo-page.js';
 		import '../../menu/menu.js';

package/components/dropdown/demo/dropdown-tabs.html

@@ -5,13 +5,6 @@
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script>
-		const urlParams = new URLSearchParams(window.location.search);
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
-			if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
-			return false;
-		} } } } } };
-	</script>
 	<script type="module">
 		import '../../demo/demo-page.js';
 		import '../../tabs/tabs.js';

package/components/dropdown/demo/dropdown.html

@@ -4,13 +4,6 @@
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script>
-		const urlParams = new URLSearchParams(window.location.search);
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
-			if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
-			return false;
-		} } } } } };
-	</script>
 	<script type="module">
 		import '../../demo/demo-page.js';
 		import '../../button/button.js';

package/components/filter/demo/filter.html

@@ -3,13 +3,6 @@
 
 <head>
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script>
-		const urlParams = new URLSearchParams(window.location.search);
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
-			if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
-			return false;
-		} } } } } };
-	</script>
 	<script type="module">
 		import '../../demo/demo-page.js';
 		import '../../button/button.js';

package/components/inputs/demo/input-date.html

@@ -4,13 +4,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script>
-			const urlParams = new URLSearchParams(window.location.search);
-			window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
-				if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
-				return false;
-			} } } } } };
-		</script>
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../input-date.js';

package/components/menu/demo/menu.html

@@ -4,12 +4,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import { mockFlag } from '../../../helpers/flags.js';
-			const urlParams = new URLSearchParams(window.location.search);
-			mockFlag('GAUD-8295-menu-item-link-new-window-icon', urlParams.get('link-new-window-icon') === 'true');
-			mockFlag('GAUD-8369-menu-item-link-click-changes', urlParams.get('link-click-changes') === 'true');
-		</script>
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import './custom-menu-item.js';

package/components/scroll-wrapper/demo/scroll-wrapper.html

@@ -4,11 +4,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import { mockFlag } from '../../../helpers/flags.js';
-			const urlParams = new URLSearchParams(window.location.search);
-			mockFlag('GAUD-8263-scroll-wrapper-media-print', urlParams.get('media-query-print') === 'true');
-		</script>
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import './scroll-wrapper-test.js';

package/components/table/demo/table.html

@@ -4,11 +4,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import { mockFlag } from '../../../helpers/flags.js';
-			const urlParams = new URLSearchParams(window.location.search);
-			mockFlag('GAUD-8263-scroll-wrapper-media-print', urlParams.get('media-query-print') === 'true');
-		</script>
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import './table-test.js';

package/components/tooltip/demo/tooltip.html

@@ -6,14 +6,9 @@
 	<meta charset="UTF-8">
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 	<script type="module">
-		import { mockFlag } from '../../../helpers/flags.js';
-		const urlParams = new URLSearchParams(window.location.search);
-		mockFlag('GAUD-7355-tooltip-popover', urlParams.get('popover') === 'true');
-	</script>
-	<script type="module">
+		import '../../demo/demo-page.js';
 		import '../../button/button.js';
 		import '../../colors/colors.js';
-		import '../../demo/demo-page.js';
 		import '../../icons/icon-custom.js';
 		import '../../inputs/input-text.js';
 		import '../../link/link.js';

package/helpers/README.md

@@ -117,6 +117,23 @@ getFirstVisibleAncestor(node)
 querySelectorComposed(node, selector)
 ```
 
+## Flags
+
+Helper functions to get and mock flag values.
+
+```js
+import { ... } from '@brightspace-ui/core/helpers/flags.js';
+
+// returns the flag's mocked, configured, or default value
+getFlag(key, defaultValue);
+
+// for demos & tests, sets a mocked value for a flag, to be returned by getFlag
+mockFlag(key, value);
+
+// for demos & tests, removes the mocked value for a flag, so that getFlag returns the configured or default value
+resetFlag(key);
+```
+
 ## Focus
 
 Focus helper functions to easily select focusable DOM nodes

package/helpers/flags.js

@@ -1,16 +1,45 @@
+const knownFlags = new Map();
 const flagOverrides = new Map();
 
 export function getFlag(key, defaultValue) {
+	let value;
 	if (flagOverrides.has(key)) {
-		return flagOverrides.get(key);
+		value = flagOverrides.get(key);
+	} else {
+		value = globalThis.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;
 	}
-	return globalThis.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;
+	addKnownFlag(key, value, defaultValue);
+	return value;
+}
+
+export function getFlagOverrides() {
+	return flagOverrides;
+}
+
+export function getKnownFlags() {
+	return knownFlags;
 }
 
 export function mockFlag(key, value) {
+	if (knownFlags.has(key)) console.warn(`mockFlag called after getFlag for '${key}'. This is likely to result in unexpected behaviour.`);
 	flagOverrides.set(key, value);
 }
 
 export function resetFlag(key) {
 	flagOverrides.delete(key);
 }
+
+let dispatchingKnownFlags = false;
+
+function addKnownFlag(key, value, defaultValue) {
+	if (!knownFlags.has(key)) knownFlags.set(key, { value, defaultValue });
+
+	if (dispatchingKnownFlags) return;
+	dispatchingKnownFlags = true;
+	setTimeout(() => {
+		globalThis.document.dispatchEvent(new CustomEvent('d2l-flags-known', {
+			detail: { flagOverrides, knownFlags }
+		}));
+		dispatchingKnownFlags = false;
+	});
+}

package/package.json

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