@getflip/swirl-components 0.133.0 → 0.134.0

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

@@ -39,6 +39,9 @@ export class SwirlResourceListItem {
         this.toggleDrag.emit(this.el);
       }
     };
+    this.onControlClick = (event) => {
+      event.stopPropagation();
+    };
     this.active = undefined;
     this.allowDrag = undefined;
     this.checked = false;
@@ -146,7 +149,7 @@ export class SwirlResourceListItem {
       "resource-list-item--wrap-description": this.descriptionWrap,
       "resource-list-item--wrap-label": this.labelWrap,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), 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))))), h("span", { class: "resource-list-item__control", ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, 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>", 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 })))));
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), 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))))), h("span", { class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, 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>", 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 "scoped"; }

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

@@ -76,14 +76,16 @@ describe("swirl-resource-list-item", () => {
     });
     expect(page.root.querySelector(".resource-list-item__meta")).not.toBeNull();
   });
-  it("renders a menu trigger", async () => {
+  it("renders a control", async () => {
     const page = await newSpecPage({
       components: [SwirlResourceListItem],
       html: `
-        <swirl-resource-list-item label="Label" menu-trigger-id="trigger"></swirl-resource-list-item>
+        <swirl-resource-list-item label="Label">
+          <swirl-button label="Label" slot="control"></swirl-button>
+        </swirl-resource-list-item>
       `,
     });
-    expect(page.root.querySelector(".resource-list-item__menu-trigger")).not.toBeNull();
+    expect(page.root.querySelector(".resource-list-item__control").children.length).toBe(1);
   });
   it("can be draggable", async () => {
     const page = await newSpecPage({

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.css

@@ -12,13 +12,8 @@
   overflow: hidden;
   padding: 0.0625rem;
   border-radius: var(--s-border-radius-s);
-  box-shadow: inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1);
 }
 
-.thumbnail .thumbnail__image {
-    width: 100%;
-  }
-
 .thumbnail--size-s {
   --swirl-thumbnail-size: 2.5rem;
 }
@@ -62,11 +57,40 @@
     bottom: var(--s-space-8);
   }
 
+.thumbnail--interactive .thumbnail__image-wrapper {
+    position: relative;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+.thumbnail--interactive .thumbnail__image-wrapper:hover:after {
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.06);
+        content: "";
+        inset: 0;
+      }
+
+.thumbnail--interactive .thumbnail__image-wrapper:active:after {
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.13);
+        content: "";
+        inset: 0;
+      }
+
+.thumbnail__image-wrapper {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--s-border-radius-s);
+  box-shadow: inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1);
+}
+
 .thumbnail__image {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .thumbnail__progress-indicator {

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.js

@@ -4,6 +4,7 @@ export class SwirlThumbnail {
   constructor() {
     this.alt = undefined;
     this.format = "landscape";
+    this.interactive = undefined;
     this.progress = undefined;
     this.progressLabel = "Loading progress";
     this.removeButtonLabel = "Remove";
@@ -15,10 +16,12 @@ export class SwirlThumbnail {
   render() {
     const showRemoveButton = this.showRemoveButton && this.size === "xl" && this.format === "square";
     const showTimestamp = Boolean(this.timestamp) && this.size === "xl" && this.format === "square";
+    const ImageWrapper = this.interactive ? "button" : "span";
     const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
+      "thumbnail--interactive": this.interactive,
       "thumbnail--has-progress": this.progress !== undefined,
     });
-    return (h(Host, null, h("span", { class: className, role: "group" }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (h("span", { class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { class: "thumbnail__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
+    return (h(Host, null, h("span", { class: className, role: "group" }, h(ImageWrapper, { class: "thumbnail__image-wrapper", type: this.interactive ? "button" : undefined }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { class: "thumbnail__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
   }
   static get is() { return "swirl-thumbnail"; }
   static get encapsulation() { return "shadow"; }
@@ -74,6 +77,23 @@ export class SwirlThumbnail {
         "reflect": false,
         "defaultValue": "\"landscape\""
       },
+      "interactive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "interactive",
+        "reflect": false
+      },
       "progress": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.spec.js

@@ -10,7 +10,9 @@ describe("swirl-thumbnail", () => {
       <swirl-thumbnail alt="Brief description of the image." format="portrait" size="l" src="https://picsum.photos/id/433/400/400">
         <mock:shadow-root>
           <span class="thumbnail thumbnail--format-portrait thumbnail--size-l" role="group">
-            <img alt="Brief description of the image." class="thumbnail__image" loading="lazy" src="https://picsum.photos/id/433/400/400">
+            <span class="thumbnail__image-wrapper">
+              <img alt="Brief description of the image." class="thumbnail__image" loading="lazy" src="https://picsum.photos/id/433/400/400">
+            </span>
           </span>
         </mock:shadow-root>
       </swirl-thumbnail>
@@ -25,7 +27,9 @@ describe("swirl-thumbnail", () => {
       <swirl-thumbnail alt="Brief description of the image." format="square" show-remove-button="" size="xl" src="https://picsum.photos/id/433/400/400" timestamp="12:12">
         <mock:shadow-root>
           <span class="thumbnail thumbnail--format-square thumbnail--size-xl" role="group">
-            <img alt="Brief description of the image." class="thumbnail__image" loading="lazy" src="https://picsum.photos/id/433/400/400">
+            <span class="thumbnail__image-wrapper">
+              <img alt="Brief description of the image." class="thumbnail__image" loading="lazy" src="https://picsum.photos/id/433/400/400">
+            </span>
             <span class="thumbnail__remove-button">
               <swirl-button hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Remove" pill="" variant="on-image"></swirl-button>
             </span>
@@ -37,4 +41,15 @@ describe("swirl-thumbnail", () => {
       </swirl-thumbnail>
     `);
   });
+  it("can be interactive", async () => {
+    const page = await newSpecPage({
+      components: [SwirlThumbnail],
+      html: `<swirl-thumbnail alt="Brief description of the image." interactive src="https://picsum.photos/id/433/400/400"></swirl-thumbnail>`,
+    });
+    expect(page.root.shadowRoot
+      .querySelector(".thumbnail")
+      .classList.contains("thumbnail--interactive")).toBeTruthy();
+    const expectedButton = page.root.shadowRoot.querySelector(".thumbnail__image-wrapper");
+    expect(expectedButton.tagName).toBe("BUTTON");
+  });
 });