@getflip/swirl-components 0.19.0 → 0.20.1

package/dist/collection/collection-manifest.json

@@ -13,6 +13,7 @@
     "./components/swirl-button-group/swirl-button-group.js",
     "./components/swirl-checkbox/swirl-checkbox.js",
     "./components/swirl-chip/swirl-chip.js",
+    "./components/swirl-columns/swirl-columns.js",
     "./components/swirl-dialog/swirl-dialog.js",
     "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js",
     "./components/swirl-form-group/swirl-form-group.js",

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

@@ -17,7 +17,6 @@
   height: 100%;
   margin-right: auto;
   margin-left: auto;
-  background-color: var(--s-border-default);
 }
 
 .app-layout__grid {
@@ -25,7 +24,6 @@
   display: grid;
   width: 100%;
   height: 100%;
-  gap: var(--s-border-width-default);
   grid-template-columns: 100%;
   grid-template-rows: 4rem 1fr;
   grid-template-areas:
@@ -206,12 +204,20 @@
   padding-bottom: var(--s-space-12);
   padding-left: calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);
   align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-background-default);
   grid-area: header;
   will-change: transform;
   gap: var(--s-space-8);
 }
 
+@media (min-width: 768px) {
+
+.app-layout__header {
+    border-right: var(--s-border-width-default) solid var(--s-border-default)
+}
+  }
+
 @media (min-width: 992px) {
 
 .app-layout__header {
@@ -247,6 +253,7 @@
 .app-layout__navigation {
   z-index: 1;
   overflow-y: auto;
+  border-right: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-background-default);
   grid-area: navigation;
   will-change: transform;
@@ -257,7 +264,6 @@
   display: grid;
   width: 100%;
   height: 100%;
-  gap: var(--s-border-width-default);
   grid-area: body;
   grid-template-rows: 4rem 1fr;
   grid-template-areas:
@@ -274,6 +280,7 @@
   padding-bottom: var(--s-space-12);
   padding-left: calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);
   align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-background-default);
   grid-area: app-bar;
   gap: var(--s-space-8);
@@ -335,8 +342,8 @@
   display: grid;
   width: 100%;
   height: 100%;
+  border-left: var(--s-border-width-default) solid var(--s-border-default);
   will-change: transform;
-  gap: var(--s-border-width-default);
   grid-area: sidebar;
   grid-template-rows: 4rem 1fr;
   grid-template-areas:
@@ -369,6 +376,7 @@
   padding-bottom: var(--s-space-12);
   padding-left: calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);
   align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-background-default);
   grid-area: sidebar-header;
   gap: var(--s-space-8);

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

@@ -3,25 +3,15 @@
   width: 100%;
 }
 
-  :host * {
-    box-sizing: border-box;
+  :host(.box--bordered) {
+    border: var(--s-border-width-default) solid var(--s-border-default);
   }
 
-.box--bordered {
-  border: var(--s-border-width-default) solid var(--s-border-default);
-}
-
-.box--center-block {
-  display: flex;
-  align-items: center;
-}
-
-.box--center-inline {
-  display: flex;
-  justify-content: center;
-}
+  :host(.box--cover) {
+    width: 100%;
+    height: 100%;
+  }
 
-.box--cover {
-  width: 100%;
-  height: 100%;
-}
+  :host * {
+    box-sizing: border-box;
+  }

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

@@ -5,28 +5,31 @@ import classnames from "classnames";
  */
 export class SwirlBox {
   constructor() {
-    this.as = "div";
     this.bordered = undefined;
     this.centerBlock = undefined;
     this.centerInline = undefined;
     this.cover = undefined;
+    this.maxWidth = undefined;
     this.overflow = "visible";
     this.padding = "0";
   }
   render() {
-    const Tag = this.as;
     const styles = {
+      alignItems: this.centerBlock ? "center" : undefined,
+      display: this.centerBlock || this.centerInline ? "flex" : undefined,
+      height: this.cover ? "100%" : undefined,
+      justifyContent: this.centerInline ? "center" : undefined,
       overflow: this.overflow,
       padding: `var(--s-space-${this.padding})`,
       position: Boolean(this.overflow) ? "relative" : "",
+      maxWidth: this.maxWidth,
+      width: this.cover ? "100%" : undefined,
     };
     const className = classnames("box", {
       "box--bordered": this.bordered,
-      "box--center-block": this.centerBlock,
-      "box--center-inline": this.centerInline,
       "box--cover": this.cover,
     });
-    return (h(Host, { style: this.cover ? { width: "100%", height: "100%" } : undefined }, h(Tag, { class: className, style: styles }, h("slot", null))));
+    return (h(Host, { class: className, style: styles }, h("slot", null)));
   }
   static get is() { return "swirl-box"; }
   static get encapsulation() { return "shadow"; }
@@ -42,24 +45,6 @@ export class SwirlBox {
   }
   static get properties() {
     return {
-      "as": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "as",
-        "reflect": false,
-        "defaultValue": "\"div\""
-      },
       "bordered": {
         "type": "boolean",
         "mutable": false,
@@ -128,6 +113,23 @@ export class SwirlBox {
         "attribute": "cover",
         "reflect": false
       },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
       "overflow": {
         "type": "string",
         "mutable": false,

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

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.columns {
+  display: grid;
+  width: 100%;
+}

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

@@ -0,0 +1,69 @@
+import { h, Host } from "@stencil/core";
+export class SwirlColumns {
+  constructor() {
+    this.columns = "repeat(3, minmax(0, 1fr))";
+    this.spacing = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "columns", style: {
+        gridTemplateColumns: this.columns,
+        gap: `var(--s-space-${this.spacing})`,
+      } }, h("slot", null))));
+  }
+  static get is() { return "swirl-columns"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-columns.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-columns.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "columns": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "columns",
+        "reflect": false,
+        "defaultValue": "\"repeat(3, minmax(0, 1fr))\""
+      },
+      "spacing": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlColumnsSpacing",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlColumnsSpacing": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-columns/swirl-columns.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "spacing",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-columns/swirl-columns.stories.js

@@ -0,0 +1,42 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-columns.mdx";
+export default {
+  component: "swirl-columns",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlColumns",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-columns", args);
+  element.innerHTML = `
+    <swirl-box bordered padding="16">
+      <swirl-text color="subdued" size="sm">
+        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-text>
+    </swirl-box>
+    <swirl-box bordered padding="16">
+      <swirl-text color="subdued" size="sm">
+        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-text>
+    </swirl-box>
+    <swirl-box bordered padding="16">
+      <swirl-text color="subdued" size="sm">
+        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-text>
+    </swirl-box>
+  `;
+  return element;
+};
+export const SwirlColumns = Template.bind({});
+SwirlColumns.args = {
+  spacing: "16",
+};

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

@@ -108,6 +108,7 @@
   position: relative;
   z-index: var(--s-z-40);
   display: flex;
+  overflow: hidden;
   width: 100vw;
   height: 100vh;
   background-color: var(--s-surface-overlay-default);

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

@@ -14,8 +14,6 @@
   display: flex;
   width: 100%;
   min-height: 100%;
-  background-color: var(--s-border-default);
-  gap: var(--s-border-width-default);
 }
 
 @media (min-width: 992px) {
@@ -86,18 +84,15 @@
   width: var(--extended-sidebar-width);
   height: 100%;
   border-right: var(--s-border-width-default) solid var(--s-border-default);
-  background-color: var(--s-border-default);
   flex-direction: column;
   transition: box-shadow 0.2s, width 0.2s;
   box-shadow: 0 0.75rem 2rem rgba(25, 26, 28, 0.12),
     0 0.25rem 0.75rem rgba(25, 26, 28, 0.08);
-  gap: var(--s-border-width-default);
 }
 
 @media (min-width: 992px) {
 
 .shell-layout__sidebar {
-    border-right: none;
     box-shadow: none
 }
   }
@@ -106,6 +101,7 @@
   padding: var(--s-space-8);
   flex-shrink: 0;
   background-color: var(--s-background-default);
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
 }
 
 .shell-layout__logo-bar {

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js

@@ -56,9 +56,15 @@ const Template = (args) => {
         navigation-label="Items"
       >
         <swirl-resource-list label="Items" slot="navigation">
-          <swirl-resource-list-item description="With a description" label="This is a resource item" class="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-resource-list-item description="With a description" label="This is a resource item" class="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-resource-list-item description="With a description" label="This is a resource item" class="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-resource-list-item description="With a description" label="This is a resource item" class="item">
+            <swirl-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" slot="media"></swirl-avatar>
+          </swirl-resource-list-item>
+          <swirl-resource-list-item description="With a description" label="This is a resource item" class="item">
+            <swirl-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" slot="media"></swirl-avatar>
+          </swirl-resource-list-item>
+          <swirl-resource-list-item description="With a description" label="This is a resource item" class="item">
+            <swirl-avatar label="John Doe" src="https://picsum.photos/id/433/144/144" slot="media"></swirl-avatar>
+          </swirl-resource-list-item>
         </swirl-resource-list>
         <swirl-button
           hide-label