@watermarkinsights/ripple 5.10.0-15 → 5.10.0-16

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -706,7 +706,7 @@
   margin-left: 0.3125rem;
   margin-right: 0;
 }
-:host input:focus-visible + .wm-button {
+:host input:focus-visible + label {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }
@@ -715,6 +715,61 @@
   box-sizing: border-box;
 }
 
+.upload-arrow {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+.upload-arrow:before {
+  content: "";
+  display: inline-block;
+  background-color: var(--icon-fill, currentColor);
+  width: 100%;
+  height: 100%;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14 11V14H2V11H0V14C0 15.1 0.9 16 2 16H14C15.1 16 16 15.1 16 14V11H14ZM3 5L4.41 6.41L7 3.83V12H9V3.83L11.59 6.41L13 5L8 0L3 5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14 11V14H2V11H0V14C0 15.1 0.9 16 2 16H14C15.1 16 16 15.1 16 14V11H14ZM3 5L4.41 6.41L7 3.83V12H9V3.83L11.59 6.41L13 5L8 0L3 5Z'/%3E%3C/svg%3E%0A");
+}
+
+.drop-area {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+  pointer-events: none;
+}
+.drop-area.listening {
+  pointer-events: unset;
+}
+.drop-area.listening .drop-overlay {
+  display: flex;
+}
+.drop-area.-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.drop-area .drop-overlay {
+  display: none;
+  flex-direction: column;
+  font-size: 1rem;
+  font-weight: 600;
+  gap: 0.75rem;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(221, 241, 250, 0.6);
+  border: 3px solid var(--wmcolor-border-focus);
+  align-items: center;
+  justify-content: center;
+}
+.drop-area .drop-overlay .upload-arrow {
+  height: 2rem;
+  width: 2rem;
+  color: var(--wmcolor-interactive-positive);
+}
+
 .wm-button.disabled {
   pointer-events: initial !important;
 }
@@ -790,14 +845,74 @@
   margin-bottom: 0.5rem;
 }
 
-.info-wrapper {
-  position: relative;
+.button-wrapper {
+  display: flex;
+  width: fit-content;
+  gap: 1rem;
+}
+
+.-drop label {
+  height: 6.25rem;
+  border-radius: 8px;
+  border: 2px dashed var(--wmcolor-border-dark);
+  background: var(--wmcolor-background);
+  min-width: 21.375rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  transition: border ease-out 200ms, background-color ease-out 200ms;
+}
+.-drop label:hover:not(:has(.disabled)) {
+  cursor: pointer;
+}
+.-drop label:hover:not(:has(.disabled)) .wm-button {
+  text-decoration: underline;
+}
+.-drop .prompt {
   display: flex;
   align-items: center;
+  gap: 0.5rem;
+}
+.-drop .prompt .upload-arrow {
+  width: 1rem;
+  height: 1rem;
+  color: var(--wmcolor-interactive);
 }
-.info-wrapper .info {
+.-drop .prompt .wm-button {
+  font-weight: 700;
   font-size: 0.875rem;
-  margin-left: 1rem;
+  transition: none;
+  width: fit-content;
+}
+
+.-drop:has(.disabled) label {
+  background: var(--wmcolor-interactive-background-disabled);
+  border-color: var(--wmcolor-border);
+}
+.-drop:has(.disabled) .upload-arrow {
+  color: var(--wmcolor-button-text-textonly-disabled);
+}
+
+:host(.dragging) *:not(.drop-area, .drop-overlay) {
+  pointer-events: none;
+}
+:host(.dragging) .-drop label {
+  background-color: var(--wmcolor-interactive-background-highlight);
+  border: 2px solid var(--wmcolor-border-focus);
+  pointer-events: none;
+}
+:host(.dragging) .-drop label .wm-button {
+  color: var(--wmcolor-text);
+  font-size: 1rem;
+  font-weight: 600;
+}
+:host(.dragging) .-drop label .upload-arrow {
+  color: var(--wmcolor-interactive-positive);
+}
+:host(.dragging) .-drop label #file-count {
+  display: none;
 }
 
 .accepted-types {
@@ -805,17 +920,43 @@
 }
 
 .notif-wrapper {
-  position: relative;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  position: relative;
   margin-bottom: 0.75rem;
+  gap: 0.5rem;
 }
 
 .requirements {
+  font-size: 0.875rem;
+}
+.requirements summary {
+  width: fit-content;
+  list-style-position: outside;
+  margin-inline-start: 1rem;
+  font-weight: 700;
+  color: var(--wmcolor-button-text-textonly);
+}
+.requirements summary:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+}
+.requirements summary::marker {
+  font-size: 0.75rem;
+}
+.requirements .requirements-wrapper {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  margin-inline-start: 1rem;
+}
+
+#file-count {
+  display: block;
+  flex-shrink: 0;
   font-size: 0.875rem;
-  margin-left: 1rem;
+  font-style: italic;
 }
 
 .notif,

package/dist/collection/components/wm-uploader/wm-uploader.e2e.js

@@ -0,0 +1,70 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-uploader", () => {
+    let page, input, label;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="2020-01-28T22:29:10.397Z"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2019-02-14T12:21:05.397Z"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        input = await page.find("wm-uploader >>> input[type='file']");
+        label = await page.find("wm-uploader >>> label");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders the component", async () => {
+        expect(input).not.toBeNull();
+        expect(label).not.toBeNull();
+    });
+    it("focuses previous file when deleting with the keyboard", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="First file" type="pdf" file-actions="preview delete"></wm-file>
+        <wm-file id="file2" name="Second file" type="pdf" file-actions="delete"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let fileEls = await page.findAll("wm-file");
+        let secondFileEl = fileEls[1];
+        // inital check of file count
+        expect(fileEls.length).toBe(2);
+        // user must be tabbing for these changes to occur
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        // check focused element is last file, delete button
+        let activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file2");
+        let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+        let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
+        //@ts-ignore
+        mockFileDeleteEvent.target = secondFileEl;
+        secondFileEl.dispatchEvent(mockFileDeleteEvent);
+        await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
+        await page.waitForChanges();
+        // confirm file has been removed
+        fileEls = await page.findAll("wm-file");
+        expect(fileEls.length).toBe(1);
+        // check focused element is last file, delete button
+        activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file1");
+        activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+    });
+    //  it("disables the button dynamically", async () => {
+    // disabled when maxed out
+    // disabled while a file is uploading
+    // not disabled after upload
+    // });
+});

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -1,11 +1,14 @@
 import { h, Host, forceUpdate, } from "@stencil/core";
 import { uploaderMessages } from "../../global/intl";
+import { intl } from "../../global/functions";
 export class Uploader {
     constructor() {
         this.batchCount = 0; // used to calculate the aggregate upload progress
         this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
         this.fileIdToDelete = "";
         this.label = undefined;
+        this.uploaderType = "select";
+        this.dropArea = "component";
         this.buttonText = undefined;
         this.icon = undefined;
         this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
@@ -49,6 +52,27 @@ export class Uploader {
     storeDeletedId(ev) {
         this.fileIdToDelete = ev.target.id;
     }
+    handleDocumentDragEnter() {
+        if (this.uploaderType == "drop") {
+            this.dropAreaEl.classList.add("listening");
+        }
+    }
+    handleMouseOver() {
+        if (this.uploaderType == "drop") {
+            this.dropAreaEl.classList.remove("listening");
+        }
+    }
+    handleDocumentDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            if (ev.target == null || ev.target.nodeName == "HTML")
+                this.dropAreaEl.classList.remove("listening");
+        }
+    }
+    handleDocumentVisibilityChange() {
+        if (this.uploaderType == "drop") {
+            this.dropAreaEl.classList.remove("listening");
+        }
+    }
     announceError() {
         if (this.errorMessage) {
             setTimeout(() => this.announce(this.errorMessage, this.politeLiveRegionEl), 100);
@@ -155,15 +179,46 @@ export class Uploader {
             }
         }
     }
-    handleUploadButtonChange(ev) {
-        const inputEl = ev.target;
-        if (inputEl.files) {
-            const files = Array.from(inputEl.files);
+    handleUploadButtonChange() {
+        if (this.uploadButtonEl.files) {
+            const files = Array.from(this.uploadButtonEl.files);
             if (files.length > 0) {
                 this.batchCount = files.length;
                 this.wmUploaderFilesSelected.emit(files);
             }
-            ev.target.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+            this.uploadButtonEl.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
+        }
+    }
+    handleDragEnter(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.add("dragging");
+        }
+    }
+    handleDragOver(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+        }
+    }
+    handleDragLeave(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.dropAreaEl.classList.remove("listening");
+            this.el.classList.remove("dragging");
+        }
+    }
+    handleDrop(ev) {
+        if (this.uploaderType == "drop") {
+            ev.preventDefault();
+            this.el.classList.remove("dragging");
+            this.dropAreaEl.classList.remove("listening");
+            if (ev.dataTransfer.files) {
+                const files = Array.from(ev.dataTransfer.files);
+                if (files.length > 0) {
+                    this.batchCount = files.length;
+                    this.wmUploaderFilesSelected.emit(files);
+                }
+            }
         }
     }
     announce(message, liveRegionEl) {
@@ -188,15 +243,40 @@ export class Uploader {
             return (h("span", { class: "mdi", "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`))));
         }
     }
-    renderUploadButton(classes) {
+    renderUploadButton() {
         let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${this.buttonText}`;
-        return (h("div", { class: "info-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: (ev) => this.handleUploadButtonChange(ev) }), h("label", { htmlFor: "input", class: `wm-button ${classes}` }, this.icon && this.renderIcon(), this.buttonText)));
+        return (h("div", { class: "button-wrapper" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `wm-button -secondary ${this.isDisabled ? "disabled" : ""}` }, this.icon && this.renderIcon(), this.buttonText), this.uploaderType == "select" && this.renderFileCount()));
+    }
+    renderDropButton() {
+        let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : ""}${uploaderMessages.dropInstructions}`;
+        return (h("div", { class: "button-wrapper -drop" }, h("input", { name: "input", id: "input", ref: (el) => (this.uploadButtonEl = el), class: "sr-only", "aria-label": accessibleLabel, "aria-required": this.requiredField ? "true" : null, "aria-describedby": `${this.errorMessage ? "error " : ""}file-count max-size accepted-types`, type: "file", multiple: true, onClick: (ev) => this.handleUploadButtonClick(ev), onChange: () => this.handleUploadButtonChange() }), h("label", { htmlFor: "input", class: `${this.isDisabled ? "disabled" : ""}` }, h("div", { class: "prompt" }, h("span", { class: "upload-arrow" }), h("span", { id: "drop-text", class: `wm-button -textonly ${this.isDisabled ? "disabled" : ""}` }, uploaderMessages.dropInstructions)), this.renderFileCount())));
     }
     renderHeader() {
-        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.renderUploadButton(`-secondary ${this.isDisabled ? "disabled" : ""}`), this.renderRequirements()), h("div", { id: "accepted-types", class: "accepted-types" }, uploaderMessages.getAcceptedFileTypes(this.validTypes, this.fileTypes.split(" ").length)), this.notif && h("div", { class: "notif" }, this.notif), h("div", { id: "error" }, this.errorMessage)));
+        return (h("div", { class: "header" }, h("div", { class: "notif-wrapper" }, this.uploaderType == "select" ? this.renderUploadButton() : this.renderDropButton(), this.renderRequirements()), this.notif && h("div", { class: "notif" }, this.notif), h("div", { id: "error" }, this.errorMessage)));
+    }
+    renderFileCount() {
+        if (this.maxFiles) {
+            return h("div", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles));
+        }
     }
     renderRequirements() {
-        return (h("div", { class: "requirements" }, this.maxFiles && (h("span", { id: "file-count" }, uploaderMessages.getFileCount(this.uploadedFileEls.length, this.maxFiles))), this.maxSize && h("span", { id: "max-size" }, uploaderMessages.getMaxSize(this.maxSize))));
+        const maxSizeMessage = intl.formatMessage({
+            id: "uploader.maxSize",
+            defaultMessage: "<b>Maximum File Size:</b> {maxSize}",
+            description: "An indicator of the maximum file size the uploader allows",
+        }, {
+            maxSize: this.maxSize,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        const acceptedTypesMessage = intl.formatMessage({
+            id: "uploader.acceptedFileTypes",
+            defaultMessage: "<b>Accepted File {amount, plural, =1 {Type} other {Types}}:</b> {fileTypes}",
+        }, {
+            fileTypes: this.validTypes,
+            amount: this.fileTypes.split(" ").length,
+            b: (chunks) => h("span", { style: { "font-weight": "600" } }, chunks),
+        });
+        return (h("details", { class: "requirements" }, h("summary", null, uploaderMessages.fileRequirements), h("div", { class: "requirements-wrapper" }, h("div", { id: "accepted-types", class: "accepted-types" }, acceptedTypesMessage), this.maxSize && h("span", { id: "max-size" }, maxSizeMessage))));
     }
     renderListContainer() {
         const hasNewlyUploadedFiles = this.fileEls.filter((file) => file.progress && file.progress === 100).length;
@@ -205,10 +285,13 @@ export class Uploader {
     renderLabel() {
         return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
+    renderDropArea() {
+        return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { class: "drop-overlay" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
+    }
     render() {
-        return (h(Host, { key: '46d82b5386359d17221f7b7376dbbafcdd245543' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'b7f938f7da392db21554228ab4f104a2116ecb44', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, null, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '1b0a6f5340262caed883ac70a38f76e80f6c0d5c', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }
@@ -242,6 +325,42 @@ export class Uploader {
                 "attribute": "label",
                 "reflect": false
             },
+            "uploaderType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"select\" | \"drop\"",
+                    "resolved": "\"drop\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uploader-type",
+                "reflect": false,
+                "defaultValue": "\"select\""
+            },
+            "dropArea": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"component\" | \"page\"",
+                    "resolved": "\"component\" | \"page\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drop-area",
+                "reflect": false,
+                "defaultValue": "\"component\""
+            },
             "buttonText": {
                 "type": "string",
                 "mutable": false,
@@ -444,6 +563,30 @@ export class Uploader {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "dragenter",
+                "method": "handleDocumentDragEnter",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseover",
+                "method": "handleMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragleave",
+                "method": "handleDocumentDragLeave",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "visibilitychange",
+                "method": "handleDocumentVisibilityChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }