@brightspace-ui/core 2.36.0 → 2.37.1

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);