@getflip/swirl-components 0.1.0

package/dist/collection/components/flip-toast/flip-toast.js

@@ -0,0 +1,198 @@
+import { Component, Event, h, Host, Prop, Watch, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipToast {
+  constructor() {
+    this.accessibleDismissLabel = "Dismiss";
+    this.intent = "default";
+    this.onDismiss = () => {
+      this.dismiss.emit(this.toastId);
+    };
+  }
+  watchDuration() {
+    this.startTimer();
+  }
+  componentDidLoad() {
+    this.startTimer();
+  }
+  startTimer() {
+    this.clearTimer();
+    if (this.duration === undefined) {
+      return;
+    }
+    this.timeout = setTimeout(() => {
+      this.dismiss.emit(this.toastId);
+    }, this.duration);
+  }
+  clearTimer() {
+    if (!Boolean(this.timeout)) {
+      return;
+    }
+    clearTimeout(this.timeout);
+    this.timeout = undefined;
+  }
+  render() {
+    const className = classnames("toast", `toast--intent-${this.intent}`);
+    return (h(Host, null,
+      h("div", { class: className },
+        this.icon && h("span", { class: "toast__icon", innerHTML: this.icon }),
+        h("span", { class: "toast__content" }, this.content),
+        h("button", { "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" },
+          this.dismissLabel,
+          !Boolean(this.dismissLabel) && h("flip-icon-close", null)))));
+  }
+  static get is() { return "flip-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-toast.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-toast.css"]
+  }; }
+  static get properties() { return {
+    "accessibleDismissLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "accessible-dismiss-label",
+      "reflect": false,
+      "defaultValue": "\"Dismiss\""
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "dismissLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dismiss-label",
+      "reflect": false
+    },
+    "duration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "duration",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "intent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipToastIntent",
+        "resolved": "\"critical\" | \"default\" | \"success\"",
+        "references": {
+          "FlipToastIntent": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "intent",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
+    "toastId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "toast-id",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "dismiss",
+      "name": "dismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "duration",
+      "methodName": "watchDuration"
+    }]; }
+}

package/dist/collection/components/flip-toast/flip-toast.stories.js

@@ -0,0 +1,30 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-toast.mdx";
+export default {
+  argTypes: {
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <flip-icon-mail></flip-icon-mail>",
+          summary: "flip-icon-*",
+        },
+      },
+    },
+  },
+  component: "flip-toast",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipToast",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-toast", args);
+  return element;
+};
+export const FlipToast = Template.bind({});
+FlipToast.args = {
+  content: `This is toast text with multiple lines. Try to keep the info as short as possible.`,
+  icon: `<flip-icon-mail></flip-icon-mail>`,
+};

package/dist/collection/components/flip-toast-provider/flip-toast-provider.js

@@ -0,0 +1,157 @@
+import { Component, h, Host, Method, Prop, State } from "@stencil/core";
+export class FlipToastProvider {
+  constructor() {
+    this.toasts = [];
+    this.onDismiss = (event) => {
+      this.toasts = [...this.toasts].filter((toast) => toast.toastId !== event.detail);
+    };
+  }
+  /**
+   * Clear all toasts
+   * @param newToast
+   * @returns
+   */
+  async clearAll() {
+    this.toasts = [];
+  }
+  /**
+   * Dismiss a toast
+   * @param toastId
+   * @returns
+   */
+  async dismiss(toastId) {
+    this.toasts = [...this.toasts].filter((toast) => toast.toastId !== toastId);
+  }
+  /**
+   * Create a new toast
+   * @param newToast
+   * @returns
+   */
+  async toast(newToast) {
+    if (this.toasts.some((toast) => toast.toastId === newToast.toastId)) {
+      return;
+    }
+    const duration = this.globalDuration === undefined
+      ? newToast.duration
+      : this.globalDuration === 0
+        ? undefined
+        : this.globalDuration;
+    const newToastWithId = Object.assign(Object.assign({}, newToast), { createdAt: new Date(), duration, toastId: newToast.toastId || String(Math.round(Math.random() * 10000)) });
+    this.toasts = [...this.toasts, newToastWithId];
+    return newToastWithId;
+  }
+  render() {
+    return (h(Host, { role: "status" },
+      h("flip-stack", { spacing: "12" }, this.toasts.map((toast) => (h("flip-toast", Object.assign({ key: toast.toastId, onDismiss: this.onDismiss }, toast)))))));
+  }
+  static get is() { return "flip-toast-provider"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "globalDuration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional global duration for all toasts. Overrides any durations set via\nthe `toast` method. Set to 0 to disable automatic closing of toasts."
+      },
+      "attribute": "global-duration",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "toasts": {}
+  }; }
+  static get methods() { return {
+    "clearAll": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Clear all toasts",
+        "tags": [{
+            "name": "param",
+            "text": "newToast"
+          }, {
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    },
+    "dismiss": {
+      "complexType": {
+        "signature": "(toastId: string) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "toastId"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Dismiss a toast",
+        "tags": [{
+            "name": "param",
+            "text": "toastId"
+          }, {
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    },
+    "toast": {
+      "complexType": {
+        "signature": "(newToast: FlipToastConfig) => Promise<FlipToastMessage>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "newToast"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FlipToastMessage": {
+            "location": "local"
+          },
+          "FlipToastConfig": {
+            "location": "local"
+          }
+        },
+        "return": "Promise<FlipToastMessage>"
+      },
+      "docs": {
+        "text": "Create a new toast",
+        "tags": [{
+            "name": "param",
+            "text": "newToast"
+          }, {
+            "name": "returns",
+            "text": undefined
+          }]
+      }
+    }
+  }; }
+}

package/dist/collection/components/flip-toast-provider/flip-toast-provider.stories.js

@@ -0,0 +1,58 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-toast-provider.mdx";
+export default {
+  component: "flip-toast-provider",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `const toasts = document.createElement('flip-toast-provider');
+const trigger = document.createElement('button');
+
+trigger.innerText = 'Create toast';
+
+trigger.addEventListener("click", () => {
+  toasts.toast({
+    content: "Hello World!",
+    duration: 10000,
+    icon: "<flip-icon-mail></flip-icon-mail>",
+    intent: 'info'
+  });
+});
+
+document.body.append(trigger, toasts);`,
+      },
+    },
+  },
+  title: "Components/FlipToastProvider",
+};
+const Template = () => {
+  const contents = [
+    "Hello World",
+    "This is toast text with multiple lines. Try to keep the info as short as possible.",
+    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.",
+  ];
+  const intents = ["default", "critical", "success"];
+  const container = document.createElement("div");
+  const createButton = document.createElement("flip-button");
+  const clearButton = document.createElement("flip-button");
+  const element = generateStoryElement("flip-toast-provider", {});
+  createButton.variant = "flat";
+  createButton.label = "Create random toast";
+  createButton.style.marginRight = "0.5rem";
+  createButton.style.marginBottom = "1rem";
+  clearButton.label = "Clear all";
+  clearButton.style.marginBottom = "1rem";
+  createButton.addEventListener("click", () => {
+    element.toast({
+      content: [...contents].sort(() => Math.random() - 0.5)[0],
+      duration: 6000,
+      icon: "<flip-icon-mail></flip-icon-mail>",
+      intent: [...intents].sort(() => Math.random() - 0.5)[0],
+    });
+  });
+  clearButton.addEventListener("click", () => element.clearAll());
+  container.append(createButton, clearButton, element);
+  return container;
+};
+export const FlipToastProvider = Template.bind({});

package/dist/collection/components/flip-tooltip/flip-tooltip.css

@@ -0,0 +1,42 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tooltip {
+  display: inline-flex;
+}
+
+.tooltip .tooltip__reference {
+  display: inline-flex;
+}
+
+.tooltip__popper {
+  position: fixed;
+  z-index: var(--s-z-40);
+  max-width: 17.5rem;
+}
+
+.tooltip__bubble {
+  position: relative;
+  display: block;
+  padding-top: var(--s-space-8);
+  padding-right: var(--s-space-12);
+  padding-bottom: var(--s-space-8);
+  padding-left: var(--s-space-12);
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-text-on-status);
+  background-color: var(--s-surface-neutral-default);
+  line-height: var(--s-line-height-base);
+  backgrund-color: red;
+}
+
+.tooltip__arrow {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--s-surface-neutral-default);
+}

package/dist/collection/components/flip-tooltip/flip-tooltip.js

@@ -0,0 +1,212 @@
+import { Component, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
+import { reposition } from "nanopop";
+export class FlipTooltip {
+  constructor() {
+    this.delay = 300;
+    this.position = "top";
+    this.visible = false;
+    this.onKeydown = (event) => {
+      if (event.code === "Escape") {
+        this.hide();
+      }
+    };
+    this.reposition = () => {
+      if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {
+        return;
+      }
+      this.actualPosition = reposition(this.referenceEl, this.popperEl, this.options);
+    };
+    this.show = () => {
+      this.visible = true;
+      requestAnimationFrame(() => {
+        this.reposition();
+      });
+    };
+    this.showWithDelay = () => {
+      if (Boolean(this.showTimeout)) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = undefined;
+      }
+      this.showTimeout = setTimeout(() => {
+        this.show();
+      }, this.delay);
+    };
+    this.hide = () => {
+      if (Boolean(this.showTimeout)) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = undefined;
+      }
+      this.visible = false;
+    };
+    this.updateOptions = () => {
+      const margin = +getComputedStyle(document.documentElement)
+        .getPropertyValue("--s-space-12")
+        .replace("rem", "") * 16;
+      this.options = {
+        margin,
+        position: this.position,
+      };
+    };
+    this.getArrowStyles = () => {
+      if (this.actualPosition === "tm") {
+        return {
+          top: "100%",
+          left: "50%",
+          transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
+        };
+      }
+      if (this.actualPosition === "bm") {
+        return {
+          bottom: "100%",
+          left: "50%",
+          transform: "translate3d(-50%, 50%, 0) rotate(45deg)",
+        };
+      }
+      if (this.actualPosition === "rm") {
+        return {
+          top: "50%",
+          right: "100%",
+          transform: "translate3d(50%, -50%, 0) rotate(45deg)",
+        };
+      }
+      if (this.actualPosition === "lm") {
+        return {
+          top: "50%",
+          left: "100%",
+          transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
+        };
+      }
+    };
+  }
+  watchPosition() {
+    this.updateOptions();
+  }
+  onMouseEnter() {
+    this.showWithDelay();
+  }
+  onMouseLeave() {
+    this.hide();
+  }
+  onWindowResize() {
+    this.reposition();
+  }
+  onWindowScroll() {
+    this.reposition();
+  }
+  componentWillLoad() {
+    this.reposition();
+  }
+  componentDidLoad() {
+    this.updateOptions();
+  }
+  render() {
+    const arrowStyles = this.getArrowStyles();
+    return (h(Host, { onKeydown: this.onKeydown },
+      h("span", { class: "tooltip" },
+        h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (el) => (this.referenceEl = el), tabIndex: 0 },
+          h("slot", null)),
+        h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el) }, this.visible && (h("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" },
+          h("span", { class: "tooltip__content", innerHTML: this.content }),
+          h("span", { class: "tooltip__arrow", style: arrowStyles })))))));
+  }
+  static get is() { return "flip-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tooltip.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tooltip.css"]
+  }; }
+  static get properties() { return {
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "delay": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "delay",
+      "reflect": false,
+      "defaultValue": "300"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTooltipPosition",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {
+          "FlipTooltipPosition": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"top\""
+    }
+  }; }
+  static get states() { return {
+    "actualPosition": {},
+    "visible": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "position",
+      "methodName": "watchPosition"
+    }]; }
+  static get listeners() { return [{
+      "name": "mouseenter",
+      "method": "onMouseEnter",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseleave",
+      "method": "onMouseLeave",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "scroll",
+      "method": "onWindowScroll",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}