From ce272e0b80f98353d8a2e57930bdfac27143f3fa Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 10 Aug 2022 13:53:09 +0200
Subject: [PATCH] fix dialog stories and add options for each layout

---
 .../src/core/services/modal/modal.stories.ts  | 121 ++++--------------
 1 file changed, 24 insertions(+), 97 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
index 38ebf60216..27244e4ea7 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/modal.stories.ts
@@ -1,5 +1,7 @@
 import '../../../backoffice/components/backoffice-modal-container.element';
 import '../../../core/services/modal/layouts/content-picker/modal-layout-content-picker.element';
+import '../../context/context-provider.element';
+import '../../../backoffice/components/editor-layout.element';
 
 import '@umbraco-ui/uui-modal';
 import '@umbraco-ui/uui-modal-container';
@@ -11,7 +13,7 @@ import { html } from 'lit-html';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../context';
 import { LitElement } from 'lit';
-import { UmbModalHandler, UmbModalOptions, UmbModalService } from './';
+import { UmbModalHandler, UmbModalService } from './';
 
 export default {
 	title: 'API/Modals',
@@ -27,89 +29,20 @@ export default {
 	],
 	id: 'installer-page',
 	argTypes: {
-		modalType: { control: 'select', options: ['sidebar', 'dialog'] },
+		modalLayout: { control: 'select', options: ['Confirm', 'Content Picker'] },
 	},
 } 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: UmbModalOptions<unknown> = { type: 'sidebar', size: 'small' };
+	modalLayout = 'confirm';
 
 	@state()
 	value = '';
 
+	private _modalService?: UmbModalService;
+
 	constructor() {
 		super();
 		this.consumeContext('umbModalService', (modalService: UmbModalService) => {
@@ -118,23 +51,26 @@ class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement
 	}
 
 	private _open() {
-		let modalHandler = null;
-		if (this.modalType === 'dialog') {
-			modalHandler = this._modalService?.open('story-modal-service-dialog-example');
+		let modalHandler: UmbModalHandler | undefined;
+
+		switch (this.modalLayout) {
+			case 'Content Picker':
+				modalHandler = this._modalService?.contentPicker();
+				break;
+			default:
+				modalHandler = this._modalService?.confirm({
+					headline: 'Headline',
+					content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+				});
+				break;
 		}
-		if (this.modalType === 'sidebar') {
-			modalHandler = this._modalService?.open('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>
+			<uui-button label="open-dialog" look="primary" @click=${() => this._open()} style="margin-right: 9px;"
+				>Open modal</uui-button
+			>
 		`;
 	}
 }
@@ -142,17 +78,8 @@ class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement
 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>
+		<story-modal-service-example .modalLayout=${props.modalLayout}></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' },
-};
+export const Overview = Template.bind({});