@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/collection/components/swirl-status-indicator/swirl-status-indicator.js

@@ -0,0 +1,67 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlStatusIndicator {
+  constructor() {
+    this.intent = undefined;
+    this.label = undefined;
+  }
+  render() {
+    const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
+    return (h(Host, null, h("div", { class: className }, h("span", { class: "status-indicator__dot" }), h("span", { class: "status-indicator__label" }, this.label))));
+  }
+  static get is() { return "swirl-status-indicator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-status-indicator.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-status-indicator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "intent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlStatusIndicatorIntent",
+          "resolved": "\"critical\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlStatusIndicatorIntent": {
+              "location": "local",
+              "path": "/Users/philip/Entwicklung/swirl/packages/swirl-components/src/components/swirl-status-indicator/swirl-status-indicator.tsx"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "intent",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-status-indicator/swirl-status-indicator.spec.js

@@ -0,0 +1,22 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlStatusIndicator } from "./swirl-status-indicator";
+describe("swirl-status-indicator", () => {
+  it("renders with label", async () => {
+    const page = await newSpecPage({
+      components: [SwirlStatusIndicator],
+      html: `<swirl-status-indicator intent="success" label="Label"></swirl-status-indicator>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-status-indicator intent="success" label="Label">
+        <mock:shadow-root>
+          <div class="status-indicator status-indicator--intent-success">
+            <span class="status-indicator__dot"></span>
+            <span class="status-indicator__label">
+              Label
+            </span>
+          </div>
+        </mock:shadow-root>
+      </swirl-status-indicator>
+    `);
+  });
+});

package/dist/collection/components/swirl-status-indicator/swirl-status-indicator.stories.js

@@ -0,0 +1,21 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-status-indicator.mdx";
+export default {
+  component: "swirl-status-indicator",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlStatusIndicator",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-status-indicator", args);
+  return element;
+};
+export const SwirlStatusIndicator = Template.bind({});
+SwirlStatusIndicator.args = {
+  intent: "success",
+  label: "Label",
+};

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

@@ -0,0 +1,109 @@
+: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--on .switch__thumb {
+    left: calc(100% - 1.25rem - var(--s-space-2));
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.switch--on .switch__thumb {
+      left: calc(100% - 0.875rem - var(--s-space-2))
+  }
+    }
+
+.switch--on .switch__control {
+    background-color: var(--s-interactive-primary-default);
+  }
+
+.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: 2.75rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border-radius: calc(1.5rem / 2);
+  background-color: var(--s-interactive-primary-disabled);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+@media (prefers-reduced-motion) {
+
+.switch__control {
+    transition: none
+}
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.switch__control {
+    width: 1.875rem;
+    height: 1.125rem;
+    border-radius: calc(1.125rem / 2)
+}
+  }
+
+.switch__thumb {
+  position: absolute;
+  top: var(--s-space-2);
+  left: var(--s-space-2);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background-color: var(--s-surface-default);
+  transition: left 0.2s;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion) {
+
+.switch__thumb {
+    transition: none
+}
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.switch__thumb {
+    width: 0.875rem;
+    height: 0.875rem
+}
+  }
+
+.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/swirl-switch/swirl-switch.js

@@ -0,0 +1,248 @@
+import { h, Host, } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlSwitch {
+  constructor() {
+    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`;
+    };
+    this.checked = false;
+    this.disabled = false;
+    this.hideLabel = undefined;
+    this.inputId = undefined;
+    this.inputName = undefined;
+    this.label = undefined;
+    this.value = undefined;
+  }
+  onWindowPointerUp() {
+    this.onEndDrag();
+  }
+  render() {
+    const off = !this.checked;
+    const on = this.checked;
+    const ariaCheckedLabel = on ? "true" : "false";
+    const className = classnames("switch", {
+      "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("swirl-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 && !this.hideLabel && (h("span", { class: "switch__label" }, this.label)), this.label && this.hideLabel && (h("swirl-visually-hidden", null, this.label)))));
+  }
+  static get is() { return "swirl-switch"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-switch.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-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"
+      },
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": 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
+      },
+      "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/swirl-switch/swirl-switch.spec.js

@@ -0,0 +1,49 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlSwitch } from "./swirl-switch";
+describe("swirl-switch", () => {
+  it("renders all props", async () => {
+    const page = await newSpecPage({
+      components: [SwirlSwitch],
+      html: `<swirl-switch checked="true" disabled="true" input-id="switch" input-name="switch" label="Label" value="Value"></swirl-switch>`,
+    });
+    expect(page.root).toMatchInlineSnapshot(`
+      <swirl-switch checked="true" disabled="true" input-id="switch" input-name="switch" label="Label" value="Value">
+        <label class="switch switch--disabled switch--on" htmlfor="switch">
+          <span class="switch__control">
+            <swirl-visually-hidden>
+              <input aria-checked="true" checked="" class="switch__input" disabled="" id="switch" name="switch" role="switch" type="checkbox" value="Value">
+            </swirl-visually-hidden>
+            <span aria-hidden="true" class="switch__thumb"></span>
+          </span>
+          <span class="switch__label">
+            Label
+          </span>
+        </label>
+      </swirl-switch>
+    `);
+  });
+  it("can be deselected", async () => {
+    const page = await newSpecPage({
+      components: [SwirlSwitch],
+      html: `<swirl-switch checked="true" input-id="switch" input-name="switch" label="Label"></swirl-switch>`,
+    });
+    const spy = jest.fn();
+    page.root.addEventListener("valueChange", spy);
+    page.root.querySelector("input").dispatchEvent(new Event("change"));
+    await page.waitForChanges();
+    expect(spy).toHaveBeenCalled();
+    expect(spy.mock.calls[0][0].detail).toBe(false);
+  });
+  it("can be selected", async () => {
+    const page = await newSpecPage({
+      components: [SwirlSwitch],
+      html: `<swirl-switch checked="false" input-id="switch" input-name="switch" label="Label"></swirl-switch>`,
+    });
+    const spy = jest.fn();
+    page.root.addEventListener("valueChange", spy);
+    page.root.querySelector("input").dispatchEvent(new Event("change"));
+    await page.waitForChanges();
+    expect(spy).toHaveBeenCalled();
+    expect(spy.mock.calls[0][0].detail).toBe(true);
+  });
+});

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

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

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

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

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

@@ -0,0 +1,67 @@
+import { h, Host } from "@stencil/core";
+export class SwirlHeading {
+  constructor() {
+    this.glyph = undefined;
+    this.size = 24;
+  }
+  render() {
+    const Tag = `swirl-symbol-${this.glyph}`;
+    return (h(Host, null, h(Tag, { size: this.size })));
+  }
+  static get is() { return "swirl-symbol"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-symbol.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "glyph": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "glyph",
+        "reflect": false
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSymbolSize",
+          "resolved": "20 | 24",
+          "references": {
+            "SwirlSymbolSize": {
+              "location": "import",
+              "path": "./swirl-symbol.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-symbol/swirl-symbol.spec.js

@@ -0,0 +1,19 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlSymbolCloud } from "./symbols/swirl-symbol-cloud";
+describe("swirl-symbol", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [SwirlSymbolCloud],
+      html: `<swirl-symbol-cloud></swirl-symbol-cloud>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-symbol-cloud>
+        <mock:shadow-root>
+          <svg class="swirl-symbol swirl-symbol--size-24" fill="none" height="24" width="24" part="symbol" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19.35 10.04C19.0492 8.51623 18.2822 7.12361 17.1552 6.05484C16.0283 4.98606 14.597 4.29397 13.0594 4.07431C11.5218 3.85466 9.95398 4.11831 8.57282 4.82877C7.19165 5.53924 6.06544 6.66141 5.35 8.04C3.83222 8.21584 2.43869 8.9641 1.45369 10.1322C0.468684 11.3002 -0.0335876 12.8001 0.04933 14.3257C0.132248 15.8514 0.794107 17.288 1.8999 18.3424C3.00569 19.3969 4.4721 19.9897 6 20H19C20.2928 20.0011 21.5355 19.5001 22.4659 18.6025C23.3964 17.705 23.9418 16.4811 23.9872 15.1891C24.0326 13.8971 23.5744 12.638 22.7093 11.6773C21.8441 10.7167 20.6397 10.1296 19.35 10.04Z" fill="currentColor"></path>
+          </svg>
+        </mock:shadow-root>
+      </swirl-symbol-cloud>
+    `);
+  });
+});

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

@@ -0,0 +1,28 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-symbol.mdx";
+import SymbolsJSON from "../../../symbols.json";
+export default {
+  argTypes: {
+    glyph: {
+      control: "select",
+      options: Object.values(SymbolsJSON).map((symbol) => symbol.name),
+    },
+  },
+  component: "swirl-symbol",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlSymbol",
+};
+const Template = (args) => {
+  const element = generateStoryElement(`swirl-symbol`, args);
+  return element;
+};
+export const SwirlSymbol = Template.bind({});
+SwirlSymbol.args = {
+  glyph: "cloud",
+  size: "24",
+};

package/dist/collection/components/swirl-symbol/swirl-symbol.types.js

@@ -0,0 +1 @@
+export {};