@spectrum-web-components/toast - npm Package Compare versions

Comparing version 0.35.1-rc.26 to 0.35.1-rc.34

package.json

 {
     "name": "@spectrum-web-components/toast",
-    "version": "0.35.1-rc.26+05bd08374",
+    "version": "0.35.1-rc.34+2cc53a49a",
     "publishConfig": {
@@ -60,6 +60,6 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.35.1-rc.26+05bd08374",
-        "@spectrum-web-components/button": "^0.35.1-rc.26+05bd08374",
-        "@spectrum-web-components/icon": "^0.35.1-rc.26+05bd08374",
-        "@spectrum-web-components/icons-workflow": "^0.35.1-rc.26+05bd08374"
+        "@spectrum-web-components/base": "^0.35.1-rc.34+2cc53a49a",
+        "@spectrum-web-components/button": "^0.35.1-rc.34+2cc53a49a",
+        "@spectrum-web-components/icon": "^0.35.1-rc.34+2cc53a49a",
+        "@spectrum-web-components/icons-workflow": "^0.35.1-rc.34+2cc53a49a"
     },
@@ -75,3 +75,3 @@ "devDependencies": {
     ],
-    "gitHead": "05bd0837417e287acdf2685d1ca05ab4d138fc95"
+    "gitHead": "2cc53a49a9491e4d86ed3c39ab430fda8a7a5b96"
 }

src/toast.css.dev.js

@@ -146,5 +146,7 @@ "use strict";
 --system-spectrum-toast-background-color-default
-)}:host(:not([open])){display:none}
+)}:host{--spectrum-overlay-animation-distance:6px;--spectrum-overlay-animation-duration:var(
+--spectrum-animation-duration-100
+);opacity:0;pointer-events:none;transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,opacity var(--spectrum-overlay-animation-duration) ease-in-out,visibility 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}
 `;
 export default styles;
 //# sourceMappingURL=toast.css.dev.js.map

src/toast.css.js

@@ -144,4 +144,6 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --system-spectrum-toast-background-color-default
-)}:host(:not([open])){display:none}
+)}:host{--spectrum-overlay-animation-distance:6px;--spectrum-overlay-animation-duration:var(
+--spectrum-animation-duration-100
+);opacity:0;pointer-events:none;transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,opacity var(--spectrum-overlay-animation-duration) ease-in-out,visibility 0s linear var(--spectrum-overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}
 `;export default o;
 //# sourceMappingURL=toast.css.js.map

stories/toast.stories.js

@@ -5,2 +5,5 @@ "use strict";
 import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 const toast = ({
@@ -74,2 +77,83 @@ variant = "",
 export const Info = (args) => variantDemo({ ...args, variant: "info" });
+const overlayStyles = html`
+    <style>
+        html,
+        body,
+        #root,
+        #root-inner,
+        sp-story-decorator {
+            height: 100%;
+            margin: 0;
+        }
+
+        sp-story-decorator > div {
+            display: contents;
+        }
+
+        sp-story-decorator::part(container) {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        overlay-trigger {
+            flex: none;
+            margin: 24px 0;
+        }
+
+        .self-managed:nth-child(3) {
+            margin-left: 50px;
+        }
+    </style>
+`;
+const overlaid = (openPlacement) => {
+  return html`
+        ${overlayStyles}
+        ${[
+    ["bottom", ""],
+    ["left", "negative"],
+    ["right", "positive"],
+    ["top", "info"]
+  ].map(([placement, variant]) => {
+    return html`
+                <overlay-trigger
+                    placement=${placement}
+                    open=${ifDefined(
+      openPlacement === placement ? "click" : void 0
+    )}
+                >
+                    <sp-button label="${placement} test" slot="trigger">
+                        Click for ${variant ? variant : "toast"} on the
+                        ${placement}
+                    </sp-button>
+                    <sp-toast slot="click-content" variant=${variant}>
+                        ${placement}
+                    </sp-toast>
+                </overlay-trigger>
+            `;
+  })}
+    `;
+};
+export const overlaidTop = () => overlaid("top");
+export const overlaidRight = () => overlaid("right");
+export const overlaidBottom = () => overlaid("bottom");
+export const overlaidLeft = () => overlaid("left");
+export const overlay = (args) => {
+  return html`
+        <style>
+            sp-toast {
+                position: fixed;
+                bottom: 1em;
+                left: 1em;
+            }
+        </style>
+        <sp-button id="overlay">Toggle Toast overlay</sp-button>
+        <sp-overlay trigger="overlay@click" type="auto" open>
+            ${variantDemo({ ...args, variant: "positive" })}
+        </sp-overlay>
+    `;
+};
 //# sourceMappingURL=toast.stories.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181154

increased by4.53%

Lines of code

1656

increased by5.48%

Dependency changes

• Updated@spectrum-web-components/base@^0.35.1-rc.34+2cc53a49a

• Updated@spectrum-web-components/button@^0.35.1-rc.34+2cc53a49a

• Updated@spectrum-web-components/icon@^0.35.1-rc.34+2cc53a49a

• Updated@spectrum-web-components/icons-workflow@^0.35.1-rc.34+2cc53a49a