@umbraco-ui/uui-toast-notification 0.0.3 → 0.2.0

package/README.md

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

package/custom-elements.json

@@ -73,7 +73,7 @@
       "slots": [
         {
           "name": "",
-          "description": "for dialog layout/content"
+          "description": "slot for dialog layout/content"
         }
       ]
     }

package/lib/index.js

@@ -1,6 +1,6 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { InterfaceLookDefaultValue } from '@umbraco-ui/uui-base/lib/types';
-import { demandCustomElement, Timer } from '@umbraco-ui/uui-base/lib/utils';
+import { Timer, demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import { css, LitElement, html } from 'lit';
@@ -46,8 +46,6 @@ let UUIToastNotificationElement = class extends LitElement {
         this.open = false;
       }
     });
-    demandCustomElement(this, "uui-button");
-    demandCustomElement(this, "uui-icon");
   }
   get autoClose() {
     return this._autoClose;
@@ -91,6 +89,11 @@ let UUIToastNotificationElement = class extends LitElement {
       this._makeClose();
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    demandCustomElement(this, "uui-button");
+    demandCustomElement(this, "uui-icon");
+  }
   _getAnimationDuration() {
     return parseInt(getComputedStyle(this).getPropertyValue("--uui-toast-notification-animation-duration"), 10) || 480;
   }
@@ -225,7 +228,7 @@ UUIToastNotificationElement.styles = [
         display: block;
 
         box-sizing: border-box;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.21);
+        box-shadow: var(--uui-shadow-depth-1,0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24));
         background-color: var(--uui-interface-surface,#fefefe);
         padding: var(--uui-size-layout-1,24px);
         padding-right: var(--uui-size-layout-1,24px);
@@ -242,10 +245,9 @@ UUIToastNotificationElement.styles = [
 
       #close {
         float: right;
-        margin-top: -7px;
+        margin-top: -6px;
         margin-left: var(--uui-size-space-1,3px);
-        margin-bottom: calc(var(--uui-size-space-2,6px) * -1);
-        margin-bottom: var(--uui-size-space-1,3px);
+        margin-bottom: -4px;
       }
 
       #close > uui-button {

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

@@ -7,7 +7,7 @@ import { LitElement } from 'lit';
  *  @fires {UUIToastNotificationEvent} closing - fires when the toast is starting to close
  *  @fires {UUIToastNotificationEvent} closed - fires when the toast is closed
  *  @description - Component for displaying a toast notification, preferably used in toast-notification-container.
- *  @slot - for dialog layout/content
+ *  @slot - slot for dialog layout/content
  */
 export declare class UUIToastNotificationElement extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -52,6 +52,7 @@ export declare class UUIToastNotificationElement extends LitElement {
     get open(): boolean;
     set open(value: boolean);
     constructor();
+    connectedCallback(): void;
     private _getAnimationDuration;
     private _requestAnimationUpdate;
     private _makeOpen;

package/package.json

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