@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-accordion.js';
+import './ds-accordion-item.js';
+
+describe('ds-accordion', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default slots', async () => {
+        container.innerHTML = `
+            <ds-accordion>
+                <ds-accordion-item heading="Item 1">Content 1</ds-accordion-item>
+                <ds-accordion-item heading="Item 2">Content 2</ds-accordion-item>
+            </ds-accordion>
+        `;
+        const el = container.querySelector('ds-accordion');
+        await new Promise(resolve => setTimeout(resolve, 50)); // wait for render
+
+        expect(el).toBeTruthy();
+        const items = el.querySelectorAll('ds-accordion-item');
+        expect(items.length).toBe(2);
+    });
+
+    it('allows only one item open by default', async () => {
+        container.innerHTML = `
+            <ds-accordion>
+                <ds-accordion-item heading="Item 1" open>Content 1</ds-accordion-item>
+                <ds-accordion-item heading="Item 2">Content 2</ds-accordion-item>
+            </ds-accordion>
+        `;
+        const el = container.querySelector('ds-accordion');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const items = el.querySelectorAll('ds-accordion-item');
+        expect(items[0].open).toBe(true);
+        expect(items[1].open).toBe(false);
+
+        // Click header of second item
+        const header2 = items[1].shadowRoot.querySelector('.header');
+        header2.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(items[0].open).toBe(false);
+        expect(items[1].open).toBe(true);
+    });
+
+    it('allows multiple items open when multiple is true', async () => {
+        container.innerHTML = `
+            <ds-accordion multiple>
+                <ds-accordion-item heading="Item 1" open>Content 1</ds-accordion-item>
+                <ds-accordion-item heading="Item 2">Content 2</ds-accordion-item>
+            </ds-accordion>
+        `;
+        const el = container.querySelector('ds-accordion');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const items = el.querySelectorAll('ds-accordion-item');
+
+        const header2 = items[1].shadowRoot.querySelector('.header');
+        header2.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(items[0].open).toBe(true);
+        expect(items[1].open).toBe(true);
+    });
+});
+
+describe('ds-accordion-item', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('toggles open state on click', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+
+        expect(el.open).toBe(false);
+
+        header.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.open).toBe(true);
+
+        header.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.open).toBe(false);
+    });
+
+    it('reflects chevron-position attribute', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test" chevron-position="left">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(el.getAttribute('chevron-position')).toBe('left');
+        const header = el.shadowRoot.querySelector('.header');
+        expect(header.classList.contains('chevron-left')).toBe(true);
+    });
+
+    it('does not toggle when disabled', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test" disabled>Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const header = el.shadowRoot.querySelector('.header');
+
+        header.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+        expect(el.open).toBe(false);
+    });
+
+    // Test for custom events isn't easy with basic DOM unless we adhere to vitest mocking or just listen
+    it('dispatches ds-accordion-item-toggle event', async () => {
+        container.innerHTML = '<ds-accordion-item heading="Test">Content</ds-accordion-item>';
+        const el = container.querySelector('ds-accordion-item');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        let eventDetail = null;
+        el.addEventListener('ds-accordion-item-toggle', (e) => {
+            eventDetail = e.detail;
+        });
+
+        const header = el.shadowRoot.querySelector('.header');
+        header.click();
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(eventDetail).not.toBeNull();
+        expect(eventDetail.open).toBe(true);
+    });
+});

package/src/ds-accordion/index.js

@@ -0,0 +1,2 @@
+export * from './ds-accordion.js';
+export * from './ds-accordion-item.js';

package/src/ds-action-bar/ds-action-bar.js

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from 'lit';
+
+/**
+ * Action Bar component for the Design System
+ * 
+ * @element ds-action-bar
+ * 
+ * @prop {string} variant - 'pattern' | 'page' (default: 'pattern')
+ * @prop {boolean} divider - Whether to show top divider (border). Only applies to 'pattern' usually, but can apply to page.
+ * 
+ * @slot start - Left aligned content
+ * @slot end - Right aligned content (default)
+ */
+export class DsActionBar extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+    divider: { type: Boolean, reflect: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      background: var(--ds-color-bg-surface, #ffffff); /* Default background */
+    }
+
+    .action-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* 
+     * VARIANTS 
+     */
+
+    /* Pattern (Default) 
+       Padding: 16px vertical (16 top, 16 bottom), 16px horizontal
+       Gap: 16px
+    */
+    :host([variant="pattern"]) .action-bar,
+    :host(:not([variant])) .action-bar {
+      padding: 16px 16px;
+      gap: 16px;
+    }
+
+    /* Page 
+       Padding: 24px vertical (24 top, 24 bottom), 32px horizontal
+       Gap: 32px
+       Elevation: shadow token
+    */
+    :host([variant="page"]) {
+       box-shadow: var(--ds-elevation-low, 0 2px 4px rgba(0,0,0,0.1)); /* Use proper token if available */
+    }
+    
+    :host([variant="page"]) .action-bar {
+      padding: 24px 32px;
+      gap: 32px;
+    }
+
+    /* 
+     * DIVIDER LOGIC
+     * Using absolute position to avoid affecting layout/padding.
+     */
+     
+    :host([divider]) {
+      position: relative; 
+    }
+    
+    :host([divider])::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--ds-color-border, #e0e0e0);
+    }
+    
+    /* Remove old padding adjustments */
+    
+    /* Slot utility styling */
+    .slot-start,
+    .slot-end {
+      display: flex;
+      align-items: center;
+    }
+    
+    /* Ensure content in slots can flex if needed, but usually they are static groups */
+  `;
+
+  constructor() {
+    super();
+    this.variant = 'pattern';
+    this.divider = false;
+  }
+
+  render() {
+    return html`
+      <div class="action-bar">
+        <div class="slot-start">
+           <slot name="start"></slot>
+        </div>
+        <div class="slot-end">
+           <slot name="end"></slot>
+           <slot></slot> <!-- Default slot goes to end -->
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('ds-action-bar', DsActionBar);

package/src/ds-action-bar/ds-action-bar.stories.js

@@ -0,0 +1,86 @@
+import { html } from 'lit';
+import './ds-action-bar';
+import '../ds-button/ds-button';
+import '../ds-button-group/ds-button-group';
+
+export default {
+    title: 'Components/Action Bar',
+    component: 'ds-action-bar',
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['pattern', 'page'],
+            description: 'Variant of the Action Bar',
+        },
+        divider: {
+            control: { type: 'boolean' },
+            description: 'Show top border divider',
+        }
+    },
+    parameters: {
+        layout: 'fullscreen',
+    }
+};
+
+const Template = ({ variant, divider }) => html`
+  <div style="background: #f4f4f4; padding: 50px;">
+    <!-- Container to simulate context -->
+    <div style="background: white; border: 1px dashed #ccc;">
+        <div style="padding: 20px;">Content above action bar...</div>
+        
+        <ds-action-bar variant=${variant} ?divider=${divider}>
+            <div slot="start" style="font-family: sans-serif; font-size: 14px; color: #666;">
+                 Step 1 of 3
+            </div>
+            
+            <ds-button-group align="end">
+                <ds-button variant="primary">Confirm</ds-button>
+                <ds-button variant="secondary">Cancel</ds-button>
+            </ds-button-group>
+        </ds-action-bar>
+    </div>
+  </div>
+`;
+
+export const Pattern = Template.bind({});
+Pattern.args = {
+    variant: 'pattern',
+    divider: false,
+};
+
+export const PatternWithDivider = Template.bind({});
+PatternWithDivider.args = {
+    variant: 'pattern',
+    divider: true,
+};
+
+// Page Sticky Footer Example
+export const Page = () => html`
+  <div style="background: #f4f4f4; min-height: 100vh; display: flex; flex-direction: column;">
+    <!-- Content Area -->
+    <div style="flex: 1; padding: 40px; max-width: 800px; margin: 0 auto; width: 100%; box-sizing: border-box;">
+        <h1>Page Title</h1>
+        <p>Scroll down to see the sticky action bar...</p>
+        ${Array(5).fill(html`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>`).map(p => p)}
+    </div>
+    
+    <!-- Sticky Bottom Action Bar -->
+    <div style="position: sticky; bottom: 0; width: 100%; z-index: 100;">
+        <ds-action-bar variant="page" divider>
+            <div slot="start" style="font-family: sans-serif; font-size: 14px; color: #666;">
+                 Last saved: Just now
+            </div>
+            
+            <ds-button-group align="end">
+                <ds-button variant="primary">Save Changes</ds-button>
+                <ds-button variant="secondary">Cancel</ds-button>
+            </ds-button-group>
+        </ds-action-bar>
+    </div>
+  </div>
+`;
+Page.parameters = {
+    docs: {
+        story: 'Demonstrates a full-page sticky footer action bar.',
+    }
+};

package/src/ds-action-bar/ds-action-bar.test.js

@@ -0,0 +1,64 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-action-bar.js';
+import '../ds-button/ds-button.js';
+import '../ds-button-group/ds-button-group.js';
+
+describe('ds-action-bar', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values (pattern)', async () => {
+        container.innerHTML = `
+      <ds-action-bar>
+        <ds-button>Action</ds-button>
+      </ds-action-bar>
+    `;
+        const el = container.querySelector('ds-action-bar');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el).toBeTruthy();
+        expect(el.variant).toBe('pattern');
+        expect(el.divider).toBe(false);
+    });
+
+    it('renders page variant', async () => {
+        container.innerHTML = '<ds-action-bar variant="page"></ds-action-bar>';
+        const el = container.querySelector('ds-action-bar');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('variant')).toBe('page');
+    });
+
+    it('renders divider', async () => {
+        container.innerHTML = '<ds-action-bar divider></ds-action-bar>';
+        const el = container.querySelector('ds-action-bar');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.hasAttribute('divider')).toBe(true);
+    });
+
+    it('renders slots correctly', async () => {
+        container.innerHTML = `
+      <ds-action-bar>
+        <div slot="start" id="start-content">Start</div>
+        <ds-button id="end-content">End</ds-button>
+      </ds-action-bar>
+    `;
+        const el = container.querySelector('ds-action-bar');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const start = el.querySelector('#start-content');
+        const end = el.querySelector('#end-content');
+        expect(start).toBeTruthy();
+        expect(end).toBeTruthy();
+        expect(start.textContent).toBe('Start');
+    });
+});

package/src/ds-action-bar/index.js

@@ -0,0 +1 @@
+export * from './ds-action-bar';

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

@@ -0,0 +1,151 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-alert.js';
+
+describe('ds-alert 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-alert>This is an informational message</ds-alert>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        if (results.violations.length > 0) {
+            console.log('Violations:', JSON.stringify(results.violations, null, 2));
+        }
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for error status', async () => {
+        container.innerHTML = '<ds-alert status="error">Error occurred</ds-alert>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for warning status', async () => {
+        container.innerHTML = '<ds-alert status="warning">Warning message</ds-alert>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for success status', async () => {
+        container.innerHTML = '<ds-alert status="success">Success message</ds-alert>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with title slot', async () => {
+        container.innerHTML = `
+      <ds-alert status="info">
+        <strong slot="title">Alert Title</strong>
+        This is the message content
+      </ds-alert>
+    `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with actions slot', async () => {
+        container.innerHTML = `
+      <ds-alert status="warning">
+        Warning message
+        <div slot="actions">
+          <button>Action 1</button>
+          <button>Action 2</button>
+        </div>
+      </ds-alert>
+    `;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks when dismissible', async () => {
+        container.innerHTML = '<ds-alert dismissible>Dismissible alert</ds-alert>';
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container, {
+            rules: {
+                'color-contrast': { enabled: false },
+                'button-name': { enabled: false },
+                'nested-interactive': { enabled: false }
+            }
+        });
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should have proper ARIA role', async () => {
+        container.innerHTML = '<ds-alert status="error">Error message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const alertContainer = element.shadowRoot.querySelector('.alert');
+        expect(alertContainer.getAttribute('role')).toBe('alert');
+    });
+
+    it('should have accessible dismiss button', async () => {
+        container.innerHTML = '<ds-alert dismissible>Message</ds-alert>';
+        const element = container.querySelector('ds-alert');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dismissButton = element.shadowRoot.querySelector('ds-icon-button');
+        expect(dismissButton).toBeTruthy();
+        expect(dismissButton.getAttribute('icon')).toBe('close');
+        expect(dismissButton.getAttribute('size')).toBe('m');
+        expect(dismissButton.getAttribute('aria-label')).toBe('Fechar alerta');
+    });
+});