@salesforcedevs/dx-components 1.3.124 → 1.3.128

package/lwc.config.json

@@ -77,6 +77,7 @@
         "dx/tabPanel",
         "dx/tabPanelList",
         "dx/tbidAvatarButton",
+        "dx/toast",
         "dx/toc",
         "dx/tooltip",
         "dx/tree",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.124",
+    "version": "1.3.128",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "e5c300ce9253e9982f78d0588c037427f3fd0541"
+    "gitHead": "6f58d995e7e54d8713c1992c8af93c136ebeeaa7"
 }

package/src/modules/dx/popover/popover.css

@@ -10,7 +10,7 @@
 }
 
 .popover-container {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));

package/src/modules/dx/toast/toast.css

@@ -0,0 +1,76 @@
+@import "dxHelpers/text";
+
+:host {
+    --padding: var(--dx-g-spacing-md);
+
+    display: inline-block;
+}
+
+@keyframes slideup {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: var(--padding);
+        opacity: 1;
+    }
+}
+
+.container {
+    position: fixed;
+    bottom: 0;
+    left: var(--padding);
+    right: var(--padding);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100000000000;
+    opacity: 0;
+    animation: slideup 0.4s ease-in 0.3s 1 forwards;
+}
+
+.toast {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 926px;
+    background-color: rgb(22, 50, 92);
+    padding: var(--dx-g-spacing-mlg);
+    border-radius: 4px;
+    width: 100%;
+}
+
+.toast-warning {
+    background-color: var(--dx-g-red-natural-95);
+}
+
+.toast-success {
+    background-color: var(--dx-g-green-natural-95);
+}
+
+.toast-error {
+    background-color: var(--dx-g-red-natural-95);
+}
+
+.content {
+    flex-grow: 1;
+    margin: 0 var(--dx-g-spacing-lg);
+    color: white;
+}
+
+.content ::slotted(a) {
+    color: white !important;
+    text-decoration: underline !important;
+}
+
+dx-button {
+    --dx-c-button-primary-color: white;
+    --dx-c-button-inline-color-hover: gray;
+}
+
+dx-icon {
+    color: white;
+}

package/src/modules/dx/toast/toast.html

@@ -0,0 +1,22 @@
+<template>
+    <template if:true={isOpen}>
+        <div class="container">
+            <div class={className} role="status">
+                <div class="type-icon">
+                    <dx-icon size="large" symbol={iconSymbol}></dx-icon>
+                </div>
+                <div class="content dx-text-body-3">
+                    <slot></slot>
+                </div>
+                <div class="close">
+                    <dx-button
+                        onclick={close}
+                        icon-symbol="close"
+                        variant="inline"
+                        aria-label="Dismiss Toast"
+                    ></dx-button>
+                </div>
+            </div>
+        </div>
+    </template>
+</template>

package/src/modules/dx/toast/toast.ts

@@ -0,0 +1,36 @@
+import { api, LightningElement } from "lwc";
+
+type ToastVariant = "info" | "error" | "success";
+
+const icons = {
+    info: "info",
+    warning: "warning",
+    success: "success",
+    error: "error"
+};
+
+export default class extends LightningElement {
+    @api variant: ToastVariant = "info";
+    @api localStorageKey!: string;
+
+    private isOpen: boolean = false;
+
+    connectedCallback() {
+        this.isOpen =
+            window.localStorage.getItem(this.localStorageKey) !== "false";
+    }
+
+    private get iconSymbol() {
+        return icons[this.variant] || icons.info;
+    }
+
+    private get className() {
+        return `toast toast-${this.variant}`;
+    }
+
+    close() {
+        this.dispatchEvent(new CustomEvent("close"));
+        window.localStorage.setItem(this.localStorageKey, "false");
+        this.isOpen = false;
+    }
+}