@getflip/swirl-components 0.17.0 → 0.19.0

package/dist/collection/components/swirl-app-layout/swirl-app-layout.js

@@ -166,9 +166,9 @@ export class SwirlAppLayout {
       "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
       "app-layout--sidebar-closing": this.sidebarClosing,
     });
-    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? (h("header", { class: "app-layout__app-bar" }, showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
+    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? (h("header", { class: "app-layout__app-bar" }, showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.appBarMedia && (h("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia })), h("div", { class: "app-layout__app-bar-heading" }, this.heading && (h("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading })), this.subheading && (h("span", { class: "app-layout__app-bar-subheading" }, this.subheading))), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))) : (h("header", { class: "app-layout__app-bar" }, h("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.appBarMedia && (h("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia })), h("div", { class: "app-layout__app-bar-heading" }, this.heading && (h("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading })), this.subheading && (h("span", { class: "app-layout__app-bar-subheading" }, this.subheading))), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))) : (h("header", { class: "app-layout__app-bar" }, h("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
   }
   static get is() { return "swirl-app-layout"; }
   static get encapsulation() { return "shadow"; }

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

@@ -129,17 +129,19 @@
   }
 
 .button--variant-outline {
-  border: var(--s-border-width-default) solid var(--s-border-strong);
   color: var(--s-action-primary-default);
+  box-shadow: inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);
 }
 
 .button--variant-outline:disabled {
-    border-color: var(--s-border-default);
+    box-shadow: inset 0 0 0 var(--s-border-width-default)
+      var(--s-border-default);
   }
 
 .button--variant-outline.button--intent-critical:not(:disabled) {
     color: var(--s-text-critical);
-    border-color: var(--s-text-critical);
+    box-shadow: inset 0 0 0 var(--s-border-width-default)
+      var(--s-border-critical);
   }
 
 .button--variant-outline.button--intent-critical:not(:disabled) .button__icon {

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

@@ -46,10 +46,15 @@
   line-height: var(--s-line-height-lg);
 }
 
-.heading--level-4,
-.heading--level-5,
-.heading--level-6 {
+.heading--level-4 {
   font-size: var(--s-font-size-base);
   font-weight: var(--s-font-weight-semibold);
   line-height: var(--s-line-height-base);
 }
+
+.heading--level-5,
+.heading--level-6 {
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-sm);
+}

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

@@ -49,6 +49,23 @@
   }
     }
 
+.modal--padded .modal__content {
+    padding-top: var(--s-space-24);
+    padding-right: var(--s-space-16);
+    padding-bottom: var(--s-space-24);
+    padding-left: var(--s-space-16);
+  }
+
+@media (min-width: 768px) {
+
+.modal--padded .modal__content {
+      padding-top: 0;
+      padding-right: var(--s-space-24);
+      padding-bottom: var(--s-space-16);
+      padding-left: var(--s-space-24)
+  }
+    }
+
 .modal--closing {
   -webkit-animation: 0.15s modal-fade-out;
           animation: 0.15s modal-fade-out;
@@ -162,10 +179,6 @@
 .modal__content {
   overflow-x: hidden;
   overflow-y: auto;
-  padding-top: var(--s-space-24);
-  padding-right: var(--s-space-16);
-  padding-bottom: var(--s-space-24);
-  padding-left: var(--s-space-16);
   flex-grow: 1;
   line-height: var(--s-line-height-base);
 }
@@ -174,16 +187,6 @@
     margin: 0;
   }
 
-@media (min-width: 768px) {
-
-.modal__content {
-    padding-top: 0;
-    padding-right: var(--s-space-24);
-    padding-bottom: var(--s-space-16);
-    padding-left: var(--s-space-24)
-}
-  }
-
 .modal__controls {
   display: flex;
   padding-top: var(--s-space-16);

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

@@ -37,7 +37,10 @@ export class SwirlModal {
       }
     };
     this.closeButtonLabel = "Close modal";
+    this.hideCloseButton = undefined;
+    this.hideLabel = undefined;
     this.label = undefined;
+    this.padded = true;
     this.primaryActionLabel = undefined;
     this.secondaryActionLabel = undefined;
     this.closing = false;
@@ -88,13 +91,15 @@ export class SwirlModal {
     enableBodyScroll(this.scrollContainer);
   }
   render() {
+    const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
     const className = classnames("modal", {
       "modal--closing": this.closing,
+      "modal--padded": this.padded,
       "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document" }, h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("header", { class: "modal__header" }, h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
   static get is() { return "swirl-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -128,6 +133,40 @@ export class SwirlModal {
         "reflect": false,
         "defaultValue": "\"Close modal\""
       },
+      "hideCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-close-button",
+        "reflect": false
+      },
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": false
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -145,6 +184,24 @@ export class SwirlModal {
         "attribute": "label",
         "reflect": false
       },
+      "padded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padded",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "primaryActionLabel": {
         "type": "string",
         "mutable": false,

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

@@ -15,18 +15,21 @@ const Template = (args) => {
     <swirl-resource-list-item
       description="With a description"
       label="This is a resource item"
-      media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></swirl-avatar>"
-    ></swirl-resource-list-item>
+    >
+      <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"
-      media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></swirl-avatar>"
-    ></swirl-resource-list-item>
+    >
+      <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"
-      media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/1027/144/144&quot;></swirl-avatar>"
-    ></swirl-resource-list-item>
+    >
+      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
+    </swirl-resource-list-item>
   `;
   return element;
 };

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

@@ -1,5 +1,8 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+/**
+ * @slot media - Media displayed inside the item (e.g. swirl-avatar)
+ */
 export class SwirlResourceListItem {
   constructor() {
     this.onClick = () => {
@@ -20,35 +23,21 @@ export class SwirlResourceListItem {
     this.hideDivider = undefined;
     this.href = undefined;
     this.label = undefined;
-    this.media = undefined;
     this.menuTriggerId = undefined;
     this.menuTriggerLabel = "Options";
     this.meta = undefined;
     this.selectable = undefined;
     this.value = undefined;
+    this.hasMedia = false;
   }
-  componentDidLoad() {
-    this.forceAvatarProps();
-    this.forceThumbnailProps();
+  async componentWillLoad() {
+    this.updateMediaState();
   }
-  forceAvatarProps() {
-    const avatarEl = this.el.querySelector("swirl-avatar");
-    if (!Boolean(avatarEl)) {
-      return;
-    }
-    avatarEl.removeAttribute("interactive");
-    avatarEl.removeAttribute("show-label");
-    avatarEl.removeAttribute("variant");
-    avatarEl.setAttribute("size", "l");
-  }
-  forceThumbnailProps() {
-    const thumbnailEl = this.el.querySelector("swirl-thumbnail");
-    if (!Boolean(thumbnailEl)) {
-      return;
-    }
-    thumbnailEl.setAttribute("format", "landscape");
-    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
-      thumbnailEl.setAttribute("size", "m");
+  updateMediaState() {
+    const mediaContainer = this.el.querySelector('[slot="media"]');
+    const hasMedia = Boolean(mediaContainer);
+    if (hasMedia !== this.hasMedia) {
+      this.hasMedia = hasMedia;
     }
   }
   render() {
@@ -65,7 +54,7 @@ export class SwirlResourceListItem {
       "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 }, Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label" }, 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" }, 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 })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -184,23 +173,6 @@ export class SwirlResourceListItem {
         "attribute": "label",
         "reflect": false
       },
-      "media": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "media",
-        "reflect": false
-      },
       "menuTriggerId": {
         "type": "string",
         "mutable": false,
@@ -289,6 +261,11 @@ export class SwirlResourceListItem {
       }
     };
   }
+  static get states() {
+    return {
+      "hasMedia": {}
+    };
+  }
   static get events() {
     return [{
         "method": "valueChange",

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

@@ -35,6 +35,9 @@ const Template = (args) => {
   const container = document.createElement("div");
   const popover = document.createElement("swirl-popover");
   const element = generateStoryElement("swirl-resource-list-item", args);
+  element.innerHTML = `
+    <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" slot="media"></swirl-avatar>
+  `;
   container.setAttribute("aria-label", "List");
   container.setAttribute("role", "grid");
   popover.label = "Options";
@@ -59,6 +62,5 @@ export const SwirlResourceListItem = Template.bind({});
 SwirlResourceListItem.args = {
   description: "With a description",
   label: "This is a resource item",
-  media: `<swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></swirl-avatar>`,
   menuTriggerId: "trigger",
 };

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -51,11 +51,9 @@ export class FileManager {
     const items = Boolean(this.selectedDirectory)
       ? this.selectedDirectory.children
       : FileManagerMockData.directories;
-    return items.length > 0 ? (items.map((item) => (h("swirl-resource-list-item", { description: item.description, key: item.name, label: item.name, media: "type" in item
-        ? "<swirl-icon-file></swirl-icon-file>"
-        : "<swirl-icon-folder-shared></swirl-icon-folder-shared>",
+    return items.length > 0 ? (items.map((item) => (h("swirl-resource-list-item", { description: item.description, key: item.name, label: item.name,
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.selectItem(item) })))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
+      onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
   }
   render() {
     var _a, _b;