@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,185 @@
+import { html } from 'lit';
+import './ds-banner.js';
+import '../ds-button/ds-button.js';
+
+export default {
+    title: 'Components/Banner',
+    component: 'ds-banner',
+    tags: ['autodocs'],
+    argTypes: {
+        status: {
+            control: 'select',
+            options: ['error', 'warning', 'success', 'info'],
+            description: 'Status type that determines background color and icon',
+            table: {
+                defaultValue: { summary: 'info' }
+            }
+        },
+        title: {
+            control: 'text',
+            description: 'Optional title text'
+        },
+        message: {
+            control: 'text',
+            description: 'Message text'
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Show/hide close button'
+        },
+        fixed: {
+            control: 'boolean',
+            description: 'Fix banner to the top of the viewport'
+        },
+        hideIcon: {
+            control: 'boolean',
+            description: 'Hide status icon'
+        }
+    }
+};
+
+const Template = (args) => html`
+  <ds-banner 
+    .status=${args.status} 
+    .title=${args.title}
+    .message=${args.message} 
+    ?dismissible=${args.dismissible}
+    ?fixed=${args.fixed}
+    ?hide-icon=${args.hideIcon}
+  >
+    ${args.slotContent ? html`${args.slotContent}` : ''}
+  </ds-banner>
+`;
+
+/**
+ * Default banner with info status
+ */
+export const Default = {
+    args: {
+        status: 'info',
+        message: 'System update scheduled for tonight at 2 AM.',
+        dismissible: false,
+        fixed: false,
+        hideIcon: false
+    },
+    render: (args) => Template(args)
+};
+
+/**
+ * Banner with title property
+ */
+export const WithTitle = {
+    args: {
+        status: 'warning',
+        title: 'Maintenance Alert',
+        message: 'The system will be down for maintenance from 2 AM to 4 AM UTC.',
+        dismissible: true,
+        fixed: false,
+        hideIcon: false
+    },
+    render: (args) => Template(args)
+};
+
+/**
+ * Success banner with dismiss action
+ */
+export const Success = {
+    args: {
+        status: 'success',
+        message: 'Your profile settings have been successfully updated.',
+        dismissible: true,
+        fixed: false,
+        hideIcon: false
+    },
+    render: (args) => Template(args)
+};
+
+/**
+ * Warning banner
+ */
+export const Warning = {
+    args: {
+        status: 'warning',
+        message: 'Your subscription is about to expire. Please renew to avoid interruption.',
+        dismissible: true,
+        fixed: false,
+        hideIcon: false
+    },
+    render: (args) => Template(args)
+};
+
+/**
+ * Error banner
+ */
+export const Error = {
+    args: {
+        status: 'error',
+        message: 'Failed to connect to the database. Please try again later.',
+        dismissible: true,
+        fixed: false,
+        hideIcon: false
+    },
+    render: (args) => Template(args)
+};
+
+/**
+ * Banner with custom actions
+ */
+export const WithActions = {
+    args: {
+        status: 'info',
+        message: 'A new version of the application is available.',
+        dismissible: true
+    },
+    render: (args) => html`
+      <ds-banner 
+        .status=${args.status} 
+        .title=${args.title}
+        .message=${args.message} 
+        ?dismissible=${args.dismissible}
+        ?fixed=${args.fixed}
+        ?hide-icon=${args.hideIcon}
+      >
+        <div slot="actions" style="display: flex; gap: 8px;">
+            <ds-button variant="action">Update Now</ds-button>
+            <ds-button variant="action">Dismiss</ds-button>
+        </div>
+      </ds-banner>
+    `
+};
+
+/**
+ * Fixed banner at the top of the page.
+ * (View in Canvas mode to see it stick to the top)
+ */
+export const FixedTop = {
+    args: {
+        status: 'warning',
+        message: 'This banner is fixed to the top of the viewport. Scroll down to see it stick.',
+        fixed: true,
+        dismissible: true
+    },
+    render: (args) => html`
+    <div style="min-height: 200px; transform: scale(1);">
+      ${Template(args)}
+      <div style="padding: 60px 20px;">
+        <p>Scroll content...</p>
+        <p>Scroll content...</p>
+        <p>Scroll content...</p>
+      </div>
+    </div>
+  `
+};
+
+/**
+ * Demonstrating the 800px max-width constraint on the message text.
+ * The banner background spans full width, but the text wraps at 800px.
+ */
+export const LongMessage = {
+    args: {
+        status: 'info',
+        message: 'This is a very long message that demonstrates the 800px max-width constraint for readability. Even though the banner background extends to the full width of the viewport, this text content will wrap once it exceeds 800 pixels. This ensures that lines of text do not become too long to read comfortably on wide screens, adhering to accessibility best practices.',
+        dismissible: true
+    },
+    render: (args) => Template(args)
+};

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

@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-banner.js';
+
+describe('ds-banner', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-banner message="Default message"></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        expect(element.status).toBe('info');
+        expect(element.title).toBe('');
+        expect(element.message).toBe('Default message');
+        expect(element.dismissible).toBe(false);
+        expect(element.fixed).toBe(false);
+
+        const banner = element.shadowRoot.querySelector('.banner');
+        expect(banner).toBeTruthy();
+    });
+
+    it('renders title when provided', async () => {
+        container.innerHTML = '<ds-banner title="Test Title" message="Test Message"></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        expect(element.title).toBe('Test Title');
+        const titleEl = element.shadowRoot.querySelector('.title');
+        expect(titleEl).toBeTruthy();
+        expect(titleEl.textContent).toBe('Test Title');
+    });
+
+    it('reflects fixed attribute', async () => {
+        container.innerHTML = '<ds-banner fixed></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        expect(element.hasAttribute('fixed')).toBe(true);
+        expect(element.fixed).toBe(true);
+    });
+
+    it('renders correct icon for each status', async () => {
+        const statuses = {
+            error: 'cancel',
+            warning: 'warning',
+            success: 'check-circle',
+            info: 'info'
+        };
+
+        for (const [status, iconName] of Object.entries(statuses)) {
+            container.innerHTML = `<ds-banner status="${status}"></ds-banner>`;
+            const element = container.querySelector('ds-banner');
+            await element.updateComplete;
+
+            const icon = element.shadowRoot.querySelector('ds-icon');
+            expect(icon.getAttribute('name')).toBe(iconName);
+        }
+    });
+
+    it('hides icon when hideIcon is true', async () => {
+        container.innerHTML = '<ds-banner hide-icon></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        const icon = element.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeNull();
+    });
+
+    it('shows close button only when dismissible', async () => {
+        container.innerHTML = '<ds-banner></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        expect(element.shadowRoot.querySelector('ds-icon-button')).toBeNull();
+
+        element.dismissible = true;
+        await element.updateComplete;
+
+        expect(element.shadowRoot.querySelector('ds-icon-button')).toBeTruthy();
+    });
+
+    it('dispatches ds-dismiss event when close button is clicked', async () => {
+        const spy = vi.fn();
+        container.innerHTML = '<ds-banner dismissible></ds-banner>';
+        const element = container.querySelector('ds-banner');
+        element.addEventListener('ds-dismiss', spy);
+        await element.updateComplete;
+
+        const button = element.shadowRoot.querySelector('ds-icon-button');
+        button.click();
+
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders actions slot when content is provided', async () => {
+        container.innerHTML = `
+            <ds-banner>
+                <div slot="actions">Action</div>
+            </ds-banner>
+        `;
+        const element = container.querySelector('ds-banner');
+        await element.updateComplete;
+
+        const actionsSlot = element.shadowRoot.querySelector('slot[name="actions"]');
+        expect(actionsSlot).toBeTruthy();
+    });
+});

package/src/ds-banner/index.js

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

package/src/ds-breadcrumb-item/ds-breadcrumb-item.js

@@ -0,0 +1,135 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '../ds-link/ds-link.js';
+import '../ds-icon/ds-icon.js';
+
+/**
+ * @element ds-breadcrumb-item
+ * @summary A single item within a breadcrumb navigation, representing a page or a collapsed set of pages.
+ *
+ * @prop {string} href - URL for the link. If omitted, and not current/collapsed, simple text is rendered (though typically breadcrumbs are links).
+ * @prop {string} label - Text to display.
+ * @prop {boolean} current - Whether this item represents the current page. Renders as bold text, not a link.
+ * @prop {boolean} collapsed - Whether this item represents a collapsed section (renders ". . .").
+ * @prop {boolean} last - If true, hides the separator icon.
+ */
+export class DsBreadcrumbItem extends LitElement {
+  static properties = {
+    href: { type: String },
+    label: { type: String },
+    icon: { type: String },
+    current: { type: Boolean, reflect: true },
+    collapsed: { type: Boolean, reflect: true },
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ds-space-sm, 8px); 
+      color: var(--ds-color-text-default);
+    }
+
+    /* Accessibility Role */
+    :host {
+      role: 'listitem';
+    }
+
+    /* Current Item (Static Text) */
+    span.current {
+      font: var(--ds-typo-content-body-bold);
+      color: var(--ds-color-text-default);
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ds-space-xs, 4px);
+    }
+
+    /* Separator Icon */
+    ds-icon.separator {
+      color: var(--ds-color-icon-default);
+      display: var(--ds-breadcrumb-separator-display, inline-flex);
+    }
+
+    /* Strictly hide separator if current */
+    :host([current]) ds-icon.separator {
+      display: none !important;
+    }
+    
+    /* Collapsed Action Button */
+    button.collapsed-action {
+      appearance: none;
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      font: inherit;
+      color: var(--ds-color-text-link, #005cc5); /* Fallback color */
+      cursor: pointer;
+      text-decoration: underline;
+      display: inline-flex;
+      align-items: center;
+      min-width: 1.5em; /* Ensure clickable area */
+      justify-content: center;
+    }
+    
+    button.collapsed-action:hover {
+      color: var(--ds-color-text-link-hover);
+    }
+
+    button.collapsed-action:focus-visible {
+      outline: 2px solid var(--ds-color-border-focus);
+      border-radius: var(--ds-radius-container, 0px);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.current = false;
+    this.collapsed = false;
+  }
+
+  _handleExpand() {
+    this.dispatchEvent(new CustomEvent('ds-expand', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    // 1. Current Page (Static Text, Bold)
+    if (this.current) {
+      return html`
+        <span class="current" aria-current="page">
+           ${this.icon ? html`<ds-icon name="${this.icon}" size="sm"></ds-icon>` : nothing}
+           ${this.label}
+        </span>
+      `;
+    }
+
+    // 2. Collapsed State (Action Button)
+    if (this.collapsed) {
+      return html`
+        <button 
+          type="button" 
+          class="collapsed-action"
+          aria-label="Show hidden breadcrumbs"
+          @click=${this._handleExpand}
+        >
+          . . .
+        </button>
+        <ds-icon class="separator" name="chevron-right" size="xs" aria-hidden="true"></ds-icon>
+      `;
+    }
+
+    // 3. Standard Link
+    return html`
+      <ds-link href=${this.href} .inline=${false} icon-start=${this.icon}>
+        ${this.label}
+      </ds-link>
+      <ds-icon class="separator" name="chevron-right" size="xs" aria-hidden="true"></ds-icon>
+    `;
+  }
+}
+
+if (!customElements.get('ds-breadcrumb-item')) {
+  customElements.define('ds-breadcrumb-item', DsBreadcrumbItem);
+}

package/src/ds-breadcrumb-item/ds-breadcrumb-item.stories.js

@@ -0,0 +1,49 @@
+import { html } from 'lit';
+import './ds-breadcrumb-item.js';
+
+export default {
+    title: 'Components/Breadcrumb Item',
+    component: 'ds-breadcrumb-item',
+    argTypes: {
+        label: { control: 'text' },
+        href: { control: 'text' },
+        current: { control: 'boolean' },
+        collapsed: { control: 'boolean' },
+    },
+};
+
+const Template = (args) => html`
+  <ds-breadcrumb-item 
+    label="${args.label || ''}" 
+    href="${args.href || ''}"
+    icon="${args.icon || ''}"
+    ?current=${args.current}
+    ?collapsed=${args.collapsed}
+  ></ds-breadcrumb-item>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Home',
+    href: '/',
+};
+
+export const Current = Template.bind({});
+Current.args = {
+    label: 'Current Page',
+    current: true,
+};
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+    href: '#',
+    collapsed: true,
+    label: 'Expand',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    label: 'Home',
+    href: '/',
+    icon: 'home',
+};

package/src/ds-breadcrumb-item/ds-breadcrumb-item.test.js

@@ -0,0 +1,55 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-breadcrumb-item.js';
+
+describe('ds-breadcrumb-item', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders label and separator by default', async () => {
+        container.innerHTML = '<ds-breadcrumb-item label="Home" href="/home"></ds-breadcrumb-item>';
+        const el = container.querySelector('ds-breadcrumb-item');
+        await new Promise(r => setTimeout(r, 50));
+
+        const link = el.shadowRoot.querySelector('ds-link');
+        expect(link).toBeTruthy();
+        expect(link.textContent.trim()).toBe('Home');
+
+        const icon = el.shadowRoot.querySelector('ds-icon[name="chevron-right"]');
+        expect(icon).toBeTruthy();
+        expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('renders current page as text without separator', async () => {
+        container.innerHTML = '<ds-breadcrumb-item label="Current" current></ds-breadcrumb-item>';
+        const el = container.querySelector('ds-breadcrumb-item');
+        await new Promise(r => setTimeout(r, 50));
+
+        const span = el.shadowRoot.querySelector('span.current');
+        expect(span).toBeTruthy();
+        expect(span.getAttribute('aria-current')).toBe('page');
+        expect(span.textContent.trim()).toBe('Current');
+
+        const icon = el.shadowRoot.querySelector('ds-icon');
+        expect(icon).toBeNull();
+    });
+
+    it('renders collapsed state with ellipses', async () => {
+        container.innerHTML = '<ds-breadcrumb-item collapsed href="#"></ds-breadcrumb-item>';
+        const el = container.querySelector('ds-breadcrumb-item');
+        await new Promise(r => setTimeout(r, 50));
+
+        const button = el.shadowRoot.querySelector('button.collapsed-action');
+        expect(button.textContent.trim()).toBe('. . .');
+
+        const icon = el.shadowRoot.querySelector('ds-icon[name="chevron-right"]');
+        expect(icon).toBeTruthy();
+    });
+});