Add new component for inline notifications

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