@umbraco-ui/uui-toast-notification-layout 0.0.3 → 0.1.0

package/README.md

@@ -4,6 +4,10 @@
 
 Umbraco style toast-notification-layout component.
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-toast-notification-layout)
+
 ## Installation
 
 ### ES imports

package/custom-elements.json

@@ -8,8 +8,7 @@
         {
           "name": "headline",
           "description": "Headline for this notification, can also be set via the 'headline' slot.",
-          "type": "string | null",
-          "default": "\"null\""
+          "type": "string"
         }
       ],
       "properties": [
@@ -22,8 +21,7 @@
           "name": "headline",
           "attribute": "headline",
           "description": "Headline for this notification, can also be set via the 'headline' slot.",
-          "type": "string | null",
-          "default": "\"null\""
+          "type": "string"
         }
       ],
       "slots": [

package/lib/index.js

@@ -1,5 +1,5 @@
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
@@ -17,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 let UUIToastNotificationLayoutElement = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.headline = null;
+    this.headline = "";
     this._headlineSlotHasContent = false;
     this._headlineSlotChanged = (e) => {
       this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
@@ -27,7 +27,7 @@ let UUIToastNotificationLayoutElement = class extends LitElement {
     return html`
       <div id="message" class="uui-text">
         <h5
-          style=${this._headlineSlotHasContent || this.headline !== null ? "" : "display: none"}>
+          style=${this._headlineSlotHasContent || this.headline && this.headline !== "" ? "" : "display: none"}>
           ${this.headline}
           <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
         </h5>
@@ -40,7 +40,13 @@ let UUIToastNotificationLayoutElement = class extends LitElement {
 UUIToastNotificationLayoutElement.styles = [
   UUITextStyles,
   css`
-      #message > h5 {
+      #message {
+        margin-bottom: calc(var(--uui-size-space-1,3px) * -1);
+      }
+      #message::after {
+        content: '';
+        display: block;
+        clear: both;
       }
       #actions {
         /*
@@ -51,15 +57,9 @@ UUIToastNotificationLayoutElement.styles = [
         display: block;
         float: right;
 
-        margin-top: var(--uui-size-space-3,9px);
+        margin-top: var(--uui-size-space-4,12px);
         margin-bottom: calc(var(--uui-size-space-2,6px) * -1);
       }
-
-      #message::after {
-        content: '';
-        display: block;
-        clear: both;
-      }
     `
 ];
 __decorateClass([

package/lib/uui-toast-notification-layout.element.d.ts

@@ -10,11 +10,10 @@ export declare class UUIToastNotificationLayoutElement extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
      * Headline for this notification, can also be set via the 'headline' slot.
-     * @type string
      * @attr
-     * @default null
+     * @default
      */
-    headline: string | null;
+    headline: string;
     private _headlineSlotHasContent;
     private _headlineSlotChanged;
     render(): import("lit-html").TemplateResult<1>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-toast-notification-layout",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,11 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17",
-    "@umbraco-ui/uui-button": "0.1.10",
-    "@umbraco-ui/uui-css": "0.0.4",
-    "@umbraco-ui/uui-icon": "0.0.5",
-    "@umbraco-ui/uui-icon-registry-essential": "0.0.3"
+    "@umbraco-ui/uui-base": "0.1.0",
+    "@umbraco-ui/uui-css": "0.1.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -45,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-toast-notification-layout",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }