@getflip/swirl-components 0.131.1 → 0.132.0

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css

@@ -9,28 +9,27 @@
 .avatar-group {
   position: relative;
   display: inline-grid;
-  grid-template-rows: repeat(8, 1fr);
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(9, 1fr);
+  grid-template-columns: repeat(9, 1fr);
 }
 
 .avatar-group ::slotted(*:first-of-type) {
     z-index: 1;
     display: inline-flex;
-    border: 0.25rem solid var(--swirl-avatar-group-border-color);
+    box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
     border-radius: 50%;
     grid-column-start: 1;
     grid-column-end: 7;
-    grid-row-start: 3;
-    grid-row-end: 9;
+    grid-row-start: 4;
+    grid-row-end: 10;
   }
 
 .avatar-group ::slotted(*:nth-of-type(2)) {
     z-index: 0;
     display: inline-flex;
-    border: 0.25rem solid var(--swirl-avatar-group-border-color);
     border-radius: 50%;
-    grid-column-start: 3;
-    grid-column-end: 9;
+    grid-column-start: 4;
+    grid-column-end: 10;
     grid-row-start: 1;
     grid-row-end: 7;
   }
@@ -39,8 +38,12 @@
   position: absolute;
   z-index: 2;
   right: calc(-1 * var(--s-space-4));
-  bottom: 0;
+  bottom: calc(-1 * var(--s-space-4));
   display: inline-flex;
   width: 1.5rem;
   height: 1.5rem;
 }
+
+.avatar-group__badge ::part(badge) {
+    box-shadow: 0 0 0 0.25rem var(--swirl-badge-border-color);
+  }

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js

@@ -23,8 +23,8 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-avatar-group", args);
   element.innerHTML = `
-    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="xs"></swirl-avatar>
-    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="xs"></swirl-avatar>
+    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="s"></swirl-avatar>
+    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="s"></swirl-avatar>
   `;
   return element;
 };

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

@@ -12,7 +12,7 @@ export class SwirlBadge {
     const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
       "badge--has-icon": this.icon,
     });
-    return (h(Host, { role: "status" }, h("span", { class: className }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+    return (h(Host, { role: "status" }, h("span", { class: className, part: "badge" }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
   }
   static get is() { return "swirl-badge"; }
   static get encapsulation() { return "shadow"; }

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

@@ -6,14 +6,14 @@ describe("swirl-badge", () => {
       components: [SwirlBadge],
       html: `<swirl-badge label="Label"></swirl-badge>`,
     });
-    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default\\"><span class=\\"badge__label\\">Label</span></span>"`);
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default\\" part=\\"badge\\"><span class=\\"badge__label\\">Label</span></span>"`);
   });
   it("shows its icon", async () => {
     const page = await newSpecPage({
       components: [SwirlBadge],
       html: `<swirl-badge label="Label" icon="<swirl-icon-close></swirl-icon-close>"></swirl-badge>`,
     });
-    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span></span>"`);
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\" part=\\"badge\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span></span>"`);
     expect(page.root.querySelector(".badge__icon")).toBeDefined();
     expect(page.root.querySelector(".badge__label")).toBeNull();
   });

package/dist/collection/components/swirl-empty-state/swirl-empty-state.css

@@ -14,6 +14,10 @@
   gap: var(--s-space-16);
 }
 
+.empty-state--has-controls .empty-state__controls {
+    display: block;
+  }
+
 .empty-state__illustration {
   max-width: 16rem;
 }
@@ -22,5 +26,9 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--s-space-8);
+  gap: var(--s-space-24);
+}
+
+.empty-state__controls {
+  display: none;
 }

package/dist/collection/components/swirl-empty-state/swirl-empty-state.js

@@ -1,11 +1,20 @@
 import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot slot - The component content
+ * @slot controls - The component content
+ */
 export class SwirlEmptyState {
   constructor() {
     this.heading = undefined;
     this.illustration = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "empty-state" }, this.illustration && (h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { class: "empty-state__body" }, this.heading && (h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), h("div", { class: "empty-state__content" }, h("swirl-text", { align: "center", color: "subdued" }, h("slot", null)))))));
+    const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
+    const className = classnames("empty-state", {
+      "empty-state--has-controls": hasControls,
+    });
+    return (h(Host, null, h("div", { class: className }, this.illustration && (h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { class: "empty-state__body" }, h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), h("div", { class: "empty-state__content" }, h("swirl-text", { align: "center", color: "subdued" }, h("slot", null)))), h("div", { class: "empty-state__controls" }, h("slot", { name: "controls" }))))));
   }
   static get is() { return "swirl-empty-state"; }
   static get encapsulation() { return "shadow"; }
@@ -57,4 +66,5 @@ export class SwirlEmptyState {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/swirl-empty-state/swirl-empty-state.spec.js

@@ -18,11 +18,16 @@ describe("swirl-empty-state", () => {
           <div class="empty-state">
             <img alt="" class="empty-state__illustration" src="/assets/images/empty-state-1.svg">
             <div class="empty-state__body">
-              <swirl-heading align="center" as="p" level="4" text="Nothing to see here."></swirl-heading>
-              <div class="empty-state__content">
-                <swirl-text align="center" color="subdued">
-                  <slot></slot>
-                </swirl-text>
+              <swirl-stack align="stretch" spacing="8">
+                <swirl-heading align="center" as="p" level="4" text="Nothing to see here."></swirl-heading>
+                <div class="empty-state__content">
+                  <swirl-text align="center" color="subdued">
+                    <slot></slot>
+                  </swirl-text>
+                </div>
+              </swirl-stack>
+              <div class="empty-state__controls">
+                <slot name="controls"></slot>
               </div>
             </div>
           </div>

package/dist/collection/components/swirl-empty-state/swirl-empty-state.stories.js

@@ -13,10 +13,15 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-empty-state", args);
   element.innerHTML = `
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-    voluptua.
-  `;
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+  voluptua.
+
+  <swirl-button-group slot="controls">
+    <swirl-button label="Button"></swirl-button>
+    <swirl-button intent="primary" label="Button" variant="flat"></swirl-button>
+  </swirl-button-group>
+`;
   return element;
 };
 export const SwirlEmptyState = Template.bind({});

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

@@ -24,18 +24,6 @@
   width: 100%;
 }
 
-.resource-list-item:not(.resource-list-item--show-meta) {
-    display: flex;
-    align-items: center;
-  }
-
-.resource-list-item:not(.resource-list-item--show-meta) .resource-list-item__control {
-      position: relative;
-      top: auto;
-      right: auto;
-      transform: none;
-    }
-
 .resource-list-item--interactive:hover {
     --swirl-ghost-button-background-default: var(--s-background-hovered);
   }
@@ -108,9 +96,9 @@
     display: none;
   }
 
-.resource-list-item--label-weight-medium {
-  font-weight: var(--s-font-weight-medium);
-}
+.resource-list-item--label-weight-medium .resource-list-item__label {
+    font-weight: var(--s-font-weight-medium);
+  }
 
 .resource-list-item--show-control-on-focus:hover,
   .resource-list-item--show-control-on-focus:focus,
@@ -173,6 +161,10 @@
     color: var(--s-text-on-status);
   }
 
+.resource-list-item--wrap-description .resource-list-item__description {
+    white-space: normal;
+  }
+
 .resource-list-item--wrap-label .resource-list-item__label {
     white-space: normal;
   }
@@ -190,7 +182,7 @@
   padding-right: 0;
   padding-bottom: var(--s-space-12);
   padding-left: var(--s-space-16);
-  align-items: center;
+  align-items: flex-start;
   border: none;
   color: var(--s-text-default);
   background-color: var(--swirl-resource-list-item-background-default);
@@ -236,9 +228,7 @@
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .resource-list-item__content {
-    padding: var(--s-space-12);
-    font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm)
+    padding: var(--s-space-12)
 }
   }
 
@@ -251,7 +241,7 @@
   position: relative;
   display: flex;
   min-width: 0;
-  min-height: 2.875rem;
+  min-height: 3rem;
   padding-right: var(--s-space-16);
   flex-grow: 1;
   justify-content: center;
@@ -260,6 +250,7 @@
 
 .resource-list-item__label {
   overflow: hidden;
+  font-size: var(--s-font-size-base);
   white-space: nowrap;
   text-overflow: ellipsis;
 }

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

@@ -43,6 +43,7 @@ export class SwirlResourceListItem {
     this.allowDrag = undefined;
     this.checked = false;
     this.description = undefined;
+    this.descriptionWrap = undefined;
     this.disabled = undefined;
     this.dragging = undefined;
     this.dragHandleDescription = "Press spacebar to toggle grab";
@@ -123,6 +124,11 @@ export class SwirlResourceListItem {
     const showMeta = (Boolean(this.meta) || hasBadges) && !this.selectable;
     const ariaChecked = this.selectable ? String(this.checked) : undefined;
     const role = this.interactive && this.selectable ? "checkbox" : undefined;
+    const labelContainerStyles = !showMeta && Boolean(this.controlContainer)
+      ? {
+        paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
+      }
+      : undefined;
     const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
       "resource-list-item--active": this.active,
       "resource-list-item--checked": this.checked,
@@ -135,9 +141,10 @@ export class SwirlResourceListItem {
       "resource-list-item--selectable": this.selectable,
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
+      "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" }, 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 })))));
+    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 })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "scoped"; }
@@ -222,6 +229,23 @@ export class SwirlResourceListItem {
         "attribute": "description",
         "reflect": false
       },
+      "descriptionWrap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description-wrap",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -28,7 +28,8 @@ const Template = (args) => {
       <swirl-avatar
         slot="media"
         label="Jane Doe"
-        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144"></swirl-avatar>
+        size="l"
+        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a"></swirl-avatar>
 
       <swirl-stack slot="badges" align="center" orientation="horizontal" spacing="8">
         <swirl-icon-notifications-off size="16"></swirl-icon-notifications-off>
@@ -73,7 +74,7 @@ const Template = (args) => {
 };
 export const SwirlResourceListItem = Template.bind({});
 SwirlResourceListItem.args = {
-  description: "With a <strong>description</strong>",
-  label: "This is a <strong>resource item</strong>",
+  description: "With a description",
+  label: "This is a resource item",
   meta: "Today",
 };