@nuvia-ui/components 4.0.1

package/src/ds-file-uploaded/ds-file-uploaded.js

@@ -0,0 +1,135 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '../ds-rich-list-item/ds-rich-list-item.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-progress-bar/ds-progress-bar.js';
+import '../ds-thumbnail/ds-thumbnail.js';
+
+/**
+ * File Uploaded — represents an individual file upload item.
+ *
+ * @element ds-file-uploaded
+ *
+ * @prop {string} filename - The name of the file.
+ * @prop {string} size - The size of the file (e.g., '1.2 MB').
+ * @prop {number} progress - The upload progress (0 to 100).
+ * @prop {boolean} loading - Whether the file is currently uploading.
+ * @prop {boolean} error - Whether the upload failed.
+ * @prop {string} errorMessage - The error message to display if error is true.
+ * @prop {boolean} disabled - Whether the component is disabled.
+ *
+ * @slot media - The file type icon. Defaults to a document icon.
+ *
+ * @fires ds-remove-file - Fired when the close (x) button is clicked.
+ */
+export class DsFileUploaded extends LitElement {
+  static properties = {
+    filename: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    progress: { type: Number, reflect: true },
+    loading: { type: Boolean, reflect: true },
+    error: { type: Boolean, reflect: true },
+    errorMessage: { type: String, attribute: 'error-message' },
+    disabled: { type: Boolean, reflect: true },
+    previewUrl: { type: String, attribute: 'preview-url' },
+    icon: { type: String }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .error-text {
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-error);
+      display: flex;
+      align-items: center;
+      gap: var(--ds-space-xs);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .error-icon {
+      color: var(--ds-color-icon-error);
+      flex-shrink: 0;
+    }
+
+    .progress-container {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      min-width: 100px;
+    }
+
+    ds-rich-list-item {
+      width: 100%;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.filename = '';
+    this.size = '';
+    this.progress = 0;
+    this.loading = false;
+    this.error = false;
+    this.errorMessage = '';
+    this.disabled = false;
+    this.previewUrl = '';
+    this.icon = 'document';
+  }
+
+  _handleRemoveClick(e) {
+    e.stopPropagation();
+    if (this.disabled) return;
+    this.dispatchEvent(new CustomEvent('ds-remove-file', {
+      bubbles: true,
+      composed: true,
+      detail: { filename: this.filename }
+    }));
+  }
+
+  render() {
+    return html`
+      <ds-rich-list-item ?disabled=${this.disabled}>
+        <slot name="media" slot="media">
+          <ds-thumbnail src="${this.previewUrl || ''}" icon="${this.icon}"></ds-thumbnail>
+        </slot>
+
+        <span slot="title">${this.filename}</span>
+        <span slot="description">${this.size}</span>
+
+        <div slot="custom" class="custom-area">
+          ${this.loading ? html`
+            <div class="progress-container">
+              <ds-progress-bar value="${this.progress}" ?disabled=${this.disabled} label="Upload progress"></ds-progress-bar>
+            </div>
+          ` : nothing}
+          ${this.error && !this.loading ? html`
+            <div class="error-text">
+              <ds-icon name="warning" size="sm" class="error-icon"></ds-icon>
+              <span>${this.errorMessage}</span>
+            </div>
+          ` : nothing}
+        </div>
+
+        <ds-icon-button
+          slot="action-group"
+          icon="close"
+          variant="action"
+          size="m"
+          aria-label="Remove file"
+          ?disabled=${this.disabled}
+          @click=${this._handleRemoveClick}
+        ></ds-icon-button>
+      </ds-rich-list-item>
+    `;
+  }
+}
+
+if (!customElements.get('ds-file-uploaded')) {
+  customElements.define('ds-file-uploaded', DsFileUploaded);
+}

package/src/ds-file-uploaded/ds-file-uploaded.mdx

@@ -0,0 +1,33 @@
+import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/blocks';
+import * as DsFileUploadedStories from './ds-file-uploaded.stories';
+
+<Meta of={DsFileUploadedStories} />
+
+# DsFileUploaded
+
+<Description />
+
+The `ds-file-uploaded` component represents a single file either currently being uploaded or already uploaded.
+
+## Anatomy
+It leverages the `ds-rich-list-item` and supports custom `media` slots, a close button, and states for loading (with progress) and error.
+
+## Examples
+
+### Default
+<Canvas>
+  <Story of={DsFileUploadedStories.Default} />
+</Canvas>
+
+### Loading
+<Canvas>
+  <Story of={DsFileUploadedStories.Loading} />
+</Canvas>
+
+### Error
+<Canvas>
+  <Story of={DsFileUploadedStories.Error} />
+</Canvas>
+
+## API Reference
+<ArgsTable />

package/src/ds-file-uploaded/ds-file-uploaded.stories.js

@@ -0,0 +1,81 @@
+import './ds-file-uploaded.js';
+import { html } from 'lit';
+
+export default {
+  title: 'Components/File Uploaded',
+  component: 'ds-file-uploaded',
+  tags: ['autodocs'],
+  argTypes: {
+    filename: { control: 'text' },
+    size: { control: 'text' },
+    progress: { control: { type: 'range', min: 0, max: 100 } },
+    loading: { control: 'boolean' },
+    error: { control: 'boolean' },
+    errorMessage: { control: 'text', name: 'error-message' },
+    disabled: { control: 'boolean' },
+    previewUrl: { control: 'text', name: 'preview-url' },
+    icon: { control: 'text' }
+  },
+  parameters: {
+    actions: {
+      handles: ['ds-remove-file']
+    }
+  }
+};
+
+const Template = (args) => html`
+  <ds-file-uploaded
+    filename=${args.filename}
+    size=${args.size}
+    progress=${args.progress}
+    ?loading=${args.loading}
+    ?error=${args.error}
+    error-message=${args.errorMessage || ''}
+    ?disabled=${args.disabled}
+    preview-url=${args.previewUrl || ''}
+    icon=${args.icon || 'document'}
+  ></ds-file-uploaded>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  filename: 'document.pdf',
+  size: '1.2 MB',
+  progress: 0,
+  loading: false,
+  error: false,
+  errorMessage: '',
+  disabled: false,
+  icon: 'image'
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  progress: 45,
+  loading: true
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  ...Default.args,
+  filename: 'corrupted-file.zip',
+  size: '12 KB',
+  error: true,
+  errorMessage: 'File must be a valid format'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true
+};
+
+export const CustomMedia = (args) => html`
+  <ds-file-uploaded
+    filename="image-placeholder.png"
+    size="350 KB"
+  >
+    <ds-thumbnail slot="media" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=400&fit=crop" icon="image"></ds-thumbnail>
+  </ds-file-uploaded>
+`;

package/src/ds-file-uploaded/ds-file-uploaded.test.js

@@ -0,0 +1,85 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-file-uploaded.js';
+
+describe('DsFileUploaded', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+        vi.restoreAllMocks();
+    });
+
+    it('should render correctly', async () => {
+        container.innerHTML = '<ds-file-uploaded filename="test.pdf" size="1.2 MB"></ds-file-uploaded>';
+        const el = container.querySelector('ds-file-uploaded');
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(el).toBeTruthy();
+        expect(el.shadowRoot.querySelector('ds-rich-list-item')).toBeTruthy();
+    });
+
+    it('displays the filename and size', async () => {
+        container.innerHTML = '<ds-file-uploaded filename="document.pdf" size="2 MB"></ds-file-uploaded>';
+        const el = container.querySelector('ds-file-uploaded');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const title = el.shadowRoot.querySelector('span[slot="title"]');
+        const desc = el.shadowRoot.querySelector('span[slot="description"]');
+        expect(title.textContent).toBe('document.pdf');
+        expect(desc.textContent).toBe('2 MB');
+    });
+
+    it('shows progress bar when loading', async () => {
+        container.innerHTML = '<ds-file-uploaded filename="doc.pdf" loading progress="50"></ds-file-uploaded>';
+        const el = container.querySelector('ds-file-uploaded');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const progressBar = el.shadowRoot.querySelector('ds-progress-bar');
+        expect(progressBar).toBeTruthy();
+        expect(progressBar.getAttribute('value')).toBe('50');
+    });
+
+    it('shows error message when error is true', async () => {
+        container.innerHTML = '<ds-file-uploaded filename="doc.pdf" error error-message="File too large"></ds-file-uploaded>';
+        const el = container.querySelector('ds-file-uploaded');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const errorText = el.shadowRoot.querySelector('.error-text span');
+        expect(errorText).toBeTruthy();
+        expect(errorText.textContent).toBe('File too large');
+    });
+
+    it('dispatches ds-remove-file event when close button is clicked', async () => {
+        container.innerHTML = '<ds-file-uploaded filename="doc.pdf"></ds-file-uploaded>';
+        const el = container.querySelector('ds-file-uploaded');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const removeSpy = vi.fn();
+        el.addEventListener('ds-remove-file', removeSpy);
+
+        const closeButton = el.shadowRoot.querySelector('ds-icon-button');
+        closeButton.click();
+
+        expect(removeSpy).toHaveBeenCalledOnce();
+        const eventDetail = removeSpy.mock.calls[0][0].detail;
+        expect(eventDetail.filename).toBe('doc.pdf');
+    });
+
+    it('does not dispatch ds-remove-file when disabled', async () => {
+        container.innerHTML = '<ds-file-uploaded filename="doc.pdf" disabled></ds-file-uploaded>';
+        const el = container.querySelector('ds-file-uploaded');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const removeSpy = vi.fn();
+        el.addEventListener('ds-remove-file', removeSpy);
+
+        const closeButton = el.shadowRoot.querySelector('ds-icon-button');
+        closeButton.click();
+
+        expect(removeSpy).not.toHaveBeenCalled();
+    });
+});

package/src/ds-file-uploader/ds-file-uploader.a11y.test.js

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-file-uploader.js';
+
+describe('DsFileUploader A11y', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('default state passes axe a11y checks', async () => {
+        container.innerHTML = '<ds-file-uploader label="Upload Area" help-text="Only PNGs"></ds-file-uploader>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('disabled state passes axe a11y checks', async () => {
+        container.innerHTML = '<ds-file-uploader disabled label="Upload Area"></ds-file-uploader>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('error state passes axe a11y checks', async () => {
+        container.innerHTML = '<ds-file-uploader error-text="Invalid file" label="Upload Area"></ds-file-uploader>';
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+
+    it('populated list passes axe a11y checks', async () => {
+        container.innerHTML = '<ds-file-uploader label="Upload Area"></ds-file-uploader>';
+        const el = container.querySelector('ds-file-uploader');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Manually add a file
+        el.files = [{
+            id: '123',
+            filename: 'a11y-test.pdf',
+            size: '12 KB',
+            progress: 0,
+            loading: false,
+            error: false,
+            errorMessage: ''
+        }];
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const results = await axe.run(container);
+        expect(results.violations).toHaveLength(0);
+    });
+});