@getflip/swirl-components 0.120.4 → 0.120.5

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

@@ -20,10 +20,11 @@ const Template = (args) => {
       <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
     <swirl-resource-list-item
-      description="With a description"
-      label="This is a resource item 2"
+      description="With a <strong>description</strong>"
+      label="This is a <strong>resource item 2</strong>"
+      meta="Yesterday"
     >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
+      <swirl-thumbnail alt="Brief description of the image." src="https://picsum.photos/id/433/400/400" size="s" format="square" slot="badges"></swirl-thumbnail>
     </swirl-resource-list-item>
     <swirl-resource-list-item
       description="With a description"

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

@@ -93,7 +93,7 @@
   }
     }
 
-.resource-list-item--hide-divider .resource-list-item__label-container:after {
+.resource-list-item--hide-divider .resource-list-item__content:after {
     display: none;
   }
 
@@ -166,6 +166,7 @@
   --swirl-avatar-group-border-color: var(--s-background-default);
   --swirl-badge-border-color: var(--s-background-default);
 
+  position: relative;
   display: flex;
   width: 100%;
   min-width: 0;
@@ -207,6 +208,16 @@
       color: var(--s-text-disabled);
     }
 
+.resource-list-item__content:after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 0.0625rem;
+    background-color: var(--s-border-default);
+    content: "";
+  }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .resource-list-item__content {
@@ -231,27 +242,12 @@
   flex-direction: column;
 }
 
-.resource-list-item__label-container:after {
-    position: absolute;
-    right: 0;
-    bottom: calc(-1 * var(--s-space-12));
-    left: 0;
-    height: 0.0625rem;
-    background-color: var(--s-border-default);
-    content: "";
-  }
-
 .resource-list-item__label {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.resource-list-item__label b,
-  .resource-list-item__label strong {
-    font-weight: var(--s-font-weight-semibold);
-  }
-
 .resource-list-item__description {
   overflow: hidden;
   margin-top: var(--s-space-2);
@@ -317,6 +313,11 @@
   font-size: var(--s-font-size-sm);
   flex-direction: column;
   align-self: flex-start;
+  gap: var(--s-space-2);
+}
+
+.resource-list-item__badges {
+  display: inline-flex;
 }
 
 .resource-list-item__drag-handle {

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

@@ -114,9 +114,10 @@ export class SwirlResourceListItem {
         : "button";
     const disabled = this.disabled && !Boolean(this.href);
     const hasBadges = Boolean(this.el.querySelector("[slot='badges']"));
-    const hasMenu = Boolean(this.menuTriggerId) || this.el.querySelector("[slot='control']");
+    const hasControl = this.el.querySelector("[slot='control']");
+    const hasMenu = Boolean(this.menuTriggerId) || hasControl;
     const href = this.interactive && Boolean(this.href) ? this.href : undefined;
-    const showControlOnFocus = Boolean(this.meta) || hasBadges;
+    const showControlOnFocus = hasControl && (Boolean(this.meta) || hasBadges);
     const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
     const showMeta = (Boolean(this.meta) || hasBadges) && !this.selectable;
     const ariaChecked = this.selectable ? String(this.checked) : undefined;
@@ -134,7 +135,7 @@ export class SwirlResourceListItem {
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
     });
-    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" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, 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" }, 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" }, 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" }, 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.stories.js

@@ -73,7 +73,7 @@ const Template = (args) => {
 };
 export const SwirlResourceListItem = Template.bind({});
 SwirlResourceListItem.args = {
-  description: "With a description",
-  label: "This is a resource item",
+  description: "With a <strong>description</strong>",
+  label: "This is a <strong>resource item</strong>",
   meta: "Today",
 };

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

@@ -10,10 +10,15 @@
   position: relative;
   display: inline-flex;
   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;
 }
@@ -43,28 +48,16 @@
   aspect-ratio: 4 / 3;
 }
 
-.thumbnail--format-landscape .thumbnail__image {
-    width: 100%;
-  }
-
 .thumbnail--format-portrait {
   height: var(--swirl-thumbnail-size);
   aspect-ratio: 3 / 4;
 }
 
-.thumbnail--format-portrait .thumbnail__image {
-    height: 100%;
-  }
-
 .thumbnail--format-square {
   width: var(--swirl-thumbnail-size);
   height: var(--swirl-thumbnail-size);
 }
 
-.thumbnail--format-square .thumbnail__image {
-    width: 100%;
-  }
-
 .thumbnail--has-progress .thumbnail__timestamp {
     bottom: var(--s-space-8);
   }