feat(empty-state): support graphic assigned node

Closes #1320
Vonage · Jun 22, 2022 · dd9b77b · dd9b77b
1 parent e582f2e
commit dd9b77b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 1 deletion.
diff --git a/components/empty-state/src/vwc-empty-state-base.ts b/components/empty-state/src/vwc-empty-state-base.ts
@@ -28,7 +28,9 @@ export class VWCEmptyStateBase extends LitElement {
 
 	protected override render(): TemplateResult {
 		return html`<section>
-			${this.icon ? this.renderIcon() : nothing}
+			<slot name="graphic">
+				${this.icon ? this.renderIcon() : nothing}
+			</slot>
 			${this.heading ? this.renderHeading() : nothing}
 			${this.body ? this.renderBody() : nothing}
 		</section>`;

diff --git a/components/empty-state/stories/empty-state.stories.js b/components/empty-state/stories/empty-state.stories.js
@@ -2,6 +2,7 @@ import '@vonage/vwc-empty-state/vwc-empty-state.js';
 import { html } from 'lit-element';
 import { spread } from '@open-wc/lit-helpers';
 import { argTypes } from './arg-types.js';
+import { svg } from './svg.js';
 
 export default {
 	title: 'Alpha/Components/⭐️ Empty State',
@@ -13,3 +14,12 @@ const Template = args => html`<vwc-empty-state ...=${spread(args)}></vwc-empty-s
 
 export const Basic = Template.bind({});
 Basic.args = { icon: 'chat-line', heading: 'Empty State Title', body: 'Empty state body for more information' };
+
+const SlottedTemplate = args => html`<vwc-empty-state ...=${spread(args)}>
+	<span slot="graphic">
+		${svg}
+	</span>
+</vwc-empty-state>`;
+
+export const Slotted = SlottedTemplate.bind({});
+Slotted.args = { heading: 'Empty State Title', body: 'Empty state body for more information' };
diff --git a/components/empty-state/stories/svg.js b/components/empty-state/stories/svg.js