@getflip/swirl-components 0.10.0 → 0.12.0

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

@@ -0,0 +1,248 @@
+import { Component, Event, h, Host, Method, Prop, State, } from "@stencil/core";
+import A11yDialog from "a11y-dialog";
+import classnames from "classnames";
+/**
+ * @slot slot - The dialog content
+ */
+export class SwirlDialog {
+  constructor() {
+    this.intent = "primary";
+    this.closing = false;
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+      this.close();
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.dialog = new A11yDialog(this.dialogEl);
+    this.dialog.on("show", () => {
+      var _a;
+      (_a = this.controlsContainerEl
+        .querySelector("swirl-button button")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  /**
+   * Open the dialog.
+   */
+  async open() {
+    this.dialog.show();
+  }
+  /**
+   * Close the dialog.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.dialog.hide();
+      this.closing = false;
+    }, 150);
+  }
+  render() {
+    const className = classnames("dialog", { "dialog--closing": this.closing });
+    return (h(Host, null,
+      h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" },
+        h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }),
+        h("div", { class: "dialog__body", part: "dialog__body", role: "document" },
+          !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)),
+          h("div", { class: "dialog__content", part: "dialog__content", id: "content" },
+            h("slot", null)),
+          h("swirl-button-group", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el), stretch: true, wrap: true },
+            this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })),
+            this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+  }
+  static get is() { return "swirl-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-dialog.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-dialog.css"]
+  }; }
+  static get properties() { return {
+    "hideLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-label",
+      "reflect": false
+    },
+    "intent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SwirlDialogIntent",
+        "resolved": "\"critical\" | \"primary\"",
+        "references": {
+          "SwirlDialogIntent": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "intent",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "primaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary-action-label",
+      "reflect": false
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary-action-label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "closing": {}
+  }; }
+  static get events() { return [{
+      "method": "primaryAction",
+      "name": "primaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "secondaryAction",
+      "name": "secondaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the dialog.",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the dialog.",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,40 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-dialog.mdx";
+export default {
+  component: "swirl-dialog",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<swirl-dialog id="my-dialog" label="Dialog" primary-action-label="Leave" secondary-action-label="Cancel">
+  <p>Do you really want to leave this group chat?</p>
+</swirl-dialog>
+
+<script>
+  const dialog = document.body.querySelector('#my-dialog');
+  dialog.open();
+</script>`,
+      },
+    },
+  },
+  title: "Components/SwirlDialog",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const trigger = document.createElement("swirl-button");
+  const element = generateStoryElement("swirl-dialog", args);
+  trigger.label = "Open dialog";
+  trigger.addEventListener("click", () => element.open());
+  element.innerHTML = `
+    <p>Do you really want to leave this group chat?</p>
+  `;
+  container.append(trigger, element);
+  return container;
+};
+export const SwirlDialog = Template.bind({});
+SwirlDialog.args = {
+  intent: "critical",
+  label: "Dialog",
+  primaryActionLabel: "Leave",
+  secondaryActionLabel: "Cancel",
+};

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

@@ -0,0 +1,57 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class SwirlEmptyState {
+  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", text: this.heading })),
+          h("div", { class: "empty-state__content" },
+            h("swirl-text", { align: "center", color: "subdued" },
+              h("slot", null)))))));
+  }
+  static get is() { return "swirl-empty-state"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-empty-state.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-empty-state.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "illustration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "illustration",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-empty-state.mdx";
+export default {
+  component: "swirl-empty-state",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlEmptyState",
+};
+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.
+  `;
+  return element;
+};
+export const SwirlEmptyState = Template.bind({});
+SwirlEmptyState.args = {
+  heading: "Nothing to see here.",
+  illustration: "/images/empty-state-1.svg",
+};

package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.css

@@ -0,0 +1,119 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-uploader {
+  width: 100%;
+}
+
+.file-uploader--show-dropzone .file-uploader__dropzone {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 10rem;
+    margin-top: var(--s-space-16);
+    justify-content: center;
+    align-items: center;
+    border: var(--s-border-width-default) dashed var(--s-border-strong);
+    border-radius: var(--s-border-radius-s);
+    flex-direction: column;
+  }
+
+.file-uploader--show-dropzone .file-uploader__dropzone:focus-within {
+      border-width: 0.125rem;
+      border-color: var(--s-focus-default);
+    }
+
+.file-uploader--show-dropzone .file-uploader__input {
+    position: absolute;
+    z-index: 1;
+    display: block;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+    inset: 0;
+  }
+
+.file-uploader--disabled .file-uploader__input {
+    cursor: default;
+  }
+
+.file-uploader--disabled .file-uploader__dropzone-cta,
+  .file-uploader--disabled .file-uploader__drag-drop-label {
+    color: var(--s-text-disabled);
+  }
+
+.file-uploader--disabled .file-uploader__dropzone-icon {
+    color: var(--s-text-disabled);
+  }
+
+.file-uploader__label {
+  display: block;
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-base);
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.file-uploader__label {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
+.file-uploader__description {
+  display: block;
+  margin-top: var(--s-space-4);
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.file-uploader__description {
+    margin-top: var(--s-space-2)
+}
+  }
+
+.file-uploader__dropzone-icon {
+  color: var(--s-icon-highlight);
+}
+
+.file-uploader__dropzone-label {
+  margin-top: var(--s-space-16);
+  line-height: var(--s-line-height-base);
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.file-uploader__dropzone-label {
+    margin-top: var(--s-space-8);
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
+.file-uploader__dropzone-cta {
+  color: var(--s-interactive-primary-default);
+  font-weight: var(--s-font-weight-medium);
+}
+
+.file-uploader__upload-button {
+  margin-top: var(--s-space-16);
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.file-uploader__upload-button {
+    margin-top: var(--s-space-12)
+}
+  }
+
+.file-uploader__input {
+  display: none;
+}