moved modal service to dedicated folder and added stories

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
 
 import { UmbContextProviderMixin } from '../core/context';
-import { UmbModalService } from '../core/services/modal.service';
+import { UmbModalService } from '../core/services/modal/modal.service';
 import { UmbNotificationService } from '../core/services/notification.service';
 import { UmbDataTypeStore } from '../core/stores/data-type.store';
 import { UmbNodeStore } from '../core/stores/node.store';

src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-modal-container.element.ts

@@ -4,7 +4,7 @@ import { customElement, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { Subscription } from 'rxjs';
 import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbModalService } from '../../core/services/modal.service';
+import { UmbModalService } from '../../core/services/modal/modal.service';
 
 @customElement('umb-backoffice-modal-container')
 export class UmbBackofficeModalContainer extends UmbContextConsumerMixin(LitElement) {

src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-content-picker.element.ts

@@ -7,7 +7,7 @@ import '@umbraco-ui/uui-modal-sidebar';
 import '@umbraco-ui/uui-modal-container';
 import '@umbraco-ui/uui-modal-dialog';
 import { UmbContextConsumerMixin } from '../../core/context';
-import { UmbModalService } from '../../core/services/modal.service';
+import { UmbModalService } from '../../core/services/modal/modal.service';
 
 import './modal-content-picker.element';
 

src/Umbraco.Web.UI.Client/src/core/services/modal/index.ts

@@ -0,0 +1,2 @@
+export * from './modal.service';
+export * from './modal-handler';

src/Umbraco.Web.UI.Client/src/core/services/modal/modal-handler.ts

@@ -1,7 +1,7 @@
 import { html, render } from 'lit';
 
 //TODO consider splitting this into two separate handlers
-export default class UmbModalHandler {
+export class UmbModalHandler {
 	private _closeResolver: any;
 	private _closePromise: any;
 
@@ -37,7 +37,6 @@ export default class UmbModalHandler {
 
 	public close(...args: any) {
 		this._closeResolver(...args);
-		this.modal.close();
 	}
 
 	public get onClose(): Promise<any> {

src/Umbraco.Web.UI.Client/src/core/services/modal/modal.service.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject, Observable } from 'rxjs';
-import UmbModalHandler from './modalHandler';
+import { UmbModalHandler } from './';
 
 export class UmbModalService {
 	private _modals: BehaviorSubject<Array<UmbModalHandler>> = new BehaviorSubject(<Array<UmbModalHandler>>[]);

src/Umbraco.Web.UI.Client/src/stories/modal-service.mdx

@@ -0,0 +1,31 @@
+# Modals
+
+A modal is a popup that darkens the background and has focus lock.
+
+**Dialog modals**
+Appears in the middle of the screen.
+
+**Sidebar modals**
+Slides in from the right.
+
+## Basic Usage
+
+### Consume UmbModalService from an element
+
+The UmbModal service can be used to open modals.
+
+```ts
+import { html, LitElement } from 'lit';
+import { UmbContextConsumerMixin } from './core/context';
+import { UmbModalService } from './core/services/modal.service';
+class MyElement extends UmbContextConsumerMixin(LitElement) {
+	private _modalService_?: UmbModalService;
+	constructor() {
+		super();
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+			// modalService is now ready to be used.
+		});
+	}
+}
+```

src/Umbraco.Web.UI.Client/src/stories/modal-service.stories.ts

@@ -0,0 +1,159 @@
+import '../../src/backoffice/components/backoffice-modal-container.element';
+import '../../src/backoffice/property-editors/modal-content-picker.element';
+
+import '@umbraco-ui/uui-modal';
+import '@umbraco-ui/uui-modal-container';
+import '@umbraco-ui/uui-modal-sidebar';
+import '@umbraco-ui/uui-modal-dialog';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+import { customElement, property, state } from 'lit/decorators.js';
+import { UmbContextConsumerMixin } from '../core/context';
+import { LitElement } from 'lit';
+import { UmbModalService } from '../core/services/modal/modal.service';
+import UmbModalHandler from '../core/services/modalHandler';
+
+export default {
+	title: 'API/Modals',
+	component: 'umb-installer',
+	decorators: [
+		(story) =>
+			html`<umb-context-provider
+				style="display: block; padding: 32px;"
+				key="umbModalService"
+				.value=${new UmbModalService()}>
+				${story()}
+			</umb-context-provider>`,
+	],
+	id: 'installer-page',
+	argTypes: {
+		modalType: { control: 'select', options: ['sidebar', 'dialog'] },
+	},
+} as Meta;
+
+@customElement('story-modal-service-dialog-example')
+class DialogExampleElement extends UmbContextConsumerMixin(LitElement) {
+	@property({ attribute: false })
+	modalHandler?: UmbModalHandler;
+
+	private _close() {
+		this.modalHandler?.close();
+	}
+
+	private _submit(value: any) {
+		this.modalHandler?.close(value);
+	}
+
+	render() {
+		return html`
+			<uui-dialog>
+				<uui-dialog-layout headline="I am a dialog">
+					<p>By clicking the close button, the modal is closed</p>
+					<p>
+						By clicking the submit button, the modal is closed and the value <b>I am the value</b> is returned to the
+						component that opened this modal
+					</p>
+					<uui-button slot="actions" look="secondary" @click=${() => this._close()} label="close"></uui-button>
+					<uui-button
+						slot="actions"
+						look="primary"
+						color="positive"
+						@click=${() => this._submit('I am the value')}
+						label="submit"></uui-button>
+				</uui-dialog-layout>
+			</uui-dialog>
+		`;
+	}
+}
+
+@customElement('story-modal-service-sidebar-example')
+class SidebarExampleElement extends UmbContextConsumerMixin(LitElement) {
+	@property({ attribute: false })
+	modalHandler?: UmbModalHandler;
+
+	private _close() {
+		this.modalHandler?.close();
+	}
+
+	private _submit(value: any) {
+		this.modalHandler?.close(value);
+	}
+
+	render() {
+		return html`<div style="background: white; padding: 16px">
+			<h2>Sidebar</h2>
+			<p>By clicking the close button, the modal is closed</p>
+			<p>
+				By clicking the submit button, the modal is closed and the value <b>I am the value</b> is returned to the
+				component that opened this modal
+			</p>
+			<uui-button look="secondary" @click=${() => this._close()} label="close"></uui-button>
+			<uui-button
+				look="primary"
+				color="positive"
+				@click=${() => this._submit('I am the value')}
+				label="submit"></uui-button>
+		</div>`;
+	}
+}
+
+@customElement('story-modal-service-example')
+class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement) {
+	private _modalService?: UmbModalService;
+
+	@property()
+	modalType: 'dialog' | 'sidebar' = 'dialog';
+
+	@property()
+	modalOptions = { size: 'small' };
+
+	@state()
+	value = '';
+
+	constructor() {
+		super();
+		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
+			this._modalService = modalService;
+		});
+	}
+
+	private _open() {
+		let modalHandler = null;
+		if (this.modalType === 'dialog') {
+			modalHandler = this._modalService?.openDialog('story-modal-service-dialog-example');
+		}
+		if (this.modalType === 'sidebar') {
+			modalHandler = this._modalService?.openSidebar('story-modal-service-sidebar-example', this.modalOptions);
+		}
+		modalHandler?.onClose.then((result) => {
+			this.value = result ?? this.value;
+		});
+	}
+
+	render() {
+		return html`
+			<uui-button label="open-dialog" look="primary" @click=${() => this._open()}>Open modal</uui-button>
+			<p style="margin-bottom: 0">The value is: ${this.value}</p>
+			<uui-button label="reset" @click=${() => (this.value = '')}></uui-button>
+		`;
+	}
+}
+
+const Template: Story = (props) => {
+	return html`
+		<umb-backoffice-modal-container></umb-backoffice-modal-container>
+		<story-modal-service-example .modalType=${props.modalType}></story-modal-service-example>
+	`;
+};
+
+export const Dialog = Template.bind({});
+Dialog.args = {
+	modalType: 'dialog',
+};
+
+export const Sidebar = Template.bind({});
+Sidebar.args = {
+	modalType: 'sidebar',
+	modalOptions: { size: 'small' },
+};