Merge branch 'inline-notification' into 'master'

Add new component for inline notifications

See merge request !11

packages/common/dbp-common-demo.js

@@ -3,7 +3,7 @@ import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from './utils.js';
 import * as commonStyles from './styles.js';
-import {getIconCSS, Icon, MiniSpinner, Button, Spinner} from './index.js';
+import {getIconCSS, Icon, MiniSpinner, Button, Spinner, InlineNotification} from './index.js';
 
 export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
     constructor() {
@@ -19,6 +19,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
             'dbp-spinner': Spinner,
             'dbp-button': Button,
             'dbp-auth': customElements.get('dbp-auth'),
+            'dbp-inline-notification': InlineNotification,
         };
     }
 
@@ -174,6 +175,16 @@ html {
 }
 &lt;/style&gt;</pre>
                 </div>
+                <div class="content">
+                    <h2>Inline Notification</h2>
+                    <div class="control">
+                        <dbp-inline-notification body="Item <b>foo</b> was deleted!" type="primary"></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item foo was deleted."></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="success"></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="danger"></dbp-inline-notification><br>
+                        <dbp-inline-notification summary="Item deleted" body="Item <b>foo</b> was deleted!" type="warning"></dbp-inline-notification>
+                    </div>
+                </div>
             </section>
         `;
     }

packages/common/index.js

@@ -4,9 +4,11 @@ import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
 import {MiniSpinner} from './src/mini-spinner.js';
 import {Button, LoadingButton} from './src/button.js';
 import {Spinner} from './src/spinner.js';
+import {InlineNotification} from './src/inline-notification.js';
 
 export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
 export {getIconSVGURL, getIconCSS, Icon};
 export {MiniSpinner};
 export {Button, LoadingButton};
-export {Spinner};
+export {Spinner};
\ No newline at end of file
+export {InlineNotification};
\ No newline at end of file

packages/common/src/inline-notification.js

+import {css, html} from 'lit-element';
+import DBPLitElement from '../dbp-lit-element';
+import * as commonStyles from '../styles';
+
+/**
+ * Inline Notification
+ * 
+ * Summary can be a string or empty
+ * 
+ * Body can be a string, html or empty
+ * 
+ * Type can be primary/info/success/warning/danger (default: info)
+ *  
+ */
+export class InlineNotification extends DBPLitElement {
+    constructor() {
+        super();
+        this.type = '';
+        this.summary = '';
+        this.body = '';
+    }
+
+    static get properties() {
+        return {
+            type: { type: String },
+            summary: { type: String },
+            body: { type: String },
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    static get styles() {
+        // language=css
+        return css`
+            ${commonStyles.getThemeCSS()}
+            ${commonStyles.getGeneralCSS()}
+            ${commonStyles.getNotificationCSS()}
+
+            .notification:not(:last-child) {
+                margin-bottom: 1.5rem;
+            }
+
+            .notification h3 {
+                font-weight: bold;
+                margin-bottom: 3px;
+            }
+
+            .notification h3 {
+                margin: 0 0 3px 0;
+                font: inherit;
+                font-weight: bold; 
+            }
+        `;
+    }
+
+    createBodyHtml() {
+        return document.createRange().createContextualFragment(`${ this.body }`);
+    }
+
+    render() {
+        const bodyHtml = this.createBodyHtml();
+
+        return html`
+            <div class="columns">
+                <div class="column">
+                    <div id="inline-notification" class="notification is-${ this.type !== '' ? this.type : 'info' }">
+                        ${ this.summary !== '' ? html`<h3>${ this.summary }</h3>` : `` }
+                        ${ bodyHtml }
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
\ No newline at end of file