@brightspace-ui/core 2.35.3 → 2.37.0

package/components/empty-state/README.md

@@ -1,26 +1,31 @@
 # Empty State
+
 Empty state components are used to convey that there is no data available to be displayed, or that a search or filter has returned no results.
 
 <!-- docs: demo align:start -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/empty-state/empty-state-simple-button.js';
-  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated-button.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-action-link.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
 </script>
 <style>
 	body {
 		overflow-y: scroll;
 	}
-	d2l-empty-state-illustrated-button,
-	d2l-empty-state-simple-button {
+	d2l-empty-state-illustrated,
+	d2l-empty-state-simple {
 		max-width: 500px;
 		width: 100%;
 	}
 </style>
 
-<d2l-empty-state-simple-button description="There are no assignments to display." action-text="Create an Assignment"></d2l-empty-state-simple-button>
-<d2l-empty-state-illustrated-button illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths"> </d2l-empty-state-illustrated-button>
-
+<d2l-empty-state-simple description="There are no assignments to display.">
+	<d2l-empty-state-action-link text="Create an Assignment" href="#"></d2l-empty-state-action-link>
+</d2l-empty-state-simple>
+<d2l-empty-state-illustrated illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
+	<d2l-empty-state-action-link text="Create Learning Paths" href="#"></d2l-empty-state-action-link>
+</d2l-empty-state-illustrated>
 ```
 
 ## Best Practices
@@ -40,67 +45,102 @@ Empty state components are used to convey that there is no data available to be
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-## Empty State Simple Button [d2l-empty-state-simple-button]
+## Empty State Simple [d2l-empty-state-simple]
 
-The `d2l-empty-state-simple-button` component is an empty state component that displays a description and action button.
+The `d2l-empty-state-simple` component is an empty state component that displays a description. An [empty state action component](#d2l-empty-state-action-button) can be placed inside of the default slot to add an optional action.
 
-<!-- docs: demo live name:d2l-empty-state-simple-button -->
+<!-- docs: demo live name:d2l-empty-state-simple -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/empty-state/empty-state-simple-button.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
 </script>
 
-<d2l-empty-state-simple-button description="There are no assignments to display." action-text="Create an Assignment"></d2l-empty-state-simple-button>
+<d2l-empty-state-simple description="There are no assignments to display."></d2l-empty-state-simple>
 ```
 
-## Empty State Simple Link [d2l-empty-state-simple-link]
+## Empty State Illustrated [d2l-empty-state-illustrated]
+
+The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An [empty state action component](#d2l-empty-state-action-button) can be placed inside of the default slot to add an optional action.
 
-The `d2l-empty-state-simple-link` component is an empty state component that displays a description and action link.
+The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the `illustration` slot. The catalogue of preset empty state illustrations can be found [here](#preset-empty-state-illustrations).
 
-<!-- docs: demo live name:d2l-empty-state-simple-link -->
+<!-- docs: demo live name:d2l-empty-state-illustrated -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/empty-state/empty-state-simple-link.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated.js';
 </script>
-
-<d2l-empty-state-simple-link description="There are no assignments to display." action-text="Create an Assignment" action-href='https://d2l.com'></d2l-empty-state-simple-link>
+<!-- docs: start hidden content -->
+<style>
+	body {
+		overflow-y: scroll;
+	}
+</style>
+<!-- docs: end hidden content -->
+<d2l-empty-state-illustrated illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path."></d2l-empty-state-illustrated>
 ```
-## Empty State Illustrated Button [d2l-empty-state-illustrated-button]
 
-The `d2l-empty-state-illustrated-button` component is an empty state component that displays a title and description with an illustration and action button. The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
+## Empty State Action Button [d2l-empty-state-action-button]
+
+`d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component. Only a single action can be placed within an empty state component. 
+
+The `primary` attribute can be set to render a primary button in place of the default subtle button. Note that the `primary` attribute is only valid when placed within `empty-state-illustrated` components and will have no effect on `empty-state-simple`. 
 
-<!-- docs: demo live name:d2l-empty-state-illustrated-button -->
+<!-- docs: demo live name:d2l-empty-state-action-button -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated-button.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-action-button.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
 </script>
 <!-- docs: start hidden content -->
 <style>
 	body {
 		overflow-y: scroll;
 	}
+	d2l-empty-state-illustrated,
+	d2l-empty-state-simple {
+		max-width: 500px;
+		width: 100%;
+	}
 </style>
 <!-- docs: end hidden content -->
-<d2l-empty-state-illustrated-button illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths"></d2l-empty-state-illustrated-button>
+<d2l-empty-state-simple description="There are no assignments to display.">
+	<d2l-empty-state-action-button text="Create an Assignment"></d2l-empty-state-action-button>
+</d2l-empty-state-simple>
+<d2l-empty-state-illustrated illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
+	<d2l-empty-state-action-button text="Create Learning Paths"></d2l-empty-state-action-button>
+</d2l-empty-state-illustrated>
 ```
 
-## Empty State Illustrated Link [d2l-empty-state-illustrated-link]
+## Empty State Action Link [d2l-empty-state-action-link]
 
-The `d2l-empty-state-illustrated-link` component is an empty state component that displays a title and description with an illustration and action link. The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
+`d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component. Only a single action can be placed within an empty state component.
 
-<!-- docs: demo live name:d2l-empty-state-illustrated-link -->
+<!-- docs: demo live name:d2l-empty-state-action-link -->
 ```html
 <script type="module">
-  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated-link.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-action-link.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-illustrated.js';
+  import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
 </script>
 <!-- docs: start hidden content -->
 <style>
 	body {
 		overflow-y: scroll;
 	}
+	d2l-empty-state-illustrated,
+	d2l-empty-state-simple {
+		max-width: 500px;
+		width: 100%;
+	}
 </style>
 <!-- docs: end hidden content -->
-<d2l-empty-state-illustrated-link illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths" action-href='https://d2l.com'></d2l-empty-state-illustrated-link>
+<d2l-empty-state-simple description="There are no assignments to display.">
+	<d2l-empty-state-action-link text="Create an Assignment" href="#"></d2l-empty-state-action-link>
+</d2l-empty-state-simple>
+<d2l-empty-state-illustrated illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
+	<d2l-empty-state-action-link text="Create Learning Paths" href="#"></d2l-empty-state-action-link>
+</d2l-empty-state-illustrated>
 ```
 
 ## Preset Empty State Illustrations

package/components/empty-state/demo/empty-state.html

@@ -5,46 +5,68 @@
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
+			import '../empty-state-action-button.js';
+			import '../empty-state-action-link.js';
+			import '../empty-state-illustrated.js';
+			import '../empty-state-simple.js';
 			import '../../demo/demo-page.js';
-			import '../empty-state-simple-button.js';
-			import '../empty-state-simple-link.js';
-			import '../empty-state-illustrated-button.js';
-			import '../empty-state-illustrated-link.js';
 		</script>
 	</head>
 	<body unresolved>
 
 		<d2l-demo-page page-title="d2l-empty-state">
 
-			<h2>Empty State Simple Button</h2>
+			<h2>Empty State Simple</h2>
 
+			<h5>No Action</h5>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-empty-state-simple-button description="There are no assignments to display." action-text="Create New Assignment"></d2l-empty-state-simple-button>
+					<d2l-empty-state-simple description="There are no assignments to display."></d2l-empty-state-simple>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Empty State Simple Link</h2>
+			<h5>Empty State Action Button</h5>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-empty-state-simple description="There are no assignments to display.">
+						<d2l-empty-state-action-button text="Create New Assignment"></d2l-empty-state-action-button>
+					</d2l-empty-state-simple>
+				</template>
+			</d2l-demo-snippet>
 
+			<h5>Empty State Action Link</h5>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-empty-state-simple-link description="There are no assignments to display." action-text="Create New Assignment" action-href="https://www.d2l.com/"></d2l-empty-state-simple-link>
+					<d2l-empty-state-simple description="There are no assignments to display.">
+						<d2l-empty-state-action-link text="Create New Assignment" href="https://d2l.com"></d2l-empty-state-action-link>
+					</d2l-empty-state-simple>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Empty State Illustrated Button</h2>
+			<h2>Empty State Illustrated</h2>
 
+			<h5>No Action</h5>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-empty-state-illustrated-button illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths"></d2l-empty-state-illustrated-button>
+					<d2l-empty-state-illustrated illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path."></d2l-empty-state-illustrated>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Empty State Illustrated Link</h2>
+			<h5>Empty State Action Button</h5>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-empty-state-illustrated illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
+						<d2l-empty-state-action-button text="Create Learning Paths" primary></d2l-empty-state-action-button>
+					</d2l-empty-state-illustrated>
+				</template>
+			</d2l-demo-snippet>
 
+			<h5>Empty State Action Link</h5>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-empty-state-illustrated-link illustration-name="desert-road" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path." action-text="Create Learning Paths" action-href="https://www.d2l.com/"></d2l-empty-state-illustrated-link>
+					<d2l-empty-state-illustrated illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
+						<d2l-empty-state-action-link text="Create Learning Paths" href="https://d2l.com"></d2l-empty-state-action-link>
+					</d2l-empty-state-illustrated>
 				</template>
 			</d2l-demo-snippet>
 

package/components/empty-state/empty-state-action-button.js

@@ -0,0 +1,100 @@
+import '../button/button.js';
+import '../button/button-subtle.js';
+import { css, html, LitElement, nothing } from 'lit';
+
+/**
+ * `d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.
+ * @fires d2l-empty-state-action - Dispatched when the action button is clicked
+ */
+class EmptyStateActionButton extends LitElement {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: The action text to be used in the button
+			 * @type {string}
+			 */
+			text: { type: String },
+			/**
+			 * This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components
+			 * @type {boolean}
+			 */
+			primary: { type: Boolean },
+			_illustrated: { state: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+					.d2l-empty-state-action {
+						vertical-align: top;
+					}
+				`;
+	}
+
+	constructor() {
+		super();
+		this._illustrated = false;
+		this._missingTextErrorHasBeenThrown = false;
+		this._validatingTextTimeout = null;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		requestAnimationFrame(() => {
+			const e = new CustomEvent('d2l-empty-state-illustrated-check', {
+				bubbles: true,
+				detail: {}
+			});
+			this.dispatchEvent(e);
+			this._illustrated = e.detail.illustrated | false;
+		});
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._validateText();
+	}
+
+	render() {
+		let actionButton = nothing;
+		if (this.text) {
+			actionButton = this._illustrated && this.primary
+				? html`<d2l-button
+							class="d2l-empty-state-action"
+							@click=${this._handleActionClick}
+							primary>
+								${this.text}
+						</d2l-button>`
+				: html`<d2l-button-subtle
+							class="d2l-empty-state-action"
+							@click=${this._handleActionClick}
+							?slim=${!this._illustrated}
+							text=${this.text}>
+						</d2l-button-subtle>`;
+		}
+		return html`${actionButton}`;
+	}
+
+	_handleActionClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
+	}
+
+	_validateText() {
+		clearTimeout(this._validatingTextTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingTextTimeout = setTimeout(() => {
+			this._validatingTextTimeout = null;
+			const hasText = (typeof this.text === 'string') && this.text.length > 0;
+
+			if (!hasText && !this._missingTextErrorHasBeenThrown) {
+				this._missingTextErrorHasBeenThrown = true;
+				setTimeout(() => { throw new Error('<d2l-empty-state-action-button>: missing required "text" attribute.'); });
+			}
+		}, 3000);
+	}
+
+}
+
+customElements.define('d2l-empty-state-action-button', EmptyStateActionButton);

package/components/empty-state/empty-state-action-link.js

@@ -0,0 +1,73 @@
+import { html, LitElement, nothing } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { linkStyles } from '../link/link.js';
+
+/**
+ * `d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.
+ */
+class EmptyStateActionLink extends LitElement {
+
+	static get properties() {
+		return {
+			/**
+			 * REQUIRED: The action text to be used in the subtle button
+			 * @type {string}
+			 */
+			text: { type: String },
+			/**
+			 * REQUIRED: The action URL or URL fragment of the link
+			 * @type {string}
+			 */
+			href: { type: String },
+		};
+	}
+
+	static get styles() {
+		return [bodyCompactStyles, linkStyles];
+	}
+
+	constructor() {
+		super();
+		this._missingHrefErrorHasBeenThrown = false;
+		this._missingTextErrorHasBeenThrown = false;
+		this._validatingAttributesTimeout = null;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._validateAttributes();
+	}
+
+	render() {
+		const actionLink = this.text && this.href
+			? html`
+				<a class="d2l-body-compact d2l-link" href=${this.href}>${this.text}</a>`
+			: nothing;
+
+		return html`${actionLink}`;
+	}
+
+	_validateAttributes() {
+		clearTimeout(this._validatingAttributesTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingAttributesTimeout = setTimeout(() => {
+			this._validatingAttributesTimeout = null;
+
+			const hasHref = (typeof this.href === 'string') && this.href.length > 0;
+			const hasText = (typeof this.text === 'string') && this.text.length > 0;
+
+			if (!hasHref && !this._missingHrefErrorHasBeenThrown) {
+				this._missingHrefErrorHasBeenThrown = true;
+				setTimeout(() => { throw new Error('<d2l-empty-state-action-link>: missing required "href" attribute.'); });
+			}
+
+			if (!hasText && !this._missingTextErrorHasBeenThrown) {
+				this._missingTextErrorHasBeenThrown = true;
+				setTimeout(() => { throw new Error('<d2l-empty-state-action-link>: missing required "text" attribute.'); });
+			}
+		}, 3000);
+	}
+
+}
+
+customElements.define('d2l-empty-state-action-link', EmptyStateActionLink);

package/components/empty-state/{empty-state-illustrated-mixin.js → empty-state-illustrated.js}

@@ -1,22 +1,24 @@
 import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-styles.js';
-import { html, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { runAsync } from '../../directives/run-async/run-async.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 const illustrationAspectRatio = 500 / 330;
 
-export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(superclass) {
+/**
+ * The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.
+ * @slot - Slot for empty state actions
+ * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
+ */
+class EmptyStateIllustrated extends LitElement {
 
 	static get properties() {
 		return {
-			/**
-			 * The action text to be used in the subtle button
-			 * @type {string}
-			 */
-			actionText: { type: String, attribute: 'action-text' },
 			/**
 			 * REQUIRED: A description giving details about the empty state
 			 * @type {string}
@@ -33,7 +35,6 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 			 */
 			titleText: { type: String, attribute: 'title-text' },
 			_contentHeight: { state: true },
-			_illustratedComponentType: { state: true },
 			_titleSmall: { state: true }
 		};
 	}
@@ -44,7 +45,6 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 
 	constructor() {
 		super();
-
 		this._contentHeight = 330;
 		this._missingDescriptionErrorHasBeenThrown = false;
 		this._missingTitleTextErrorHasBeenThrown = false;
@@ -55,11 +55,13 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 
 	connectedCallback() {
 		super.connectedCallback();
+		this.addEventListener('d2l-empty-state-illustrated-check', this._handleEmptyStateIllustratedCheck);
 		this._resizeObserver.observe(this);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.removeEventListener('d2l-empty-state-illustrated-check', this._handleEmptyStateIllustratedCheck);
 		this._resizeObserver.disconnect();
 	}
 
@@ -68,7 +70,25 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 		this._validateAttributes();
 	}
 
-	async getIllustration(illustrationName) {
+	render() {
+		const illustrationContainerStyle = this._getIllustrationContainerStyle();
+		const titleClass = this._getTitleClass();
+
+		return html`
+			${this.illustrationName
+		? html`
+			<div style="${styleMap(illustrationContainerStyle)}">
+				${runAsync(this.illustrationName, () => this._getIllustration(this.illustrationName), { success: (illustration) => illustration }, { pendingState: false })}
+			</div>`
+		: html`<slot class="illustration-slot" name="illustration"></slot>`}
+
+			<p class="${classMap(titleClass)}">${this.titleText}</p>
+			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
+			<slot class="action-slot"></slot>
+		`;
+	}
+
+	async _getIllustration(illustrationName) {
 		if (!illustrationName) return;
 
 		const svg = await loadSvg(illustrationName);
@@ -78,13 +98,13 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 		return svg ? html`${unsafeSVG(svg.val)}` : nothing;
 	}
 
-	getIllustrationContainerStyle() {
+	_getIllustrationContainerStyle() {
 		return {
 			height: `${this._contentHeight}px`,
 		};
 	}
 
-	getTitleClass() {
+	_getTitleClass() {
 		return {
 			'd2l-empty-state-title': true,
 			'd2l-empty-state-title-small': this._titleSmall,
@@ -92,6 +112,11 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 		};
 	}
 
+	_handleEmptyStateIllustratedCheck(e) {
+		e.stopPropagation();
+		e.detail.illustrated = true;
+	}
+
 	_onResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];
@@ -110,17 +135,19 @@ export const EmptyStateIllustratedMixin = superclass => class extends RtlMixin(s
 			if (!hasTitleText && !this._missingTitleTextErrorHasBeenThrown) {
 				this._missingTitleTextErrorHasBeenThrown = true;
 				setTimeout(() => {
-					throw new Error(`<d2l-empty-state-illustrated-${this._illustratedComponentType}>: missing required "titleText" attribute.`);
+					throw new Error('<d2l-empty-state-illustrated>: missing required "titleText" attribute.');
 				});
 			}
 
 			if (!hasDescription && !this._missingDescriptionErrorHasBeenThrown) {
 				this._missingDescriptionErrorHasBeenThrown = true;
 				setTimeout(() => {
-					throw new Error(`<d2l-empty-state-illustrated-${this._illustratedComponentType}>: missing required "description" attribute.`);
+					throw new Error('<d2l-empty-state-illustrated>: missing required "description" attribute.');
 				});
 			}
 		}, 3000);
 	}
 
-};
+}
+
+customElements.define('d2l-empty-state-illustrated', EmptyStateIllustrated);

package/components/empty-state/{empty-state-simple-button.js → empty-state-simple.js}

@@ -1,22 +1,17 @@
 import '../button/button-subtle.js';
 import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 /**
- * The `d2l-empty-state-simple-button` component is an empty state component that displays a description and action button.
- * @fires d2l-empty-state-action - Dispatched when the action button is clicked
+ * The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.
+ * @slot - Slot for empty state actions
  */
-class EmptyStateSimpleButton extends RtlMixin(LitElement) {
+class EmptyStateSimple extends RtlMixin(LitElement) {
 
 	static get properties() {
 		return {
-			/**
-			 * The action text to be used in the subtle button
-			 * @type {string}
-			 */
-			actionText: { type: String, attribute: 'action-text' },
 			/**
 			 * REQUIRED: A description giving details about the empty state
 			 * @type {string}
@@ -41,28 +36,12 @@ class EmptyStateSimpleButton extends RtlMixin(LitElement) {
 	}
 
 	render() {
-		const actionButton = this.actionText
-			? html`
-				<d2l-button-subtle
-					class="d2l-empty-state-action"
-					@click=${this._handleActionClick}
-					h-align="text"
-					text=${this.actionText}
-					slim>
-				</d2l-button-subtle>`
-			: nothing;
-
 		return html`
 			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
-			${actionButton}
+			<slot class="action-slot"></slot>
 		`;
 	}
 
-	_handleActionClick(e) {
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
-	}
-
 	_validateDescription() {
 		clearTimeout(this._validatingDescriptionTimeout);
 		// don't error immediately in case it doesn't get set immediately
@@ -72,11 +51,11 @@ class EmptyStateSimpleButton extends RtlMixin(LitElement) {
 
 			if (!hasDescription && !this._missingDescriptionErrorHasBeenThrown) {
 				this._missingDescriptionErrorHasBeenThrown = true;
-				setTimeout(() => { throw new Error('<d2l-empty-state-simple-button>: missing required "description" attribute.'); });
+				setTimeout(() => { throw new Error('<d2l-empty-state-simple>: missing required "description" attribute.'); });
 			}
 		}, 3000);
 	}
 
 }
 
-customElements.define('d2l-empty-state-simple-button', EmptyStateSimpleButton);
+customElements.define('d2l-empty-state-simple', EmptyStateSimple);

package/components/empty-state/empty-state-styles.js

@@ -14,6 +14,15 @@ export const emptyStateStyles = css`
 		display: none;
 	}
 
+	.action-slot::slotted(*) {
+		display: none;
+	}
+
+	.action-slot::slotted(d2l-empty-state-action-button:first-child),
+	.action-slot::slotted(d2l-empty-state-action-link:first-child) {
+		display: inline-block;
+	}
+
 `;
 
 export const emptyStateSimpleStyles = css`
@@ -28,10 +37,6 @@ export const emptyStateSimpleStyles = css`
 		padding-right: 0.5rem;
 	}
 
-	.d2l-empty-state-action {
-		vertical-align: top;
-	}
-
 `;
 
 export const emptyStateIllustratedStyles = css`
@@ -40,12 +45,16 @@ export const emptyStateIllustratedStyles = css`
 		text-align: center;
 	}
 
-	.d2l-empty-state-action {
-		margin-top: 0.5rem;
+	.illustration-slot::slotted(*) {
+		display: none;
 	}
 
-	.d2l-empty-state-description {
-		margin: 0 auto 0.3rem;
+	.illustration-slot::slotted(svg:first-of-type) {
+		display: inline-block;
+	}
+
+	svg {
+		height: 100%;
 		max-width: 500px;
 		width: 100%;
 	}
@@ -67,16 +76,8 @@ export const emptyStateIllustratedStyles = css`
 		margin-top: 0.5rem;
 	}
 
-	::slotted(*) {
-		display: none;
-	}
-
-	::slotted(svg:first-child) {
-		display: inline-block;
-	}
-
-	svg {
-		height: 100%;
+	.d2l-empty-state-description {
+		margin: 0 auto 0.8rem;
 		max-width: 500px;
 		width: 100%;
 	}

package/components/html-block/demo/html-block.html

@@ -122,6 +122,18 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (inline, no-deferred-rendering)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<span>Here's an inline html-block:</span>
+					<d2l-html-block inline no-deferred-rendering>
+						I'm inline!
+					</d2l-html-block>
+					<span>Pretty cool!</span>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (large font)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -160,14 +160,14 @@ class HtmlBlock extends RtlMixin(LitElement) {
 				overflow-y: hidden;
 				text-align: left;
 			}
-			:host([hidden]),
-			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
-				display: none;
-			}
 			:host([inline]),
 			:host([inline]) div.d2l-html-block-rendered {
 				display: inline;
 			}
+			:host([hidden]),
+			:host([no-deferred-rendering]) div.d2l-html-block-rendered {
+				display: none;
+			}
 			:host([dir="rtl"]) {
 				text-align: right;
 			}

package/custom-elements.json

@@ -2975,96 +2975,81 @@
       "path": "./components/dropdown/test/dropdown-component.js"
     },
     {
-      "name": "d2l-empty-state-illustrated-button",
-      "path": "./components/empty-state/empty-state-illustrated-button.js",
-      "description": "The `d2l-empty-state-illustrated-button` component is an empty state component that displays an illustration and action button. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.",
+      "name": "d2l-empty-state-action-button",
+      "path": "./components/empty-state/empty-state-action-button.js",
+      "description": "`d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component.",
       "attributes": [
         {
-          "name": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button",
-          "type": "boolean"
-        },
-        {
-          "name": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
-        },
-        {
-          "name": "illustration-name",
-          "description": "The name of the preset image you would like to display in the component",
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the button",
           "type": "string"
         },
         {
-          "name": "title-text",
-          "description": "REQUIRED: A title for the empty state",
-          "type": "string"
+          "name": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "type": "boolean"
         }
       ],
       "properties": [
         {
-          "name": "primary",
-          "attribute": "primary",
-          "description": "This will change the action button to use a primary button instead of the default subtle button",
-          "type": "boolean"
-        },
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "attribute": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
-        },
-        {
-          "name": "illustrationName",
-          "attribute": "illustration-name",
-          "description": "The name of the preset image you would like to display in the component",
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the button",
           "type": "string"
         },
         {
-          "name": "titleText",
-          "attribute": "title-text",
-          "description": "REQUIRED: A title for the empty state",
-          "type": "string"
+          "name": "primary",
+          "attribute": "primary",
+          "description": "This will change the action button to use a primary button instead of the default subtle button. The primary attribute is only valid when `d2l-empty-state-action-button` is placed within `d2l-empty-state-illustrated` components",
+          "type": "boolean"
         }
       ],
       "events": [
         {
           "name": "d2l-empty-state-action",
           "description": "Dispatched when the action button is clicked"
-        }
-      ],
-      "slots": [
+        },
         {
-          "name": "",
-          "description": "Custom SVG content if `illustration-name` property is not set"
+          "name": "d2l-empty-state-illustrated-check"
         }
       ]
     },
     {
-      "name": "d2l-empty-state-illustrated-link",
-      "path": "./components/empty-state/empty-state-illustrated-link.js",
-      "description": "The `d2l-empty-state-illustrated-link` component is an empty state component that displays an illustration and action link. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.",
+      "name": "d2l-empty-state-action-link",
+      "path": "./components/empty-state/empty-state-action-link.js",
+      "description": "`d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component.",
       "attributes": [
         {
-          "name": "action-href",
-          "description": "The action URL or URL fragment of the link",
+          "name": "text",
+          "description": "REQUIRED: The action text to be used in the subtle button",
           "type": "string"
         },
         {
-          "name": "action-text",
-          "description": "The action text to be used in the subtle button",
+          "name": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: The action text to be used in the subtle button",
           "type": "string"
         },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "REQUIRED: The action URL or URL fragment of the link",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "d2l-empty-state-illustrated",
+      "path": "./components/empty-state/empty-state-illustrated.js",
+      "description": "The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An empty state action component can be placed inside of the default slot to add an optional action.",
+      "attributes": [
         {
           "name": "description",
           "description": "REQUIRED: A description giving details about the empty state",
@@ -3082,18 +3067,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "actionHref",
-          "attribute": "action-href",
-          "description": "The action URL or URL fragment of the link",
-          "type": "string"
-        },
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
         {
           "name": "description",
           "attribute": "description",
@@ -3116,20 +3089,19 @@
       "slots": [
         {
           "name": "",
-          "description": "Custom SVG content if `illustration-name` property is not set"
+          "description": "Slot for empty state actions"
+        },
+        {
+          "name": "illustration",
+          "description": "Slot for custom SVG content if `illustration-name` property is not set"
         }
       ]
     },
     {
-      "name": "d2l-empty-state-simple-button",
-      "path": "./components/empty-state/empty-state-simple-button.js",
-      "description": "The `d2l-empty-state-simple-button` component is an empty state component that displays a description and action button.",
+      "name": "d2l-empty-state-simple",
+      "path": "./components/empty-state/empty-state-simple.js",
+      "description": "The `d2l-empty-state-simple` component is an empty state component that displays a description. An empty state action component can be placed inside of the default slot to add an optional action.",
       "attributes": [
-        {
-          "name": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
         {
           "name": "description",
           "description": "REQUIRED: A description giving details about the empty state",
@@ -3137,12 +3109,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the subtle button",
-          "type": "string"
-        },
         {
           "name": "description",
           "attribute": "description",
@@ -3150,52 +3116,10 @@
           "type": "string"
         }
       ],
-      "events": [
-        {
-          "name": "d2l-empty-state-action",
-          "description": "Dispatched when the action button is clicked"
-        }
-      ]
-    },
-    {
-      "name": "d2l-empty-state-simple-link",
-      "path": "./components/empty-state/empty-state-simple-link.js",
-      "description": "The `d2l-empty-state-simple-link` component is an empty state component that displays a description and action link.",
-      "attributes": [
-        {
-          "name": "action-href",
-          "description": "The action URL or URL fragment of the link",
-          "type": "string"
-        },
-        {
-          "name": "action-text",
-          "description": "The action text to be used in the link",
-          "type": "string"
-        },
-        {
-          "name": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
-        }
-      ],
-      "properties": [
-        {
-          "name": "actionHref",
-          "attribute": "action-href",
-          "description": "The action URL or URL fragment of the link",
-          "type": "string"
-        },
-        {
-          "name": "actionText",
-          "attribute": "action-text",
-          "description": "The action text to be used in the link",
-          "type": "string"
-        },
+      "slots": [
         {
-          "name": "description",
-          "attribute": "description",
-          "description": "REQUIRED: A description giving details about the empty state",
-          "type": "string"
+          "name": "",
+          "description": "Slot for empty state actions"
         }
       ]
     },

package/helpers/mathjax.js

@@ -4,7 +4,7 @@
  */
 
 const mathjaxContextAttribute = 'data-mathjax-context';
-const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.1.2';
+const mathjaxBaseUrl = 'https://s.brightspace.com/lib/mathjax/3.2.2';
 
 const mathjaxFontMappings = new Map([
 	['MJXTEX', 'MathJax_Main-Regular'],
@@ -31,6 +31,7 @@ const mathjaxFontMappings = new Map([
 ]);
 
 let mathJaxLoaded;
+let renderingPromise = Promise.resolve();
 
 export class HtmlBlockMathRenderer {
 
@@ -70,7 +71,8 @@ export class HtmlBlockMathRenderer {
 			});
 
 			await window.MathJax.startup.promise;
-			window.MathJax.typesetShadow(elem.getRootNode(), elem);
+			renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
+			await renderingPromise;
 			return elem;
 		}
 
@@ -82,8 +84,10 @@ export class HtmlBlockMathRenderer {
 		temp.shadowRoot.innerHTML = `<div><mjx-doc><mjx-head></mjx-head><mjx-body>${inner}</mjx-body></mjx-doc></div>`;
 
 		elem.appendChild(temp);
+
 		await window.MathJax.startup.promise;
-		window.MathJax.typesetShadow(temp.shadowRoot);
+		renderingPromise = renderingPromise.then(() => window.MathJax.typesetShadow(temp.shadowRoot));
+		await renderingPromise;
 
 		return temp.shadowRoot.firstChild;
 	}
@@ -94,13 +98,9 @@ export function loadMathJax(mathJaxConfig) {
 
 	if (mathJaxLoaded) return mathJaxLoaded;
 
-	const loadOptions = ['ui/menu'];
-	if (mathJaxConfig && mathJaxConfig.renderLatex) {
-		loadOptions.push('[tex]/all-packages');
-	}
-
 	window.MathJax = {
 		chtml: {
+			adaptiveCSS: false,
 			scale: (mathJaxConfig && mathJaxConfig.outputScale) || 1
 		},
 		options: {
@@ -108,7 +108,7 @@ export function loadMathJax(mathJaxConfig) {
 				settings: { zoom: 'None' }
 			}
 		},
-		loader: { load: loadOptions },
+		loader: { load: ['ui/menu'] },
 		startup: {
 			ready: () => {
 
@@ -188,15 +188,15 @@ export function loadMathJax(mathJaxConfig) {
 				//  renders the document.  The MathDocument is returned in case
 				//  you need to rerender the shadowRoot later.
 				//
-				window.MathJax.typesetShadow = function(root, elem) {
+				window.MathJax.typesetShadow = async function(root, elem) {
 					const InputJax = startup.getInputJax();
 					const OutputJax = startup.getOutputJax();
 					const html = mathjax.document(root, { InputJax, OutputJax });
 
 					if (elem) html.options.elements = [elem];
 
-					html.render().typeset();
-					return html;
+					await mathjax.handleRetriesFor(() => html.render());
+					html.typeset();
 				};
 
 				//

package/package.json

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

package/components/empty-state/empty-state-illustrated-button.js

@@ -1,71 +0,0 @@
-import '../button/button.js';
-import '../button/button-subtle.js';
-import { html, LitElement, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { EmptyStateIllustratedMixin } from './empty-state-illustrated-mixin.js';
-import { runAsync } from '../../directives/run-async/run-async.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-/**
- * The `d2l-empty-state-illustrated-button` component is an empty state component that displays an illustration and action button. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
- * @fires d2l-empty-state-action - Dispatched when the action button is clicked
- * @slot - Custom SVG content if `illustration-name` property is not set
- */
-class EmptyStateIllustratedButton extends EmptyStateIllustratedMixin(LitElement) {
-
-	static get properties() {
-		return {
-			/**
-			 * This will change the action button to use a primary button instead of the default subtle button
-			 * @type {boolean}
-			 */
-			primary: { type: Boolean },
-		};
-	}
-
-	constructor() {
-		super();
-		this._illustratedComponentType = 'button';
-	}
-
-	render() {
-		const illustrationContainerStyle = this.getIllustrationContainerStyle();
-		const titleClass = this.getTitleClass();
-
-		let actionButton = nothing;
-		if (this.actionText) {
-			actionButton = this.primary
-				? html`<d2l-button
-							class="d2l-empty-state-action"
-							@click=${this._handleActionClick}
-							primary>${this.actionText}
-						</d2l-button>`
-				: html`<d2l-button-subtle
-							class="d2l-empty-state-action"
-							@click=${this._handleActionClick}
-							text=${this.actionText}>
-						</d2l-button-subtle>`;
-		}
-
-		return html`
-			${this.illustrationName
-		? html`
-			<div style="${styleMap(illustrationContainerStyle)}">
-				${runAsync(this.illustrationName, () => this.getIllustration(this.illustrationName), { success: (illustration) => illustration }, { pendingState: false })}
-			</div>`
-		: html`<slot></slot>`}
-
-			<p class="${classMap(titleClass)}">${this.titleText}</p>
-			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
-			${actionButton}
-		`;
-	}
-
-	_handleActionClick(e) {
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
-	}
-
-}
-
-customElements.define('d2l-empty-state-illustrated-button', EmptyStateIllustratedButton);

package/components/empty-state/empty-state-illustrated-link.js

@@ -1,57 +0,0 @@
-import { html, LitElement, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { EmptyStateIllustratedMixin } from './empty-state-illustrated-mixin.js';
-import { linkStyles } from '../link/link.js';
-import { runAsync } from '../../directives/run-async/run-async.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-/**
- * The `d2l-empty-state-illustrated-link` component is an empty state component that displays an illustration and action link. The illustration property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the default slot.
- * @slot - Custom SVG content if `illustration-name` property is not set
- */
-class EmptyStateIllustratedLink extends EmptyStateIllustratedMixin(LitElement) {
-
-	static get properties() {
-		return {
-			/**
-			 * The action URL or URL fragment of the link
-			 * @type {string}
-			 */
-			actionHref: { type: String, attribute: 'action-href' },
-		};
-	}
-
-	static get styles() {
-		return [super.styles, linkStyles];
-	}
-
-	constructor() {
-		super();
-		this._illustratedComponentType = 'link';
-	}
-
-	render() {
-		const illustrationContainerStyle = this.getIllustrationContainerStyle();
-		const titleClass = this.getTitleClass();
-
-		const actionLink = this.actionText && this.actionHref
-			? html`<a class="d2l-body-compact d2l-empty-state-action d2l-link" href=${this.actionHref}>${this.actionText}</a>`
-			: nothing;
-
-		return html`
-			${this.illustrationName
-		? html`
-			<div style="${styleMap(illustrationContainerStyle)}">
-				${runAsync(this.illustrationName, () => this.getIllustration(this.illustrationName), { success: (illustration) => illustration }, { pendingState: false })}
-			</div>`
-		: html`<slot></slot>`}
-
-			<p class="${classMap(titleClass)}">${this.titleText}</p>
-			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
-			${actionLink}
-		`;
-	}
-
-}
-
-customElements.define('d2l-empty-state-illustrated-link', EmptyStateIllustratedLink);

package/components/empty-state/empty-state-simple-link.js

@@ -1,74 +0,0 @@
-import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
-import { html, LitElement, nothing } from 'lit';
-import { bodyCompactStyles } from '../typography/styles.js';
-import { linkStyles } from '../link/link.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
-
-/**
- * The `d2l-empty-state-simple-link` component is an empty state component that displays a description and action link.
- */
-class EmptyStateSimpleLink extends RtlMixin(LitElement) {
-
-	static get properties() {
-		return {
-			/**
-			 * The action URL or URL fragment of the link
-			 * @type {string}
-			 */
-			actionHref: { type: String, attribute: 'action-href' },
-			/**
-			 * The action text to be used in the link
-			 * @type {string}
-			 */
-			actionText: { type: String, attribute: 'action-text' },
-			/**
-			 * REQUIRED: A description giving details about the empty state
-			 * @type {string}
-			 */
-			description: { type: String }
-		};
-	}
-
-	static get styles() {
-		return [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles, linkStyles];
-	}
-
-	constructor() {
-		super();
-		this._missingDescriptionErrorHasBeenThrown =  false;
-		this._validatingDescriptionTimeout = null;
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		this._validateDescription();
-	}
-
-	render() {
-		const actionLink = this.actionText && this.actionHref
-			? html`<a class="d2l-body-compact d2l-link" href=${this.actionHref}>${this.actionText}</a>`
-			: nothing;
-
-		return html`
-			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
-			${actionLink}
-		`;
-	}
-
-	_validateDescription() {
-		clearTimeout(this._validatingDescriptionTimeout);
-		// don't error immediately in case it doesn't get set immediately
-		this._validatingDescriptionTimeout = setTimeout(() => {
-			this._validatingDescriptionTimeout = null;
-			const hasDescription = (typeof this.description === 'string') && this.description.length > 0;
-
-			if (!hasDescription && !this._missingDescriptionErrorHasBeenThrown) {
-				this._missingDescriptionErrorHasBeenThrown = true;
-				setTimeout(() => { throw new Error('<d2l-empty-state-simple-link>: missing required "description" attribute.'); });
-			}
-		}, 3000);
-	}
-
-}
-
-customElements.define('d2l-empty-state-simple-link', EmptyStateSimpleLink);