@getflip/swirl-components 0.67.0 → 0.68.0

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -1,10 +1,16 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { getDesktopMediaQuery } from "../../utils";
 /**
  * @slot media - Media displayed inside the item (e.g. swirl-avatar)
  */
 export class SwirlResourceListItem {
   constructor() {
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+      this.updateIconSize(event.matches);
+    };
     this.onClick = () => {
       if (!this.selectable) {
         return;
@@ -17,9 +23,19 @@ export class SwirlResourceListItem {
         event.stopPropagation();
       }
     };
+    this.onDragHandleKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        this.toggleDrag.emit(this.el);
+      }
+    };
+    this.allowDrag = undefined;
     this.checked = false;
     this.description = undefined;
     this.disabled = undefined;
+    this.dragging = undefined;
+    this.dragHandleDescription = "Press spacebar to toggle grab";
+    this.dragHandleLabel = "Move item";
     this.hideDivider = undefined;
     this.href = undefined;
     this.label = undefined;
@@ -30,10 +46,28 @@ export class SwirlResourceListItem {
     this.selectable = undefined;
     this.value = undefined;
     this.hasMedia = false;
+    this.iconSize = 24;
   }
   async componentWillLoad() {
     this.updateMediaState();
   }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    var _a;
+    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
   updateMediaState() {
     const mediaContainer = this.el.querySelector('[slot="media"]');
     const hasMedia = Boolean(mediaContainer);
@@ -51,14 +85,16 @@ export class SwirlResourceListItem {
     const role = this.selectable ? "checkbox" : undefined;
     const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
       "resource-list-item--checked": this.checked,
+      "resource-list-item--draggable": this.allowDrag,
+      "resource-list-item--dragging": this.dragging,
       "resource-list-item--has-menu": hasMenu,
       "resource-list-item--hide-divider": this.hideDivider,
       "resource-list-item--selectable": this.selectable,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick }))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-resource-list-item"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["swirl-resource-list-item.css"]
@@ -71,6 +107,23 @@ export class SwirlResourceListItem {
   }
   static get properties() {
     return {
+      "allowDrag": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-drag",
+        "reflect": false
+      },
       "checked": {
         "type": "boolean",
         "mutable": true,
@@ -123,6 +176,59 @@ export class SwirlResourceListItem {
         "attribute": "disabled",
         "reflect": false
       },
+      "dragging": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "dragging",
+        "reflect": false
+      },
+      "dragHandleDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "drag-handle-description",
+        "reflect": false,
+        "defaultValue": "\"Press spacebar to toggle grab\""
+      },
+      "dragHandleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "drag-handle-label",
+        "reflect": false,
+        "defaultValue": "\"Move item\""
+      },
       "hideDivider": {
         "type": "boolean",
         "mutable": false,
@@ -287,11 +393,31 @@ export class SwirlResourceListItem {
   }
   static get states() {
     return {
-      "hasMedia": {}
+      "hasMedia": {},
+      "iconSize": {}
     };
   }
   static get events() {
     return [{
+        "method": "toggleDrag",
+        "name": "toggleDrag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLSwirlResourceListItemElement",
+          "resolved": "HTMLSwirlResourceListItemElement",
+          "references": {
+            "HTMLSwirlResourceListItemElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
         "method": "valueChange",
         "name": "valueChange",
         "bubbles": true,

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.spec.js

@@ -15,24 +15,21 @@ describe("swirl-resource-list-item", () => {
     });
     expect(page.root).toEqualHtml(`
       <swirl-resource-list-item description="Description" label="Label" role="row">
-        <mock:shadow-root>
-          <div class="resource-list-item resource-list-item--label-weight-medium" role="gridcell">
-            <button aria-labelledby="label" class="resource-list-item__content" part="resource-list-item__content"  tabindex="0">
-              <span class="resource-list-item__media">
-                <slot name="media"></slot>
+        <div class="resource-list-item resource-list-item--label-weight-medium" role="gridcell">
+          <button aria-labelledby="label" class="resource-list-item__content" part="resource-list-item__content"  tabindex="0">
+            <span class="resource-list-item__media">
+              <swirl-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" slot="media"></swirl-avatar>
+            </span>
+            <span class="resource-list-item__label-container">
+              <span class="resource-list-item__label" id="label">
+                Label
               </span>
-              <span class="resource-list-item__label-container">
-                <span class="resource-list-item__label" id="label">
-                  Label
-                </span>
-                <span class="resource-list-item__description">
-                  Description
-                </span>
+              <span class="resource-list-item__description">
+                Description
               </span>
-            </button>
-          </div>
-        </mock:shadow-root>
-        <swirl-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" slot="media"></swirl-avatar>
+            </span>
+          </button>
+        </div>
       </swirl-resource-list-item>
     `);
   });
@@ -43,7 +40,7 @@ describe("swirl-resource-list-item", () => {
         <swirl-resource-list-item href="#" label="Label"></swirl-resource-list-item>
       `,
     });
-    const element = page.root.shadowRoot.querySelector(".resource-list-item__content");
+    const element = page.root.querySelector(".resource-list-item__content");
     expect(element.tagName).toBe("A");
     expect(element.getAttribute("href")).toBe("#");
   });
@@ -56,7 +53,7 @@ describe("swirl-resource-list-item", () => {
     });
     const spy = jest.fn();
     page.root.addEventListener("valueChange", spy);
-    const element = page.root.shadowRoot.querySelector(".resource-list-item__content");
+    const element = page.root.querySelector(".resource-list-item__content");
     expect(element.getAttribute("role")).toBe("checkbox");
     expect(element.getAttribute("aria-checked")).toBe("false");
     element.click();
@@ -75,7 +72,7 @@ describe("swirl-resource-list-item", () => {
         <swirl-resource-list-item label="Label" meta="Meta"></swirl-resource-list-item>
       `,
     });
-    expect(page.root.shadowRoot.querySelector(".resource-list-item__meta")).not.toBeNull();
+    expect(page.root.querySelector(".resource-list-item__meta")).not.toBeNull();
   });
   it("renders a menu trigger", async () => {
     const page = await newSpecPage({
@@ -84,6 +81,20 @@ describe("swirl-resource-list-item", () => {
         <swirl-resource-list-item label="Label" menu-trigger-id="trigger"></swirl-resource-list-item>
       `,
     });
-    expect(page.root.shadowRoot.querySelector(".resource-list-item__menu-trigger")).not.toBeNull();
+    expect(page.root.querySelector(".resource-list-item__menu-trigger")).not.toBeNull();
+  });
+  it("can be draggable", async () => {
+    const page = await newSpecPage({
+      components: [SwirlResourceListItem],
+      html: `<swirl-resource-list-item allow-drag="true" label="Resource List Item"></swirl-resource-list-item>`,
+    });
+    const spy = jest.fn();
+    const dragHandle = page.root.querySelector(".resource-list-item__drag-handle");
+    page.root.addEventListener("toggleDrag", spy);
+    dragHandle.dispatchEvent(new KeyboardEvent("keydown", { code: "Space" }));
+    expect(page.root
+      .querySelector(".resource-list-item__drag-handle")
+      .getAttribute("aria-label")).toBe('Move item "Resource List Item"');
+    expect(spy).toHaveBeenCalled();
   });
 });