add story for confirm layout

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.element.ts

@@ -11,21 +11,21 @@ export interface UmbModalConfirmData {
 }
 
 @customElement('umb-modal-layout-confirm')
-export class UmbModelLayoutConfirmElement extends LitElement {
+export class UmbModalLayoutConfirmElement extends LitElement {
 	static styles = [UUITextStyles];
 
 	@property({ attribute: false })
-	modalHandler!: UmbModalHandler;
+	modalHandler?: UmbModalHandler;
 
 	@property({ type: Object })
-	data!: UmbModalConfirmData;
+	data?: UmbModalConfirmData;
 
 	private _handleConfirm() {
-		this.modalHandler.close({ confirmed: true });
+		this.modalHandler?.close({ confirmed: true });
 	}
 
 	private _handleCancel() {
-		this.modalHandler.close({ confirmed: false });
+		this.modalHandler?.close({ confirmed: false });
 	}
 
 	render() {
@@ -48,6 +48,6 @@ export class UmbModelLayoutConfirmElement extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-modal-layout-confirm': UmbModelLayoutConfirmElement;
+		'umb-modal-layout-confirm': UmbModalLayoutConfirmElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/confirm/modal-layout-confirm.stories.ts

@@ -0,0 +1,32 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import { UmbModalLayoutConfirmElement, UmbModalConfirmData } from './modal-layout-confirm.element';
+import './modal-layout-confirm.element';
+
+export default {
+	title: 'API/Modals/Layouts/Confirm',
+	component: 'umb-modal-layout-confirm',
+	id: 'modal-layout-confirm',
+} as Meta;
+
+const positiveData: UmbModalConfirmData = {
+	headline: 'Publish with descendants',
+	content: html`Publish <b>This example</b> and all content items underneath and thereby making their content publicly
+		available.`,
+	confirmLabel: 'Publish',
+};
+
+export const Positive: Story<UmbModalLayoutConfirmElement> = () => html`
+	<umb-modal-layout-confirm .data=${positiveData}></umb-modal-layout-confirm>
+`;
+
+const dangerData: UmbModalConfirmData = {
+	color: 'danger',
+	headline: 'Delete',
+	content: html`Delete <b>This example</b> and all items underneath.`,
+	confirmLabel: 'Delete',
+};
+
+export const Danger: Story<UmbModalLayoutConfirmElement> = () => html`
+	<umb-modal-layout-confirm .data=${dangerData}></umb-modal-layout-confirm>
+`;

src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/content-picker/modal-layout-content-picker.element.ts

@@ -8,7 +8,7 @@ export interface UmbModalContentPickerData {
 }
 
 @customElement('umb-modal-layout-content-picker')
-export class UmbModalContentPickerElement extends LitElement {
+export class UmbModalLayoutContentPickerElement extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -47,6 +47,9 @@ export class UmbModalContentPickerElement extends LitElement {
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler;
 
+	@property({ type: Object })
+	data?: UmbModalContentPickerData;
+
 	private _tempContent = [
 		{
 			id: 1,
@@ -119,6 +122,6 @@ export class UmbModalContentPickerElement extends LitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-modal-layout-content-picker': UmbModalContentPickerElement;
+		'umb-modal-layout-content-picker': UmbModalLayoutContentPickerElement;
 	}
 }

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

@@ -14,11 +14,11 @@ export class UmbModalHandler {
 	public type: string;
 	public size: UUIModalSidebarSize;
 
-	constructor(elementName: string, options: UmbModalOptions<unknown>) {
+	constructor(elementName: string, options?: UmbModalOptions<unknown>) {
 		this.key = uuidv4();
 
-		this.type = options.type || 'dialog';
-		this.size = options.size || 'small';
+		this.type = options?.type || 'dialog';
+		this.size = options?.size || 'small';
 		this.element = this._createElement(elementName, options);
 
 		this._closePromise = new Promise((resolve) => {
@@ -26,9 +26,9 @@ export class UmbModalHandler {
 		});
 	}
 
-	private _createElement(elementName: string, options: UmbModalOptions<unknown>) {
-		const layoutElement = this._createLayoutElement(elementName, options);
-		return options.type === 'sidebar'
+	private _createElement(elementName: string, options?: UmbModalOptions<unknown>) {
+		const layoutElement = this._createLayoutElement(elementName, options?.data);
+		return this.type === 'sidebar'
 			? this._createSidebarElement(layoutElement)
 			: this._createDialogElement(layoutElement);
 	}
@@ -48,9 +48,9 @@ export class UmbModalHandler {
 		return modalDialogElement;
 	}
 
-	private _createLayoutElement(elementName: string, options: UmbModalOptions<unknown>) {
+	private _createLayoutElement(elementName: string, data: unknown) {
 		const layoutElement: any = document.createElement(elementName);
-		layoutElement.data = options.data;
+		layoutElement.data = data;
 		layoutElement.modalHandler = this;
 		return layoutElement;
 	}

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

@@ -13,7 +13,7 @@ export type UmbModelType = 'dialog' | 'sidebar';
 export interface UmbModalOptions<UmbModalData> {
 	type?: UmbModelType;
 	size?: UUIModalSidebarSize;
-	data: UmbModalData;
+	data?: UmbModalData;
 }
 
 export class UmbModalService {
@@ -28,7 +28,7 @@ export class UmbModalService {
 		return this.open('umb-modal-layout-content-picker', { data, type: 'sidebar', size: 'small' });
 	}
 
-	public open(elementName: string, options: UmbModalOptions<unknown>): UmbModalHandler {
+	public open(elementName: string, options?: UmbModalOptions<unknown>): UmbModalHandler {
 		const modalHandler = new UmbModalHandler(elementName, options);
 
 		modalHandler.element.addEventListener('close-end', () => this._handleCloseEnd(modalHandler));

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

@@ -11,7 +11,7 @@ import { html } from 'lit-html';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbContextConsumerMixin } from '../../context';
 import { LitElement } from 'lit';
-import { UmbModalHandler, UmbModalService } from './';
+import { UmbModalHandler, UmbModalOptions, UmbModalService } from './';
 
 export default {
 	title: 'API/Modals',
@@ -105,7 +105,7 @@ class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement
 	modalType: 'dialog' | 'sidebar' = 'dialog';
 
 	@property()
-	modalOptions = { size: 'small' };
+	modalOptions: UmbModalOptions<unknown> = { type: 'sidebar', size: 'small' };
 
 	@state()
 	value = '';
@@ -120,10 +120,10 @@ class StoryModalServiceExampleElement extends UmbContextConsumerMixin(LitElement
 	private _open() {
 		let modalHandler = null;
 		if (this.modalType === 'dialog') {
-			modalHandler = this._modalService?.openDialog('story-modal-service-dialog-example');
+			modalHandler = this._modalService?.open('story-modal-service-dialog-example');
 		}
 		if (this.modalType === 'sidebar') {
-			modalHandler = this._modalService?.openSidebar('story-modal-service-sidebar-example', this.modalOptions);
+			modalHandler = this._modalService?.open('story-modal-service-sidebar-example', this.modalOptions);
 		}
 		modalHandler?.onClose.then((result) => {
 			this.value = result ?? this.value;