@brandsync/wc 1.6.0 → 1.8.0

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

@@ -0,0 +1,139 @@
+/**
+ * @prop --bs-file-upload-bg: Background of the dropzone at rest. Aliased to --bs-surface-raised.
+ * @prop --bs-file-upload-bg-dragging: Background while a file is dragged over it. Aliased to --bs-surface-container.
+ * @prop --bs-file-upload-border-color: Dashed border color at rest. Aliased to --bs-border-neutral-container.
+ * @prop --bs-file-upload-border-color-dragging: Dashed border color while dragging. Aliased to --bs-border-neutral-container-pressed.
+ * @prop --bs-file-upload-border-width: Dashed border width. Aliased to --bs-border-width-medium.
+ * @prop --bs-file-upload-radius: Corner radius. Aliased to --bs-border-radius-150.
+ * @prop --bs-file-upload-padding: Padding on all sides. Aliased to --bs-spacing-300.
+ * @prop --bs-file-upload-gap: Gap between the icon area and the content. Aliased to --bs-spacing-300.
+ * @prop --bs-file-upload-icon-size: Diameter of the round icon area. 102px, per the Figma spec.
+ * @prop --bs-file-upload-icon-bg: Background of the round icon area at rest. Aliased to --bs-surface-hover.
+ * @prop --bs-file-upload-icon-bg-dragging: Background of the icon area while dragging. Aliased to --bs-surface-raised.
+ * @prop --bs-file-upload-icon-color: Upload icon color. Aliased to --bs-icon-default.
+ * @prop --bs-file-upload-content-gap: Gap between the text and the browse button. Aliased to --bs-spacing-100.
+ * @prop --bs-file-upload-text-gap: Gap between the heading and the guidelines. Aliased to --bs-spacing-25.
+ * @prop --bs-file-upload-heading-color: Heading color. Aliased to --bs-text-default.
+ * @prop --bs-file-upload-description-color: Guidelines color. Aliased to --bs-text-secondary.
+ * @prop --bs-file-upload-font-size: Text size. Aliased to --bs-font-size-md.
+ * @prop --bs-file-upload-line-height: Text line height. Aliased to --bs-line-height-body-md.
+ */
+:host {
+  display: block;
+
+  --bs-file-upload-bg: var(--bs-surface-raised);
+  --bs-file-upload-bg-dragging: var(--bs-surface-container);
+  --bs-file-upload-border-color: var(--bs-border-neutral-container);
+  --bs-file-upload-border-color-dragging: var(--bs-border-neutral-container-pressed);
+  --bs-file-upload-border-width: var(--bs-border-width-medium);
+  --bs-file-upload-radius: var(--bs-border-radius-150);
+  --bs-file-upload-padding: var(--bs-spacing-300);
+  --bs-file-upload-gap: var(--bs-spacing-300);
+
+  --bs-file-upload-icon-size: 102px;
+  --bs-file-upload-icon-bg: var(--bs-surface-hover);
+  --bs-file-upload-icon-bg-dragging: var(--bs-surface-raised);
+  --bs-file-upload-icon-color: var(--bs-icon-default);
+
+  --bs-file-upload-content-gap: var(--bs-spacing-100);
+  --bs-file-upload-text-gap: var(--bs-spacing-25);
+  --bs-file-upload-heading-color: var(--bs-text-default);
+  --bs-file-upload-description-color: var(--bs-text-secondary);
+  --bs-file-upload-font-size: var(--bs-font-size-md);
+  --bs-file-upload-line-height: var(--bs-line-height-body-md);
+}
+
+.bs-file-upload {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-file-upload-gap);
+  padding: var(--bs-file-upload-padding);
+  border: var(--bs-file-upload-border-width) dashed var(--bs-file-upload-border-color);
+  border-radius: var(--bs-file-upload-radius);
+  background: var(--bs-file-upload-bg);
+  font-size: var(--bs-file-upload-font-size);
+  line-height: calc(var(--bs-file-upload-line-height) * 1px);
+}
+
+.bs-file-upload--horizontal {
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.bs-file-upload--vertical {
+  flex-direction: column;
+  text-align: center;
+}
+
+.bs-file-upload--dragging {
+  background: var(--bs-file-upload-bg-dragging);
+  border-color: var(--bs-file-upload-border-color-dragging);
+}
+
+.bs-file-upload__icon {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-file-upload-icon-size);
+  height: var(--bs-file-upload-icon-size);
+  border-radius: var(--bs-border-radius-full);
+  background: var(--bs-file-upload-icon-bg);
+  color: var(--bs-file-upload-icon-color);
+}
+
+.bs-file-upload--dragging .bs-file-upload__icon {
+  background: var(--bs-file-upload-icon-bg-dragging);
+}
+
+.bs-file-upload__icon-svg,
+.bs-file-upload__icon ::slotted(*) {
+  display: block;
+  width: 32px;
+  height: 32px;
+}
+
+.bs-file-upload__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-file-upload-content-gap);
+  min-width: 0;
+}
+
+.bs-file-upload--horizontal .bs-file-upload__content {
+  align-items: flex-start;
+}
+
+.bs-file-upload--vertical .bs-file-upload__content {
+  align-items: center;
+}
+
+.bs-file-upload__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-file-upload-text-gap);
+}
+
+.bs-file-upload__heading {
+  color: var(--bs-file-upload-heading-color);
+  font-weight: 600;
+}
+
+.bs-file-upload__description {
+  color: var(--bs-file-upload-description-color);
+}
+
+.bs-file-upload--disabled {
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  .bs-file-upload {
+    border-color: CanvasText;
+  }
+  .bs-file-upload--dragging {
+    border-color: Highlight;
+  }
+}

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>
+    `;
+    },
+};