@getflip/swirl-components 0.2.0 → 0.3.0

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

@@ -0,0 +1,158 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipText {
+  constructor() {
+    this.align = "start";
+    this.as = "p";
+    this.color = "default";
+    this.fontStyle = "normal";
+    this.size = "base";
+    this.weight = "normal";
+  }
+  render() {
+    const Tag = this.as;
+    const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`);
+    return (h(Host, null,
+      h(Tag, { class: className },
+        h("slot", null))));
+  }
+  static get is() { return "flip-text"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-text.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-text.css"]
+  }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextAlign",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {
+          "FlipTextAlign": {
+            "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": "\"p\""
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextColor",
+        "resolved": "\"critical\" | \"default\" | \"subdued\" | \"success\" | \"warning\"",
+        "references": {
+          "FlipTextColor": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
+    "fontStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextFontStyle",
+        "resolved": "\"italic\" | \"normal\"",
+        "references": {
+          "FlipTextFontStyle": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "font-style",
+      "reflect": false,
+      "defaultValue": "\"normal\""
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextSize",
+        "resolved": "\"base\" | \"lg\" | \"sm\"",
+        "references": {
+          "FlipTextSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"base\""
+    },
+    "weight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipTextWeight",
+        "resolved": "\"bold\" | \"medium\" | \"normal\" | \"semibold\"",
+        "references": {
+          "FlipTextWeight": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "weight",
+      "reflect": false,
+      "defaultValue": "\"normal\""
+    }
+  }; }
+}
+//# sourceMappingURL=flip-text.js.map

package/dist/collection/components/flip-text/flip-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-text.js","sourceRoot":"","sources":["../../../../src/components/flip-text/flip-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAsBpC,MAAM,OAAO,QAAQ;EALrB;IAMU,UAAK,GAAmB,OAAO,CAAC;IAChC,OAAE,GAAY,GAAG,CAAC;IAClB,UAAK,GAAmB,SAAS,CAAC;IAClC,cAAS,GAAuB,QAAQ,CAAC;IACzC,SAAI,GAAkB,MAAM,CAAC;IAC7B,WAAM,GAAoB,QAAQ,CAAC;GAsB5C;EApBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,UAAU,CAC1B,MAAM,EACN,eAAe,IAAI,CAAC,KAAK,EAAE,EAC3B,eAAe,IAAI,CAAC,KAAK,EAAE,EAC3B,oBAAoB,IAAI,CAAC,SAAS,EAAE,EACpC,cAAc,IAAI,CAAC,IAAI,EAAE,EACzB,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAC9B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,EAAC,GAAG,IAAC,KAAK,EAAE,SAAS;QACnB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipTextAlign = \"start\" | \"center\" | \"end\";\n\nexport type FlipTextColor =\n  | \"default\"\n  | \"subdued\"\n  | \"critical\"\n  | \"success\"\n  | \"warning\";\n\nexport type FlipTextFontStyle = \"normal\" | \"italic\";\n\nexport type FlipTextSize = \"sm\" | \"base\" | \"lg\";\n\nexport type FlipTextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-text.css\",\n  tag: \"flip-text\",\n})\nexport class FlipText {\n  @Prop() align?: FlipTextAlign = \"start\";\n  @Prop() as?: string = \"p\";\n  @Prop() color?: FlipTextColor = \"default\";\n  @Prop() fontStyle?: FlipTextFontStyle = \"normal\";\n  @Prop() size?: FlipTextSize = \"base\";\n  @Prop() weight?: FlipTextWeight = \"normal\";\n\n  render() {\n    const Tag = this.as;\n\n    const className = classnames(\n      \"text\",\n      `text--align-${this.align}`,\n      `text--color-${this.color}`,\n      `text--font-style-${this.fontStyle}`,\n      `text--size-${this.size}`,\n      `text--weight-${this.weight}`\n    );\n\n    return (\n      <Host>\n        <Tag class={className}>\n          <slot></slot>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-text.mdx";
+export default {
+  component: "flip-text",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipText",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-text", args);
+  element.innerHTML = `
+    Est, odio dis scelerisque risus sagittis lorem rhoncus. Vivamus tristique
+    habitant vitae cursus nisl. Sed adipiscing proin suspendisse aliquam
+    maecenas faucibus mauris purus. Tortor ut habitant erat adipiscing nulla
+    pretium, cursus tortor. Amet viverra et platea lacus, nec molestie
+    tincidunt.
+  `;
+  return element;
+};
+export const FlipText = Template.bind({});
+FlipText.args = {};
+//# sourceMappingURL=flip-text.stories.js.map

package/dist/collection/components/flip-text/flip-text.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-text.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-text/flip-text.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,eAAe;EACb,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;EAExD,OAAO,CAAC,SAAS,GAAG;;;;;;GAMnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1C,QAAQ,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-text.mdx\";\n\nexport default {\n  component: \"flip-text\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipText\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-text\", args);\n\n  element.innerHTML = `\n    Est, odio dis scelerisque risus sagittis lorem rhoncus. Vivamus tristique\n    habitant vitae cursus nisl. Sed adipiscing proin suspendisse aliquam\n    maecenas faucibus mauris purus. Tortor ut habitant erat adipiscing nulla\n    pretium, cursus tortor. Amet viverra et platea lacus, nec molestie\n    tincidunt.\n  `;\n\n  return element;\n};\n\nexport const FlipText = Template.bind({});\n\nFlipText.args = {};\n"]}

package/dist/collection/components/flip-text-input/flip-text-input.css

@@ -0,0 +1,134 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.text-input {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  color: var(--s-text-default);
+  font: inherit;
+  line-height: var(--s-line-height-sm);
+}
+
+.text-input--clearable {
+  padding-right: calc(1.5rem + var(--s-space-8));
+}
+
+.text-input--type-number {
+  padding-right: calc(1.5rem + var(--s-space-8));
+}
+
+.text-input--show-password .text-input__input {
+    width: 100%;
+  }
+
+.text-input--disabled .text-input__character-counter {
+    color: var(--s-text-disabled);
+  }
+
+.text-input__input {
+  display: inline-flex;
+  width: 100%;
+  max-height: 13.75rem;
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: var(--s-text-default);
+  background-color: transparent;
+  font: inherit;
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-base);
+  resize: none;
+  caret-color: var(--s-border-highlight);
+}
+
+.text-input__input:focus {
+    outline: none;
+  }
+
+.text-input__input:disabled {
+    color: var(--s-text-disabled);
+    background-color: transparent;
+  }
+
+.text-input__input::-webkit-outer-spin-button,
+  .text-input__input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+.text-input__input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+input.text-input__input:not([type="password"]) {
+  width: 0.25rem;
+  min-width: 0.25rem;
+}
+
+.text-input__clear-button,
+.text-input__password-toggle {
+  position: absolute;
+  top: calc(-1 * var(--s-space-12));
+  right: 0;
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: var(--s-icon-default);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.text-input__clear-button:focus, .text-input__password-toggle:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.text-input__stepper {
+  position: absolute;
+  top: -1.4375rem;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.text-input__step-button {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: var(--s-icon-default);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.text-input__step-button:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.text-input__character-counter {
+  position: absolute;
+  top: -1.375rem;
+  right: 0;
+  display: flex;
+  color: var(--s-text-subdued);
+  line-height: var(--s-line-height-sm);
+  flex-direction: column;
+}
+
+.text-input__prefix {
+  padding-right: var(--s-space-4);
+  font-size: var(--s-font-size-base);
+}
+
+.text-input__suffix {
+  padding-left: var(--s-space-4);
+  font-size: var(--s-font-size-base);
+}