@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-avatar.js';
+
+describe('ds-avatar', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+        vi.restoreAllMocks();
+    });
+
+    it('should render default icon variant', async () => {
+        container.innerHTML = '<ds-avatar></ds-avatar>';
+        const el = container.querySelector('ds-avatar');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const icon = el.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('name')).toBe('account_circle');
+    });
+
+    it('should render image when src is provided', async () => {
+        container.innerHTML = '<ds-avatar src="image.jpg" alt="User Image"></ds-avatar>';
+        const el = container.querySelector('ds-avatar');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const img = el.shadowRoot.querySelector('img');
+        expect(img).toBeTruthy();
+        expect(img.getAttribute('src')).toBe('image.jpg');
+        expect(img.getAttribute('alt')).toBe('User Image');
+    });
+
+    it('should render initials when src is missing but initials are provided', async () => {
+        container.innerHTML = '<ds-avatar initials="MS"></ds-avatar>';
+        const el = container.querySelector('ds-avatar');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const initials = el.shadowRoot.querySelector('.avatar__initials');
+        expect(initials).toBeTruthy();
+        expect(initials.textContent).toBe('MS');
+    });
+
+    it('should render custom icon when no src/initials', async () => {
+        container.innerHTML = '<ds-avatar icon="star"></ds-avatar>';
+        const el = container.querySelector('ds-avatar');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const icon = el.shadowRoot.querySelector('ds-icon');
+        expect(icon.getAttribute('name')).toBe('star');
+    });
+
+    it('should apply size attribute', async () => {
+        container.innerHTML = '<ds-avatar size="sm"></ds-avatar>';
+        const el = container.querySelector('ds-avatar');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(el.size).toBe('sm');
+        expect(el.getAttribute('size')).toBe('sm');
+    });
+
+    it('should handle clickable state and emit click event', async () => {
+        const clickSpy = vi.fn();
+        container.innerHTML = '<ds-avatar clickable></ds-avatar>';
+        const el = container.querySelector('ds-avatar');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        el.addEventListener('click', clickSpy);
+
+        // Setup internal click if needed, but since it's on host, we can simulate click on host
+        el.click();
+        expect(clickSpy).toHaveBeenCalled();
+
+        // Keyboard interaction
+        const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true });
+        el.dispatchEvent(event);
+        expect(clickSpy).toHaveBeenCalledTimes(2);
+    });
+});

package/src/ds-avatar/index.js

@@ -0,0 +1 @@
+export { DsAvatar } from './ds-avatar.js';

package/src/ds-avatar-extended/ds-avatar-extended.a11y.test.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-avatar-extended.js';
+
+describe('ds-avatar-extended a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should be accessible', async () => {
+        container.innerHTML = `
+            <ds-avatar-extended 
+                name="Miguel Silva" 
+                additional-text="Developer"
+                initials="MS">
+            </ds-avatar-extended>`;
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+});

package/src/ds-avatar-extended/ds-avatar-extended.js

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-avatar/ds-avatar.js';
+
+/**
+ * Extended Avatar component with name and additional text.
+ * 
+ * @element ds-avatar-extended
+ * 
+ * @prop {string} size - Avatar size: 'sm' | 'md' | 'lg' (default: 'md')
+ * @prop {string} src - Avatar image source
+ * @prop {string} alt - Avatar alt text
+ * @prop {string} initials - Avatar initials (overrides auto-generated)
+ * @prop {string} icon - Avatar icon
+ * @prop {string} backgroundColor - Avatar custom background color
+ * @prop {boolean} clickable - Whether the avatar is clickable
+ * 
+ * @prop {string} name - Primary text (Body Bold - updated to Caption Bold)
+ * @prop {string} additionalText - Body Regular text (updated to Caption Regular)
+ * @prop {string} textPosition - 'left' | 'right' (default: 'right')
+ */
+export class DsAvatarExtended extends LitElement {
+  static properties = {
+    // Avatar Props (Pass-through)
+    size: { type: String },
+    src: { type: String },
+    alt: { type: String },
+    initials: { type: String },
+    icon: { type: String },
+    backgroundColor: { type: String, attribute: 'background-color' },
+    clickable: { type: Boolean },
+
+    // Extended Props
+    name: { type: String },
+    additionalText: { type: String, attribute: 'additional-text' },
+    textPosition: { type: String, attribute: 'text-position' }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ds-space-sm);
+      color: var(--ds-color-text-default);
+    }
+
+    :host([text-position="left"]) {
+      flex-direction: row-reverse;
+      text-align: right;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .name {
+      font: var(--ds-typo-content-caption-bold);
+      color: var(--ds-color-text-default);
+    }
+
+    .additional-text {
+      font: var(--ds-typo-content-caption-regular);
+      color: var(--ds-color-text-default);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.size = 'md';
+    this.textPosition = 'right';
+  }
+
+  _getInitials(name) {
+    if (!name) return '';
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+      return parts[0].substring(0, 2).toUpperCase();
+    }
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+
+  render() {
+    // Determine initials: explicit prop > auto-generated from name
+    const displayInitials = this.initials || this._getInitials(this.name);
+
+    return html`
+      <ds-avatar
+        .size=${this.size}
+        .src=${this.src}
+        .alt=${this.alt}
+        .initials=${displayInitials}
+        .icon=${this.icon}
+        .backgroundColor=${this.backgroundColor}
+        .clickable=${this.clickable}
+      ></ds-avatar>
+
+      <div class="info">
+        <span class="name">${this.name}</span>
+        ${this.additionalText
+        ? html`<span class="additional-text">${this.additionalText}</span>`
+        : ''}
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-avatar-extended', DsAvatarExtended);

package/src/ds-avatar-extended/ds-avatar-extended.stories.js

@@ -0,0 +1,93 @@
+import './ds-avatar-extended.js';
+
+export default {
+    title: 'Components/Avatar Extended',
+    component: 'ds-avatar-extended',
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+        },
+        name: { control: 'text' },
+        additionalText: { control: 'text' },
+        textPosition: {
+            control: 'select',
+            options: ['left', 'right']
+        },
+        src: { control: 'text' },
+        initials: { control: 'text' },
+        icon: { control: 'text' },
+        clickable: { control: 'boolean' }
+    },
+};
+
+const createExtended = ({ size, name, additionalText, textPosition, src, initials, icon, clickable }) => {
+    const el = document.createElement('ds-avatar-extended');
+
+    if (size) el.setAttribute('size', size);
+    if (name) el.setAttribute('name', name);
+    if (additionalText) el.setAttribute('additional-text', additionalText);
+    if (textPosition) el.setAttribute('text-position', textPosition);
+
+    if (src) el.setAttribute('src', src);
+    if (initials) el.setAttribute('initials', initials);
+    if (icon) el.setAttribute('icon', icon);
+    if (clickable) el.setAttribute('clickable', '');
+
+    return el;
+};
+
+export const Default = {
+    args: {
+        name: 'Miguel Silva',
+        additionalText: 'Software Engineer',
+        src: '/avatar-default.png',
+        size: 'md'
+    },
+    render: createExtended
+};
+
+export const AutoInitials = {
+    args: {
+        name: 'John Doe',
+        additionalText: 'Product Manager',
+        size: 'md'
+    },
+    render: createExtended
+};
+
+export const TextLeft = {
+    args: {
+        name: 'Jane Smith',
+        additionalText: 'Designer',
+        src: '/avatar-default.png',
+        textPosition: 'left'
+    },
+    render: createExtended
+};
+
+export const NameOnly = {
+    args: {
+        name: 'Guest User',
+        icon: 'account_circle',
+    },
+    render: createExtended
+};
+
+export const Sizes = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'display: flex; flex-direction: column; gap: 20px;';
+
+        ['sm', 'md', 'lg'].forEach(size => {
+            container.appendChild(createExtended({
+                size,
+                name: `Size ${size}`,
+                additionalText: 'Description',
+                // Auto initials will work here
+            }));
+        });
+
+        return container;
+    }
+};

package/src/ds-avatar-extended/ds-avatar-extended.test.js

@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-avatar-extended.js';
+
+describe('ds-avatar-extended', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should render avatar and text', async () => {
+        container.innerHTML = `
+            <ds-avatar-extended 
+                name="Miguel Silva" 
+                additional-text="Developer"
+                initials="MS">
+            </ds-avatar-extended>`;
+        const el = container.querySelector('ds-avatar-extended');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const avatar = el.shadowRoot.querySelector('ds-avatar');
+        expect(avatar).toBeTruthy();
+        expect(avatar.initials).toBe('MS');
+
+        const name = el.shadowRoot.querySelector('.name');
+        expect(name.textContent).toBe('Miguel Silva');
+
+        const additional = el.shadowRoot.querySelector('.additional-text');
+        expect(additional.textContent).toBe('Developer');
+    });
+
+    it('should auto-generate initials from name', async () => {
+        container.innerHTML = '<ds-avatar-extended name="Jane Doe"></ds-avatar-extended>';
+        const el = container.querySelector('ds-avatar-extended');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const avatar = el.shadowRoot.querySelector('ds-avatar');
+        expect(avatar.initials).toBe('JD');
+    });
+
+    it('should handle text position left', async () => {
+        container.innerHTML = `
+            <ds-avatar-extended 
+                name="Miguel Silva" 
+                text-position="left">
+            </ds-avatar-extended>`;
+        const el = container.querySelector('ds-avatar-extended');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(el.getAttribute('text-position')).toBe('left');
+    });
+
+    it('should pass clickable prop to avatar', async () => {
+        container.innerHTML = '<ds-avatar-extended clickable></ds-avatar-extended>';
+        const el = container.querySelector('ds-avatar-extended');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const avatar = el.shadowRoot.querySelector('ds-avatar');
+        expect(avatar.clickable).toBe(true);
+    });
+});

package/src/ds-avatar-extended/index.js

@@ -0,0 +1 @@
+export { DsAvatarExtended } from './ds-avatar-extended.js';

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

@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-banner.js';
+
+describe('ds-banner a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should pass axe accessibility checks with default settings', async () => {
+        container.innerHTML = '<ds-banner message="Accessible banner message"></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        const results = await axe.run(element);
+        expect(results.violations.length).toBe(0);
+    });
+
+    it('should pass axe checks with different statuses', async () => {
+        const statuses = ['error', 'warning', 'success', 'info'];
+
+        for (const status of statuses) {
+            container.innerHTML = `<ds-banner status="${status}" message="Message for ${status}"></ds-banner>`;
+            const element = container.querySelector('ds-banner');
+            await element.updateComplete;
+
+            const results = await axe.run(element);
+            expect(results.violations.length).toBe(0);
+        }
+    });
+
+    it('should have accessible dismiss button', async () => {
+        container.innerHTML = '<ds-banner dismissible message="Dismissible banner"></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        const dismissButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(dismissButton).toBeTruthy();
+        expect(dismissButton.getAttribute('aria-label')).toBe('Fechar banner');
+
+        const results = await axe.run(element);
+        expect(results.violations.length).toBe(0);
+    });
+});

package/src/ds-banner/ds-banner.js

@@ -0,0 +1,233 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+
+/**
+ * Banner component for system-wide feedback
+ *
+ * @element ds-banner
+ *
+ * @prop {string} status - Status type: 'error' | 'warning' | 'success' | 'info' (default: 'info')
+ * @prop {string} message - Message text
+ * @prop {boolean} dismissible - Show/hide close button (default: false)
+ * @prop {boolean} fixed - Whether the banner is fixed at the top of the viewport
+ * @prop {boolean} hideIcon - Hide the status icon
+ *
+ * @slot - Default slot for message content (if message prop is not used)
+ * @slot actions - Optional slot for action buttons
+ *
+ * @fires ds-dismiss - Dispatched when user clicks the close button
+ *
+ * @csspart banner - The main banner container
+ * @csspart content-container - The centered container limiting width
+ * @csspart icon - The status icon element
+ * @csspart message - The message text container
+ * @csspart actions - The actions slot container
+ * @csspart close-button - The close button
+ */
+export class DsBanner extends LitElement {
+  static properties = {
+    status: { type: String, reflect: true },
+    title: { type: String },
+    message: { type: String },
+    dismissible: { type: Boolean, reflect: true },
+    fixed: { type: Boolean, reflect: true },
+    hideIcon: { type: Boolean, attribute: 'hide-icon', reflect: true },
+    _hasActions: { type: Boolean, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      z-index: var(--ds-zindex-message, 70);
+    }
+
+    /* Fixed positioning variant */
+    :host([fixed]) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    .banner {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      min-height: 40px; /* Ensure 40px minimum height */
+      padding: 10px 8px; /* Matching ds-alert padding */
+      box-sizing: border-box;
+    }
+
+    /* Inner container to center content and constrain max-width of message */
+    .content-container {
+      display: flex;
+      align-items: flex-start; /* Align valid for multi-line */
+      width: 100%;
+      max-width: 100%; /* Allow taking full width if needed, but message will constrain */
+      gap: var(--ds-space-sm); /* 8px gap elements */
+    }
+
+    /* 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 */
+    }
+
+    .icon {
+      color: var(--ds-color-icon-default);
+    }
+
+    /* Message Area */
+    .message-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      color: var(--ds-color-text-default);
+      font: var(--ds-typo-content-body-regular);
+    }
+
+    /* Title styling */
+    .title {
+      font: var(--ds-typo-content-body-bold);
+      margin-bottom: var(--ds-space-xs); /* 4px gap to message */
+      max-width: 800px;
+      width: 100%;
+    }
+
+    /* Constrain the message text specifically to 800px as requested */
+    .message-text {
+      max-width: 800px;
+      width: 100%;
+    }
+
+    /* Actions slot wrapper */
+    .actions {
+      display: flex;
+      gap: var(--ds-space-sm);
+      flex-wrap: wrap;
+      margin-top: var(--ds-space-sm);
+    }
+
+    .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 */
+    }
+
+    /* Status Styles - Background Colors */
+    :host([status="error"]) .banner {
+      background-color: var(--ds-color-bg-error-subtle);
+    }
+
+    :host([status="warning"]) .banner {
+      background-color: var(--ds-color-bg-warning-subtle);
+    }
+
+    :host([status="success"]) .banner {
+      background-color: var(--ds-color-bg-success-subtle);
+    }
+
+    :host([status="info"]) .banner,
+    :host(:not([status])) .banner {
+      background-color: var(--ds-color-bg-info-subtle);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.status = 'info';
+    this.title = '';
+    this.message = '';
+    this.dismissible = false;
+    this.fixed = false;
+    this.hideIcon = false;
+    this._hasActions = false;
+  }
+
+  /**
+   * Returns the icon name based on the status
+   */
+  _getIconName() {
+    const iconMap = {
+      error: 'cancel',
+      warning: 'warning',
+      success: 'check-circle',
+      info: 'info'
+    };
+    return iconMap[this.status] || iconMap.info;
+  }
+
+  _handleDismiss() {
+    this.dispatchEvent(new CustomEvent('ds-dismiss', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleSlotChange(e) {
+    const assignedNodes = e.target.assignedNodes({ flatten: true });
+    this._hasActions = assignedNodes.length > 0;
+  }
+
+  render() {
+    return html`
+      <div class="banner" part="banner" role="status">
+        <div class="content-container" part="content-container">
+          
+          ${!this.hideIcon ? html`
+            <div class="icon-container" part="icon-container">
+              <ds-icon 
+                class="icon"
+                name="${this._getIconName()}" 
+                size="sm"
+                part="icon"
+              ></ds-icon>
+            </div>
+          ` : ''}
+
+          <div class="message-area" part="message-area">
+            ${this.title ? html`<div class="title" part="title">${this.title}</div>` : ''}
+            
+            <div class="message-text" part="message">
+              ${this.message}
+              <slot></slot>
+            </div>
+            
+            <div class="actions" ?hidden="${!this._hasActions}" part="actions">
+              <slot name="actions" @slotchange="${this._handleSlotChange}"></slot>
+            </div>
+          </div>
+
+          ${this.dismissible ? html`
+            <div class="dismiss-container" part="dismiss-container">
+              <ds-icon-button
+                class="close-button"
+                icon="close"
+                variant="action"
+                size="m"
+                aria-label="Fechar banner"
+                part="close-button"
+                @click="${this._handleDismiss}"
+              ></ds-icon-button>
+            </div>
+          ` : ''}
+
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-banner', DsBanner);