@brightspace-ui/core 3.321.3 → 3.323.0

package/components/empty-state/README.md

@@ -158,16 +158,16 @@ To add the link, place a `d2l-empty-state-action-link` component inside of the d
 
 | Illustration | Name |
 | :---: | :--- |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/assembly-line.svg?sanitize=true) | assembly-line |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/blueprint.svg?sanitize=true) | blueprint |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/calendar.svg?sanitize=true) | calendar |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/cat-computer.svg?sanitize=true) | cat-computer |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/checklist.svg?sanitize=true) | checklist |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/data-tracking.svg?sanitize=true) | data-tracking |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/desert-road.svg?sanitize=true) | desert-road |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/fish-hook.svg?sanitize=true) | fish-hook |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/oven.svg?sanitize=true) | oven |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/pipeline.svg?sanitize=true) | pipeline |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/race.svg?sanitize=true) | race |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/rockets.svg?sanitize=true) | rockets |
-| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/empty-state/images/tumbleweed.svg?sanitize=true) | tumbleweed |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/assembly-line.svg?sanitize=true) | assembly-line |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/blueprint.svg?sanitize=true) | blueprint |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/calendar.svg?sanitize=true) | calendar |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/cat-computer.svg?sanitize=true) | cat-computer |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/checklist.svg?sanitize=true) | checklist |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/data-tracking.svg?sanitize=true) | data-tracking |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/desert-road.svg?sanitize=true) | desert-road |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/fish-hook.svg?sanitize=true) | fish-hook |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/oven.svg?sanitize=true) | oven |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/pipeline.svg?sanitize=true) | pipeline |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/race.svg?sanitize=true) | race |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/rockets.svg?sanitize=true) | rockets |
+| ![](https://raw.githubusercontent.com/BrightspaceUI/core/main/components/state/images/tumbleweed.svg?sanitize=true) | tumbleweed |

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

@@ -1,84 +1,10 @@
-import '../button/button.js';
-import '../button/button-subtle.js';
-import { css, html, LitElement, nothing } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-
-/**
- * `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
- * @fires d2l-empty-state-illustrated-check - Internal event
- */
-class EmptyStateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) {
-
-	static properties = {
-		/**
-		 * REQUIRED: The action text to be used in the button
-		 * @type {string}
-		 */
-		text: { type: String, required: true },
-		/**
-		 * 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 styles = css`
-		.d2l-empty-state-action {
-			vertical-align: top;
-		}
-	`;
-
-	constructor() {
-		super();
-		this._illustrated = false;
-	}
-
-	static get focusElementSelector() {
-		return '.d2l-empty-state-action';
-	}
-
-	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;
-		});
-	}
-
-	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}
-							h-align="${ifDefined(!this._illustrated ? 'text' : undefined)}"
-							?slim=${!this._illustrated}
-							text=${this.text}>
-						</d2l-button-subtle>`;
-		}
-		return html`${actionButton}`;
-	}
+import { StateActionButton } from '../state/state-action-button.js';
 
+class EmptyStateActionButton extends StateActionButton {
 	_handleActionClick(e) {
 		e.stopPropagation();
 		this.dispatchEvent(new CustomEvent('d2l-empty-state-action'));
 	}
-
 }
 
 customElements.define('d2l-empty-state-action-button', EmptyStateActionButton);

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

@@ -1,41 +1,5 @@
-import { html, LitElement, nothing } from 'lit';
-import { bodyCompactStyles } from '../typography/styles.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { LinkMixin } from '../link/link-mixin.js';
-import { linkStyles } from '../link/link.js';
-import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { StateActionLink } from '../state/state-action-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 LinkMixin(FocusMixin(PropertyRequiredMixin(LitElement))) {
-
-	static properties = {
-		/**
-		 * REQUIRED: The action text to be used in the subtle button
-		 * @type {string}
-		 */
-		text: { type: String, required: true },
-		/**
-		 * REQUIRED: The action URL or URL fragment of the link
-		 * @type {string}
-		 */
-		href: { type: String, required: true },
-	};
-
-	static styles = [super.styles, bodyCompactStyles, linkStyles];
-
-	static get focusElementSelector() {
-		return '.d2l-link';
-	}
-
-	render() {
-		if (!this.text || !this.href) return nothing;
-		const linkClasses = { 'd2l-body-compact': true, 'd2l-link': true };
-		const inner = html`${this.text}${this._renderNewWindowIcon()}`;
-		return this._render(inner, { linkClasses });
-	}
-
-}
+class EmptyStateActionLink extends StateActionLink {}
 
 customElements.define('d2l-empty-state-action-link', EmptyStateActionLink);

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

@@ -1,129 +1,7 @@
-import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-styles.js';
-import { html, LitElement, nothing } from 'lit';
-import { bodyCompactStyles } from '../typography/styles.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { EmptyStateMixin } from './empty-state-mixin.js';
-import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
-import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.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;
-
-/**
- * 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 LoadingCompleteMixin(EmptyStateMixin(LitElement)) {
-
-	static properties = {
-		/**
-		 * REQUIRED: A description giving details about the empty state
-		 * @type {string}
-		 */
-		description: { type: String, required: true },
-		/**
-		 * The name of the preset image you would like to display in the component
-		 * @type {string}
-		 */
-		illustrationName: { type: String, attribute: 'illustration-name' },
-		/**
-		 * REQUIRED: A title for the empty state
-		 * @type {string}
-		 */
-		titleText: { type: String, attribute: 'title-text', required: true },
-		_contentHeight: { state: true },
-		_titleSmall: { state: true }
-	};
-
-	static styles = [bodyCompactStyles, emptyStateStyles, emptyStateIllustratedStyles];
-
-	constructor() {
-		super();
-		this._contentHeight = 330;
-		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
-		this._titleSmall = false;
-	}
-
-	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();
-	}
-
-	render() {
-		const titleClass = {
-			'd2l-empty-state-title': true,
-			'd2l-empty-state-title-small': this._titleSmall,
-			'd2l-empty-state-title-large': !this._titleSmall,
-		};
-
-		return html`
-			${this.#renderIllustration()}
-			<p class="${classMap(titleClass)}">${this.titleText}</p>
-			<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
-			<slot class="action-slot"></slot>
-		`;
-	}
-
-	_onResize(entries) {
-		if (!entries || entries.length === 0) return;
-		const entry = entries[0];
-
-		const width = entry.contentRect.width;
-		if (width === 0) return; // ignore until visible
-
-		requestAnimationFrame(() => {
-			this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
-			this._titleSmall = entry.contentRect.right <= 615;
-		});
-	}
-
-	async #getIllustration(illustrationName) {
-		if (!illustrationName) return;
-
-		const svg = await loadSvg(illustrationName);
-		if (!svg) setTimeout(() => {
-			throw new Error(`<d2l-empty-state-illustrated-${this._illustratedComponentType}>: Unable to retrieve requested illustration.`);
-		});
-		return svg ? html`${unsafeSVG(svg.val)}` : nothing;
-	}
-
-	#handleEmptyStateIllustratedCheck(e) {
-		e.stopPropagation();
-		e.detail.illustrated = true;
-	}
-
-	#renderIllustration() {
-		if (!this.illustrationName) {
-			this.resolveLoadingComplete();
-			return html`<slot class="illustration-slot" name="illustration"></slot>`;
-		}
-		const illustrationContainerStyle = {
-			height: `${this._contentHeight}px`,
-		};
-		const asyncVal = runAsync(
-			this.illustrationName,
-			() => this.#getIllustration(this.illustrationName),
-			{
-				success: illustration => {
-					this.resolveLoadingComplete();
-					return illustration;
-				}
-			},
-			{ pendingState: false }
-		);
-		return html`<div style="${styleMap(illustrationContainerStyle)}">${asyncVal}</div>`;
-	}
-
+import { emptyStateStyles } from './empty-state-styles.js';
+import { StateIllustrated } from '../state/state-illustrated.js';
+class EmptyStateIllustrated extends StateIllustrated {
+	static styles = [super.styles, emptyStateStyles];
 }
 
 customElements.define('d2l-empty-state-illustrated', EmptyStateIllustrated);

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

@@ -1,14 +1,15 @@
 import '../button/button-subtle.js';
-import { emptyStateSimpleStyles, emptyStateStyles } from './empty-state-styles.js';
 import { html, LitElement } from 'lit';
+import { stateSimpleStyles, stateStyles } from '../state/state-styles.js';
 import { bodyCompactStyles } from '../typography/styles.js';
-import { EmptyStateMixin } from './empty-state-mixin.js';
+import { emptyStateStyles } from './empty-state-styles.js';
+import { StateMixin } from '../state/state-mixin.js';
 
 /**
  * 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 EmptyStateSimple extends EmptyStateMixin(LitElement) {
+class EmptyStateSimple extends StateMixin(LitElement) {
 
 	static properties = {
 		/**
@@ -18,12 +19,12 @@ class EmptyStateSimple extends EmptyStateMixin(LitElement) {
 		description: { type: String, required: true },
 	};
 
-	static styles = [bodyCompactStyles, emptyStateStyles, emptyStateSimpleStyles];
+	static styles = [bodyCompactStyles, stateStyles, stateSimpleStyles, emptyStateStyles];
 
 	render() {
 		return html`
-			<div class="empty-state-container">
-				<p class="d2l-body-compact d2l-empty-state-description" tabindex="-1">${this.description}</p>
+			<div class="state-container">
+				<p class="d2l-body-compact d2l-state-description" tabindex="-1">${this.description}</p>
 				<slot class="action-slot"></slot>
 			</div>
 		`;

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

@@ -1,96 +1,9 @@
-import '../colors/colors.js';
 import { css } from 'lit';
-import { getFocusRingStyles } from '../../helpers/focus.js';
 
+// Styles supporting old empty state action buttons and links
 export const emptyStateStyles = css`
-
-	:host {
-		display: block;
-	}
-
-	:host([hidden]) {
-		display: none;
-	}
-
-	.action-slot::slotted(*) {
-		display: none;
-	}
-
 	.action-slot::slotted(d2l-empty-state-action-button:first-of-type),
 	.action-slot::slotted(d2l-empty-state-action-link:first-of-type) {
 		display: inline;
 	}
-	.d2l-empty-state-description {
-		--d2l-focus-ring-offset: 3px;
-		border-radius: 0.3rem;
-	}
-	${getFocusRingStyles('.d2l-empty-state-description')}
-`;
-
-export const emptyStateSimpleStyles = css`
-
-	:host {
-		border: 1px solid var(--d2l-color-mica);
-		border-radius: 0.3rem;
-		padding: 1.2rem 1.5rem;
-	}
-
-	:host([description]) .empty-state-container {
-		align-items: center;
-		column-gap: 0.75rem;
-		display: flex;
-		flex-wrap: wrap;
-		padding-inline-start: 0;
-	}
-
-	.d2l-empty-state-description {
-		margin: 0;
-	}
-
-`;
-
-export const emptyStateIllustratedStyles = css`
-
-	:host {
-		text-align: center;
-	}
-
-	.illustration-slot::slotted(*) {
-		display: none;
-	}
-
-	.illustration-slot::slotted(img:first-of-type),
-	.illustration-slot::slotted(svg:first-of-type) {
-		display: inline-block;
-	}
-
-	svg {
-		height: 100%;
-		max-width: 500px;
-		width: 100%;
-	}
-
-	.d2l-empty-state-title {
-		margin-bottom: 0.9rem;
-	}
-
-	.d2l-empty-state-title-large {
-		font-size: 1.5rem;
-		line-height: 1.8rem;
-		margin: 1rem 0 1.5rem 0;
-	}
-
-	.d2l-empty-state-title-small {
-		font-size: 1rem;
-		font-weight: 700;
-		line-height: 1.5rem;
-		margin-top: 0.5rem;
-	}
-
-	.d2l-empty-state-description {
-		margin: 0 auto 0.8rem;
-		max-width: 500px;
-		width: 100%;
-	}
-
 `;

package/components/filter/filter.js

@@ -5,8 +5,8 @@ import '../button/button-subtle.js';
 import '../dropdown/dropdown.js';
 import '../dropdown/dropdown-content.js';
 import '../dropdown/dropdown-menu.js';
-import '../empty-state/empty-state-action-button.js';
-import '../empty-state/empty-state-action-link.js';
+import '../state/state-action-button.js';
+import '../state/state-action-link.js';
 import '../empty-state/empty-state-simple.js';
 import '../expand-collapse/expand-collapse-content.js';
 import '../hierarchical-view/hierarchical-view.js';
@@ -537,20 +537,20 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		let emptyStateAction = nothing;
 		if (emptyState.actionText && emptyState.actionHref) {
 			emptyStateAction = html`
-				<d2l-empty-state-action-link
+				<d2l-state-action-link
 					href="${emptyState.actionHref}"
 					text="${emptyState.actionText}">
-				</d2l-empty-state-action-link>
+				</d2l-state-action-link>
 			`;
 		}
 		else if (emptyState.actionText) {
 			emptyStateAction = html`
-				<d2l-empty-state-action-button
-					@d2l-empty-state-action="${this._handleEmptyStateAction}"
+				<d2l-state-action-button
+					@d2l-state-action="${this._handleEmptyStateAction}"
 					data-dimension-key="${dimensionKey}"
 					data-type="${emptyState.type}"
 					text="${emptyState.actionText}">
-				</d2l-empty-state-action-button>
+				</d2l-state-action-button>
 			`;
 		}
 		return html`

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

@@ -0,0 +1,88 @@
+import '../button/button.js';
+import '../button/button-subtle.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * `d2l-state-action-button` is an state action component that can be placed inside of the default slot of state components to add a button action.
+ * @fires d2l-state-action - Dispatched when the action button is clicked
+ * @fires d2l-state-illustrated-check - Internal event
+ */
+export class StateActionButton extends FocusMixin(PropertyRequiredMixin(LitElement)) { // Exported to support old empty-state components, once they are removed this can be made internal only
+
+	static properties = {
+		/**
+		 * REQUIRED: The action text to be used in the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * 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-state-action-button` is placed within `d2l-state-illustrated` components
+		 * @type {boolean}
+		 */
+		primary: { type: Boolean },
+		_illustrated: { state: true }
+	};
+
+	static styles = css`
+		.d2l-state-action {
+			vertical-align: top;
+		}
+	`;
+
+	constructor() {
+		super();
+		this._illustrated = false;
+	}
+
+	static get focusElementSelector() {
+		return '.d2l-state-action';
+	}
+
+	get isStateActionButton() {
+		return true;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		requestAnimationFrame(() => {
+			const e = new CustomEvent('d2l-state-illustrated-check', {
+				bubbles: true,
+				detail: {}
+			});
+			this.dispatchEvent(e);
+			this._illustrated = e.detail.illustrated || false;
+		});
+	}
+
+	render() {
+		let actionButton = nothing;
+		if (this.text) {
+			actionButton = this._illustrated && this.primary
+				? html`<d2l-button
+							class="d2l-state-action"
+							@click=${this._handleActionClick}
+							primary>
+								${this.text}
+						</d2l-button>`
+				: html`<d2l-button-subtle
+							class="d2l-state-action"
+							@click=${this._handleActionClick}
+							h-align="${ifDefined(!this._illustrated ? 'text' : undefined)}"
+							?slim=${!this._illustrated}
+							text=${this.text}>
+						</d2l-button-subtle>`;
+		}
+		return html`${actionButton}`;
+	}
+
+	_handleActionClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent('d2l-state-action'));
+	}
+
+}
+
+customElements.define('d2l-state-action-button', StateActionButton);

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

@@ -0,0 +1,45 @@
+import { html, LitElement, nothing } from 'lit';
+import { bodyCompactStyles } from '../typography/styles.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { LinkMixin } from '../link/link-mixin.js';
+import { linkStyles } from '../link/link.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+
+/**
+ * `d2l-state-action-link` is an state action component that can be placed inside of the default slot of state components to add a link action.
+ */
+export class StateActionLink extends LinkMixin(FocusMixin(PropertyRequiredMixin(LitElement))) { // Exported to support old empty-state components, once they are removed this can be made internal only
+
+	static properties = {
+		/**
+		 * REQUIRED: The action text to be used in the link
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * REQUIRED: The action URL or URL fragment of the link
+		 * @type {string}
+		 */
+		href: { type: String, required: true },
+	};
+
+	static styles = [super.styles, bodyCompactStyles, linkStyles];
+
+	static get focusElementSelector() {
+		return '.d2l-link';
+	}
+
+	get isStateActionLink() {
+		return true;
+	}
+
+	render() {
+		if (!this.text || !this.href) return nothing;
+		const linkClasses = { 'd2l-body-compact': true, 'd2l-link': true };
+		const inner = html`${this.text}${this._renderNewWindowIcon()}`;
+		return this._render(inner, { linkClasses });
+	}
+
+}
+
+customElements.define('d2l-state-action-link', StateActionLink);