@nuvia-ui/components 4.0.1

package/src/ds-tag-status/ds-tag-status.stories.js

@@ -0,0 +1,200 @@
+import { html } from 'lit';
+import './ds-tag-status.js';
+
+export default {
+    title: 'Components/Tag Status',
+    component: 'ds-tag-status',
+    tags: ['autodocs'],
+    argTypes: {
+        status: {
+            control: 'select',
+            options: ['error', 'warning', 'success', 'info', 'neutral'],
+            description: 'Status type that determines background color and icon',
+            table: {
+                defaultValue: { summary: 'neutral' }
+            }
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'xs'],
+            description: 'Size variant. Size S shows icon, XS does not.',
+            table: {
+                defaultValue: { summary: 's' }
+            }
+        },
+        label: {
+            control: 'text',
+            description: 'Label text to display'
+        },
+        hideIcon: {
+            control: 'boolean',
+            description: 'Hide the icon in size S',
+            table: {
+                defaultValue: { summary: 'false' }
+            }
+        },
+        icon: {
+            control: 'text',
+            description: 'Custom icon name (overrides status-based icon)'
+        }
+    }
+};
+
+/**
+ * Default tag status with neutral status and size S
+ */
+export const Default = {
+    args: {
+        label: 'Draft',
+        status: 'neutral',
+        size: 's'
+    }
+};
+
+/**
+ * Error status for critical/failed states
+ */
+export const Error = {
+    args: {
+        label: 'Failed',
+        status: 'error',
+        size: 's'
+    }
+};
+
+/**
+ * Warning status for caution/attention states
+ */
+export const Warning = {
+    args: {
+        label: 'Pending Review',
+        status: 'warning',
+        size: 's'
+    }
+};
+
+/**
+ * Success status for completed/positive states
+ */
+export const Success = {
+    args: {
+        label: 'Active',
+        status: 'success',
+        size: 's'
+    }
+};
+
+/**
+ * Info status for informational states
+ */
+export const Info = {
+    args: {
+        label: 'Processing',
+        status: 'info',
+        size: 's'
+    }
+};
+
+/**
+ * Neutral status for default/inactive states
+ */
+export const Neutral = {
+    args: {
+        label: 'Draft',
+        status: 'neutral',
+        size: 's'
+    }
+};
+
+/**
+ * Extra small size without icon
+ */
+export const SizeXS = {
+    args: {
+        label: 'New',
+        status: 'success',
+        size: 'xs'
+    }
+};
+
+/**
+ * Size S with icon hidden
+ */
+export const WithoutIcon = {
+    args: {
+        label: 'Complete',
+        status: 'success',
+        size: 's',
+        hideIcon: true
+    }
+};
+
+/**
+ * Neutral status with custom icon
+ */
+export const CustomIcon = {
+    args: {
+        label: 'Scheduled',
+        status: 'neutral',
+        size: 's',
+        icon: 'schedule'
+    }
+};
+
+/**
+ * All status variants displayed together
+ */
+export const AllStatuses = {
+    render: () => html`
+    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <ds-tag-status status="error" label="Error"></ds-tag-status>
+      <ds-tag-status status="warning" label="Warning"></ds-tag-status>
+      <ds-tag-status status="success" label="Success"></ds-tag-status>
+      <ds-tag-status status="info" label="Info"></ds-tag-status>
+      <ds-tag-status status="neutral" label="Neutral"></ds-tag-status>
+    </div>
+  `
+};
+
+/**
+ * All size variants displayed together
+ */
+export const AllSizes = {
+    render: () => html`
+    <div style="display: flex; gap: 8px; align-items: center;">
+      <ds-tag-status size="s" status="success" label="Size S"></ds-tag-status>
+      <ds-tag-status size="xs" status="success" label="Size XS"></ds-tag-status>
+    </div>
+  `
+};
+
+/**
+ * Status tags in a real-world context
+ */
+export const InContext = {
+    render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; font-family: var(--ds-font-family-content);">
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="color: var(--ds-color-text-default);">Order #12345</span>
+        <ds-tag-status status="success" label="Delivered"></ds-tag-status>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="color: var(--ds-color-text-default);">Order #12346</span>
+        <ds-tag-status status="warning" label="In Transit"></ds-tag-status>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="color: var(--ds-color-text-default);">Order #12347</span>
+        <ds-tag-status status="error" label="Cancelled"></ds-tag-status>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="color: var(--ds-color-text-default);">Order #12348</span>
+        <ds-tag-status status="info" label="Processing"></ds-tag-status>
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <span style="color: var(--ds-color-text-default);">Order #12349</span>
+        <ds-tag-status status="neutral" label="Draft"></ds-tag-status>
+      </div>
+    </div>
+  `
+};
+

package/src/ds-tag-status/ds-tag-status.test.js

@@ -0,0 +1,140 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-tag-status.js';
+
+describe('ds-tag-status', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-tag-status label="Status"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.status).toBe('neutral');
+        expect(element.size).toBe('s');
+        expect(element.label).toBe('Status');
+        expect(element.hideIcon).toBe(false);
+    });
+
+    it('renders label correctly', async () => {
+        container.innerHTML = '<ds-tag-status label="Active"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const label = element.shadowRoot.querySelector('.label');
+        expect(label.textContent).toBe('Active');
+    });
+
+    it('renders icon in size S by default', async () => {
+        container.innerHTML = '<ds-tag-status status="error" label="Error"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('name')).toBe('cancel');
+    });
+
+    it('does not render icon in size XS', async () => {
+        container.innerHTML = '<ds-tag-status size="xs" status="error" label="Error"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeFalsy();
+    });
+
+    it('hides icon when hide-icon is set', async () => {
+        container.innerHTML = '<ds-tag-status hide-icon status="success" label="Done"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeFalsy();
+    });
+
+    it('renders correct icon for each status', async () => {
+        const statusIcons = {
+            error: 'cancel',
+            warning: 'warning',
+            success: 'check-circle',
+            info: 'info',
+            neutral: 'pending'
+        };
+
+        for (const [status, iconName] of Object.entries(statusIcons)) {
+            container.innerHTML = `<ds-tag-status status="${status}" label="Test"></ds-tag-status>`;
+            const element = container.querySelector('ds-tag-status');
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const icon = element.shadowRoot.querySelector('ds-icon');
+            expect(icon.getAttribute('name')).toBe(iconName);
+        }
+    });
+
+    it('reflects status attribute', async () => {
+        container.innerHTML = '<ds-tag-status status="warning" label="Warning"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.getAttribute('status')).toBe('warning');
+    });
+
+    it('reflects size attribute', async () => {
+        container.innerHTML = '<ds-tag-status size="xs" label="Small"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(element.getAttribute('size')).toBe('xs');
+    });
+
+    it('has container part for styling', async () => {
+        container.innerHTML = '<ds-tag-status label="Test"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const containerEl = element.shadowRoot.querySelector('[part="container"]');
+        expect(containerEl).toBeTruthy();
+    });
+
+    it('applies correct background for each status', async () => {
+        const statuses = ['error', 'warning', 'success', 'info', 'neutral'];
+
+        for (const status of statuses) {
+            container.innerHTML = `<ds-tag-status status="${status}" label="Test"></ds-tag-status>`;
+            const element = container.querySelector('ds-tag-status');
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            // Just verify the element renders without errors
+            const containerEl = element.shadowRoot.querySelector('.container');
+            expect(containerEl).toBeTruthy();
+        }
+    });
+
+    it('uses custom icon when icon prop is set', async () => {
+        container.innerHTML = '<ds-tag-status status="neutral" label="Scheduled" icon="schedule"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('name')).toBe('schedule');
+    });
+
+    it('custom icon overrides status icon', async () => {
+        container.innerHTML = '<ds-tag-status status="error" label="Custom" icon="star"></ds-tag-status>';
+        const element = container.querySelector('ds-tag-status');
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon.getAttribute('name')).toBe('star'); // Not 'cancel' (error default)
+    });
+});

package/src/ds-tag-status/index.js

@@ -0,0 +1 @@
+export { DsTagStatus } from './ds-tag-status.js';

package/src/ds-textarea/ds-textarea-clearable.test.js

@@ -0,0 +1,89 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-textarea.js';
+
+describe('ds-textarea clearable', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('shows clear button when clearable, focused, and has value', async () => {
+        container.innerHTML = '<ds-textarea clearable value="Test"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Initially not shown (not focused)
+        let clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+        expect(clearButton).toBeFalsy();
+
+        // Focus the textarea
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.focus();
+        textarea.dispatchEvent(new Event('focus'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Now should be shown
+        clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+        expect(clearButton).toBeTruthy();
+    });
+
+    it('clears value when clear button is clicked', async () => {
+        container.innerHTML = '<ds-textarea clearable value="Test content"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.focus();
+        textarea.dispatchEvent(new Event('focus'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+        clearButton.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('');
+        expect(textarea.value).toBe('');
+    });
+
+    it('clears value on Escape key when clearable', async () => {
+        container.innerHTML = '<ds-textarea clearable value="Test"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        const keyEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+        textarea.dispatchEvent(keyEvent);
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.value).toBe('');
+    });
+
+    it('does not show clear button when not focused', async () => {
+        container.innerHTML = '<ds-textarea clearable value="Test"></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+        expect(clearButton).toBeFalsy();
+    });
+
+    it('does not show clear button when value is empty', async () => {
+        container.innerHTML = '<ds-textarea clearable></ds-textarea>';
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const textarea = element.shadowRoot.querySelector('textarea');
+        textarea.focus();
+        textarea.dispatchEvent(new Event('focus'));
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const clearButton = element.shadowRoot.querySelector('ds-icon-button[icon="close"]');
+        expect(clearButton).toBeFalsy();
+    });
+});

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

@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-textarea.js';
+
+describe('ds-textarea accessibility', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    async function runAxe(html) {
+        container.innerHTML = html;
+        const element = container.querySelector('ds-textarea');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const results = await axe.run(container);
+        return results;
+    }
+
+    it('should pass axe accessibility checks for default state', async () => {
+        const results = await runAxe('<ds-textarea label="Description"></ds-textarea>');
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with value', async () => {
+        const results = await runAxe('<ds-textarea label="Comments" value="Test content"></ds-textarea>');
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for disabled state', async () => {
+        const results = await runAxe('<ds-textarea label="Feedback" disabled></ds-textarea>');
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for readonly state', async () => {
+        const results = await runAxe('<ds-textarea label="Content" readonly value="Read-only text"></ds-textarea>');
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for required field', async () => {
+        const results = await runAxe('<ds-textarea label="Required field" required></ds-textarea>');
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks for error state', async () => {
+        const results = await runAxe(`
+      <ds-textarea 
+        label="Description" 
+        validation-status="error"
+        validation-message="This field is required"
+      ></ds-textarea>
+    `);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('should pass axe accessibility checks with counter', async () => {
+        const results = await runAxe('<ds-textarea label="Bio" maxlength="200" show-counter></ds-textarea>');
+        expect(results.violations).toHaveLength(0);
+    });
+});