From d506a627e4af656f10613e5e7d78c8d5572b9c08 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Mon, 13 Mar 2023 13:51:27 +0100 Subject: [PATCH] move notification default layout to src/core --- .../notification-layout-default.stories.ts | 22 ---------------- .../notification/notification-handler.test.ts | 7 +++--- .../libs/notification/notification-handler.ts | 4 +-- src/Umbraco.Web.UI.Client/src/app.ts | 1 + .../notification/layouts/default/index.ts | 0 .../notification-layout-default.element.ts | 13 ++++++---- .../notification-layout-default.stories.ts | 25 +++++++++++++++++++ .../notification-layout-default.test.ts | 13 +++++++--- .../notification/stories/notification.mdx | 0 .../stories/notification.stories.ts | 7 +++--- ...ry-notification-default-example.element.ts | 11 +++++--- 11 files changed, 59 insertions(+), 44 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.stories.ts rename src/Umbraco.Web.UI.Client/{libs => src/core}/notification/layouts/default/index.ts (100%) rename src/Umbraco.Web.UI.Client/{libs => src/core}/notification/layouts/default/notification-layout-default.element.ts (73%) create mode 100644 src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts rename src/Umbraco.Web.UI.Client/{libs => src/core}/notification/layouts/default/notification-layout-default.test.ts (80%) rename src/Umbraco.Web.UI.Client/{libs => src/core}/notification/stories/notification.mdx (100%) rename src/Umbraco.Web.UI.Client/{libs => src/core}/notification/stories/notification.stories.ts (82%) rename src/Umbraco.Web.UI.Client/{libs => src/core}/notification/stories/story-notification-default-example.element.ts (87%) diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.stories.ts b/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.stories.ts deleted file mode 100644 index 3ecd5ca8f7..0000000000 --- a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.stories.ts +++ /dev/null @@ -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 = () => html` - - - -`; - -export const Default = Template.bind({}); diff --git a/src/Umbraco.Web.UI.Client/libs/notification/notification-handler.test.ts b/src/Umbraco.Web.UI.Client/libs/notification/notification-handler.test.ts index 043e9d716d..f6b8cd4b5a 100644 --- a/src/Umbraco.Web.UI.Client/libs/notification/notification-handler.test.ts +++ b/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 = {}; + const options: UmbNotificationOptions = {}; notificationHandler = new UmbNotificationHandler(options); }); @@ -72,7 +71,7 @@ describe('UmbNotificationHandler', () => { let layoutElement: any; beforeEach(async () => { - const options: UmbNotificationOptions = { + 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 = { + const options: UmbNotificationOptions = { elementName: 'umb-notification-test-element', color: 'positive', data: { diff --git a/src/Umbraco.Web.UI.Client/libs/notification/notification-handler.ts b/src/Umbraco.Web.UI.Client/libs/notification/notification-handler.ts index c249effe09..3ef8958993 100644 --- a/src/Umbraco.Web.UI.Client/libs/notification/notification-handler.ts +++ b/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 diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index 3dafb8e9df..10fd0f49e3 100644 --- a/src/Umbraco.Web.UI.Client/src/app.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/index.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/index.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/libs/notification/layouts/default/index.ts rename to src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/index.ts diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.element.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts similarity index 73% rename from src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.element.ts rename to src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts index aa54b5be9e..9865415b78 100644 --- a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.element.ts +++ b/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; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.stories.ts new file mode 100644 index 0000000000..6a10618626 --- /dev/null +++ b/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; + +const Template: Story = (props) => html` + + + +`; + +export const Default = Template.bind({}); diff --git a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.test.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts similarity index 80% rename from src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.test.ts rename to src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.test.ts index 289bf3a122..740526e1c6 100644 --- a/src/Umbraco.Web.UI.Client/libs/notification/layouts/default/notification-layout-default.test.ts +++ b/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', () => { diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.mdx b/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.mdx similarity index 100% rename from src/Umbraco.Web.UI.Client/libs/notification/stories/notification.mdx rename to src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.mdx diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts b/src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts similarity index 82% rename from src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts rename to src/Umbraco.Web.UI.Client/src/core/notification/stories/notification.stories.ts index 16872f9f7d..8d019e412e 100644 --- a/src/Umbraco.Web.UI.Client/libs/notification/stories/notification.stories.ts +++ b/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` diff --git a/src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts b/src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts similarity index 87% rename from src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts rename to src/Umbraco.Web.UI.Client/src/core/notification/stories/story-notification-default-example.element.ts index 4b965c60f2..b22fefe7ba 100644 --- a/src/Umbraco.Web.UI.Client/libs/notification/stories/story-notification-default-example.element.ts +++ b/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 = { + 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; + } +}