@duetds/components 6.8.9 → 6.9.0

package/lib/collection/components/duet-upload/duet-upload.js

@@ -1,25 +1,22 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Fragment, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
 import errorCodes from "./errorcodes.json";
 import { getI18nError } from "./errorcodes.utils";
-import { ErrorItem } from "./upload-editable-item-error";
-import { ProgressItem } from "./upload-editable-item-inprogres";
-import { PendingItem } from "./upload-editable-item-pending";
-import { SuccessItem } from "./upload-editable-item-success";
-import { UploadCategory } from "./upload-item-category";
+import { UploadItem } from "./upload-item";
+import { UploadItemHeader } from "./upload-item-header";
 import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./upload-validators";
 import { makeXhrRequest, } from "./xhr.helpers";
 /**
  * @slot header  - named slot - to place content after description / caption (if caption is on top)
  * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
  * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
- * @slot footer - named slot - to place content below filefooter
+ * @slot uploadfooter - named slot - to place content below filefooter
  * @slot afterfooter - named slot - to place content below "footer" / caption (if caption is on bottom)
  * @part ${this.identifier}-empty-state : duet-upload-empty-state - named part - can be used to style the empty notification area or hide it completely
  * @part ${this.identifier}-editable-table : duet-upload-editable-table - named part - can be used to style the editable-table
@@ -49,6 +46,11 @@ export class DuetUpload {
     this.kick = debounce(() => {
       this.tick = Date.now();
     }, 30); // will trigger re-render
+    this.categoryLabel = {
+      en: "Category",
+      sv: "Filtyp",
+      fi: "Tiedostotyyppi",
+    };
     /**
      * Private functions
      */
@@ -102,18 +104,18 @@ export class DuetUpload {
         return "none";
       }
     };
-    this.getItemHTMLFromItemData = (data, group) => {
+    this.mapFilesToUploadItems = (data, group, showCategory) => {
       if (group === this.DefaultGroups.success) {
-        return h(SuccessItem, { data: data, showLinks: this.showLinks });
+        return (h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "success", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.inprogress) {
-        return h(ProgressItem, { progress: data.progress, name: data.item.name });
+        return (h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.pending) {
-        return h(PendingItem, { name: data.item.name });
+        return (h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (group === this.DefaultGroups.failure) {
-        return h(ErrorItem, { data: data, errorCodes: this.errorCodes });
+        return (h(UploadItem, { theme: this.theme, actions: this.getActions(group), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory }));
       }
       else if (data.group) {
         return data.html;
@@ -386,60 +388,43 @@ export class DuetUpload {
       const failure = [];
       const pending = [];
       const success = [];
+      let hasCategory = false;
       all.forEach(data => {
-        var _a, _b;
         const group = this.getGroupFromItemData(data);
-        const item = this.getItemHTMLFromItemData(data, group);
-        const category = h(UploadCategory, { meta: data.meta });
-        const categories = (_b = (_a = data.meta) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.join(",");
+        // const item = mapFn(data, group)
+        // const category = <UploadCategory meta={data.meta} />
+        // const categories = data.meta?.badges?.join(",")
+        if (data.meta && !!data.meta.badges) {
+          hasCategory = true;
+        }
         if (group === this.DefaultGroups.success) {
           success.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `${categories || ""} ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.inprogress) {
           inprogress.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.pending) {
           pending.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (group === this.DefaultGroups.failure) {
           failure.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
         else if (data.group) {
           inprogress.push({
             uid: data.uid,
-            item,
-            hasCategory: data.meta && !!data.meta.badges,
-            category,
-            group: data.group,
-            actionDescription: `category ${data.item.name}`,
+            data,
           });
         }
       });
@@ -448,46 +433,23 @@ export class DuetUpload {
         failure,
         success,
         inprogress,
+        hasCategory,
       };
     };
-    this.getColumns = (group, hasCategory) => {
-      return [
-        {
-          sort_order: 1,
-          direction: -1,
-          index: 0,
-          key: "category",
-          label: {
-            fi: "Kategoria",
-            sv: "Kategori",
-            en: "Category",
-          },
-          display: hasCategory,
-        },
-        {
-          sort_order: 1,
-          direction: -1,
-          index: 1,
-          key: group.id,
-          label: group.label,
-          display: true,
-        },
-      ];
-    };
     this.getActions = (id) => {
       return this.actions.filter(item => item.map.includes(id));
     };
-    this.renderEditableTableGroups = () => {
+    this.renderUploadedItems = () => {
       const filteredItems = this.filterMap();
-      const EditableTables = this.groups.map(group => {
+      const hasCategory = filteredItems.hasCategory;
+      const ItemRows = this.groups.map(group => {
         const currentItems = filteredItems[group.id];
         if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
           return;
         }
-        const hasCategory = currentItems.some(item => item.hasCategory);
-        return (h("duet-editable-table", { variation: "plain", groupId: group.id, columns: this.getColumns(group, hasCategory), actions: this.getActions(group.id), margin: "none", rows: currentItems, "hide-head-visually": this.hideGroups || group.id !== this.DefaultGroups.success }));
+        return (h(Fragment, null, !this.hideGroups && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: group.label })), currentItems.map(item => this.mapFilesToUploadItems(item.data, group.id, hasCategory))));
       });
-      return EditableTables;
+      return (h(Fragment, null, this.showUploadedItemsHeader && (h(UploadItemHeader, { categoryLabel: hasCategory ? this.categoryLabel : undefined, label: this.uploadedItemsHeaderLabel })), ItemRows));
     };
     this.tick = Date.now();
     this.accessibleActiveDescendant = undefined;
@@ -603,6 +565,13 @@ export class DuetUpload {
     this.value = undefined;
     this.externalUploadButtonId = undefined;
     this.captionOnBottom = false;
+    this.showUploadedItemsHeader = false;
+    this.uploadedItemsHeaderLabel = {
+      fi: "Ladattu tiedosto",
+      sv: "Lägg till en bilaga",
+      en: "Uploaded file",
+    };
+    this.hideHeader = false;
     this.groups = [
       {
         id: this.DefaultGroups.success,
@@ -727,13 +696,7 @@ export class DuetUpload {
       this.externalUploadButton.ariaLabel = caption;
     }
     // @ts-ignore
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
-        "duet-upload-filelist-empty": !this.files.size,
-        "duet-upload-filelist": true,
-        "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, h("span", { class: {
-        "duet-upload-filelist-empty-label": !this.files.size,
-      } }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderEditableTableGroups(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "footer" }), this.captionOnBottom && (h("duet-caption", { size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), h("duet-spacer", { size: "large" }), !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { "label-hidden": this.hideHeader, label: this.label, caption: !this.captionOnBottom ? caption : undefined }, h("slot", { name: "header" }), !this.files.size && (h("duet-empty-state", { id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { name: "filefooter" }), h("slot", { name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { size: "small" }, h("div", { class: "upload-bottom-caption" }, caption))), h("slot", { name: "afterfooter" }), h("duet-spacer", { size: "large" }), !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes))), h("duet-spacer", { size: "medium" }), h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,
@@ -973,7 +936,7 @@ export class DuetUpload {
           "references": {
             "XHRInternalMiddleWare": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1352,7 +1315,7 @@ export class DuetUpload {
           "references": {
             "StringMap": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1763,6 +1726,66 @@ export class DuetUpload {
         "reflect": false,
         "defaultValue": "false"
       },
+      "showUploadedItemsHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use show-uploaded-items-header to show single, generic, header for uploaded items"
+        },
+        "attribute": "show-uploaded-items-header",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "uploadedItemsHeaderLabel": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject",
+          "resolved": "DuetLangObject",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{\nfi: \"Ladattu tiedosto.\",\nsv: \"Nedladdad fil.\",\nen: \"Uploaded file.\",\n}"
+            }],
+          "text": "Property to change single uploaded items header label"
+        },
+        "defaultValue": "{\n    fi: \"Ladattu tiedosto\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Uploaded file\",\n  }"
+      },
+      "hideHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use hide-header to hide upload component header and caption (if caption is not on bottom)"
+        },
+        "attribute": "hide-header",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "groups": {
         "type": "unknown",
         "mutable": false,
@@ -1772,7 +1795,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadTableGroupName": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1814,7 +1837,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1834,7 +1857,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1854,7 +1877,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1874,7 +1897,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1894,7 +1917,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1914,7 +1937,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1934,7 +1957,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1954,7 +1977,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1974,7 +1997,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1994,7 +2017,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }

package/lib/collection/components/duet-upload/upload-item-header.js

@@ -0,0 +1,8 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+export const UploadItemHeader = ({ label, categoryLabel }) => {
+  return (h("div", { class: "items-header" }, categoryLabel && (h("duet-heading", { class: "category-header", border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(categoryLabel))), h("duet-heading", { class: { "filename-header": true, "no-category": !categoryLabel }, border: "solid", color: "gray-darker", level: "h3", "visual-level": "h6", weight: "semibold" }, getLocaleString(label))));
+};

package/lib/collection/components/duet-upload/upload-item.js

@@ -2,15 +2,31 @@
  * Built with Duet Design System
  */
 import { h } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+import { getI18nError } from "./errorcodes.utils";
 import { formatBytes } from "./upload.helpers";
-export const UploadItem = ({ data, showLinks }) => {
-  const { item, size, uploaded, url, meta } = data;
+export const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme, label, categoryLabel, showCategory, }) => {
+  const { uid, item, size, uploaded, url, meta, progress, error } = data;
   const { name } = item;
+  const getFileNameLine = () => {
+    switch (type) {
+      case "inprogress":
+        return (h("span", { class: "duet-upload-item-name" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("br", null), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+      case "pending":
+        return (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
+      case "failure":
+        return (h("span", { class: "duet-upload-item-error", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(error.type, errorCodes))));
+      default:
+        return uploaded && url && showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, h("duet-link", { url: url, external: true }, ContentName), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, ContentName, h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText));
+    }
+  };
   const ContentName = (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
   const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } }, "(", formatBytes(size), ")"));
-  const FilenameLine = uploaded && url && showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, h("duet-link", { url: url, external: true }, ContentName), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, ContentName, h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText));
   const Badges = meta && meta.badges ? (h("span", null, h("duet-spacer", { size: "xx-small" }), meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${name}`;
   return (h("div", { class: {
-      test: true,
-    } }, h("div", { class: "item-categories" }, Badges), h("div", { class: "item-label" }, FilenameLine), h("div", { class: "item-actions" }, "ACTIONS")));
+      "upload-item-row": true,
+    } }, showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(categoryLabel)), Badges)), h("div", { class: { "item-label": true, "no-category": !showCategory } }, !!label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(label))), getFileNameLine()), h("div", { class: "item-actions" }, actions.map(actionItem => {
+    return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} ` }));
+  }))));
 };

package/lib/collection/utils/token-utils.js

@@ -132,3 +132,5 @@ export const breakpointToToken = {
   "xx-large": unwrap(tokens.mediaQueryXxLarge),
   "xxx-large": unwrap(tokens.mediaQueryXxxLarge),
 };
+export const breakpointTokensUpTo = Object.keys(breakpointToToken).filter(key => key.indexOf("x-small") !== -1);
+export const breakpointTokensFrom = Object.keys(breakpointToToken).filter(key => !breakpointTokensUpTo.includes(key));

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-0853da89.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-41ef88f4.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-35c660bf.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-276e05ab.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-799100e3.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-49848110.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-0d1b84db.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-cefc1697.js';
+import { d as defineCustomElement$2 } from './p-d6a4de03.js';
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;color:rgb(0, 41, 77);text-decoration:none}.duet-breadcrumb:hover{color:rgb(0, 77, 128)}.duet-breadcrumb.duet-theme-turva{color:rgb(23, 28, 58)}.duet-breadcrumb.duet-theme-turva:hover{color:rgb(148, 9, 37)}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58)}.duet-breadcrumb.duet-breadcrumb-without-href:hover{color:rgb(0, 41, 77)}.duet-breadcrumb.duet-breadcrumb-without-href.duet-theme-turva:hover{color:rgb(23, 28, 58)}.duet-breadcrumb.duet-breadcrumb-without-href:active{opacity:1}";
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-0d1b84db.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-6c05e879.js';
-import { d as defineCustomElement$2 } from './p-cefc1697.js';
+import { d as defineCustomElement$2 } from './p-d6a4de03.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-23e46e22.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-dde8e436.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-03367341.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-29b2c3bb.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-0d1b84db.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
-import { g as getColorByName } from './p-9ed347f9.js';
-import { d as defineCustomElement$3 } from './p-cefc1697.js';
-import { d as defineCustomElement$2 } from './p-e95c3a28.js';
+import { g as getColorByName } from './p-68024252.js';
+import { d as defineCustomElement$3 } from './p-d6a4de03.js';
+import { d as defineCustomElement$2 } from './p-7a4bdb83.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-35d1520f.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-1bf112be.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-2bfc9c26.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-353d6d0c.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-0f07edcd.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-0d1b84db.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
-import { d as defineCustomElement$6 } from './p-03367341.js';
-import { d as defineCustomElement$5 } from './p-48ee4427.js';
-import { d as defineCustomElement$4 } from './p-cefc1697.js';
-import { d as defineCustomElement$3 } from './p-8563290f.js';
-import { d as defineCustomElement$2 } from './p-eabaa24d.js';
+import { d as defineCustomElement$6 } from './p-29b2c3bb.js';
+import { d as defineCustomElement$5 } from './p-9eba8647.js';
+import { d as defineCustomElement$4 } from './p-d6a4de03.js';
+import { d as defineCustomElement$3 } from './p-26d32594.js';
+import { d as defineCustomElement$2 } from './p-85fd8f09.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block;margin-bottom:-12px}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex}}.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){.horizontal.duet-choice-group-breakpoint-x-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}}.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){.horizontal.duet-choice-group-breakpoint-small.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){.horizontal.duet-choice-group-breakpoint-medium.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){.horizontal.duet-choice-group-breakpoint-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){.horizontal.duet-choice-group-breakpoint-x-large.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";