@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,256 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-alert.js';
+
+describe('ds-alert', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-alert>Test message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.status).toBe('info');
+        expect(element.dismissible).toBe(false);
+    });
+
+    it('renders message in default slot', async () => {
+        container.innerHTML = '<ds-alert>This is a test message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const slot = element.shadowRoot.querySelector('slot:not([name])');
+        const assignedNodes = slot.assignedNodes();
+        expect(assignedNodes.length).toBeGreaterThan(0);
+        expect(assignedNodes[0].textContent).toBe('This is a test message');
+    });
+
+    it('renders title in title slot', async () => {
+        container.innerHTML = '<ds-alert><strong slot="title">Alert Title</strong>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const titleSlot = element.shadowRoot.querySelector('slot[name="title"]');
+        const assignedNodes = titleSlot.assignedNodes();
+        expect(assignedNodes.length).toBeGreaterThan(0);
+        expect(assignedNodes[0].textContent).toBe('Alert Title');
+    });
+
+    it('renders correct icon for each status', async () => {
+        const statusIcons = {
+            error: 'cancel',
+            warning: 'warning',
+            success: 'check-circle',
+            info: 'info'
+        };
+
+        for (const [status, iconName] of Object.entries(statusIcons)) {
+            container.innerHTML = `<ds-alert status="${status}">Test</ds-alert>`;
+            const element = container.querySelector('ds-alert');
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const icon = element.shadowRoot.querySelector('ds-icon');
+            expect(icon.getAttribute('name')).toBe(iconName);
+        }
+    });
+
+    it('renders message from property', async () => {
+        container.innerHTML = '<ds-alert message="Property message"></ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const messageDiv = element.shadowRoot.querySelector('.message');
+        expect(messageDiv.textContent).toBe('Property message');
+    });
+
+    it('renders title from property', async () => {
+        container.innerHTML = '<ds-alert title="Property title"></ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const titleDiv = element.shadowRoot.querySelector('.title');
+        expect(titleDiv.textContent).toBe('Property title');
+    });
+
+    it('hides actions container when slot is empty', async () => {
+        container.innerHTML = '<ds-alert>No actions</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const actionsDiv = element.shadowRoot.querySelector('.actions');
+        expect(actionsDiv.hasAttribute('hidden')).toBe(true);
+    });
+
+    it('shows actions container when slot has content', async () => {
+        container.innerHTML = '<ds-alert>With actions <button slot="actions">Click</button></ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const actionsDiv = element.shadowRoot.querySelector('.actions');
+        expect(actionsDiv.hasAttribute('hidden')).toBe(false);
+    });
+
+    it('reflects status attribute', async () => {
+        container.innerHTML = '<ds-alert status="error">Error message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.getAttribute('status')).toBe('error');
+    });
+
+    it('hides close button by default', async () => {
+        container.innerHTML = '<ds-alert>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const closeButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(closeButton).toBeFalsy();
+    });
+
+    it('shows close button when dismissible is true', async () => {
+        container.innerHTML = '<ds-alert dismissible>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const closeButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(closeButton).toBeTruthy();
+    });
+
+    it('close button has correct properties', async () => {
+        container.innerHTML = '<ds-alert dismissible>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const closeButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(closeButton.getAttribute('icon')).toBe('close');
+        expect(closeButton.getAttribute('variant')).toBe('action');
+        expect(closeButton.getAttribute('size')).toBe('m');
+    });
+
+    it('dispatches ds-dismiss event when close button is clicked', async () => {
+        container.innerHTML = '<ds-alert dismissible>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        let eventFired = false;
+        element.addEventListener('ds-dismiss', () => {
+            eventFired = true;
+        });
+
+        const closeButton = element.shadowRoot.querySelector('ds-icon-button');
+        closeButton.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(eventFired).toBe(true);
+    });
+
+    it('renders actions slot', async () => {
+        container.innerHTML = `
+      <ds-alert>
+        Message
+        <div slot="actions">
+          <button>Action 1</button>
+          <button>Action 2</button>
+        </div>
+      </ds-alert>
+    `;
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const actionsSlot = element.shadowRoot.querySelector('slot[name="actions"]');
+        const assignedNodes = actionsSlot.assignedNodes();
+        expect(assignedNodes.length).toBeGreaterThan(0);
+    });
+
+    it('applies correct background color for error status', async () => {
+        container.innerHTML = '<ds-alert status="error">Error</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const alertContainer = element.shadowRoot.querySelector('.alert');
+        const styles = getComputedStyle(alertContainer);
+        expect(styles.backgroundColor).toBeTruthy();
+    });
+
+    it('applies correct background color for warning status', async () => {
+        container.innerHTML = '<ds-alert status="warning">Warning</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const alertContainer = element.shadowRoot.querySelector('.alert');
+        const styles = getComputedStyle(alertContainer);
+        expect(styles.backgroundColor).toBeTruthy();
+    });
+
+    it('applies correct background color for success status', async () => {
+        container.innerHTML = '<ds-alert status="success">Success</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const alertContainer = element.shadowRoot.querySelector('.alert');
+        const styles = getComputedStyle(alertContainer);
+        expect(styles.backgroundColor).toBeTruthy();
+    });
+
+    it('applies correct background color for info status', async () => {
+        container.innerHTML = '<ds-alert status="info">Info</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const alertContainer = element.shadowRoot.querySelector('.alert');
+        const styles = getComputedStyle(alertContainer);
+        expect(styles.backgroundColor).toBeTruthy();
+    });
+
+    it('has role="alert" for accessibility', async () => {
+        container.innerHTML = '<ds-alert>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const alertContainer = element.shadowRoot.querySelector('.alert');
+        expect(alertContainer.getAttribute('role')).toBe('alert');
+    });
+
+    it('icon has correct size', async () => {
+        container.innerHTML = '<ds-alert>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon.getAttribute('size')).toBe('sm');
+    });
+
+    it('can update status dynamically', async () => {
+        container.innerHTML = '<ds-alert status="info">Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        element.status = 'error';
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.getAttribute('status')).toBe('error');
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon.getAttribute('name')).toBe('cancel');
+    });
+
+    it('can toggle dismissible dynamically', async () => {
+        container.innerHTML = '<ds-alert>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.shadowRoot.querySelector('ds-icon-button')).toBeFalsy();
+
+        element.dismissible = true;
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.shadowRoot.querySelector('ds-icon-button')).toBeTruthy();
+    });
+});

package/src/ds-alert/index.js

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

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

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-avatar.js';
+
+describe('ds-avatar a11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('should be accessible with image', async () => {
+        container.innerHTML = '<ds-avatar src="image.jpg" alt="User Profile"></ds-avatar>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Use custom axe config if needed, or default
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should be accessible with initials', async () => {
+        container.innerHTML = '<ds-avatar initials="MS"></ds-avatar>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should be accessible as clickable button', async () => {
+        container.innerHTML = '<ds-avatar clickable initials="MS" aria-label="Open Profile"></ds-avatar>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const el = container.querySelector('ds-avatar');
+        expect(el.getAttribute('role')).toBe('button');
+        expect(el.getAttribute('tabindex')).toBe('0');
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+});

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

@@ -0,0 +1,216 @@
+import { LitElement, html, css } from 'lit';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * Avatar component for displaying user representation.
+ * 
+ * @element ds-avatar
+ * 
+ * @prop {string} size - Avatar size: 'sm' (24px) | 'md' (32px) | 'lg' (40px) (default: 'md')
+ * @prop {string} src - Image source URL. Highest priority.
+ * @prop {string} alt - Alt text for image. Required if src is provided.
+ * @prop {string} initials - Initials to display if no image. 2nd priority.
+ * @prop {string} icon - Icon name to display if no image/initials. 3rd priority. Default: 'account_circle'
+ * @prop {string} backgroundColor - Custom background color (CSS value)
+ * @prop {boolean} clickable - Whether the avatar is interactive
+ * 
+ * @event click - Emitted when clickable and clicked/activated
+ */
+export class DsAvatar extends LitElement {
+  static properties = {
+    size: { type: String, reflect: true },
+    src: { type: String },
+    alt: { type: String },
+    initials: { type: String },
+    icon: { type: String },
+    backgroundColor: { type: String, attribute: 'background-color' },
+    clickable: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      --avatar-size: var(--ds-space-xl); /* Default md = 32px */
+      --avatar-font-size: var(--ds-typo-content-caption-regular); /* Default md = caption regular */
+      --avatar-bg: var(--ds-color-bg-neutral-subtle); /* Updated to subtle */
+      --avatar-color: var(--ds-color-text-default);
+    }
+
+    /* Sizes */
+    :host([size="sm"]) {
+      --avatar-size: var(--ds-space-lg); /* 24px */
+      --avatar-font-size: var(--ds-typo-content-viz-regular); /* viz regular */
+    }
+
+    :host([size="md"]) {
+      --avatar-size: var(--ds-space-xl); /* 32px */
+      --avatar-font-size: var(--ds-typo-content-caption-regular); /* caption regular */
+    }
+
+    :host([size="lg"]) {
+      --avatar-size: 40px; 
+      --avatar-font-size: var(--ds-typo-content-body-regular); /* body regular */
+    }
+
+    .avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--avatar-size);
+      height: var(--avatar-size);
+      border-radius: var(--ds-radius-avatar, 999px);
+      background: var(--avatar-bg);
+      color: var(--avatar-color);
+      overflow: hidden;
+      user-select: none;
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    /* Image Variant */
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* Initials Variant */
+    .avatar__initials {
+      font: var(--avatar-font-size);
+      text-transform: uppercase;
+      line-height: 1;
+    }
+
+    /* Icon Variant */
+    .avatar__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Clickable State */
+    :host([clickable]) .avatar {
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    :host([clickable]) {
+      outline: none; 
+    }
+
+    :host([clickable]:focus-visible) .avatar {
+      outline: 2px solid var(--ds-color-border-focus);
+      outline-offset: 2px;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.size = 'md';
+    this.initials = '';
+    this.icon = 'account_circle';
+    this.clickable = false;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('clickable')) {
+      if (this.clickable) {
+        this.setAttribute('tabindex', '0');
+        this.setAttribute('role', 'button');
+        this.addEventListener('keydown', this._handleKeyDown);
+        this.addEventListener('click', this._handleClick);
+      } else {
+        this.removeAttribute('tabindex');
+        this.removeAttribute('role');
+        this.removeEventListener('keydown', this._handleKeyDown);
+        this.removeEventListener('click', this._handleClick);
+      }
+    }
+  }
+
+  _handleKeyDown(e) {
+    if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {
+      // Prevent scrolling for Space
+      e.preventDefault();
+      // Dispatch click event
+      this.click();
+    }
+  }
+
+  _handleClick(e) {
+    // Optional: add ripple or analytics here
+  }
+
+  render() {
+    // Custom background
+    const styles = {};
+    if (this.backgroundColor) {
+      styles['background-color'] = this.backgroundColor;
+    }
+
+    // Determine content based on priority
+    let content;
+
+    // 1. Image
+    if (this.src) {
+      content = html`
+        <img 
+          src="${this.src}" 
+          alt="${this.alt || ''}" 
+          @error="${this._handleImageError}"
+        />
+      `;
+    }
+    // 2. Initials
+    else if (this.initials) {
+      content = html`
+        <span class="avatar__initials">${this.initials.substring(0, 2)}</span>
+      `;
+    }
+    // 3. Icon (Default)
+    else {
+      // Determine icon size based on avatar size
+      const iconSize = this.size === 'sm' ? 'xs' : 'sm'; // sm(24px)->xs(16px), md(32px)->sm(20px), lg(40px)->sm(20px) 
+      // Actually for lg(40px), maybe md(32px) icon? 
+      // Checking design tokens: xs=16, sm=20, md=32. 
+      // If avatar is 32px (md), icon 20px (sm) is good. 
+      // If avatar is 24px (sm), icon 16px (xs) is good.
+      // If avatar is 40px (lg), icon 20px (sm) or maybe 24px? we don't have 24px icon token yet? 
+      // Let's stick to sm icon for lg avatar for now unless specced otherwise.
+
+      const computedIconSize = this.size === 'sm' ? 'xs' : 'sm';
+
+      content = html`
+        <div class="avatar__icon">
+            <ds-icon 
+                name="${this.icon || 'account_circle'}" 
+                size="${computedIconSize}">
+            </ds-icon>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="avatar" style="${this._getStyleString(styles)}">
+        ${content}
+      </div>
+    `;
+  }
+
+  _handleImageError(e) {
+    // Fallback if image fails to load?
+    // Simple way: clear src so it re-renders with fallback? 
+    // For now, let's keep it simple, maybe just log or let it show broken image?
+    // Ideally we would trigger a state change to show fallback.
+    this.src = ''; // This will trigger re-render and show initials/icon
+  }
+
+  _getStyleString(styleObj) {
+    return Object.entries(styleObj)
+      .map(([k, v]) => `${k}:${v}`)
+      .join(';');
+  }
+}
+
+customElements.define('ds-avatar', DsAvatar);

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

@@ -0,0 +1,120 @@
+import './ds-avatar.js';
+
+export default {
+    title: 'Components/Avatar',
+    component: 'ds-avatar',
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+        },
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        initials: { control: 'text' },
+        icon: { control: 'text' },
+        backgroundColor: { control: 'color' },
+        clickable: { control: 'boolean' }
+    },
+};
+
+const createAvatar = ({ size, src, alt, initials, icon, backgroundColor, clickable }) => {
+    const el = document.createElement('ds-avatar');
+
+    if (size) el.setAttribute('size', size);
+    if (src) el.setAttribute('src', src);
+    if (alt) el.setAttribute('alt', alt);
+    if (initials) el.setAttribute('initials', initials);
+    if (icon) el.setAttribute('icon', icon);
+    if (backgroundColor) el.setAttribute('background-color', backgroundColor);
+    if (clickable) el.setAttribute('clickable', '');
+
+    return el;
+};
+
+export const Image = {
+    args: {
+        src: '/avatar-default.png',
+        alt: 'Default User',
+        size: 'md'
+    },
+    render: createAvatar
+};
+
+export const Initials = {
+    args: {
+        initials: 'MS',
+        size: 'md',
+        backgroundColor: '#823cdd'
+    },
+    render: createAvatar
+};
+
+export const Icon = {
+    args: {
+        icon: 'account_circle',
+        size: 'md'
+    },
+    render: createAvatar
+};
+
+export const CustomIcon = {
+    args: {
+        icon: 'star',
+        size: 'md',
+        backgroundColor: '#36a061'
+    },
+    render: createAvatar
+};
+
+export const Sizes = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'display: flex; align-items: center; gap: 16px;';
+
+        ['sm', 'md', 'lg'].forEach(size => {
+            const el = createAvatar({
+                size,
+                initials: size.toUpperCase(),
+                backgroundColor: '#0060ff'
+            });
+            container.appendChild(el);
+        });
+
+        return container;
+    }
+};
+
+export const FallbackChain = {
+    render: () => {
+        const container = document.createElement('div');
+        container.style.cssText = 'display: flex; flex-direction: column; gap: 20px;';
+
+        // 1. Image
+        const row1 = document.createElement('div');
+        row1.innerHTML = '<strong>1. Image (Highest Priority)</strong><br>';
+        row1.appendChild(createAvatar({ src: '/avatar-default.png', initials: 'MS', icon: 'star' }));
+        container.appendChild(row1);
+
+        // 2. Initials
+        const row2 = document.createElement('div');
+        row2.innerHTML = '<strong>2. Initials (Fallback from Image)</strong><br>';
+        row2.appendChild(createAvatar({ initials: 'MS', icon: 'star' }));
+        container.appendChild(row2);
+
+        // 3. Icon
+        const row3 = document.createElement('div');
+        row3.innerHTML = '<strong>3. Icon (Fallback from Initials)</strong><br>';
+        row3.appendChild(createAvatar({ icon: 'star' }));
+        container.appendChild(row3);
+
+        return container;
+    }
+};
+
+export const Clickable = {
+    args: {
+        src: '/avatar-default.png',
+        clickable: true
+    },
+    render: createAvatar
+};