@umbraco-ui/uui-toast-notification - npm Package Compare versions

Comparing version 0.2.1 to 1.0.0-alpha.0

custom-elements.json

@@ -9,3 +9,3 @@ {
         {
-          "name": "look",
+          "name": "color",
           "description": "Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.",
@@ -35,4 +35,4 @@ "type": "\"\"|\"primary\"|\"positive\"|\"warning\"|\"danger\"",
         {
-          "name": "look",
-          "attribute": "look",
+          "name": "color",
+          "attribute": "color",
           "description": "Changes the look of the notification to one of the predefined, symbolic looks. Example set this to danger for errors.",
@@ -39,0 +39,0 @@ "type": "\"\"|\"primary\"|\"positive\"|\"warning\"|\"danger\"",

lib/index.js

 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { InterfaceLookDefaultValue } from '@umbraco-ui/uui-base/lib/types';
 import { Timer, demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
@@ -31,3 +30,3 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
     super();
-    this.look = InterfaceLookDefaultValue;
+    this.color = "";
     this._autoClose = null;
@@ -174,3 +173,4 @@ this._onOpenTimerComplete = () => {
               .label=${"close"}
-              .look=${this.look}
+              ?color=${this.color}
+              .look=${this.color ? "primary" : "default"}
               @click=${() => this.open = false}>
@@ -234,3 +234,3 @@ <uui-icon
         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);
+        background-color: var(--uui-color-surface,#fff);
         padding: var(--uui-size-layout-1,24px);
@@ -262,20 +262,27 @@ padding-right: var(--uui-size-layout-1,24px);
 
-      :host([look='primary']) #toast > div {
-        background-color: var(--uui-look-primary-surface,#1b264f);
-        color: var(--uui-look-primary-contrast,#fefefe);
+      :host #toast > div {
+        background-color: var(--uui-color-surface,#fff);
+        color: var(--uui-color-text,#060606);
+        border-color: var(--uui-color-surface,#fff);
       }
-      :host([look='positive']) #toast > div {
-        background-color: var(--uui-look-positive-surface,#25aa60);
-        color: var(--uui-look-positive-contrast,#fefefe);
+      :host([color='primary']) #toast > div {
+        background-color: var(--uui-color-default,#1b264f);
+        color: var(--uui-color-default-contrast,#fff);
+        border-color: var(--uui-color-default-standalone,rgb(28, 35, 59));
       }
-      :host([look='warning']) #toast > div {
-        background-color: var(--uui-look-warning-surface,#fad634);
-        color: var(--uui-look-warning-contrast,#060606);
-        border-color: var(--uui-look-warning-border,#fad634);
+      :host([color='positive']) #toast > div {
+        background-color: var(--uui-color-positive,#25aa60);
+        color: var(--uui-color-positive-contrast,#fff);
+        border-color: var(--uui-color-positive-standalone,rgb(38, 156, 91));
       }
-      :host([look='danger']) #toast > div {
-        background-color: var(--uui-look-danger-surface,#d42054);
-        color: var(--uui-look-danger-contrast,#fefefe);
-        border-color: var(--uui-look-danger-border,#d42054);
+      :host([color='warning']) #toast > div {
+        background-color: var(--uui-color-warning,#fad634);
+        color: var(--uui-color-warning-contrast,#000);
+        border-color: var(--uui-color-warning-standalone,rgb(224, 193, 51));
       }
+      :host([color='danger']) #toast > div {
+        background-color: var(--uui-color-danger,#d42054);
+        color: var(--uui-color-danger-contrast,white);
+        border-color: var(--uui-color-danger-standalone,rgb(191, 33, 78));
+      }
     `
@@ -285,3 +292,3 @@ ];
   property({ reflect: true })
-], UUIToastNotificationElement.prototype, "look", 2);
+], UUIToastNotificationElement.prototype, "color", 2);
 __decorateClass([
@@ -288,0 +295,0 @@ property({ type: Number })

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

@@ -1,2 +0,1 @@
-import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
 import { LitElement } from 'lit';
@@ -20,3 +19,3 @@ /**
      */
-    look: InterfaceLookType;
+    color: string;
     private _autoClose;
@@ -23,0 +22,0 @@ /**

package.json

 {
   "name": "@umbraco-ui/uui-toast-notification",
-  "version": "0.2.1",
+  "version": "1.0.0-alpha.0",
   "license": "MIT",
@@ -33,7 +33,7 @@ "keywords": [
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.2.1",
-    "@umbraco-ui/uui-button": "0.3.1",
-    "@umbraco-ui/uui-css": "0.1.1",
-    "@umbraco-ui/uui-icon": "0.2.1",
-    "@umbraco-ui/uui-icon-registry-essential": "0.2.1"
+    "@umbraco-ui/uui-base": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-button": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-css": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-icon": "1.0.0-alpha.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.0.0-alpha.0"
   },
@@ -49,3 +49,3 @@ "scripts": {
   "homepage": "https://uui.umbraco.com/?path=/story/uui-toast-notification",
-  "gitHead": "cb61546f85d6c2f122fa8c130409507e8def4bd5"
+  "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
 }

No alert changes

Improved metrics

Total package byte prevSize

18050

increased by1.52%

Lines of code

447

increased by1.36%

Dependency changes

• + Added@umbraco-ui/uui-base@1.0.0-alpha.0(transitive)

• + Added@umbraco-ui/uui-button@1.0.0-alpha.0(transitive)

• + Added@umbraco-ui/uui-css@1.0.0-alpha.0(transitive)

• + Added@umbraco-ui/uui-icon@1.0.0-alpha.0(transitive)

• - Removed@umbraco-ui/uui-base@0.2.1(transitive)

• - Removed@umbraco-ui/uui-button@0.3.1(transitive)

• - Removed@umbraco-ui/uui-css@0.1.1(transitive)

• - Removed@umbraco-ui/uui-icon@0.2.1(transitive)

• Updated@umbraco-ui/uui-base@1.0.0-alpha.0

• Updated@umbraco-ui/uui-button@1.0.0-alpha.0

• Updated@umbraco-ui/uui-css@1.0.0-alpha.0

• Updated@umbraco-ui/uui-icon@1.0.0-alpha.0

• Updated@umbraco-ui/uui-icon-registry-essential@1.0.0-alpha.0