From 2cda2d48708d2f9381db5f9c75f23323579f98d3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 3 Aug 2022 17:04:24 +0200 Subject: [PATCH] add stories for default notification layout --- .../src/backoffice/backoffice.element.ts | 2 +- ...ckoffice-notification-container.element.ts | 3 +- .../components/node-editor.element.ts | 4 +- .../property-action-copy.element.ts | 4 +- ...property-editor-context-example.element.ts | 4 +- .../src/core/services/notification/index.ts | 2 + .../notification/layouts/default/index.ts | 1 + .../notification-layout-default.element.ts | 2 +- .../notification-layout-default.stories.ts | 98 +++++++++++++++++++ .../notification/notification-handler.test.ts | 4 +- .../notification/notification-handler.ts | 4 +- .../notification/notification.service.ts | 3 +- .../notification/notification.stories.mdx | 6 +- .../notifications.service.test.ts | 8 +- 14 files changed, 121 insertions(+), 24 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/core/services/notification/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts index a30e40e717..275772ae3f 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts @@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { UmbContextProviderMixin } from '../core/context'; -import { UmbNotificationService } from '../core/services/notification/notification.service'; +import { UmbNotificationService } from '../core/services/notification'; import { UmbDataTypeStore } from '../core/stores/data-type.store'; import { UmbNodeStore } from '../core/stores/node.store'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts index b8ac130310..896b95fe41 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts @@ -4,8 +4,7 @@ import { customElement, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { Subscription } from 'rxjs'; import { UmbContextConsumerMixin } from '../../core/context'; -import { UmbNotificationHandler } from '../../core/services/notification/notification-handler'; -import { UmbNotificationService } from '../../core/services/notification/notification.service'; +import type { UmbNotificationService, UmbNotificationHandler } from '../../core/services/notification'; @customElement('umb-backoffice-notification-container') export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(LitElement) { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-editor.element.ts index c9f105489e..a81f7e2ff4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/node-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/node-editor.element.ts @@ -5,7 +5,7 @@ import { UmbContextConsumerMixin } from '../../core/context'; import { UmbNodeStore } from '../../core/stores/node.store'; import { map, Subscription } from 'rxjs'; import { DocumentNode } from '../../mocks/data/content.data'; -import { UmbNotificationService } from '../../core/services/notification/notification.service'; +import type { UmbNotificationService } from '../../core/services/notification'; import { UmbExtensionManifest, UmbExtensionManifestEditorView, UmbExtensionRegistry } from '../../core/extension'; import { IRoutingInfo, RouterSlot } from 'router-slot'; @@ -13,7 +13,7 @@ import { IRoutingInfo, RouterSlot } from 'router-slot'; // TODO: Make this dynamic, use load-extensions method to loop over extensions for this node. import '../editor-views/editor-view-node-edit.element'; import '../editor-views/editor-view-node-info.element'; -import { UmbNotificationDefaultData } from '../../core/services/notification/layouts/default/notification-layout-default.element'; +import { UmbNotificationDefaultData } from '../../core/services/notification/layouts/default'; @customElement('umb-node-editor') export class UmbNodeEditor extends UmbContextConsumerMixin(LitElement) { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts index dff163dfff..eed8432f72 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts @@ -1,8 +1,8 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../core/context'; -import { UmbNotificationDefaultData } from '../../core/services/notification/layouts/default/notification-layout-default.element'; -import { UmbNotificationService } from '../../core/services/notification/notification.service'; +import type { UmbNotificationDefaultData } from '../../core/services/notification/layouts/default'; +import type { UmbNotificationService } from '../../core/services/notification'; import type { UmbPropertyAction } from './property-action/property-action.model'; @customElement('umb-property-action-copy') diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-context-example.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-context-example.element.ts index d893fd0ddd..ba77dd0468 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-context-example.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-context-example.element.ts @@ -1,8 +1,8 @@ import { html, LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../core/context'; -import { UmbNotificationDefaultData } from '../../core/services/notification/layouts/default/notification-layout-default.element'; -import { UmbNotificationService } from '../../core/services/notification/notification.service'; +import type { UmbNotificationDefaultData } from '../../core/services/notification/layouts/default'; +import type { UmbNotificationService } from '../../core/services/notification'; @customElement('umb-property-editor-context-example') export default class UmbPropertyEditorContextExample extends UmbContextConsumerMixin(LitElement) { diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/index.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/index.ts new file mode 100644 index 0000000000..9b342ebf32 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/index.ts @@ -0,0 +1,2 @@ +export * from './notification.service'; +export * from './notification-handler'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/index.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/index.ts new file mode 100644 index 0000000000..366e36f094 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/index.ts @@ -0,0 +1 @@ +export * from './notification-layout-default.element'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.element.ts index dfee616771..5ab5b9c815 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.element.ts @@ -1,7 +1,7 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css'; -import { UmbNotificationHandler } from '../../notification-handler'; +import type { UmbNotificationHandler } from '../../'; import { ifDefined } from 'lit-html/directives/if-defined.js'; export interface UmbNotificationDefaultData { diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts new file mode 100644 index 0000000000..41f03d48d4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts @@ -0,0 +1,98 @@ +import { Meta, Story } from '@storybook/web-components'; +import { LitElement, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbNotificationService, UmbNotificationOptions, UmbNotificationColor } from '../..'; +import type { UmbNotificationDefaultData } from './' +import { UmbContextConsumerMixin } from '../../../../context'; + +import '../../../../../core/context/context-provider.element'; +import '../../../../../backoffice/components/backoffice-notification-container.element'; +import '../default' + +export default { + title: 'API/Notifications/Default', + component: 'ucp-notification-layout-default', + decorators: [ + (story) => + html` + ${story()} + `, + ], +} as Meta; + +@customElement('story-notification-default-example') +class StoryNotificationDefaultExampleElement extends UmbContextConsumerMixin(LitElement) { + + private _notificationService?: UmbNotificationService; + + connectedCallback(): void { + super.connectedCallback(); + + this.consumeContext('umbNotificationService', (notificationService) => { + this._notificationService = notificationService; + console.log('notification service ready'); + }); + } + + private _handleNotification = (color: UmbNotificationColor) => { + const options: UmbNotificationOptions = { + data: { + headline: 'Headline', + message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' + } + }; + this._notificationService?.peek(color, options); + } + + render () { + return html` + + + + + + + `; + } +} + +const Template: Story = () => html``; + +export const Default = Template.bind({}); +Default.parameters = { + docs: { + source: { + language: 'js', + code: ` +const options: UmbNotificationOptions = { + data: { + headline: 'Headline', + message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' + } +}; + +this._notificationService?.peek('positive', options); +`, + }, + }, +}; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.test.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.test.ts index a6c5603d2b..84624e5990 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.test.ts @@ -1,8 +1,8 @@ import { assert, expect } from '@open-wc/testing'; import { validate as uuidValidate } from 'uuid'; import { UmbNotificationHandler } from './notification-handler'; -import type { UmbNotificationDefaultData } from './layouts/default/notification-layout-default.element'; -import type { UmbNotificationOptions } from './notification.service'; +import type { UmbNotificationDefaultData } from './layouts/default'; +import type { UmbNotificationOptions } from './'; describe('UCPNotificationHandler', () => { let notificationHandler: UmbNotificationHandler; diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.ts index fafb3da629..517dcd84a0 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.ts @@ -1,5 +1,7 @@ import { v4 as uuidv4 } from 'uuid'; -import { UmbNotificationOptions, UmbNotificationData, UmbNotificationColor } from './notification.service'; +import type { UmbNotificationOptions, UmbNotificationData, UmbNotificationColor } from './'; + +import './layouts/default'; /** * @export diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.service.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.service.ts index 18eaf0895f..12eb7088b2 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.service.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.service.ts @@ -1,6 +1,5 @@ import { BehaviorSubject, Observable } from 'rxjs'; -import { UmbNotificationHandler } from './notification-handler'; -import './layouts/default/notification-layout-default.element'; +import { UmbNotificationHandler } from './'; export type UmbNotificationData = any; diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.mdx b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.mdx index 99aa381a8f..557ef857c3 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.mdx +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.mdx @@ -25,7 +25,7 @@ import type { UmbNotificationService } from './core/services/notification'; class MyElement extends UmbContextConsumerMixin(LitElement) { - private _notificationService: UmbNotificationService; + private _notificationService?: UmbNotificationService; constructor () { super(); @@ -50,7 +50,7 @@ import type { UmbNotificationService, UmbNotificationDefaultData } from './core/ class MyElement extends UmbContextConsumerMixin(LitElement) { - private _notificationService: UmbNotificationService; + private _notificationService?: UmbNotificationService; constructor () { super(); @@ -131,7 +131,7 @@ import type { UmbNotificationCustomData } from './custom-notification-layout'; class MyElement extends LitElement { - private _notificationService: UmbNotificationService; + private _notificationService?: UmbNotificationService; constructor () { super(); diff --git a/src/Umbraco.Web.UI.Client/src/core/services/notification/notifications.service.test.ts b/src/Umbraco.Web.UI.Client/src/core/services/notification/notifications.service.test.ts index 1edc53875a..f08b2ff105 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/notification/notifications.service.test.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/notification/notifications.service.test.ts @@ -1,12 +1,8 @@ -import { html, expect } from '@open-wc/testing'; -import { UmbNotificationService } from './notification.service'; -import { UmbNotificationHandler } from './notification-handler'; +import { expect } from '@open-wc/testing'; +import { UmbNotificationService, UmbNotificationHandler } from './'; describe('UCPNotificationService', () => { let notificationService: UmbNotificationService; - const options = { - data: { message: 'Notification message' } - }; beforeEach(async () => { notificationService = new UmbNotificationService();