yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add stories for default notification layout

Browse Source
This commit is contained in:
Mads Rasmussen
2022-08-03 17:04:24 +02:00
parent 34571d4512
commit 2cda2d4870
14 changed files with 121 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
View File

@@ -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';

3
src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts
View File

@@ -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) {

4
src/Umbraco.Web.UI.Client/src/backoffice/components/node-editor.element.ts
View File

@@ -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) {

4
src/Umbraco.Web.UI.Client/src/backoffice/property-actions/property-action-copy.element.ts
View File

@@ -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')

4
src/Umbraco.Web.UI.Client/src/backoffice/property-editors/property-editor-context-example.element.ts
View File

@@ -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) {

2
src/Umbraco.Web.UI.Client/src/core/services/notification/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './notification.service';
export * from './notification-handler';

1
src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './notification-layout-default.element';

2
src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.element.ts
View File

@@ -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 {

98
src/Umbraco.Web.UI.Client/src/core/services/notification/layouts/default/notification-layout-default.stories.ts Normal file
View File

@@ -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`<umb-context-provider
key="umbNotificationService"
.value=${new UmbNotificationService()}>
${story()}
</umb-context-provider>`,
],
} 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<UmbNotificationDefaultData> = {
data: {
headline: 'Headline',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}
};
this._notificationService?.peek(color, options);
}
render () {
return html`
<uui-button
@click="${() => this._handleNotification('default')}"
label="Default"
></uui-button>
<uui-button
@click="${() => this._handleNotification('positive')}"
label="Positive"
look="primary"
color="positive"
></uui-button>
<uui-button
@click="${() => this._handleNotification('warning')}"
label="Warning"
look="primary"
color="warning"
></uui-button>
<uui-button
@click="${() => this._handleNotification('danger')}"
label="Danger"
look="primary"
color="danger"
></uui-button>
<umb-backoffice-notification-container></umb-backoffice-notification-container>
`;
}
}
const Template: Story = () => html`<story-notification-default-example></story-notification-default-example>`;
export const Default = Template.bind({});
Default.parameters = {
docs: {
source: {
language: 'js',
code: `
const options: UmbNotificationOptions<UmbNotificationDefaultData> = {
data: {
headline: 'Headline',
message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}
};
this._notificationService?.peek('positive', options);
`,
},
},
};

4
src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.test.ts
View File

@@ -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;

4
src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.ts
View File

@@ -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

3
src/Umbraco.Web.UI.Client/src/core/services/notification/notification.service.ts
View File

@@ -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;

6
src/Umbraco.Web.UI.Client/src/core/services/notification/notification.stories.mdx
View File

@@ -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();

8
src/Umbraco.Web.UI.Client/src/core/services/notification/notifications.service.test.ts
View File

@@ -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();