@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,100 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  touch-action: none;
+}
+
+.switch:focus-within .switch__control {
+    box-shadow: 0 0 0 0.0625rem var(--s-background-default),
+      0 0 0 0.1875rem var(--s-focus-default);
+  }
+
+.switch--size-m .switch__control {
+    width: 2.75rem;
+    height: 1.5rem;
+    border-radius: calc(1.5rem / 2);
+  }
+
+.switch--size-m .switch__thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+.switch--on.switch--size-m .switch__thumb {
+      left: calc(100% - 1.25rem - var(--s-space-2));
+    }
+
+.switch--on .switch__control {
+    background-color: var(--s-interactive-primary-default);
+  }
+
+.switch--on .switch__thumb {
+    left: calc(100% - 0.875rem - var(--s-space-2));
+  }
+
+.switch--disabled .switch__control {
+    background-color: var(--s-interactive-primary-disabled);
+    cursor: default;
+  }
+
+.switch--disabled .switch__thumb {
+    background-color: var(--s-interactive-neutral-default);
+  }
+
+.switch--disabled .switch__label {
+    color: var(--s-text-disabled);
+  }
+
+.switch__control {
+  position: relative;
+  width: 1.875rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  border-radius: calc(1.125rem / 2);
+  background-color: var(--s-interactive-primary-disabled);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+@media (prefers-reduced-motion) {
+
+.switch__control {
+    transition: none
+}
+  }
+
+.switch__thumb {
+  position: absolute;
+  top: var(--s-space-2);
+  left: var(--s-space-2);
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 50%;
+  background-color: var(--s-surface-default);
+  transition: left 0.2s;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion) {
+
+.switch__thumb {
+    transition: none
+}
+  }
+
+.switch__label {
+  position: relative;
+  z-index: 1;
+  margin-left: var(--s-space-12);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+}

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

@@ -0,0 +1,245 @@
+import { Component, Element, Event, h, Host, Listen, Prop, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipSwitch {
+  constructor() {
+    this.checked = false;
+    this.disabled = false;
+    this.size = "m";
+    this.dragging = false;
+    this.recentlyDragged = false;
+    this.onChange = () => {
+      if (this.dragging) {
+        return;
+      }
+      if (this.recentlyDragged) {
+        this.recentlyDragged = false;
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onStartDrag = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.dragging = true;
+      this.thumb.style.transition = "none";
+    };
+    this.onEndDrag = () => {
+      if (this.disabled) {
+        return;
+      }
+      if (this.recentlyDragged) {
+        const controlBonds = this.control.getBoundingClientRect();
+        const thumbBounds = this.thumb.getBoundingClientRect();
+        const on = this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;
+        if (this.checked !== on) {
+          this.checked = on;
+          this.valueChange.emit(on);
+        }
+      }
+      this.thumb.style.left = "";
+      this.thumb.style.transition = "";
+      this.dragging = false;
+      setTimeout(() => {
+        this.recentlyDragged = false;
+      });
+    };
+    this.onDrag = (event) => {
+      if (!this.dragging) {
+        return;
+      }
+      this.recentlyDragged = true;
+      const controlBonds = this.control.getBoundingClientRect();
+      const thumbBounds = this.thumb.getBoundingClientRect();
+      let pos = Math.round(event.offsetX - thumbBounds.width / 2);
+      if (pos < 0) {
+        pos = 0;
+      }
+      if (pos > Math.round(controlBonds.width - thumbBounds.width)) {
+        pos = Math.round(controlBonds.width - thumbBounds.width);
+      }
+      this.thumb.style.left = `${pos}px`;
+    };
+  }
+  onWindowPointerUp() {
+    this.onEndDrag();
+  }
+  render() {
+    const off = !this.checked;
+    const on = this.checked;
+    const ariaCheckedLabel = on ? "true" : "false";
+    const className = classnames("switch", `switch--size-${this.size}`, {
+      "switch--off": off,
+      "switch--on": on,
+      "switch--disabled": this.disabled,
+    });
+    return (h(Host, null,
+      h("label", { class: className, htmlFor: this.inputId },
+        h("span", { class: "switch__control", onPointerDown: this.onStartDrag, onPointerMove: this.onDrag, onPointerUp: this.onEndDrag, ref: (el) => (this.control = el) },
+          h("flip-visually-hidden", null,
+            h("input", { "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })),
+          h("span", { "aria-hidden": "true", class: "switch__thumb", ref: (el) => (this.thumb = el) })),
+        this.label && h("span", { class: "switch__label" }, this.label))));
+  }
+  static get is() { return "flip-switch"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-switch.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-switch.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "inputId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-id",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    },
+    "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": "FlipSwitchSize",
+        "resolved": "\"m\" | \"s\"",
+        "references": {
+          "FlipSwitchSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "pointerup",
+      "method": "onWindowPointerUp",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,22 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-switch.mdx";
+export default {
+  component: "flip-switch",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipSwitch",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-switch", args);
+  return element;
+};
+export const FlipSwitch = Template.bind({});
+FlipSwitch.args = {
+  checked: true,
+  inputId: "switch",
+  inputName: "switch",
+  label: "Switch",
+};

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

@@ -0,0 +1,70 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tag {
+  display: inline-flex;
+  padding: var(--s-space-2) var(--s-space-8);
+  align-items: center;
+  border-radius: var(--s-border-radius-s);
+  color: var(--s-text-default);
+  background-color: var(--s-surface-neutral-subdued);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-sm);
+  gap: var(--s-space-4);
+}
+
+.tag--intent-info {
+  color: var(--s-text-info);
+  background-color: var(--s-surface-info-subdued);
+}
+
+.tag--intent-info .tag__removal-button {
+    color: var(--icon-info);
+  }
+
+.tag--intent-critical {
+  color: var(--s-text-critical);
+  background-color: var(--s-surface-critical-subdued);
+}
+
+.tag--intent-critical .tag__removal-button {
+    color: var(--icon-critical);
+  }
+
+.tag--intent-warning {
+  color: var(--s-text-warning);
+  background-color: var(--s-surface-warning-subdued);
+}
+
+.tag--intent-warning .tag__removal-button {
+    color: var(--icon-warning);
+  }
+
+.tag--intent-success {
+  color: var(--s-text-success);
+  background-color: var(--s-surface-success-subdued);
+}
+
+.tag--intent-success .tag__removal-button {
+    color: var(--icon-success);
+  }
+
+.tag__removal-button {
+  display: inline-flex;
+  margin-right: calc(-1 * var(--s-space-4));
+  padding: 0;
+  border: none;
+  color: var(--s-icon-strong);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.tag__removal-button:focus {
+    outline-color: var(--s-focus-default);
+  }

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

@@ -0,0 +1,124 @@
+import { Component, Event, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipTag {
+  constructor() {
+    this.intent = "default";
+    this.removalButtonLabel = "Remove";
+    this.onRemove = (event) => {
+      var _a;
+      (_a = this.remove) === null || _a === void 0 ? void 0 : _a.emit(event);
+    };
+  }
+  render() {
+    const className = classnames("tag", `tag--intent-${this.intent}`);
+    return (h(Host, null,
+      h("span", { class: className },
+        this.label,
+        this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, type: "button" },
+          h("flip-icon-close", { size: 16 }))))));
+  }
+  static get is() { return "flip-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-tag.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-tag.css"]
+  }; }
+  static get properties() { return {
+    "intent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTagIntent",
+        "resolved": "\"critical\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+        "references": {
+          "FlipTagIntent": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "intent",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "removable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "removable",
+      "reflect": false
+    },
+    "removalButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "removal-button-label",
+      "reflect": false,
+      "defaultValue": "\"Remove\""
+    }
+  }; }
+  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-tag/flip-tag.stories.js

@@ -0,0 +1,20 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-tag.mdx";
+export default {
+  component: "flip-tag",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipTag",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-tag", args);
+  return element;
+};
+export const FlipTag = Template.bind({});
+FlipTag.args = {
+  label: "Label",
+  removable: true,
+};

package/dist/collection/components/flip-theme-provider/flip-theme-provider.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}