@brandsync/wc 1.6.0 → 1.7.0

package/dist/collection/components/bs-file-upload/bs-file-upload.js

@@ -0,0 +1,342 @@
+import { h } from "@stencil/core";
+/**
+ * A file dropzone: drag files onto it, or press "Browse file" to open the file picker. It reports
+ * the chosen files and does nothing else -- the consuming app owns the upload itself and shows its
+ * progress with `bs-file-upload-item`.
+ *
+ * ## When to use
+ * - Letting users add one or more files (documents, images) to upload.
+ *
+ * ## When not to use
+ * - Attaching files to a chat message -- see `bs-composer` / `bs-attachment`.
+ * - A file input that must submit with a native `<form>`: this component is **not**
+ *   form-associated. Read the files from `bsFilesSelect` and submit them yourself.
+ *
+ * @slot icon - Replaces the default upload icon inside the round icon area.
+ * @part dropzone - The dashed drop area.
+ * @part icon - The round icon area.
+ * @part heading - The heading text.
+ * @part description - The guidelines text under the heading.
+ * @part browse - The "Browse file" button.
+ */
+// Note: this component's CSS Custom Properties (--bs-file-upload-*) are documented via @prop
+// comments in bs-file-upload.css, not here (see bs-input.tsx's equivalent note).
+export class BsFileUpload {
+    el;
+    inputEl;
+    /** Layout: icon beside the text (`horizontal`) or stacked above it, centered (`vertical`). */
+    direction = 'horizontal';
+    /** Heading text (e.g. "Upload your documents"). */
+    heading;
+    /** Guidelines under the heading (e.g. "PDF or JPG, up to 8MB"). */
+    description;
+    /** Label of the browse button. Override for localisation. */
+    buttonLabel = 'Browse file';
+    /** Which files are accepted, same syntax as the native `accept` attribute: comma-separated
+     * extensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`). Applied to the picker
+     * and also to dropped files, which the browser does not filter. */
+    accept;
+    /** Allows selecting/dropping more than one file. Without it only the first file is taken. */
+    multiple = false;
+    /** Disables the browse button and ignores drops. */
+    disabled = false;
+    /** Whether a file is currently being dragged over the dropzone (the Figma "Drop" state). Set by
+     * the component during a drag; mutable and reflected so it can also be set to show the state
+     * statically. */
+    dragging = false;
+    /** Fires with the accepted files, after the picker closes or files are dropped. */
+    bsFilesSelect;
+    /** Fires with files that were not taken: they didn't match `accept`, or were extra files
+     * dropped while `multiple` is off. */
+    bsFilesReject;
+    matchesAccept(file) {
+        const tokens = (this.accept ?? '')
+            .split(',')
+            .map(t => t.trim().toLowerCase())
+            .filter(Boolean);
+        if (tokens.length === 0)
+            return true;
+        const name = file.name.toLowerCase();
+        const type = (file.type || '').toLowerCase();
+        return tokens.some(token => {
+            if (token.startsWith('.'))
+                return name.endsWith(token);
+            if (token.endsWith('/*'))
+                return type.startsWith(token.slice(0, -1));
+            return type === token;
+        });
+    }
+    handleFiles(files) {
+        const matching = files.filter(f => this.matchesAccept(f));
+        const rejected = files.filter(f => !this.matchesAccept(f));
+        const accepted = this.multiple ? matching : matching.slice(0, 1);
+        if (!this.multiple)
+            rejected.push(...matching.slice(1));
+        if (accepted.length)
+            this.bsFilesSelect.emit(accepted);
+        if (rejected.length)
+            this.bsFilesReject.emit(rejected);
+    }
+    onBrowse = () => {
+        if (!this.disabled)
+            this.inputEl?.click();
+    };
+    onInputChange = () => {
+        const files = Array.from(this.inputEl?.files ?? []);
+        // Reset so choosing the same file again still fires `change`.
+        if (this.inputEl)
+            this.inputEl.value = '';
+        if (files.length)
+            this.handleFiles(files);
+    };
+    onDragOver = (ev) => {
+        if (this.disabled)
+            return;
+        ev.preventDefault();
+        this.dragging = true;
+    };
+    onDragLeave = (ev) => {
+        // dragleave also fires when crossing between child elements; only clear when leaving the zone.
+        const next = ev.relatedTarget;
+        if (next && ev.currentTarget.contains(next))
+            return;
+        this.dragging = false;
+    };
+    onDrop = (ev) => {
+        if (this.disabled)
+            return;
+        ev.preventDefault();
+        this.dragging = false;
+        const files = Array.from(ev.dataTransfer?.files ?? []);
+        if (files.length)
+            this.handleFiles(files);
+    };
+    render() {
+        return (h("div", { key: 'baa70a704a4c3508cd3186f567d0887218a9c04d', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("div", { key: 'c5fe3207ba56506a272c42097ec23881bcf863d4', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'd33d8f0f7b17bab679124823c61a1b7c6d031345', name: "icon" }, h(UploadIcon, { key: 'd0356e97a031867f323de21905a2bbca57963962' }))), h("div", { key: 'a5f4fb403556b2b596291bfddad2b73b1765f91f', class: "bs-file-upload__content" }, h("div", { key: 'b99afac250a8d40e54c97f74afde42620da2ff07', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '33a2ce5aac1d8bf15c55dcf8ccfe4fbce6892fd1', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'eec7f2fcc598412107e7b9c78efae30a3714c674', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f44a5747bb0e9452aefa1fe2fc1d51b1af7da9b1', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'c8e19f95978d103f535bf26fb64c34ff69c4c7ee', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+    }
+    static get is() { return "bs-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsFileUploadDirection",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BsFileUploadDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-file-upload/bs-file-upload.tsx",
+                            "id": "src/components/bs-file-upload/bs-file-upload.tsx::BsFileUploadDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout: icon beside the text (`horizontal`) or stacked above it, centered (`vertical`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text (e.g. \"Upload your documents\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Guidelines under the heading (e.g. \"PDF or JPG, up to 8MB\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the browse button. Override for localisation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label",
+                "defaultValue": "'Browse file'"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Which files are accepted, same syntax as the native `accept` attribute: comma-separated\nextensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`). Applied to the picker\nand also to dropped files, which the browser does not filter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows selecting/dropping more than one file. Without it only the first file is taken."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the browse button and ignores drops."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "dragging": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether a file is currently being dragged over the dropzone (the Figma \"Drop\" state). Set by\nthe component during a drag; mutable and reflected so it can also be set to show the state\nstatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dragging",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsFilesSelect",
+                "name": "bsFilesSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the accepted files, after the picker closes or files are dropped."
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsFilesReject",
+                "name": "bsFilesReject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with files that were not taken: they didn't match `accept`, or were extra files\ndropped while `multiple` is off."
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+// Figma's "UploadSimple" icon (3272:50330), exported SVG, recolored via currentColor.
+const UploadIcon = () => (h("svg", { class: "bs-file-upload__icon-svg", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M16 18V4", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M27 18V26H5V18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M11 9L16 4L21 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-file-upload/bs-file-upload.stories.js

@@ -0,0 +1,116 @@
+import { html, render } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const directions = ['horizontal', 'vertical'];
+const meta = {
+    title: 'Components/bs-file-upload',
+    parameters: { docs: { description: { component: componentDescription('bs-file-upload') } } },
+    render: args => html `
+    <bs-file-upload
+      direction=${args.direction}
+      heading=${args.heading}
+      description=${args.description}
+      button-label=${args.buttonLabel}
+      accept=${args.accept}
+      ?multiple=${args.multiple}
+      ?disabled=${args.disabled}
+      ?dragging=${args.dragging}
+    ></bs-file-upload>
+  `,
+    argTypes: {
+        direction: { control: { type: 'select' }, options: directions, description: propDescription('bs-file-upload', 'direction') },
+        heading: { control: 'text', description: propDescription('bs-file-upload', 'heading') },
+        description: { control: 'text', description: propDescription('bs-file-upload', 'description') },
+        buttonLabel: { control: 'text', description: propDescription('bs-file-upload', 'buttonLabel') },
+        accept: { control: 'text', description: propDescription('bs-file-upload', 'accept') },
+        multiple: { control: 'boolean', description: propDescription('bs-file-upload', 'multiple') },
+        disabled: { control: 'boolean', description: propDescription('bs-file-upload', 'disabled') },
+        dragging: { control: 'boolean', description: propDescription('bs-file-upload', 'dragging') },
+    },
+    args: {
+        direction: 'horizontal',
+        heading: 'Heading',
+        description: 'Upload Guidelines',
+        buttonLabel: 'Browse file',
+        accept: '',
+        multiple: true,
+        disabled: false,
+        dragging: false,
+    },
+};
+export default meta;
+// Figma "Direction=Horizontal, States=Enabled".
+export const Default = {};
+// Figma "Direction=Vertical, States=Enabled".
+export const Vertical = { args: { direction: 'vertical' } };
+// Figma "States=Drop" -- what the zone looks like while a file is dragged over it (try it: drag a
+// file from your desktop over the Default story).
+export const Dragging = {
+    name: 'Drop state',
+    args: { dragging: true },
+};
+export const Disabled = { args: { disabled: true } };
+// Every Figma variant side by side.
+export const AllVariants = {
+    name: 'All variants',
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 20px;">
+      ${['horizontal', 'vertical'].map(direction => html `
+          <bs-file-upload direction=${direction} heading="Heading" description="Upload Guidelines"></bs-file-upload>
+          <bs-file-upload direction=${direction} dragging heading="Heading" description="Upload Guidelines"></bs-file-upload>
+        `)}
+    </div>
+  `,
+};
+// The intended pairing: the dropzone reports files, the app uploads them and shows each one with
+// bs-file-upload-item. Uploads here are simulated (a timer drives the progress) -- a real app drives
+// the items from its own upload.
+const formatSize = (bytes) => (bytes >= 1048576 ? `${(bytes / 1048576).toFixed(1)}MB` : `${Math.max(1, Math.round(bytes / 1024))}KB`);
+function simulateUpload(item, file) {
+    item.state = 'loading';
+    let progress = 0;
+    const timer = window.setInterval(() => {
+        progress += 10 + Math.round(Math.random() * 15);
+        if (progress >= 100) {
+            window.clearInterval(timer);
+            const failed = /\.exe$/i.test(file.name);
+            item.state = failed ? 'error' : 'success';
+            if (failed)
+                item.message = 'Executable files are not allowed';
+            return;
+        }
+        item.state = 'in-progress';
+        item.progress = progress;
+    }, 400);
+    item.addEventListener('bsCancel', () => window.clearInterval(timer));
+}
+export const WithUploadList = {
+    name: 'With upload list',
+    render: () => {
+        const onSelect = (ev) => {
+            const list = ev.currentTarget.parentElement.querySelector('.list');
+            ev.detail.forEach(file => {
+                const holder = document.createElement('div');
+                render(html `<bs-file-upload-item
+            file-name=${file.name}
+            file-size=${formatSize(file.size)}
+            @bsCancel=${() => holder.remove()}
+            @bsRemove=${() => holder.remove()}
+          ></bs-file-upload-item>`, holder);
+                list.appendChild(holder);
+                simulateUpload(holder.firstElementChild, file);
+            });
+        };
+        return html `
+      <div style="display: flex; flex-direction: column; gap: 16px; max-width: 640px;">
+        <bs-file-upload
+          direction="vertical"
+          multiple
+          heading="Upload your documents"
+          description="Drag files here, or browse. Uploads are simulated."
+          @bsFilesSelect=${onSelect}
+        ></bs-file-upload>
+        <div class="list" style="display: flex; flex-direction: column; gap: 12px;"></div>
+      </div>
+    `;
+    },
+};

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.cmp.test.js

@@ -0,0 +1,115 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const btn = (el) => el?.shadowRoot?.querySelector('button');
+describe('bs-file-upload-item', () => {
+    it('has no axe-core violations in every state', async () => {
+        for (const state of ['loading', 'in-progress', 'error', 'success']) {
+            const { root } = await render(h("bs-file-upload-item", { state: state, fileName: "report.pdf", fileSize: "8MB", progress: 40 }));
+            await runAxeCheck(root);
+        }
+    });
+    it('exposes its documented shadow parts', async () => {
+        const { root } = await render(h("bs-file-upload-item", { state: "success", fileName: "a.pdf", fileSize: "1MB" }));
+        assertShadowParts(root.shadowRoot, ['item', 'thumbnail', 'name', 'size', 'status', 'action']);
+        const { root: r2 } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "a.pdf" }));
+        assertShadowParts(r2.shadowRoot, ['progress']);
+    });
+    it('shows the file name and size', async () => {
+        const { root } = await render(h("bs-file-upload-item", { fileName: "Image Name", fileSize: "8MB" }));
+        expect(root.shadowRoot.querySelector('[part="name"]').textContent).toBe('Image Name');
+        expect(root.shadowRoot.querySelector('[part="size"]').textContent).toBe('8MB');
+    });
+    it('omits the size line when there is no fileSize', async () => {
+        const { root } = await render(h("bs-file-upload-item", { fileName: "x" }));
+        expect(root.shadowRoot.querySelector('[part="size"]')).toBeNull();
+    });
+    describe('loading', () => {
+        it('renders an indeterminate progress bar labelled "Loading..."', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "loading", fileName: "a" }));
+            const bar = root.shadowRoot.querySelector('bs-progress-linear');
+            expect(bar.type).toBe('indeterminate');
+            expect(bar.size).toBe('small');
+            expect(bar.textContent).toBe('Loading...');
+        });
+    });
+    describe('in-progress', () => {
+        it('renders a determinate bar with the percentage label', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "a", progress: 40 }));
+            const bar = root.shadowRoot.querySelector('bs-progress-linear');
+            expect(bar.type).toBe('determinate');
+            expect(bar.value).toBe(40);
+            expect(bar.textContent).toBe('40% uploaded');
+        });
+        it('clamps and rounds progress', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "a", progress: 140.4 }));
+            expect(root.shadowRoot.querySelector('bs-progress-linear').textContent).toBe('100% uploaded');
+        });
+        it('names the progress bar after the file', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "report.pdf", progress: 10 }));
+            const bar = root.shadowRoot.querySelector('bs-progress-linear');
+            expect(bar.shadowRoot.querySelector('[role="progressbar"]')).toEqualAttribute('aria-label', 'report.pdf');
+        });
+    });
+    describe('error and success', () => {
+        it('error: red status with the default or a custom message, announced via role="status"', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "error", fileName: "a" }));
+            const status = root.shadowRoot.querySelector('[part="status"]');
+            expect(status).toEqualAttribute('role', 'status');
+            expect(status.textContent).toContain('Upload failed');
+            expect(status).toHaveClass('bs-file-upload-item__status--error');
+            const { root: r2 } = await render(h("bs-file-upload-item", { state: "error", fileName: "a", message: "File too large" }));
+            expect(r2.shadowRoot.querySelector('[part="status"]').textContent).toContain('File too large');
+        });
+        it('success: green status with the default message', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "success", fileName: "a" }));
+            const status = root.shadowRoot.querySelector('[part="status"]');
+            expect(status.textContent).toContain('File uploaded successfully');
+            expect(status).toHaveClass('bs-file-upload-item__status--success');
+        });
+        it('the final states render no progress bar', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "success", fileName: "a" }));
+            expect(root.shadowRoot.querySelector('bs-progress-linear')).toBeNull();
+        });
+    });
+    describe('action button', () => {
+        it('loading / in-progress / error: a cancel button that emits bsCancel', async () => {
+            for (const state of ['loading', 'in-progress', 'error']) {
+                const { root, spyOnEvent } = await render(h("bs-file-upload-item", { state: state, fileName: "a" }));
+                const cancel = spyOnEvent('bsCancel');
+                const remove = spyOnEvent('bsRemove');
+                const action = root.shadowRoot.querySelector('[part="action"]');
+                expect(btn(action).getAttribute('aria-label')).toBe('Cancel upload');
+                btn(action).click();
+                expect(cancel).toHaveReceivedEventTimes(1);
+                expect(remove).not.toHaveReceivedEvent();
+            }
+        });
+        it('success: a remove button that emits bsRemove', async () => {
+            const { root, spyOnEvent } = await render(h("bs-file-upload-item", { state: "success", fileName: "a" }));
+            const cancel = spyOnEvent('bsCancel');
+            const remove = spyOnEvent('bsRemove');
+            const action = root.shadowRoot.querySelector('[part="action"]');
+            expect(btn(action).getAttribute('aria-label')).toBe('Remove file');
+            btn(action).click();
+            expect(remove).toHaveReceivedEventTimes(1);
+            expect(cancel).not.toHaveReceivedEvent();
+        });
+        it('cancelLabel / removeLabel override the accessible names', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "loading", fileName: "a", cancelLabel: "Annuller" }));
+            expect(btn(root.shadowRoot.querySelector('[part="action"]')).getAttribute('aria-label')).toBe('Annuller');
+            const { root: r2 } = await render(h("bs-file-upload-item", { state: "success", fileName: "a", removeLabel: "Fjern" }));
+            expect(btn(r2.shadowRoot.querySelector('[part="action"]')).getAttribute('aria-label')).toBe('Fjern');
+        });
+    });
+    describe('thumbnail', () => {
+        it('shows the placeholder icon without thumbnailSrc, and the image with it', async () => {
+            const { root } = await render(h("bs-file-upload-item", { fileName: "a" }));
+            expect(root.shadowRoot.querySelector('.bs-file-upload-item__placeholder')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('img')).toBeNull();
+            const { root: r2 } = await render(h("bs-file-upload-item", { fileName: "a", thumbnailSrc: "data:image/gif;base64,R0lGODlhAQABAAAAACw=", thumbnailAlt: "Preview" }));
+            const img = r2.shadowRoot.querySelector('img');
+            expect(img).toEqualAttribute('alt', 'Preview');
+            expect(r2.shadowRoot.querySelector('.bs-file-upload-item__placeholder')).toBeNull();
+        });
+    });
+});