@getflip/swirl-components 0.35.0 → 0.37.0

package/dist/collection/collection-manifest.json

@@ -21,12 +21,14 @@
     "./components/swirl-form-group/swirl-form-group.js",
     "./components/swirl-heading/swirl-heading.js",
     "./components/swirl-inline-error/swirl-inline-error.js",
+    "./components/swirl-inline-notification/swirl-inline-notification.js",
     "./components/swirl-link/swirl-link.js",
     "./components/swirl-option-list-item/swirl-option-list-item.js",
     "./components/swirl-pagination/swirl-pagination.js",
     "./components/swirl-popover/swirl-popover.js",
     "./components/swirl-progress-indicator/swirl-progress-indicator.js",
     "./components/swirl-radio/swirl-radio.js",
+    "./components/swirl-separator/swirl-separator.js",
     "./components/swirl-skeleton-box/swirl-skeleton-box.js",
     "./components/swirl-skeleton-text/swirl-skeleton-text.js",
     "./components/swirl-spinner/swirl-spinner.js",
@@ -172,7 +174,6 @@
     "./components/swirl-resource-list-item/swirl-resource-list-item.js",
     "./components/swirl-search/swirl-search.js",
     "./components/swirl-select/swirl-select.js",
-    "./components/swirl-separator/swirl-separator.js",
     "./components/swirl-shell-layout/swirl-shell-layout.js",
     "./components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
     "./components/swirl-tab/swirl-tab.js",

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

@@ -27,8 +27,8 @@
 @media (max-width: 767px) {
 
 .console-layout--sidebar-active .console-layout__sidebar {
-      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.06);
-      transform: translate3d(0, 0, 0)
+      transform: translate3d(0, 0, 0);
+      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.06)
   }
     }
 
@@ -162,6 +162,7 @@
 
 .console-layout__content {
   display: flex;
+  min-width: 0;
   padding: var(--s-space-16);
   background-color: var(--s-background-default);
   flex-direction: column;

package/dist/collection/components/swirl-inline-notification/swirl-inline-notification.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.inline-notification {
+  display: flex;
+  max-width: 100%;
+  padding: var(--s-space-12);
+  border-radius: var(--s-border-radius-sm);
+  gap: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.inline-notification {
+    padding: var(--s-space-16)
+}
+  }
+
+.inline-notification--intent-info {
+  background-color: var(--s-surface-info-subdued);
+}
+
+.inline-notification--intent-info .inline-notification__icon {
+    color: var(--s-icon-info);
+  }
+
+.inline-notification--intent-critical {
+  background-color: var(--s-surface-critical-subdued);
+}
+
+.inline-notification--intent-critical .inline-notification__icon {
+    color: var(--s-icon-critical);
+  }
+
+.inline-notification--intent-warning {
+  background-color: var(--s-surface-warning-subdued);
+}
+
+.inline-notification--intent-warning .inline-notification__icon {
+    color: var(--s-icon-warning);
+  }
+
+.inline-notification--intent-success {
+  background-color: var(--s-surface-success-subdued);
+}
+
+.inline-notification--intent-success .inline-notification__icon {
+    color: var(--s-icon-success);
+  }
+
+.inline-notification__icon {
+  display: inline-flex;
+}
+
+.inline-notification__content {
+  position: relative;
+  top: 0.0625rem;
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+}

package/dist/collection/components/swirl-inline-notification/swirl-inline-notification.js

@@ -0,0 +1,92 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlInlineNotification {
+  constructor() {
+    this.heading = undefined;
+    this.importance = "status";
+    this.intent = "info";
+  }
+  render() {
+    const className = classnames("inline-notification", `inline-notification--intent-${this.intent}`);
+    return (h(Host, null, h("div", { "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { size: 20 })), this.intent === "info" && (h("swirl-icon-info", { size: 20 }))), h("span", { class: "inline-notification__content", id: "content" }, h("swirl-text", { class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), h("slot", null)))));
+  }
+  static get is() { return "swirl-inline-notification"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-inline-notification.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-inline-notification.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "importance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlInlineNotificationAriaRole",
+          "resolved": "\"alert\" | \"status\"",
+          "references": {
+            "SwirlInlineNotificationAriaRole": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-inline-notification/swirl-inline-notification.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "importance",
+        "reflect": false,
+        "defaultValue": "\"status\""
+      },
+      "intent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlInlineNotificationIntent",
+          "resolved": "\"critical\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlInlineNotificationIntent": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-inline-notification/swirl-inline-notification.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "intent",
+        "reflect": false,
+        "defaultValue": "\"info\""
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-inline-notification/swirl-inline-notification.stories.js

@@ -0,0 +1,22 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-inline-notification.mdx";
+export default {
+  component: "swirl-inline-notification",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlInlineNotification",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-inline-notification", args);
+  element.innerHTML = `
+    Lorem ipsum dolor sit amet. <swirl-link href="#" label="With a link."></swirl-link>
+  `;
+  return element;
+};
+export const SwirlInlineNotification = Template.bind({});
+SwirlInlineNotification.args = {
+  heading: "Notification title",
+};

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

@@ -1,8 +1,6 @@
 :host {
   display: flex;
   width: 100%;
-  padding-top: var(--s-space-8);
-  padding-bottom: var(--s-space-8);
   align-items: center;
 }
 

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

@@ -1,7 +1,14 @@
 import { h, Host } from "@stencil/core";
 export class SwirlSeparator {
+  constructor() {
+    this.spacing = "8";
+  }
   render() {
-    return (h(Host, { class: "separator", role: "separator" }, h("span", { class: "separator__line" })));
+    const styles = {
+      paddingTop: `var(--s-space-${this.spacing})`,
+      paddingBottom: `var(--s-space-${this.spacing})`,
+    };
+    return (h(Host, { class: "separator", role: "separator", style: styles }, h("span", { class: "separator__line" })));
   }
   static get is() { return "swirl-separator"; }
   static get encapsulation() { return "shadow"; }
@@ -15,4 +22,31 @@ export class SwirlSeparator {
       "$": ["swirl-separator.css"]
     };
   }
+  static get properties() {
+    return {
+      "spacing": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSeparatorSpacing",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlSeparatorSpacing": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-separator/swirl-separator.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "spacing",
+        "reflect": false,
+        "defaultValue": "\"8\""
+      }
+    };
+  }
 }

package/dist/collection/components/swirl-table-cell/swirl-table-cell.css

@@ -24,14 +24,6 @@
     box-shadow: var(--swirl-table-sticky-left-shadow);
   }
 
-  :host(:first-child) {
-    border-left: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
-  :host(:last-child) {
-    border-right: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
   :host * {
     box-sizing: border-box;
   }

package/dist/collection/components/swirl-table-column/swirl-table-column.css

@@ -9,7 +9,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   align-items: center;
-  border-top: var(--s-border-width-default) solid var(--s-border-default);
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   color: var(--s-text-subdued);
   background-color: var(--s-background-default);
@@ -23,14 +22,6 @@
   gap: var(--s-space-8);
 }
 
-  :host(:first-child) {
-    border-left: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
-  :host(:last-child) {
-    border-right: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
   :host(.table-column--has-shadow-right) {
     box-shadow: var(--swirl-table-sticky-right-shadow);
   }