@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,247 @@
+import { Component, Event, h, Host, Listen, Prop, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipSearch {
+  constructor() {
+    this.clearButtonLabel = "Clear search term";
+    this.placeholder = "Search …";
+    this.clear = () => {
+      this.input.value = "";
+      this.input.focus();
+    };
+    this.onBlur = (event) => {
+      this.inputBlur.emit(event);
+    };
+    this.onChange = (event) => {
+      this.valueChange.emit(event.target.value);
+    };
+    this.onFocus = (event) => {
+      this.inputFocus.emit(event);
+    };
+  }
+  onKeyDown(event) {
+    if ((event.code === "KeyK" || event.code === "Slash") &&
+      (event.ctrlKey || event.metaKey)) {
+      this.input.focus();
+    }
+  }
+  render() {
+    const className = classnames("search", {
+      "search--disabled": this.disabled,
+    });
+    return (h(Host, null,
+      h("span", { class: className },
+        h("flip-icon-search", { class: "search__icon" }),
+        h("input", { "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }),
+        !this.disabled && (h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" },
+          h("flip-icon-cancel", null))))));
+  }
+  static get is() { return "flip-search"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-search.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-search.css"]
+  }; }
+  static get properties() { return {
+    "autoFocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "auto-focus",
+      "reflect": false
+    },
+    "clearButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "clear-button-label",
+      "reflect": false,
+      "defaultValue": "\"Clear search term\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    },
+    "inputId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-id",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"Search \u2026\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "inputBlur",
+      "name": "inputBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "inputFocus",
+      "name": "inputFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,19 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-search.mdx";
+export default {
+  component: "flip-search",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipSearch",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-search", args);
+  return element;
+};
+export const FlipSearch = Template.bind({});
+FlipSearch.args = {
+  label: "Search",
+};

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

@@ -0,0 +1,90 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.spinner {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.spinner--size-s {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.spinner--size-s .spinner__circle {
+    stroke-width: 0.1875rem;
+  }
+
+.spinner__indicator {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+  -webkit-animation: spinner-rotate 2s linear infinite;
+          animation: spinner-rotate 2s linear infinite;
+}
+
+.spinner__background {
+  stroke: var(--s-border-default);
+  stroke-linecap: round;
+}
+
+.spinner__circle {
+  -webkit-animation: spinner-dash 1.5s ease-in-out infinite;
+          animation: spinner-dash 1.5s ease-in-out infinite;
+  stroke: var(--s-interactive-primary-default);
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+}
+
+@-webkit-keyframes spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes spinner-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}

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

@@ -0,0 +1,66 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipSpinner {
+  constructor() {
+    this.size = "m";
+  }
+  render() {
+    const className = classnames("spinner", `spinner--size-${this.size}`);
+    return (h(Host, null,
+      h("span", { class: className, role: Boolean(this.label) ? "status" : undefined },
+        h("svg", { "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" },
+          h("circle", { class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }),
+          h("circle", { class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })),
+        this.label && (h("flip-visually-hidden", null,
+          h("span", { class: "spinner__label" }, this.label))))));
+  }
+  static get is() { return "flip-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-spinner.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-spinner.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
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipSpinnerSize",
+        "resolved": "\"m\" | \"s\"",
+        "references": {
+          "FlipSpinnerSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    }
+  }; }
+}

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

@@ -0,0 +1,19 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-spinner.mdx";
+export default {
+  component: "flip-spinner",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipSpinner",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-spinner", args);
+  return element;
+};
+export const FlipSpinner = Template.bind({});
+FlipSpinner.args = {
+  label: "Loading messages …",
+};

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

@@ -0,0 +1,82 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.stack {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+}
+
+.stack ::slotted(*) {
+    min-width: 0;
+    max-width: 100%;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+.stack--align-start {
+  align-items: flex-start;
+}
+
+.stack--align-center {
+  align-items: center;
+}
+
+.stack--align-end {
+  align-items: flex-end;
+}
+
+.stack--align-stretch {
+  align-items: stretch;
+}
+
+.stack--justify-start {
+  justify-content: flex-start;
+}
+
+.stack--justify-center {
+  justify-content: center;
+}
+
+.stack--justify-end {
+  justify-content: flex-end;
+}
+
+.stack--justify-space-between {
+  justify-content: space-between;
+}
+
+.stack--justify-space-around {
+  justify-content: space-around;
+}
+
+.stack--justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+.stack--justify-stretch {
+  justify-content: stretch;
+}
+
+.stack--justify-stretch ::slotted(*) {
+    flex-grow: 1;
+  }
+
+.stack--orientation-vertical {
+  flex-direction: column;
+}
+
+.stack--orientation-horizontal {
+  flex-direction: row;
+}
+
+.stack--wrap {
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,153 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipStack {
+  constructor() {
+    this.align = "start";
+    this.as = "div";
+    this.justify = "start";
+    this.orientation = "vertical";
+    this.spacing = "0";
+    this.wrap = false;
+  }
+  render() {
+    const Tag = this.as;
+    const className = classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
+    return (h(Host, null,
+      h(Tag, { class: className, style: { gap: `var(--s-space-${this.spacing})` } },
+        h("slot", null))));
+  }
+  static get is() { return "flip-stack"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-stack.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-stack.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipStackAlign",
+        "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+        "references": {
+          "FlipStackAlign": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "align",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    },
+    "as": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "as",
+      "reflect": false,
+      "defaultValue": "\"div\""
+    },
+    "justify": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipStackJustify",
+        "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\" | \"stretch\"",
+        "references": {
+          "FlipStackJustify": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "justify",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    },
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipStackOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "FlipStackOrientation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": false,
+      "defaultValue": "\"vertical\""
+    },
+    "spacing": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipStackSpacing",
+        "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"8\"",
+        "references": {
+          "FlipStackSpacing": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "spacing",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "wrap": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "wrap",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,26 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-stack.mdx";
+export default {
+  component: "flip-stack",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipStack",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-stack", args);
+  element.innerHTML = `
+    <flip-badge label="Dennis" intent="decorative-1"></flip-badge>
+    <flip-badge label="Lennart" intent="decorative-2"></flip-badge>
+    <flip-badge label="Jan" intent="decorative-3"></flip-badge>
+    <flip-badge label="Konsti" intent="decorative-4"></flip-badge>
+    <flip-badge label="Adam" intent="decorative-5"></flip-badge>
+    <flip-badge label="Dario" intent="decorative-6"></flip-badge>
+    <flip-badge label="Fabi" intent="decorative-7"></flip-badge>
+  `;
+  return element;
+};
+export const FlipStack = Template.bind({});
+FlipStack.args = {};