@nuvia-ui/components 4.0.1

package/src/ds-toast/ds-toast-provider.js

@@ -0,0 +1,110 @@
+import { LitElement, html, css } from 'lit';
+import './ds-toast.js';
+
+/**
+ * Toast Provider component.
+ * Manages the display and stacking of toast notifications.
+ * Listens for 'ds-toast-show' events on the window.
+ *
+ * @element ds-toast-provider
+ */
+export class DsToastProvider extends LitElement {
+    static properties = {
+        _toasts: { type: Array, state: true }
+    };
+
+    static styles = css`
+    :host {
+      position: fixed;
+      top: 0;
+      right: 0;
+      z-index: var(--ds-zindex-toast, 100);
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-sm, 8px); /* 8px gap between toasts */
+      padding: var(--ds-space-md, 16px);
+      max-height: 100vh;
+      overflow-y: auto;
+      pointer-events: none; /* Allow clicks to pass through empty space */
+      box-sizing: border-box;
+      
+      /* Scrollbar styling */
+      scrollbar-width: thin;
+      scrollbar-color: var(--ds-color-border-default, #ccc) transparent;
+    }
+
+    /* Webkit scrollbar */
+    :host::-webkit-scrollbar {
+      width: 6px;
+    }
+    :host::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    :host::-webkit-scrollbar-thumb {
+      background-color: var(--ds-color-border-default, #ccc);
+      border-radius: 3px;
+    }
+
+    ds-toast {
+      pointer-events: auto; /* Re-enable clicks on toasts */
+      flex-shrink: 0;
+      transition: all 0.3s ease;
+    }
+  `;
+
+    constructor() {
+        super();
+        this._toasts = [];
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('ds-toast-show', this._handleToastShow);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('ds-toast-show', this._handleToastShow);
+    }
+
+    _handleToastShow = (event) => {
+        const { detail } = event;
+        const id = Date.now().toString(36) + Math.random().toString(36).substr(2);
+
+        // Add new toast to the beginning of the array (top of stack)
+        this._toasts = [
+            {
+                id,
+                ...detail
+            },
+            ...this._toasts
+        ];
+    }
+
+    _handleDismiss(id) {
+        this._toasts = this._toasts.filter(toast => toast.id !== id);
+    }
+
+    render() {
+        return html`
+      ${this._toasts.map(toast => html`
+        <ds-toast
+          .status="${toast.status || 'info'}"
+          .title="${toast.title || ''}"
+          .message="${toast.message}"
+          .dismissible="${toast.dismissible !== false}"
+          .duration="${toast.duration ?? 5000}"
+          @ds-dismiss="${() => this._handleDismiss(toast.id)}"
+        >
+            ${toast.actions ? html`
+                <div slot="actions">
+                    ${toast.actions}
+                </div>
+            ` : ''}
+        </ds-toast>
+      `)}
+    `;
+    }
+}
+
+customElements.define('ds-toast-provider', DsToastProvider);

package/src/ds-toast/ds-toast.a11y.test.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-toast.js';
+
+describe('ds-toast a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks', async () => {
+        container.innerHTML = '<ds-toast message="Accessible toast message"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        const results = await axe.run(element);
+        expect(results.violations.length).toBe(0);
+    });
+
+    it('should pass axe checks with status variants', async () => {
+        container.innerHTML = '<ds-toast status="error" title="Error" message="Something went wrong"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        const results = await axe.run(element);
+        expect(results.violations.length).toBe(0);
+    });
+});

package/src/ds-toast/ds-toast.js

@@ -0,0 +1,243 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+/**
+ * Toast component for temporary notifications.
+ * Designed to be used within ds-toast-provider, but can be used standalone.
+ *
+ * @element ds-toast
+ *
+ * @prop {string} status - Status type: 'error' | 'warning' | 'success' | 'info' (default: 'info')
+ * @prop {string} title - Optional title
+ * @prop {string} message - Message text
+ * @prop {boolean} dismissible - Show/hide close button (default: false)
+ * @prop {number} duration - Auto-dismiss duration in ms. 0 to disable. (default: 5000)
+ *
+ * @fires ds-dismiss - Dispatched when closed (manually or auto)
+ */
+export class DsToast extends LitElement {
+  static properties = {
+    status: { type: String, reflect: true },
+    title: { type: String },
+    message: { type: String },
+    dismissible: { type: Boolean },
+    duration: { type: Number },
+    _hasActions: { type: Boolean, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 344px; /* Fixed width as requested */
+      box-sizing: border-box;
+      /* Animation entry is handled by the provider usually, or host animation */
+      animation: slide-in 0.3s cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    @keyframes slide-in {
+      from { 
+        transform: translateX(100%); 
+        opacity: 0; 
+      }
+      to { 
+        transform: translateX(0); 
+        opacity: 1; 
+      }
+    }
+
+    .toast {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ds-space-sm); /* 8px */
+      padding: 10px 8px; /* Matching ds-alert padding */
+      border-radius: var(--ds-radius-container); /* 0px - sharp */
+      box-sizing: border-box;
+      box-shadow: var(--ds-shadow-overlay, 0 4px 12px rgba(0, 0, 0, 0.15));
+    }
+
+    /* Side containers matching ds-alert strategy for alignment */
+    .icon-container,
+    .dismiss-container {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 20px; /* text line-height matching */
+    }
+
+    /* Status icon */
+    .icon {
+      color: var(--ds-color-icon-default);
+    }
+
+    /* Content Area */
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+    }
+
+    .title {
+      font: var(--ds-typo-content-body-bold);
+      margin-bottom: var(--ds-space-xs); /* 4px */
+    }
+
+    .message {
+      word-wrap: break-word; /* Ensure text wraps */
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--ds-space-sm); /* 8px gap */
+      margin-top: var(--ds-space-sm);
+      flex-wrap: wrap;
+    }
+
+    .actions[hidden] {
+      display: none;
+    }
+
+    /* Dismiss button container needs to be pushed to the right if we want it fully responsive,
+       but in this flex layout, flex:1 on message area handles it. */
+    .dismiss-container {
+      margin-left: auto; /* Push to the far right if content doesn't fill */
+    }
+
+    /* Close button */
+    .close-button {
+      /* No absolute sizing here, handled by parent flex centering */
+    }
+
+    /* Status Styles - Background Colors */
+    :host([status="error"]) .toast {
+      background-color: var(--ds-color-bg-error-subtle);
+    }
+
+    :host([status="warning"]) .toast {
+      background-color: var(--ds-color-bg-warning-subtle);
+    }
+
+    :host([status="success"]) .toast {
+      background-color: var(--ds-color-bg-success-subtle);
+    }
+
+    :host([status="info"]) .toast,
+    :host(:not([status])) .toast {
+      background-color: var(--ds-color-bg-info-subtle);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.status = 'info';
+    this.title = '';
+    this.message = '';
+    this.dismissible = true; /* Default true for toasts usually, unless strictly programmatic */
+    this.duration = 5000; /* Default 5s */
+    this._hasActions = false;
+    this._timer = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._startTimer();
+
+    // Pause on hover
+    this.addEventListener('mouseenter', this._pauseTimer);
+    this.addEventListener('mouseleave', this._resumeTimer);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearTimer();
+    this.removeEventListener('mouseenter', this._pauseTimer);
+    this.removeEventListener('mouseleave', this._resumeTimer);
+  }
+
+  _startTimer() {
+    if (this.duration > 0) {
+      this._timer = setTimeout(() => {
+        this._dismiss();
+      }, this.duration);
+    }
+  }
+
+  _clearTimer() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
+
+  _pauseTimer = () => {
+    this._clearTimer();
+  }
+
+  _resumeTimer = () => {
+    // Ideally we would track remaining time, but resetting to full duration upon simple hover exit 
+    // is a common and acceptable simplifcation for toasts (gives user time to read).
+    // Or we could implement strict remaining time logic. For now, restarting is safer UX.
+    this._startTimer();
+  }
+
+  _dismiss() {
+    this.dispatchEvent(new CustomEvent('ds-dismiss', { bubbles: true, composed: true }));
+  }
+
+  _getIconName() {
+    const iconMap = {
+      error: 'cancel',
+      warning: 'warning',
+      success: 'check-circle',
+      info: 'info'
+    };
+    return iconMap[this.status] || iconMap.info;
+  }
+
+  _handleSlotChange(e) {
+    const assignedNodes = e.target.assignedNodes({ flatten: true });
+    this._hasActions = assignedNodes.length > 0;
+  }
+
+  render() {
+    return html`
+      <div class="toast" role="alert">
+        <div class="icon-container">
+          <ds-icon 
+            class="icon"
+            name="${this._getIconName()}" 
+            size="sm"
+          ></ds-icon>
+        </div>
+
+        <div class="content">
+          ${this.title ? html`<div class="title">${this.title}</div>` : ''}
+          <div class="message">${this.message}</div>
+          
+          <div class="actions" ?hidden="${!this._hasActions}">
+            <slot name="actions" @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+        </div>
+
+        ${this.dismissible ? html`
+          <div class="dismiss-container">
+             <ds-icon-button
+                class="close-button"
+                icon="close"
+                variant="action"
+                size="m"
+                aria-label="Fechar notificação"
+                @click="${this._dismiss}"
+              ></ds-icon-button>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-toast', DsToast);

package/src/ds-toast/ds-toast.stories.js

@@ -0,0 +1,143 @@
+import { html } from 'lit';
+import './ds-toast.js';
+import './ds-toast-provider.js';
+import '../ds-button/ds-button.js';
+
+export default {
+    title: 'Components/Toast',
+    component: 'ds-toast',
+    tags: ['autodocs'],
+    argTypes: {
+        status: {
+            control: 'select',
+            options: ['error', 'warning', 'success', 'info']
+        },
+        duration: {
+            control: { type: 'number', min: 0 }
+        }
+    }
+};
+
+const Template = (args) => html`
+  <div style="position: relative; height: 150px; width: 400px; border: 1px dashed #ccc; padding: 20px;">
+    <ds-toast 
+      .status=${args.status} 
+      .title=${args.title}
+      .message=${args.message} 
+      .dismissible=${args.dismissible}
+      .duration=${args.duration}
+    >
+      ${args.slotContent ? html`<div slot="actions">${args.slotContent}</div>` : ''}
+    </ds-toast>
+  </div>
+`;
+
+export const Default = {
+    args: {
+        status: 'info',
+        message: 'Your changes have been saved.',
+        dismissible: true,
+        duration: 0
+    },
+    render: (args) => Template(args)
+};
+
+export const WithTitle = {
+    args: {
+        status: 'success',
+        title: 'Success',
+        message: 'Profile updated successfully.',
+        dismissible: true,
+        duration: 0
+    },
+    render: (args) => Template(args)
+};
+
+export const NotDismissible = {
+    args: {
+        status: 'info',
+        message: 'This notification cannot be dismissed by the user.',
+        dismissible: false,
+        duration: 0
+    },
+    render: (args) => Template(args)
+};
+
+export const WithActions = {
+    args: {
+        status: 'warning',
+        message: 'Connection lost. Retrying...',
+        dismissible: true,
+        duration: 0
+    },
+    render: (args) => html`
+      <div style="position: relative; height: 150px; width: 400px; border: 1px dashed #ccc; padding: 20px;">
+        <ds-toast 
+          .status=${args.status} 
+          .title=${args.title}
+          .message=${args.message} 
+          .dismissible=${args.dismissible}
+          .duration=${args.duration}
+        >
+            <div slot="actions" style="display: flex; gap: 8px; align-items: center;">
+                <ds-button variant="action">Retry</ds-button>
+                <ds-button variant="action">Dismiss</ds-button>
+            </div>
+        </ds-toast>
+      </div>
+    `
+};
+
+/**
+ * Demonstrates the stacking behavior using ds-toast-provider.
+ * Click the buttons to trigger toasts.
+ */
+export const ToastSystem = {
+    render: () => html`
+    <div>
+        <ds-toast-provider></ds-toast-provider>
+
+        <div style="display: flex; gap: 8px; flex-direction: column; align-items: flex-start;">
+            <p>Click buttons to trigger toasts (Fixed Top-Right)</p>
+            
+            <ds-button variant="secondary" @click=${() => dispatchToast('success', 'Saved', 'Changes saved successfully!')}>
+                Trigger Success
+            </ds-button>
+            
+            <ds-button variant="secondary" @click=${() => dispatchToast('error', 'Error', 'Failed to save changes.', 0)}>
+                Trigger Error (Persistent)
+            </ds-button>
+            
+            <ds-button variant="secondary" @click=${() => dispatchToast('info', '', 'Simple info message without title')}>
+                Trigger Info (No Title)
+            </ds-button>
+
+            <ds-button variant="secondary" @click=${() => dispatchToast('warning', 'Warning', 'System overload!', 3000)}>
+                Trigger Warning
+            </ds-button>
+            
+            <ds-button variant="secondary" @click=${() => dispatchMany()}>
+                Trigger Many (Overflow Test)
+            </ds-button>
+        </div>
+    </div>
+    `
+};
+
+function dispatchToast(status, title, message, duration = 3000) {
+    const event = new CustomEvent('ds-toast-show', {
+        detail: { status, title, message, duration, dismissible: true },
+        bubbles: true,
+        composed: true
+    });
+    window.dispatchEvent(event);
+}
+
+function dispatchMany() {
+    let count = 0;
+    const interval = setInterval(() => {
+        dispatchToast('info', `Notification ${count + 1}`, `This is toast number ${count + 1}`);
+        count++;
+        if (count >= 5) clearInterval(interval);
+    }, 200);
+}

package/src/ds-toast/ds-toast.test.js

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-toast.js';
+
+describe('ds-toast', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+        vi.useRealTimers();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-toast message="Test message"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        expect(element.status).toBe('info');
+        expect(element.message).toBe('Test message');
+        expect(element.dismissible).toBe(true);
+        expect(element.duration).toBe(5000);
+
+        const toast = element.shadowRoot.querySelector('.toast');
+        expect(toast).toBeTruthy();
+    });
+
+    it('renders with custom status and title', async () => {
+        container.innerHTML = '<ds-toast status="success" title="Success Title" message="Success Message"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        expect(element.status).toBe('success');
+        expect(element.title).toBe('Success Title');
+
+        const titleEl = element.shadowRoot.querySelector('.title');
+        expect(titleEl.textContent).toBe('Success Title');
+    });
+
+    it('dispatches ds-dismiss event on close button click', async () => {
+        container.innerHTML = '<ds-toast message="Dismiss me"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        const dismissSpy = vi.fn();
+        element.addEventListener('ds-dismiss', dismissSpy);
+
+        const closeBtn = element.shadowRoot.querySelector('.close-button');
+        closeBtn.click();
+
+        expect(dismissSpy).toHaveBeenCalled();
+    });
+
+    it('auto-dismisses after duration', async () => {
+        vi.useFakeTimers();
+        container.innerHTML = '<ds-toast message="Auto dismiss" duration="1000"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        const dismissSpy = vi.fn();
+        element.addEventListener('ds-dismiss', dismissSpy);
+
+        vi.advanceTimersByTime(1000);
+        expect(dismissSpy).toHaveBeenCalled();
+    });
+
+    it('pauses timer on hover', async () => {
+        vi.useFakeTimers();
+        container.innerHTML = '<ds-toast message="Hover test" duration="1000"></ds-toast>';
+        const element = container.querySelector('ds-toast');
+        await element.updateComplete;
+
+        const dismissSpy = vi.fn();
+        element.addEventListener('ds-dismiss', dismissSpy);
+
+        // Simulate hover
+        element.dispatchEvent(new Event('mouseenter'));
+
+        // Advance time past duration
+        vi.advanceTimersByTime(1500);
+        expect(dismissSpy).not.toHaveBeenCalled();
+
+        // Simulate mouse leave
+        element.dispatchEvent(new Event('mouseleave'));
+
+        // Advance timer again
+        vi.advanceTimersByTime(1000);
+        expect(dismissSpy).toHaveBeenCalled();
+    });
+});

package/src/ds-toast/index.js

@@ -0,0 +1,2 @@
+export { DsToast } from './ds-toast.js';
+export { DsToastProvider } from './ds-toast-provider.js';