@getflip/swirl-components 0.1.0 → 0.2.0

package/dist/collection/components/flip-file-uploader/flip-file-uploader.stories.js

@@ -0,0 +1,23 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-file-uploader.mdx";
+export default {
+  component: "flip-file-uploader",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFileUploader",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-file-uploader", args);
+  return element;
+};
+export const FlipFileUploader = Template.bind({});
+FlipFileUploader.args = {
+  accept: "image/*",
+  description: "Only image files are allowed.",
+  inputId: "file-upload",
+  inputName: "file-upload",
+  label: "Label",
+};

package/dist/collection/components/flip-icon/icons/flip-icon-cloud-upload.js

@@ -0,0 +1,49 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Component, Fragment, h, Prop } from "@stencil/core";
+export class FlipIconCloudUpload {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" },
+      this.size === 16 && (h(Fragment, null,
+        h("path", { d: "M4.33333 13.3333C3.32222 13.3333 2.45844 12.9833 1.742 12.2833C1.02511 11.5833 0.666664 10.7277 0.666664 9.71663C0.666664 8.84996 0.927775 8.07774 1.45 7.39996C1.97222 6.72218 2.65555 6.28885 3.5 6.09996C3.77778 5.07774 4.33333 4.24996 5.16666 3.61663C6 2.98329 6.94444 2.66663 8 2.66663C9.3 2.66663 10.4027 3.11929 11.308 4.02463C12.2138 4.9304 12.6667 6.03329 12.6667 7.33329C13.4333 7.42218 14.0696 7.75263 14.5753 8.32463C15.0807 8.89707 15.3333 9.56663 15.3333 10.3333C15.3333 11.1666 15.0418 11.8751 14.4587 12.4586C13.8751 13.0417 13.1667 13.3333 12.3333 13.3333H8.66666V8.56663L9.26666 9.14996C9.38889 9.27218 9.54178 9.33329 9.72533 9.33329C9.90844 9.33329 10.0667 9.26663 10.2 9.13329C10.3222 9.01107 10.3833 8.85552 10.3833 8.66663C10.3833 8.47774 10.3222 8.32218 10.2 8.19996L8.46666 6.46663C8.33333 6.33329 8.17778 6.26663 8 6.26663C7.82222 6.26663 7.66666 6.33329 7.53333 6.46663L5.8 8.19996C5.67778 8.32218 5.614 8.47485 5.60866 8.65796C5.60289 8.84152 5.66666 8.99996 5.8 9.13329C5.92222 9.25551 6.07489 9.31952 6.258 9.32529C6.44155 9.33063 6.6 9.27218 6.73333 9.14996L7.33333 8.56663V13.3333H4.33333Z", fill: "currentColor" }))),
+      this.size === 24 && (h(Fragment, null,
+        h("path", { d: "M6.5 20C4.98333 20 3.68767 19.475 2.613 18.425C1.53767 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.604 4.679 16.962 6.037C18.3207 7.39567 19 9.05 19 11C20.15 11.1333 21.1043 11.629 21.863 12.487C22.621 13.3457 23 14.35 23 15.5C23 16.75 22.5627 17.8127 21.688 18.688C20.8127 19.5627 19.75 20 18.5 20H13V12.85L13.9 13.725C14.0833 13.9083 14.3127 14 14.588 14C14.8627 14 15.1 13.9 15.3 13.7C15.4833 13.5167 15.575 13.2833 15.575 13C15.575 12.7167 15.4833 12.4833 15.3 12.3L12.7 9.7C12.5 9.5 12.2667 9.4 12 9.4C11.7333 9.4 11.5 9.5 11.3 9.7L8.7 12.3C8.51667 12.4833 8.421 12.7123 8.413 12.987C8.40433 13.2623 8.5 13.5 8.7 13.7C8.88333 13.8833 9.11233 13.9793 9.387 13.988C9.66233 13.996 9.9 13.9083 10.1 13.725L11 12.85V20H6.5Z", fill: "currentColor" }))),
+      this.size === 28 && (h(Fragment, null,
+        h("path", { d: "M7.58333 23.3333C5.81389 23.3333 4.30227 22.7208 3.0485 21.4958C1.79394 20.2708 1.16666 18.7736 1.16666 17.0041C1.16666 15.4875 1.62361 14.1361 2.5375 12.95C3.45139 11.7638 4.64722 11.0055 6.125 10.675C6.61111 8.88607 7.58333 7.43746 9.04166 6.32913C10.5 5.22079 12.1528 4.66663 14 4.66663C16.275 4.66663 18.2047 5.45879 19.789 7.04313C21.3741 8.62824 22.1667 10.5583 22.1667 12.8333C23.5083 12.9888 24.6217 13.5671 25.5068 14.5681C26.3912 15.5699 26.8333 16.7416 26.8333 18.0833C26.8333 19.5416 26.3231 20.7814 25.3027 21.8026C24.2814 22.8231 23.0417 23.3333 21.5833 23.3333H15.1667V14.9916L16.2167 16.0125C16.4306 16.2263 16.6981 16.3333 17.0193 16.3333C17.3398 16.3333 17.6167 16.2166 17.85 15.9833C18.0639 15.7694 18.1708 15.4972 18.1708 15.1666C18.1708 14.8361 18.0639 14.5638 17.85 14.35L14.8167 11.3166C14.5833 11.0833 14.3111 10.9666 14 10.9666C13.6889 10.9666 13.4167 11.0833 13.1833 11.3166L10.15 14.35C9.93611 14.5638 9.8245 14.831 9.81516 15.1515C9.80505 15.4727 9.91666 15.75 10.15 15.9833C10.3639 16.1972 10.6311 16.3092 10.9515 16.3193C11.2727 16.3286 11.55 16.2263 11.7833 16.0125L12.8333 14.9916V23.3333H7.58333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "flip-icon-cloud-upload"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["../flip-icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipIconSize",
+        "resolved": "16 | 24 | 28",
+        "references": {
+          "FlipIconSize": {
+            "location": "import",
+            "path": "../flip-icon.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+}

package/dist/collection/components/flip-inline-error/flip-inline-error.css

@@ -17,7 +17,7 @@
 }
 
 .inline-error--size-s .inline-error__icon {
-    padding-top: 0.0625rem;
+    padding-top: 0.1875rem;
   }
 
 .inline-error--size-s .inline-error__message {

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

@@ -104,7 +104,7 @@ export class FlipPopover {
   }
   connectTrigger() {
     var _a;
-    const triggerComponent = document.querySelector(`#${this.trigger}`);
+    const triggerComponent = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
     this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
       ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
       triggerComponent);

package/dist/collection/components/flip-resource-list/flip-resource-list.css

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

package/dist/collection/components/flip-resource-list/flip-resource-list.js

@@ -0,0 +1,85 @@
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+export class FlipResourceList {
+  constructor() {
+    this.focusedIndex = 0;
+    this.onFocus = () => {
+      this.focusItemAtIndex(this.focusedIndex);
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      }
+      else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+        this.focusItemAtIndex(prevIndex);
+      }
+      else if (event.key === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.key === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.collectItems();
+    this.removeItemsFromTabOrder();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      var _a, _b;
+      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+    });
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    interactiveElement.setAttribute("tabIndex", "0");
+    interactiveElement.focus();
+    this.focusedIndex = index;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown },
+      h("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 },
+        h("slot", null))));
+  }
+  static get is() { return "flip-resource-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-resource-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-resource-list.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/flip-resource-list/flip-resource-list.stories.js

@@ -0,0 +1,36 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-resource-list.mdx";
+export default {
+  component: "flip-resource-list",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipResourceList",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-resource-list", args);
+  element.innerHTML = `
+    <flip-resource-list-item
+      description="With a description"
+      label="This is a resource item"
+      media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></flip-avatar>"
+    ></flip-resource-list-item>
+    <flip-resource-list-item
+      description="With a description"
+      label="This is a resource item"
+      media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></flip-avatar>"
+    ></flip-resource-list-item>
+    <flip-resource-list-item
+      description="With a description"
+      label="This is a resource item"
+      media="<flip-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/1027/144/144&quot;></flip-avatar>"
+    ></flip-resource-list-item>
+  `;
+  return element;
+};
+export const FlipResourceList = Template.bind({});
+FlipResourceList.args = {
+  label: "A resource list",
+};

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.css

@@ -0,0 +1,89 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.resource-list-file-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: var(--s-space-12) var(--s-space-16);
+  align-items: center;
+  background-color: var(--s-background-default);
+  line-height: var(--s-line-height-base);
+  gap: var(--s-space-12);
+}
+
+.resource-list-file-item:focus {
+    background-color: var(--s-background-hovered);
+    outline: none;
+  }
+
+.resource-list-file-item--has-control .resource-list-file-item__label-container {
+    padding-right: calc(var(--s-space-12) + 2.5rem);
+  }
+
+.resource-list-file-item__icon {
+  color: var(--s-icon-highlight);
+}
+
+.resource-list-file-item__label-container {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 2.875rem;
+  flex-grow: 1;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.resource-list-file-item__label-container:after {
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--s-space-12) + 0.0625rem);
+    left: 0;
+    height: 0.0625rem;
+    background-color: var(--s-border-default);
+    content: "";
+  }
+
+.resource-list-file-item__label {
+  overflow: hidden;
+  font-weight: var(--s-font-weight-medium);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resource-list-file-item__description {
+  overflow: hidden;
+  margin-top: var(--s-space-2);
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resource-list-file-item__error-message {
+  margin-top: var(--s-space-2);
+}
+
+.resource-list-file-item__remove-button {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-16);
+  display: inline-flex;
+  transform: translateY(-50%);
+}
+
+.resource-list-file-item__spinner {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-24);
+  display: inline-flex;
+  transform: translateY(-50%);
+}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.js

@@ -0,0 +1,180 @@
+import { Component, Event, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipResourceListFileItem {
+  constructor() {
+    this.icon = "<flip-icon-file></flip-icon-file>";
+    this.removeButtonLabel = "Remove file";
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (h(Host, { role: "row" },
+      h("div", { class: className, role: "gridcell" },
+        h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon }),
+        h("span", { class: "resource-list-file-item__label-container" },
+          h("span", { class: "resource-list-file-item__label", id: "label" }, this.label),
+          showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)),
+          showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" },
+            h("flip-inline-error", { message: this.errorMessage, size: "s" })))),
+        showSpinner && (h("span", { class: "resource-list-file-item__spinner" },
+          h("flip-spinner", { size: "s" }))),
+        showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" },
+          h("flip-button", { hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+  static get is() { return "flip-resource-list-file-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-resource-list-file-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-resource-list-file-item.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"<flip-icon-file></flip-icon-file>\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loading",
+      "reflect": false
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "removable",
+      "reflect": false
+    },
+    "removeButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "remove-button-label",
+      "reflect": false,
+      "defaultValue": "\"Remove file\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "remove",
+      "name": "remove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/flip-resource-list-file-item/flip-resource-list-file-item.stories.js

@@ -0,0 +1,35 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-resource-list-file-item.mdx";
+export default {
+  argTypes: {
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <flip-icon-file></flip-icon-file>",
+          summary: "flip-icon-*",
+        },
+      },
+    },
+  },
+  component: "flip-resource-list-file-item",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipResourceListFileItem",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const element = generateStoryElement("flip-resource-list-file-item", args);
+  container.setAttribute("aria-label", "List");
+  container.setAttribute("role", "grid");
+  container.append("\n  ", element, "\n");
+  return container;
+};
+export const FlipResourceListFileItem = Template.bind({});
+FlipResourceListFileItem.args = {
+  description: "12MB",
+  label: "Design_final-final-12.png",
+  removable: true,
+};