@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,301 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipButton {
+  constructor() {
+    this.intent = "default";
+    this.size = "m";
+    this.type = "button";
+    this.variant = "ghost";
+  }
+  componentDidLoad() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "24");
+  }
+  render() {
+    const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
+      (this.variant === "floating" && this.intent === "default");
+    const isLink = Boolean(this.href);
+    const className = classnames("button", `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
+      "button--icon-only": hideLabel,
+    });
+    const Tag = isLink ? "a" : "button";
+    return (h(Host, null,
+      h(Tag, { "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": hideLabel ? this.label : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value },
+        this.icon && (h("span", { class: "button__left-icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })),
+        !hideLabel && h("span", { class: "button__label" }, this.label))));
+  }
+  static get is() { return "flip-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-button.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "download": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "download",
+      "reflect": false
+    },
+    "form": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form",
+      "reflect": false
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-label",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "intent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipButtonIntent",
+        "resolved": "\"critical\" | \"default\" | \"primary\"",
+        "references": {
+          "FlipButtonIntent": {
+            "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
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipButtonSize",
+        "resolved": "\"l\" | \"m\"",
+        "references": {
+          "FlipButtonSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"m\""
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipButtonType",
+        "resolved": "\"button\" | \"submit\"",
+        "references": {
+          "FlipButtonType": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "\"button\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipButtonVariant",
+        "resolved": "\"flat\" | \"floating\" | \"ghost\" | \"on-image\" | \"plain\"",
+        "references": {
+          "FlipButtonVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"ghost\""
+    }
+  }; }
+}

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

@@ -0,0 +1,31 @@
+import { generateStoryElement } from "../../utils";
+// @ts-ignore
+import Docs from "./flip-button.mdx";
+export default {
+  argTypes: {
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <flip-icon-close></flip-icon-close>",
+          summary: "flip-icon-*",
+        },
+      },
+    },
+  },
+  component: "flip-button",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipButton",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-button", args);
+  return element;
+};
+export const FlipButton = Template.bind({});
+FlipButton.args = {
+  icon: "<flip-icon-add></flip-icon-add>",
+  label: "Label",
+};

package/dist/collection/components/flip-button-group/flip-button-group.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }

package/dist/collection/components/flip-button-group/flip-button-group.js

@@ -0,0 +1,81 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipButtonGroup {
+  constructor() {
+    this.orientation = "horizontal";
+  }
+  render() {
+    return (h(Host, null,
+      h("flip-stack", { align: this.orientation === "vertical" && this.stretch
+          ? "stretch"
+          : "start", class: "button-group", justify: this.orientation === "horizontal" && this.stretch
+          ? "stretch"
+          : "start", orientation: this.orientation, role: "group", spacing: "8", wrap: this.wrap },
+        h("slot", null))));
+  }
+  static get is() { return "flip-button-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-button-group.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-button-group.css"]
+  }; }
+  static get properties() { return {
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipButtonGroupOrientation",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "FlipButtonGroupOrientation": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "orientation",
+      "reflect": false,
+      "defaultValue": "\"horizontal\""
+    },
+    "stretch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "stretch",
+      "reflect": false
+    },
+    "wrap": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "wrap",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/flip-button-group/flip-button-group.stories.js

@@ -0,0 +1,21 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-button-group.mdx";
+export default {
+  component: "flip-button-group",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipButtonGroup",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-button-group", args);
+  element.innerHTML = `
+    <flip-button label="Button"></flip-button>
+    <flip-button intent="primary" label="Button" variant="flat"></flip-button>
+  `;
+  return element;
+};
+export const FlipButtonGroup = Template.bind({});
+FlipButtonGroup.args = {};

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

@@ -0,0 +1,133 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.checkbox {
+  display: inline-flex;
+  line-height: var(--s-line-height-base);
+  cursor: pointer;
+}
+
+.checkbox:focus-within .checkbox__box {
+    box-shadow: 0 0 0 0.0625rem var(--s-background-default),
+      0 0 0 0.1875rem var(--s-focus-default);
+  }
+
+.checkbox--checked .checkbox__control:hover .checkbox__box, .checkbox--indeterminate .checkbox__control:hover .checkbox__box {
+        border-color: var(--s-interactive-primary-hovered);
+        background-color: var(--s-interactive-primary-hovered);
+      }
+
+.checkbox--checked .checkbox__box, .checkbox--indeterminate .checkbox__box {
+    border-color: var(--s-icon-highlight);
+    color: var(--s-text-on-status);
+    background-color: var(--s-icon-highlight);
+  }
+
+.checkbox--invalid.checkbox--checked .checkbox__box, .checkbox--invalid.checkbox--indeterminate .checkbox__box {
+      background-color: var(--s-icon-critical);
+    }
+
+.checkbox--invalid .checkbox__box {
+    border-color: var(--s-icon-critical);
+  }
+
+.checkbox--disabled {
+  cursor: default;
+}
+
+.checkbox--disabled.checkbox--checked .checkbox__control:hover .checkbox__box, .checkbox--disabled.checkbox--indeterminate .checkbox__control:hover .checkbox__box {
+          border-color: var(--s-icon-disabled);
+          background-color: var(--s-icon-disabled);
+        }
+
+.checkbox--disabled.checkbox--checked .checkbox__box, .checkbox--disabled.checkbox--indeterminate .checkbox__box {
+      background-color: var(--s-icon-disabled);
+    }
+
+.checkbox--disabled .checkbox__control:hover .checkbox__box {
+        background-color: transparent;
+      }
+
+.checkbox--disabled .checkbox__box {
+    border-color: var(--s-icon-disabled);
+  }
+
+.checkbox--disabled .checkbox__label,
+  .checkbox--disabled .checkbox__description {
+    color: var(--s-text-disabled);
+  }
+
+.checkbox__control {
+  position: relative;
+  top: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--s-space-2);
+  flex-shrink: 0;
+}
+
+.checkbox__control:hover .checkbox__box {
+      background-color: var(--s-action-neutral-hovered);
+    }
+
+.checkbox__box {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  border: 0.125rem solid var(--s-icon-default);
+  border-radius: var(--s-border-radius-s);
+}
+
+.checkbox__icon {
+  display: inline-flex;
+  width: 1.0625rem;
+  height: 1.0625rem;
+}
+
+.checkbox__icon > *::part(icon) {
+    width: 1.0625rem;
+    height: 1.0625rem;
+  }
+
+.checkbox__indeterminate-icon {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.checkbox__indeterminate-icon:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.625rem;
+    height: 0.125rem;
+    border-radius: 0.0625rem;
+    background-color: currentColor;
+    content: "";
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+.checkbox__label-container {
+  display: inline-flex;
+  margin-left: var(--s-space-12);
+  padding-top: var(--s-space-4);
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.checkbox__label {
+  font-weight: var(--s-font-weight-medium);
+}
+
+.checkbox__description {
+  color: var(--s-text-subdued);
+}