move notification default layout to src/core

src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.stories.ts

@@ -1,22 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-import { UmbNotificationLayoutDefaultElement, UmbNotificationDefaultData } from '.';
-
-export default {
-	title: 'API/Notifications/Layouts/Default',
-	component: 'umb-notification-layout-default',
-	id: 'notification-layout-default',
-} as Meta;
-
-const data: UmbNotificationDefaultData = {
-	headline: 'Headline',
-	message: 'This is a default notification',
-};
-
-const Template: Story<UmbNotificationLayoutDefaultElement> = () => html`
-	<uui-toast-notification .open=${true}>
-		<umb-notification-layout-default .data=${data}></umb-notification-layout-default>
-	</uui-toast-notification>
-`;
-
-export const Default = Template.bind({});

src/Umbraco.Web.UI.Client/libs/notification/notification-handler.test.ts

@@ -3,14 +3,13 @@ import { validate as uuidValidate } from 'uuid';
 
 import { UmbNotificationHandler } from './notification-handler';
 
-import type { UmbNotificationDefaultData } from './layouts/default';
 import type { UmbNotificationOptions } from './notification.context';
 
 describe('UmbNotificationHandler', () => {
 	let notificationHandler: UmbNotificationHandler;
 
 	beforeEach(async () => {
-		const options: UmbNotificationOptions<UmbNotificationDefaultData> = {};
+		const options: UmbNotificationOptions = {};
 		notificationHandler = new UmbNotificationHandler(options);
 	});
 
@@ -72,7 +71,7 @@ describe('UmbNotificationHandler', () => {
 			let layoutElement: any;
 
 			beforeEach(async () => {
-				const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
+				const options: UmbNotificationOptions = {
 					color: 'positive',
 					data: {
 						message: 'Notification default layout message',
@@ -100,7 +99,7 @@ describe('UmbNotificationHandler', () => {
 			let layoutElement: any;
 
 			beforeEach(async () => {
-				const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
+				const options: UmbNotificationOptions = {
 					elementName: 'umb-notification-test-element',
 					color: 'positive',
 					data: {

src/Umbraco.Web.UI.Client/libs/notification/notification-handler.ts

@@ -1,8 +1,6 @@
 import { UUIToastNotificationElement } from '@umbraco-ui/uui';
 import { v4 as uuidv4 } from 'uuid';
-import type { UmbNotificationOptions, UmbNotificationColor, UmbNotificationDefaultData } from '.';
-
-import './layouts/default';
+import type { UmbNotificationOptions, UmbNotificationColor, UmbNotificationDefaultData } from './notification.context';
 
 /**
  * @export

src/Umbraco.Web.UI.Client/src/app.ts

@@ -9,6 +9,7 @@ import '@umbraco-ui/uui-modal-sidebar';
 import 'element-internals-polyfill';
 
 import './core/router/router-slot.element';
+import './core/notification/layouts/default';
 
 import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html } from 'lit';

src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts

@@ -2,12 +2,9 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import type { UmbNotificationHandler } from '../..';
+import type { UmbNotificationDefaultData, UmbNotificationHandler } from '@umbraco-cms/notification';
 
-export interface UmbNotificationDefaultData {
-	message: string;
-	headline?: string;
-}
+export type { UmbNotificationDefaultData };
 
 @customElement('umb-notification-layout-default')
 export class UmbNotificationLayoutDefaultElement extends LitElement {
@@ -27,3 +24,9 @@ export class UmbNotificationLayoutDefaultElement extends LitElement {
 		`;
 	}
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-notification-layout-default': UmbNotificationLayoutDefaultElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts

@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import type { UmbNotificationLayoutDefaultElement } from './notification-layout-default.element';
+
+import './notification-layout-default.element';
+
+export default {
+	title: 'API/Notifications/Layouts/Default',
+	component: 'umb-notification-layout-default',
+	id: 'notification-layout-default',
+	args: {
+		data: {
+			headline: 'Headline',
+			message: 'This is a default notification',
+		},
+	},
+} as Meta<UmbNotificationLayoutDefaultElement>;
+
+const Template: Story<UmbNotificationLayoutDefaultElement> = (props) => html`
+	<uui-toast-notification .open=${true}>
+		<umb-notification-layout-default .data=${props.data}></umb-notification-layout-default>
+	</uui-toast-notification>
+`;
+
+export const Default = Template.bind({});

src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts

@@ -1,8 +1,7 @@
 import { fixture, expect, html } from '@open-wc/testing';
 import { UUIToastNotificationLayoutElement } from '@umbraco-ui/uui';
-import { UmbNotificationHandler } from '../..';
-import type { UmbNotificationLayoutDefaultElement, UmbNotificationDefaultData } from '.';
-import '.';
+import { UmbNotificationLayoutDefaultElement, UmbNotificationDefaultData } from './notification-layout-default.element';
+import { UmbNotificationHandler } from '@umbraco-cms/notification';
 
 describe('UmbNotificationLayoutDefault', () => {
 	let element: UmbNotificationLayoutDefaultElement;
@@ -25,6 +24,14 @@ describe('UmbNotificationLayoutDefault', () => {
 		);
 	});
 
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbNotificationLayoutDefaultElement);
+	});
+
+	it('passes the a11y audit', async () => {
+		await expect(element).to.be.accessible();
+	});
+
 	describe('Public API', () => {
 		describe('properties', () => {
 			it('has a notificationHandler property', () => {

src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts

@@ -1,13 +1,12 @@
-import '../layouts/default';
+import './story-notification-default-example.element';
 
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
-
-import { UmbNotificationContext } from '..';
+import { UmbNotificationContext } from '@umbraco-cms/notification';
 
 export default {
 	title: 'API/Notifications/Overview',
-	component: 'ucp-notification-layout-default',
+	component: 'umb-notification-layout-default',
 	decorators: [
 		(story) =>
 			html`<umb-context-provider key="UmbNotificationContext" .value=${new UmbNotificationContext()}>

src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts

@@ -1,12 +1,11 @@
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { UmbNotificationDefaultData } from '../layouts/default';
 import {
 	UmbNotificationColor,
 	UmbNotificationOptions,
 	UmbNotificationContext,
 	UMB_NOTIFICATION_CONTEXT_TOKEN,
-} from '..';
+} from '@umbraco-cms/notification';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('story-notification-default-example')
@@ -22,7 +21,7 @@ export class StoryNotificationDefaultExampleElement extends UmbLitElement {
 	}
 
 	private _handleNotification = (color: UmbNotificationColor) => {
-		const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
+		const options: UmbNotificationOptions = {
 			data: {
 				headline: 'Headline',
 				message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
@@ -54,3 +53,9 @@ export class StoryNotificationDefaultExampleElement extends UmbLitElement {
 		`;
 	}
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'story-notification-default-example': StoryNotificationDefaultExampleElement;
+	}
+}