@dile/ui 2.27.0 → 2.27.2

package/components/button/button.spec.js

@@ -0,0 +1,48 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './button.js';
+
+describe('dile-button', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderButton(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-button');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content inside a native button', async () => {
+    const el = await renderButton('<dile-button>Click me</dile-button>');
+
+    expect(el.shadowRoot.querySelector('button')).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Click me');
+  });
+
+  it('reflects the disabled property onto the native button', async () => {
+    const el = await renderButton('<dile-button disabled>Click me</dile-button>');
+
+    expect(el.shadowRoot.querySelector('button').disabled).toBe(true);
+  });
+
+  it('dispatches a click event when enabled', async () => {
+    const el = await renderButton('<dile-button>Click me</dile-button>');
+    let clicked = false;
+    el.addEventListener('click', () => { clicked = true; });
+
+    el.shadowRoot.querySelector('button').click();
+
+    expect(clicked).toBe(true);
+  });
+
+  it('shows a spinner icon while loading', async () => {
+    const el = await renderButton('<dile-button>Save</dile-button>');
+    expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeNull();
+
+    el.loading = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeTruthy();
+  });
+});

package/components/toast/src/DileToast.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from "lit";
+import { repeat } from "lit/directives/repeat.js";
 
 export class DileToast extends LitElement {
   static get properties() {
@@ -7,6 +8,8 @@ export class DileToast extends LitElement {
       messages: { type: Array },
       /* Miliseconds the feedback message remains on the screen */
       duration: { type: Number },
+      /* If true, shows a close icon on each toast so the user can dismiss it manually */
+      showCloseIcon: { type: Boolean },
     };
   }
 
@@ -15,6 +18,8 @@ export class DileToast extends LitElement {
     this.messages = [];
     this.duration = 3000;
     this.cleanTimeout = false;
+    this.showCloseIcon = false;
+    this._messageId = 0;
   }
 
   static get styles() {
@@ -31,11 +36,15 @@ export class DileToast extends LitElement {
 
   render() {
     return html`
-      ${this.messages.map(
+      ${repeat(
+        this.messages,
+        (msg) => msg.id,
         (msg) => html`
           <dile-toast-item
             .msg="${msg}"
+            .showCloseIcon="${this.showCloseIcon}"
             duration="${this.duration}"
+            @dile-toast-item-closed="${(e) => this._closeMessage(e.detail.id)}"
           ></dile-toast-item>
         `
       )}
@@ -51,6 +60,7 @@ export class DileToast extends LitElement {
     this.messages = [
       ...this.messages,
       {
+        id: ++this._messageId,
         text,
         toastType,
         hidden: false,
@@ -61,6 +71,27 @@ export class DileToast extends LitElement {
     this._programMessageHide();
   }
 
+  /**
+   * Closes a specific message before its automatic duration elapses, triggered by the user
+   */
+  _closeMessage(id) {
+    const message = this.messages.find((item) => item.id === id);
+    if (!message || message.hidden) return;
+    this.messages = this.messages.map((item) =>
+      item.id === id ? { ...item, hidden: true } : item
+    );
+    setTimeout(() => {
+      this.messages = this.messages.filter((item) => item.id !== id);
+    }, 500);
+    this.dispatchEvent(
+      new CustomEvent("dile-toast-closed-by-user", {
+        bubbles: true,
+        composed: true,
+        detail: { message },
+      })
+    );
+  }
+
   /**
    * Programs the hiding of the last message, after it's duration time
    */

package/components/toast/src/DileToastItem.js

@@ -1,9 +1,12 @@
 import { LitElement, html, css } from "lit";
+import { clearIcon } from "@dile/icons/index.js";
+import "../../icon/icon.js";
 
 export class DileToastItem extends LitElement {
   static get properties() {
     return {
       msg: { type: Object },
+      showCloseIcon: { type: Boolean },
     };
   }
 
@@ -15,6 +18,7 @@ export class DileToastItem extends LitElement {
       hidden: false,
       opening: true,
     };
+    this.showCloseIcon = false;
   }
 
   static get styles() {
@@ -26,6 +30,9 @@ export class DileToastItem extends LitElement {
         display: block;
       }
       div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         color: var(--dile-toast-text-color, #fff);
         padding: var(--dile-toast-padding, 10px 15px);
         margin-top: 10px;
@@ -40,6 +47,16 @@ export class DileToastItem extends LitElement {
         font-weight: var(--dile-toast-font-weight, normal);
         border-radius: var(--dile-toast-border-radius, 0);
       }
+      .text {
+        flex-grow: 1;
+      }
+      .closeicon {
+        cursor: pointer;
+        flex-shrink: 0;
+        margin-left: 10px;
+        --dile-icon-color: var(--dile-toast-close-icon-color, var(--dile-toast-text-color, #fff));
+        --dile-icon-size: var(--dile-toast-close-icon-size, 16px);
+      }
       .hidden {
         top: 20px;
         opacity: 0;
@@ -68,11 +85,28 @@ export class DileToastItem extends LitElement {
           ? "opening"
           : ""} ${this.getClassType(this.msg.toastType)}"
       >
-        ${this.msg.text}
+        <span class="text">${this.msg.text}</span>
+        ${this.showCloseIcon
+          ? html`<dile-icon
+              .icon="${clearIcon}"
+              class="closeicon"
+              @click="${this.closeByUser}"
+            ></dile-icon>`
+          : ""}
       </div>
     `;
   }
 
+  closeByUser() {
+    this.dispatchEvent(
+      new CustomEvent("dile-toast-item-closed", {
+        bubbles: true,
+        composed: true,
+        detail: { id: this.msg.id, msg: this.msg },
+      })
+    );
+  }
+
   firstUpdated() {
     setTimeout(() => {
       this.msg.opening = false;

package/components/toast/toast.spec.js

@@ -0,0 +1,86 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './toast.js';
+
+describe('dile-toast', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderToast(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-toast');
+    await el.updateComplete;
+    return el;
+  }
+
+  async function openAndGetItem(el, text, toastType) {
+    el.open(text, toastType);
+    await el.updateComplete;
+    const item = el.shadowRoot.querySelector('dile-toast-item');
+    await item.updateComplete;
+    return item;
+  }
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  it('does not render a close icon by default', async () => {
+    const el = await renderToast('<dile-toast duration="10000"></dile-toast>');
+    const item = await openAndGetItem(el, 'Hello');
+
+    expect(item.shadowRoot.querySelector('.closeicon')).toBeNull();
+  });
+
+  it('renders the message text and status class', async () => {
+    const el = await renderToast('<dile-toast duration="10000"></dile-toast>');
+    const item = await openAndGetItem(el, 'Saved!', 'success');
+
+    expect(item.shadowRoot.querySelector('.text').textContent.trim()).toBe('Saved!');
+    expect(item.shadowRoot.querySelector('div').classList.contains('success')).toBe(true);
+  });
+
+  it('renders a close icon when showCloseIcon is set', async () => {
+    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
+    const item = await openAndGetItem(el, 'Hello');
+
+    expect(item.shadowRoot.querySelector('dile-icon.closeicon')).toBeTruthy();
+  });
+
+  it('closing a toast dispatches dile-toast-closed-by-user with the message detail', async () => {
+    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
+    const item = await openAndGetItem(el, 'Dismiss me', 'error');
+
+    let detail = null;
+    el.addEventListener('dile-toast-closed-by-user', (e) => { detail = e.detail; });
+
+    item.shadowRoot.querySelector('dile-icon.closeicon').click();
+    await el.updateComplete;
+
+    expect(detail).toBeTruthy();
+    expect(detail.message.text).toBe('Dismiss me');
+    expect(detail.message.toastType).toBe('error');
+  });
+
+  it('removes the closed toast from the DOM shortly after, without waiting for its duration', async () => {
+    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
+    const item = await openAndGetItem(el, 'Dismiss me');
+
+    item.shadowRoot.querySelector('dile-icon.closeicon').click();
+    await el.updateComplete;
+    expect(item.shadowRoot.querySelector('div').classList.contains('hidden')).toBe(true);
+
+    await wait(600);
+
+    expect(el.shadowRoot.querySelector('dile-toast-item')).toBeNull();
+  });
+
+  it('still auto-hides and cleans up a toast on its own after duration elapses', async () => {
+    const el = await renderToast('<dile-toast duration="50"></dile-toast>');
+    await openAndGetItem(el, 'Auto dismiss');
+
+    await wait(1200);
+
+    expect(el.shadowRoot.querySelector('dile-toast-item')).toBeNull();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.27.0",
+  "version": "2.27.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5c04395f81c01fd289869b1b99d427d482c516a5"
+  "gitHead": "f096749bccd6d56731d9f8509182686c05175348"
 }

package/styles/colors.css

@@ -34,6 +34,8 @@
   --dile-on-terciary-dark-color: #ffffff;
   --dile-gray-dark-color: #555555;
   --dile-on-gray-dark-color: #ffffff;
+  --dile-gray-very-light-color: #f5f5f5;
+  --dile-on-gray-very-light-color: #303030;
 }
 
 :root.dark-theme {
@@ -78,4 +80,6 @@
 
   --dile-gray-dark-color: #cccccc;
   --dile-on-gray-dark-color: #1e1e1e;
+  --dile-gray-very-light-color: #404040;
+  --dile-on-gray-very-light-color: #ffffff;
 }