@getflip/swirl-components 0.11.0 → 0.13.0

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

@@ -0,0 +1,141 @@
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+/**
+ * @slot slot - The column label.
+ */
+export class SwirlTableColumn {
+  constructor() {
+    this.minWidth = "fit-content";
+  }
+  render() {
+    const styles = {
+      flex: Boolean(this.width) ? `0 0 ${this.width}` : "",
+      maxWidth: this.maxWidth || "",
+      minWidth: this.minWidth || "",
+    };
+    return (h(Host, { "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles },
+      h("span", null,
+        h("slot", null)),
+      this.sortable && (h("span", { class: "table-column__sort-indicator" },
+        this.sort === "ascending" && (h("swirl-icon-arrow-upward", { "aria-hidden": "true", size: 20 })),
+        this.sort === "descending" && (h("swirl-icon-arrow-downward", { "aria-hidden": "true", size: 20 })),
+        !Boolean(this.sort) && " "))));
+  }
+  static get is() { return "swirl-table-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-table-column.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-table-column.css"]
+  }; }
+  static get properties() { return {
+    "sort": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SwirlTableColumnSort",
+        "resolved": "\"ascending\" | \"descending\"",
+        "references": {
+          "SwirlTableColumnSort": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sort",
+      "reflect": false
+    },
+    "sortable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sortable",
+      "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
+    },
+    "minWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-width",
+      "reflect": false,
+      "defaultValue": "\"fit-content\""
+    },
+    "sticky": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sticky",
+      "reflect": false
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/swirl-table-column/swirl-table-column.stories.js

@@ -0,0 +1,18 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-table-column.mdx";
+export default {
+  component: "swirl-table-column",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlTableColumn",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-table-column", args);
+  element.innerHTML = "Column";
+  return element;
+};
+export const SwirlTableColumn = Template.bind({});
+SwirlTableColumn.args = {};

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

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+}
+
+  :host(.table-row--highlighted) {
+    --swirl-ghost-button-background-default: transparent;
+  }
+
+  :host(.table-row--highlighted) ::slotted(.table-cell) {
+      background-color: rgba(240, 242, 255, 1); /* TODO: token */
+    }
+
+  :host ::slotted(.table-cell) {
+    border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  }
+
+  :host * {
+    box-sizing: border-box;
+  }

package/dist/collection/components/swirl-table-row/swirl-table-row.js

@@ -0,0 +1,58 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot slot - The cells of this row.
+ */
+export class SwirlTableRow {
+  render() {
+    const className = classnames("table-row", {
+      "table-row--highlighted": this.highlighted,
+    });
+    return (h(Host, { "aria-rowindex": this.index, class: className, role: "row" },
+      h("slot", null)));
+  }
+  static get is() { return "swirl-table-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-table-row.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-table-row.css"]
+  }; }
+  static get properties() { return {
+    "highlighted": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlighted",
+      "reflect": false
+    },
+    "index": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "index",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/swirl-table-row/swirl-table-row.stories.js

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-table-row.mdx";
+export default {
+  component: "swirl-table-row",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlTableRow",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-table-row", args);
+  element.innerHTML = `
+    <swirl-table-cell>
+      <swirl-text size="sm">Cell</swirl-text>
+    </swirl-table-cell>
+    <swirl-table-cell>
+      <swirl-text size="sm">Cell</swirl-text>
+    </swirl-table-cell>
+  `;
+  return element;
+};
+export const SwirlTableRow = Template.bind({});
+SwirlTableRow.args = {};

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.css

@@ -0,0 +1,26 @@
+:host {
+  position: relative;
+  z-index: 1;
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.table-row-group__header-row {
+  padding: var(--s-space-12) var(--s-space-16);
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-surface-raised-default);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-sm);
+}
+
+@media (min-width: 768px) {
+
+.table-row-group__label {
+    position: sticky;
+    left: var(--s-space-16)
+}
+  }

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -0,0 +1,41 @@
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+/**
+ * @slot slot - The rows of this group.
+ */
+export class SwirlTableRowGroup {
+  render() {
+    const rowspan = this.el.querySelectorAll("swirl-table-row").length;
+    return (h(Host, { class: "table-row-group", role: "rowgroup" },
+      h("div", { class: "table-row-group__header-row", role: "row" },
+        h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label)),
+      h("slot", null)));
+  }
+  static get is() { return "swirl-table-row-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-table-row-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-table-row-group.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.stories.js

@@ -0,0 +1,19 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-table-row-group.mdx";
+export default {
+  component: "swirl-table-row-group",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlTableRowGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-table-row-group", args);
+  return element;
+};
+export const SwirlTableRowGroup = Template.bind({});
+SwirlTableRowGroup.args = {
+  label: "Table row group",
+};

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

@@ -0,0 +1,91 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tabs {
+  width: 100%;
+}
+
+.tabs__tab-bar {
+  position: relative;
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+}
+
+.tabs__tab {
+  position: relative;
+  display: block;
+  min-width: 0;
+  margin: 0;
+  padding: var(--s-space-4) var(--s-space-8);
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  cursor: pointer;
+}
+
+.tabs__tab:focus {
+    outline: none;
+  }
+
+.tabs__tab:focus-visible .tabs__tab-label {
+      border-radius: var(--s-border-radius-s);
+      box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
+    }
+
+.tabs__tab:not(.tabs__tab--active):hover:after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: calc(100% - var(--s-space-8));
+        height: 0.1875rem;
+        border-radius: 0.125rem;
+        background-color: var(--s-border-default);
+        content: "";
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.tabs__tab {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
+.tabs__tab-label {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  padding: var(--s-space-8) var(--s-space-8);
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tabs__tab--active {
+  color: var(--s-text-highlight);
+}
+
+.tabs__tab--active:after {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: calc(100% - var(--s-space-8));
+    height: 0.1875rem;
+    border-radius: 0.125rem;
+    background-color: var(--s-border-highlight);
+    content: "";
+    transform: translateX(-50%);
+    pointer-events: none;
+  }

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

@@ -0,0 +1,173 @@
+import { Component, Element, Event, h, Host, Method, Prop, State, } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlTabs {
+  constructor() {
+    this.tabs = [];
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.activatePreviousTab();
+      }
+      else if (event.code === "ArrowRight") {
+        event.preventDefault();
+        this.activateNextTab();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs();
+  }
+  /**
+   * Activate a tab.
+   * @param tabId
+   */
+  async activateTab(tabId) {
+    if (this.activeTab === tabId) {
+      return;
+    }
+    this.activeTab = tabId;
+    this.tabs.forEach((tab) => (tab.active = false));
+    const tab = this.tabs.find((tab) => tab.tabId === tabId);
+    if (!Boolean(tab)) {
+      return;
+    }
+    tab.active = true;
+    this.tabActivated.emit(tab);
+  }
+  activateNextTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+    this.activateTab(this.tabs[nextIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  activatePreviousTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const previousIndex = Math.max(0, currentIndex - 1);
+    this.activateTab(this.tabs[previousIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  collectTabs() {
+    this.tabs = Array.from(this.el.querySelectorAll("swirl-tab"));
+    if (this.tabs.length === 0) {
+      return;
+    }
+    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
+    this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "tabs" },
+        h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
+          const isActive = tab.tabId === this.activeTab;
+          const className = classnames("tabs__tab", {
+            "tabs__tab--active": isActive,
+          });
+          return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" },
+            h("span", { class: "tabs__tab-label" }, tab.label)));
+        })),
+        h("slot", null))));
+  }
+  static get is() { return "swirl-tabs"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["swirl-tabs.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["swirl-tabs.css"]
+  }; }
+  static get properties() { return {
+    "initialTab": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "initial-tab",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "activeTab": {}
+  }; }
+  static get events() { return [{
+      "method": "tabActivated",
+      "name": "tabActivated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLSwirlTabElement",
+        "resolved": "HTMLSwirlTabElement",
+        "references": {
+          "HTMLSwirlTabElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "activateTab": {
+      "complexType": {
+        "signature": "(tabId: string) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "tabId"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Activate a tab.",
+        "tags": [{
+            "name": "param",
+            "text": "tabId"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-tabs.mdx";
+export default {
+  component: "swirl-tabs",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlTabs",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-tabs", args);
+  element.innerHTML = `
+    <swirl-tab label="Tab #1" tab-id="tab-1"><swirl-text>Tab 1</swirl-text></swirl-tab>
+    <swirl-tab label="Tab #2" tab-id="tab-2"><swirl-text>Tab 2</swirl-text></swirl-tab>
+    <swirl-tab label="Tab Number 3" tab-id="tab-3"><swirl-text>Tab 3</swirl-text></swirl-tab>
+  `;
+  return element;
+};
+export const SwirlTabs = Template.bind({});
+SwirlTabs.args = {
+  initialTab: "tab-2",
+  label: "Tabs",
+};