@getflip/swirl-components 0.116.0 → 0.117.0

package/dist/collection/collection-manifest.json

@@ -115,6 +115,7 @@
     "./components/swirl-icon/icons/swirl-icon-delete.js",
     "./components/swirl-icon/icons/swirl-icon-description.js",
     "./components/swirl-icon/icons/swirl-icon-discover.js",
+    "./components/swirl-icon/icons/swirl-icon-dock-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-right.js",
     "./components/swirl-icon/icons/swirl-icon-download.js",

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

@@ -21,6 +21,7 @@ export class SwirlAppBar {
       this.stepDownButtonClick.emit(event);
     };
     this.backButtonLabel = "Go back";
+    this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
     this.closeButtonLabel = "Close";
     this.stepUpButtonLabel = "Previous item";
     this.stepDownButtonLabel = "Next item";
@@ -51,7 +52,7 @@ export class SwirlAppBar {
       "app-bar--has-cta": this.hasCta,
       "app-bar--has-right-controls": hasRightControls,
     });
-    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
+    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
   }
   static get is() { return "swirl-app-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -85,6 +86,24 @@ export class SwirlAppBar {
         "reflect": false,
         "defaultValue": "\"Go back\""
       },
+      "closeButtonIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-button-icon",
+        "reflect": false,
+        "defaultValue": "\"<swirl-icon-close></swirl-icon-close>\""
+      },
       "closeButtonLabel": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-app-icon/swirl-app-icon.css

@@ -9,10 +9,9 @@
 .app-icon {
   position: relative;
   overflow: hidden;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.625rem;
-  background-color: var(--s-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--s-border-radius-s);
 }
 
 .app-icon > img {
@@ -20,28 +19,10 @@
     height: 100%;
   }
 
-.app-icon::after {
-  position: absolute;
-  top: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 0.625rem;
-  content: "";
-  box-shadow: 0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset,
-    0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset;
-}
-
-.app-icon--hide-border::after {
-  box-shadow: none;
-}
-
 .app-icon__icon {
   display: inline-flex;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
-
-  color: var(--s-icon-default);
 }

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

@@ -10,7 +10,6 @@ export class SwirlAppIcon {
     };
     this.icon = undefined;
     this.src = undefined;
-    this.hideBorder = false;
     this.imageAvailable = undefined;
   }
   render() {
@@ -20,7 +19,6 @@ export class SwirlAppIcon {
     const showFallbackIcon = !showImage && !showIcon;
     const className = classnames("app-icon", {
       "app-icon--has-icon": showIcon || showFallbackIcon,
-      "app-icon--hide-border": this.hideBorder,
     });
     return (h(Host, null, h("span", { class: className }, showImage && (h("img", { alt: "", height: "40", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "40" })), showIcon && (h("span", { class: "app-icon__icon", innerHTML: this.icon })))));
   }
@@ -71,24 +69,6 @@ export class SwirlAppIcon {
         },
         "attribute": "src",
         "reflect": false
-      },
-      "hideBorder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-border",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

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

@@ -80,6 +80,18 @@
   }
     }
 
+@media (min-width: 768px) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid {
+          animation: app-layout-no-nav-sidebar-slide-in 0.3s;
+        }
+      }
+
+@media (min-width: 768px) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
+          animation: app-layout-no-nav-sidebar-slide-out 0.3s;
+        }
+      }
+
 @media (min-width: 768px) {
       .app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         grid-template-columns: 1fr min(50%, 25rem);
@@ -96,7 +108,7 @@
       "body";
   }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
       .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         animation: app-layout-sidebar-slide-in 0.3s;
         grid-template-columns: 25rem 1fr 25rem;
@@ -132,7 +144,7 @@
   }
     }
 
-@media (min-width: 768px) and (max-width: 1439px) {
+@media (min-width: 768px) and (max-width: 1799px) {
     .app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
       position: absolute;
       top: 0;
@@ -196,7 +208,7 @@
   }
     }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
 
 .app-layout--sidebar-closing .app-layout__sidebar {
       animation: none
@@ -397,7 +409,7 @@
 }
   }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
 
 .app-layout__sidebar {
     width: 25rem;
@@ -777,3 +789,25 @@
   }
 }
 
+@keyframes app-layout-no-nav-sidebar-slide-in {
+  from {
+    overflow: hidden;
+    grid-template-columns: 1fr 0;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 1fr 25rem;
+  }
+}
+
+@keyframes app-layout-no-nav-sidebar-slide-out {
+  from {
+    overflow: hidden;
+    grid-template-columns: 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 1fr 0;
+  }
+}
+

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

@@ -15,13 +15,30 @@
   max-width: 100%;
   justify-content: center;
   align-items: center;
-  border: 0.25rem solid var(--swirl-badge-border-color);
+  border: 0.125rem solid var(--swirl-badge-border-color);
   border-radius: 2rem;
   color: var(--s-text-on-status);
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
 }
 
+.badge--size-xs {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.6875rem;
+}
+
+.badge--size-xs .badge__label {
+    padding-right: 0.125rem;
+    padding-left: 0.125rem;
+  }
+
+.badge--size-xs .badge__icon > swirl-icon,
+    .badge--size-xs .badge__icon > *::part(icon) {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+
 .badge--size-s {
   min-width: 1.5rem;
   height: 1.5rem;

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

@@ -90,7 +90,7 @@ export class SwirlBadge {
         "mutable": false,
         "complexType": {
           "original": "SwirlBadgeSize",
-          "resolved": "\"m\" | \"s\"",
+          "resolved": "\"m\" | \"s\" | \"xs\"",
           "references": {
             "SwirlBadgeSize": {
               "location": "local",

package/dist/collection/components/swirl-icon/icons/swirl-icon-dock-left.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconDockLeft {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-dock-left"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}