@nuvia-ui/components 4.0.1

package/src/ds-rich-list-item/ds-rich-list-item.stories.js

@@ -0,0 +1,197 @@
+import './ds-rich-list-item.js';
+import '../ds-tag-status/ds-tag-status.js';
+import '../ds-button-group/ds-button-group.js';
+import '../ds-button/ds-button.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-avatar/ds-avatar.js';
+
+export default {
+    title: 'Components/Rich List Item',
+    component: 'ds-rich-list-item',
+    argTypes: {
+        selected: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        clickable: { control: 'boolean' },
+        href: { control: 'text' },
+        value: { control: 'text' },
+        multiline: { control: 'boolean' },
+        // Slots as controls for playground
+        mediaContent: { control: 'text', description: 'Content for media slot' },
+        titleContent: { control: 'text', description: 'Content for title slot' },
+        descriptionContent: { control: 'text', description: 'Content for description slot' },
+        customContent: { control: 'text', description: 'Content for custom slot' },
+    },
+    parameters: {
+        actions: {
+            handles: ['rich-list-item-click', 'change'],
+        },
+    }
+};
+
+/* ─── Helper: Create Item with Props & Slots ─── */
+const createItem = (args) => {
+    const item = document.createElement('ds-rich-list-item');
+
+    if (args.selected) item.setAttribute('selected', '');
+    if (args.disabled) item.setAttribute('disabled', '');
+    if (args.clickable) item.setAttribute('clickable', '');
+    if (args.href) item.setAttribute('href', args.href);
+    if (args.value) item.setAttribute('value', args.value);
+    if (args.multiline) item.setAttribute('multiline', '');
+
+    // Media
+    if (args.mediaContent) {
+        // Use the new media prop!
+        // For storyboard simplicity, if it's "placeholder", use a data URI
+        if (args.mediaContent === 'placeholder') {
+            item.setAttribute('media', 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22%3E%3Crect width%3D%2240%22 height%3D%2240%22 fill%3D%22%23e0e0e0%22%2F%3E%3Ctext x%3D%2250%25%22 y%3D%2250%25%22 dominant-baseline%3D%22middle%22 text-anchor%3D%22middle%22 font-family%3D%22sans-serif%22 font-size%3D%2210%22 fill%3D%22%23757575%22%3EIMG%3C%2Ftext%3E%3C%2Fsvg%3E');
+            item.setAttribute('media-alt', 'Placeholder Image');
+        } else {
+            item.setAttribute('media', args.mediaContent);
+        }
+    }
+
+    // Title
+    const title = document.createElement('span');
+    title.setAttribute('slot', 'title');
+    title.textContent = args.titleContent || 'Item Title';
+    item.appendChild(title);
+
+    // Description
+    const desc = document.createElement('span');
+    desc.setAttribute('slot', 'description');
+    desc.textContent = args.descriptionContent || 'Item description goes here';
+    item.appendChild(desc);
+
+    // Custom
+    if (args.customContent) {
+        const custom = document.createElement('span');
+        custom.setAttribute('slot', 'custom');
+        custom.textContent = args.customContent; // Start simplest
+        // If complex HTML string passed in args (not supported by default control text), 
+        // normally we'd parse it, but for playground simple text is fine.
+        // For specific stories below, we append elements manually.
+        custom.style.font = 'var(--ds-typo-content-body-bold)';
+        custom.style.color = 'var(--ds-color-text-default)';
+        item.appendChild(custom);
+    }
+
+    // Actions — only add when explicitly requested
+    if (args.actions) {
+        const btnGroup = document.createElement('ds-button-group');
+        btnGroup.setAttribute('slot', 'action-group');
+        const btn = document.createElement('ds-icon-button');
+        btn.setAttribute('icon', 'more_vert');
+        btn.setAttribute('variant', 'ghost');
+        btnGroup.appendChild(btn);
+        item.appendChild(btnGroup);
+    }
+
+    return item;
+};
+
+/* ─── Stories ─── */
+
+export const Playground = {
+    args: {
+        titleContent: 'Playground Item',
+        descriptionContent: 'Tweak my props in the controls panel',
+        mediaContent: 'placeholder',
+        customContent: '€120.00',
+        actions: false,
+        clickable: true,
+        selected: false,
+        disabled: false,
+        multiline: false,
+        value: 'item-1'
+    },
+    render: (args) => createItem(args)
+};
+
+export const Default = {
+    render: () => createItem({
+        titleContent: 'Standard Item',
+        descriptionContent: 'Basic configuration with media and actions',
+        mediaContent: 'placeholder',
+        actions: true
+    })
+};
+
+export const WithoutMedia = {
+    render: () => createItem({
+        titleContent: 'No Media Item',
+        descriptionContent: 'Notice how text aligns to the left',
+        mediaContent: ''
+    })
+};
+
+export const WithCustomContent = {
+    render: () => {
+        const item = createItem({
+            titleContent: 'Custom Slot Usage',
+            descriptionContent: 'Showing a status tag in the custom slot',
+            mediaContent: 'placeholder',
+            actions: true
+        });
+
+        // Replace simple custom slot from createItem with a real tag
+        const oldCustom = item.querySelector('[slot="custom"]');
+        if (oldCustom) oldCustom.remove();
+
+        const tag = document.createElement('ds-tag-status');
+        tag.setAttribute('slot', 'custom');
+        tag.setAttribute('label', 'Active');
+        tag.setAttribute('variant', 'success');
+        item.appendChild(tag);
+
+        return item;
+    }
+};
+
+export const Clickable = {
+    render: () => createItem({
+        titleContent: 'Clickable Item',
+        descriptionContent: 'Hover me to see the interaction state',
+        mediaContent: 'placeholder',
+        clickable: true,
+        value: 'clickable-item'
+    })
+};
+
+export const Link = {
+    render: () => createItem({
+        titleContent: 'Link Item',
+        descriptionContent: 'This item is an anchor tag link',
+        mediaContent: 'placeholder',
+        href: '#'
+    })
+};
+
+export const Selected = {
+    render: () => createItem({
+        titleContent: 'Selected Item',
+        descriptionContent: 'Pre-selected state styling',
+        mediaContent: 'placeholder',
+        selected: true,
+        clickable: true // Usually selectable items are interactive
+    })
+};
+
+export const Disabled = {
+    render: () => createItem({
+        titleContent: 'Disabled Item',
+        descriptionContent: 'Opacity reduced, no interaction allowed',
+        mediaContent: 'placeholder',
+        disabled: true,
+        clickable: true // Should not be interactive despite this
+    })
+};
+
+export const Multiline = {
+    render: () => createItem({
+        titleContent: 'Multiline Item with Long Description',
+        descriptionContent: 'This description is intentionally long to demonstrate the automatic height adjustment when the multiline property is enabled. The text will wrap to the next line instead of being truncated with an ellipsis.',
+        mediaContent: 'placeholder',
+        multiline: true
+    })
+};

package/src/ds-rich-list-item/ds-rich-list-item.test.js

@@ -0,0 +1,434 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-rich-list-item.js';
+
+describe('ds-rich-list-item', () => {
+    let container;
+
+    const tick = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    // ─── Rendering ───
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.selected).toBe(false);
+        expect(el.disabled).toBe(false);
+        expect(el.clickable).toBe(false);
+        expect(el.href).toBe('');
+        expect(el.value).toBe('');
+        expect(el.multiline).toBe(false);
+    });
+
+    it('renders title and description slots', async () => {
+        container.innerHTML = `
+            <ds-rich-list-item>
+                <span slot="title">Title</span>
+                <span slot="description">Description</span>
+            </ds-rich-list-item>
+        `;
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        const titleSlot = el.shadowRoot.querySelector('slot[name="title"]');
+        const descSlot = el.shadowRoot.querySelector('slot[name="description"]');
+        expect(titleSlot).toBeTruthy();
+        expect(descSlot).toBeTruthy();
+        expect(titleSlot.assignedElements().length).toBe(1);
+        expect(descSlot.assignedElements().length).toBe(1);
+    });
+
+    it('renders media via prop', async () => {
+        container.innerHTML = '<ds-rich-list-item media="test.jpg" media-alt="Test"><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-media')).toBe(true);
+        const thumbnail = el.shadowRoot.querySelector('ds-thumbnail');
+        expect(thumbnail).toBeTruthy();
+        expect(thumbnail.getAttribute('src')).toBe('test.jpg');
+        expect(thumbnail.getAttribute('alt')).toBe('Test');
+        expect(thumbnail.getAttribute('fit')).toBe('cover');
+    });
+
+    it('renders media via slot', async () => {
+        container.innerHTML = '<ds-rich-list-item><img slot="media" src="slot.jpg" alt="Slot"><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-media')).toBe(true);
+        const mediaSlot = el.shadowRoot.querySelector('slot[name="media"]');
+        const assigned = mediaSlot.assignedElements();
+        expect(assigned.length).toBe(1);
+        expect(assigned[0].src).toContain('slot.jpg');
+    });
+
+    it('hides media container when no media', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">No media</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-media')).toBe(false);
+        const mediaContainer = el.shadowRoot.querySelector('.media-container');
+        const style = getComputedStyle(mediaContainer);
+        expect(style.display).toBe('none');
+    });
+
+    it('hides action-group container when empty', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">No actions</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-action-group')).toBe(false);
+        const actionContainer = el.shadowRoot.querySelector('.action-group-container');
+        const style = getComputedStyle(actionContainer);
+        expect(style.display).toBe('none');
+    });
+
+    it('ignores empty wrapper elements in action-group slot', async () => {
+        // Simple empty span
+        container.innerHTML = '<ds-rich-list-item><span slot="action-group"> </span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+        expect(el.hasAttribute('has-action-group')).toBe(false);
+
+        // Nested empty divs
+        el.innerHTML = '<div slot="action-group"><span></span></div>';
+        await tick();
+        expect(el.hasAttribute('has-action-group')).toBe(false);
+    });
+
+    it('detects content inside wrapper elements', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="action-group"><button>Click</button></span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-action-group')).toBe(true);
+    });
+
+    it('detects text content inside wrapper elements', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="action-group">Text</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-action-group')).toBe(true);
+    });
+
+    it('dispatches structure change event on content update', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Test</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        let eventFired = false;
+        el.addEventListener('rich-list-item-structure-change', () => { eventFired = true; });
+
+        // Add action group content
+        const span = document.createElement('span');
+        span.slot = 'action-group';
+        span.textContent = 'Action';
+        el.appendChild(span);
+
+        await tick();
+        expect(eventFired).toBe(true);
+        expect(el.hasAttribute('has-action-group')).toBe(true);
+    });
+
+    it('hides custom container when empty', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">No custom</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('has-custom')).toBe(false);
+        const customContainer = el.shadowRoot.querySelector('.custom-container');
+        const style = getComputedStyle(customContainer);
+        expect(style.display).toBe('none');
+    });
+
+    // ─── Properties ───
+
+    it('reflects selected attribute', async () => {
+        container.innerHTML = '<ds-rich-list-item selected><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.selected).toBe(true);
+        expect(el.hasAttribute('selected')).toBe(true);
+    });
+
+    it('reflects disabled attribute', async () => {
+        container.innerHTML = '<ds-rich-list-item disabled><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.disabled).toBe(true);
+        expect(el.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('reflects clickable attribute', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.clickable).toBe(true);
+        expect(el.hasAttribute('interactive')).toBe(true);
+    });
+
+    it('reflects multiline attribute', async () => {
+        container.innerHTML = '<ds-rich-list-item multiline><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.multiline).toBe(true);
+        expect(el.hasAttribute('multiline')).toBe(true);
+    });
+
+    // ─── ARIA ───
+
+    it('sets role=listitem by default', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.getAttribute('role')).toBe('listitem');
+    });
+
+    it('sets role=option when selectable', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        el._selectable = 'single';
+        await tick();
+
+        expect(el.getAttribute('role')).toBe('option');
+        expect(el.getAttribute('aria-selected')).toBe('false');
+    });
+
+    it('sets aria-disabled when disabled', async () => {
+        container.innerHTML = '<ds-rich-list-item disabled><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    // ─── Interactions ───
+
+    it('dispatches rich-list-item-click when clickable', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable value="clicked"><span slot="title">Click me</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        let detail = null;
+        el.addEventListener('rich-list-item-click', (e) => { detail = e.detail; });
+
+        const itemDiv = el.shadowRoot.querySelector('.item');
+        itemDiv.click();
+        await tick();
+
+        expect(detail).not.toBeNull();
+        expect(detail.value).toBe('clicked');
+    });
+
+    it('does not fire click event when disabled', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable disabled value="nope"><span slot="title">Disabled</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        let fired = false;
+        el.addEventListener('rich-list-item-click', () => { fired = true; });
+
+        const itemDiv = el.shadowRoot.querySelector('.item');
+        itemDiv.click();
+        await tick();
+
+        expect(fired).toBe(false);
+    });
+
+    it('toggles selection in multiple mode', async () => {
+        container.innerHTML = '<ds-rich-list-item value="item1"><span slot="title">Multi</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        el._selectable = 'multiple';
+        await tick();
+
+        const itemDiv = el.shadowRoot.querySelector('.item');
+
+        // Click to select
+        itemDiv.click();
+        await tick();
+        expect(el.selected).toBe(true);
+
+        // Click again to deselect
+        itemDiv.click();
+        await tick();
+        expect(el.selected).toBe(false);
+    });
+
+    it('selects but does not deselect in single mode', async () => {
+        container.innerHTML = '<ds-rich-list-item value="item1"><span slot="title">Single</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        el._selectable = 'single';
+        await tick();
+
+        const itemDiv = el.shadowRoot.querySelector('.item');
+
+        // Click to select
+        itemDiv.click();
+        await tick();
+        expect(el.selected).toBe(true);
+
+        // Click again — should remain selected
+        itemDiv.click();
+        await tick();
+        expect(el.selected).toBe(true);
+    });
+
+    it('dispatches change event on selection', async () => {
+        container.innerHTML = '<ds-rich-list-item value="myval"><span slot="title">Title</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        el._selectable = 'multiple';
+        await tick();
+
+        let detail = null;
+        el.addEventListener('change', (e) => { detail = e.detail; });
+
+        const itemDiv = el.shadowRoot.querySelector('.item');
+        itemDiv.click();
+        await tick();
+
+        expect(detail).not.toBeNull();
+        expect(detail.selected).toBe(true);
+        expect(detail.value).toBe('myval');
+    });
+
+    it('renders href link when provided', async () => {
+        container.innerHTML = '<ds-rich-list-item href="https://example.com"><span slot="title">Link</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        const link = el.shadowRoot.querySelector('a.item-link');
+        expect(link).toBeTruthy();
+        expect(link.getAttribute('href')).toBe('https://example.com');
+        expect(link.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('does not render href link when not provided', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">No link</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        const link = el.shadowRoot.querySelector('a.item-link');
+        expect(link).toBeNull();
+    });
+
+    // ─── Selection Controls ───
+
+    it('renders checkbox in multiple selection mode', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Check me</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        el._selectable = 'multiple';
+        await tick();
+
+        const checkbox = el.shadowRoot.querySelector('ds-checkbox');
+        expect(checkbox).toBeTruthy();
+    });
+
+    it('renders radio in single selection mode', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Pick one</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        el._selectable = 'single';
+        await tick();
+
+        const radio = el.shadowRoot.querySelector('ds-radio');
+        expect(radio).toBeTruthy();
+    });
+
+    it('renders no control in none selection mode', async () => {
+        container.innerHTML = '<ds-rich-list-item><span slot="title">Just text</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        const checkbox = el.shadowRoot.querySelector('ds-checkbox');
+        const radio = el.shadowRoot.querySelector('ds-radio');
+        expect(checkbox).toBeNull();
+        expect(radio).toBeNull();
+    });
+
+    // ─── Keyboard ───
+
+    it('activates on Enter key', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable value="enter"><span slot="title">Enter</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        let detail = null;
+        el.addEventListener('rich-list-item-click', (e) => { detail = e.detail; });
+
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        await tick();
+
+        expect(detail).not.toBeNull();
+        expect(detail.value).toBe('enter');
+    });
+
+    it('activates on Space key', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable value="space"><span slot="title">Space</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        let detail = null;
+        el.addEventListener('rich-list-item-click', (e) => { detail = e.detail; });
+
+        el.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+        await tick();
+
+        expect(detail).not.toBeNull();
+        expect(detail.value).toBe('space');
+    });
+
+    // ─── Interactive State ───
+
+    it('sets interactive attribute for clickable items', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable><span slot="title">Click</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('interactive')).toBe(true);
+    });
+
+    it('sets interactive attribute for href items', async () => {
+        container.innerHTML = '<ds-rich-list-item href="https://example.com"><span slot="title">Link</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('interactive')).toBe(true);
+    });
+
+    it('does not set interactive attribute when disabled', async () => {
+        container.innerHTML = '<ds-rich-list-item clickable disabled><span slot="title">Disabled</span></ds-rich-list-item>';
+        const el = container.querySelector('ds-rich-list-item');
+        await tick();
+
+        expect(el.hasAttribute('interactive')).toBe(false);
+    });
+});