Create a generic layout to be used for displaying simple HTML content in sidebar

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

@@ -0,0 +1,51 @@
+import { css, html, TemplateResult } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement } from 'lit/decorators.js';
+import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
+import { UmbModalLayoutElement } from '../modal-layout.element';
+
+export interface UmbBasicModalData {
+    header: TemplateResult | string;
+	content: TemplateResult | string;
+    overlaySize?: UUIModalSidebarSize;
+}
+
+@customElement('umb-modal-layout-basic')
+export class UmbModalLayoutBasicElement extends UmbModalLayoutElement<UmbBasicModalData> {
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-scroll-container {
+                background-color: var(--uui-color-surface);
+            }
+		`,
+	];
+
+	private _close() {
+        // As this is a basic modal designed for viewing readonly info
+        // Then we don't need to pass any data back to the parent when
+        // we close/save the modal etc...
+		this.modalHandler?.close();
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+	}
+
+	render() {
+		return html`
+            <umb-workspace-layout .headline=${this.data?.header}>
+				<uui-scroll-container>${this.data?.content}</uui-scroll-container>
+				<uui-button slot="actions" look="secondary" label="Close sidebar" @click="${this._close}">Close</uui-button>
+			</umb-workspace-layout>
+		`;
+	}	
+}
+
+export default UmbModalLayoutBasicElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-modal-layout-basic': UmbModalLayoutBasicElement;
+	}
+}

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

@@ -0,0 +1,47 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import { UmbModalLayoutBasicElement, UmbBasicModalData } from './modal-layout-basic.element';
+
+export default {
+	title: 'API/Modals/Layouts/Basic',
+	component: 'umb-modal-layout-basic',
+	id: 'modal-layout-basic',
+} as Meta;
+
+
+const htmlContent = html`
+	<uui-table aria-label="Example table" aria-describedby="#some-element-id">
+		<!-- Apply styles to the uui-table-column to style the columns. You must have the same number of this elements as you have columns -->
+		<uui-table-column style="width: 20%;"></uui-table-column>
+		<uui-table-column style="width: 80%;"></uui-table-column>
+
+		<uui-table-head>
+			<uui-table-head-cell>Title 1</uui-table-head-cell>
+			<uui-table-head-cell>Title 2</uui-table-head-cell>
+		</uui-table-head>
+
+		<uui-table-row>
+			<uui-table-cell>Cell 1</uui-table-cell>
+			<uui-table-cell>Cell 2</uui-table-cell>
+		</uui-table-row>
+
+		<uui-table-row>
+			<uui-table-cell>Cell 3</uui-table-cell>
+			<uui-table-cell>Cell 4</uui-table-cell>
+		</uui-table-row>
+	</uui-table>`;
+
+
+const data: UmbBasicModalData = {
+	header: html`<uui-icon name="umb:bug"></uui-icon> Debug: Contexts`,
+	content: htmlContent,
+	overlaySize: 'small'
+};
+
+
+export const Overview: Story<UmbModalLayoutBasicElement> = () => html`
+	<!-- TODO: figure out if generics are allowed for properties:
+	https://github.com/runem/lit-analyzer/issues/149
+	https://github.com/runem/lit-analyzer/issues/163 -->
+	<umb-modal-layout-basic .data=${data as any}></umb-modal-layout-basic>
+`;

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

@@ -6,6 +6,7 @@ import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-pick
 import './layouts/modal-layout-current-user.element';
 import './layouts/icon-picker/modal-layout-icon-picker.element';
 import './layouts/link-picker/modal-layout-link-picker.element';
+import './layouts/basic/modal-layout-basic.element';
 
 import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar';
 import { BehaviorSubject } from 'rxjs';
@@ -18,6 +19,7 @@ import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layou
 import type { UmbModalLinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element';
 import { UmbModalHandler } from './modal-handler';
 import { UmbContextToken } from '@umbraco-cms/context-api';
+import { UmbBasicModalData } from './layouts/basic/modal-layout-basic.element';
 
 export type UmbModalType = 'dialog' | 'sidebar';
 
@@ -114,7 +116,7 @@ export class UmbModalService {
 	}
 
 	/**
-	 * Opens the user settings sidebar modal
+	 * Opens the change password sidebar modal
 	 * @public
 	 * @return {*}  {UmbModalHandler}
 	 * @memberof UmbModalService
@@ -123,6 +125,20 @@ export class UmbModalService {
 		return this.open('umb-modal-layout-change-password', { data, type: 'dialog' });
 	}
 
+	/**
+	 * Opens a basic sidebar modal to display readonly information
+	 * @public
+	 * @return {*}  {UmbModalHandler}
+	 * @memberof UmbModalService
+	 */
+	public openBasic(data: UmbBasicModalData): UmbModalHandler {
+		return this.open('umb-modal-layout-basic', {
+			data,
+			type: 'sidebar',
+			size: data?.overlaySize || 'small',
+		});
+	}
+
 	/**
 	 * Opens a modal or sidebar modal
 	 * @public