@getflip/swirl-components 0.96.2 → 0.97.0

package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.css

@@ -70,6 +70,7 @@
   display: block;
   margin-top: var(--s-space-4);
   margin-bottom: var(--s-space-8);
+  color: var(--s-text-subdued);
   font-size: var(--s-font-size-sm);
   line-height: var(--s-line-height-sm);
 }

package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.js

@@ -19,7 +19,9 @@ export class SwirlFileUploader {
     this.label = undefined;
     this.multiple = undefined;
     this.showDropzone = true;
+    this.uploadButtonIcon = undefined;
     this.uploadButtonLabel = "Select file";
+    this.uploadButtonVariant = "flat";
   }
   /**
    * Reset the file input.
@@ -39,7 +41,7 @@ export class SwirlFileUploader {
     return (h(Host, null, h("div", { class: className }, h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputEl}-label` }, this.label), this.description && (h("span", { class: "file-uploader__description", id: `${this.inputId}-description` }, this.description)), h("div", { class: "file-uploader__dropzone" }, this.showDropzone ? ([
       h("swirl-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
       h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
-    ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, swirlAriaDescribedby: ariaDescribedby, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, variant: "flat" })), h("input", { accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+    ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
   }
   static get is() { return "swirl-file-uploader"; }
   static get encapsulation() { return "scoped"; }
@@ -228,6 +230,23 @@ export class SwirlFileUploader {
         "reflect": false,
         "defaultValue": "true"
       },
+      "uploadButtonIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "upload-button-icon",
+        "reflect": false
+      },
       "uploadButtonLabel": {
         "type": "string",
         "mutable": false,
@@ -245,6 +264,29 @@ export class SwirlFileUploader {
         "attribute": "upload-button-label",
         "reflect": false,
         "defaultValue": "\"Select file\""
+      },
+      "uploadButtonVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlButtonVariant",
+          "resolved": "\"flat\" | \"floating\" | \"ghost\" | \"on-image\" | \"outline\" | \"plain\"",
+          "references": {
+            "SwirlButtonVariant": {
+              "location": "import",
+              "path": "../swirl-button/swirl-button"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "upload-button-variant",
+        "reflect": false,
+        "defaultValue": "\"flat\""
       }
     };
   }