@xplortech/apollo-core 1.0.0-beta.18 → 1.0.0-beta.2

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

@@ -1,37 +1,19 @@
-import { Host, h } from '@stencil/core';
+import { Component, Host, h, Prop } from '@stencil/core';
 export class XplButton {
   constructor() {
-    this.disabled = undefined;
-    this.link = undefined;
-    this.iconOnly = undefined;
-    this.fullWidth = undefined;
-    this.name = undefined;
+    /**
+     * @property {"default" | "sm" | "xs"} - button size
+     */
     this.size = 'default';
-    this.type = undefined;
-    this.value = undefined;
+    /**
+     * @property {"primary" | "secondary" | "subtle"} - button variant
+     */
     this.variant = 'primary';
+    /**
+     * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
+     */
     this.state = 'neutral';
   }
-  componentDidRender() {
-    const attrs = this.el.attributes;
-    const dataAttrs = Object.keys(attrs)
-      .filter((k) => {
-      const propertyName = attrs[k].name;
-      if (propertyName) {
-        return (propertyName.includes('data-test') ||
-          propertyName.includes('aria-'));
-      }
-      return false;
-    })
-      .reduce((acc, k) => {
-      return Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value });
-    }, {});
-    const child = this.el.querySelector('button');
-    Object.keys(dataAttrs).forEach((k) => {
-      child.setAttribute(k, dataAttrs[k]);
-      this.el.removeAttribute(k);
-    });
-  }
   render() {
     let className = `xpl-button
                     xpl-button--${this.size}
@@ -39,8 +21,6 @@ export class XplButton {
                     xpl-button--${this.variant}`;
     if (this.iconOnly)
       className += ' xpl-button--icon-only';
-    if (this.fullWidth)
-      className += ' xpl-button--full-width';
     if (this.link && this.disabled)
       className += ' xpl-button--link-disabled';
     return (h(Host, { class: className }, 
@@ -48,204 +28,184 @@ export class XplButton {
      * Conditionally render either an <slot> or <button> element
      * depending on if there's an `link` or not
      */
-    this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value }, h("slot", null)))));
+    this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value },
+      h("slot", null)))));
   }
   static get is() { return "xpl-button"; }
-  static get properties() {
-    return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "whether button should be disabled"
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "link": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "whether button should yield a slot for a link tag"
-        },
-        "attribute": "link",
-        "reflect": false
-      },
-      "iconOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "whether button should render icon only"
-        },
-        "attribute": "icon-only",
-        "reflect": false
-      },
-      "fullWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "whether button should render with full width"
-        },
-        "attribute": "full-width",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{string} - button name attribute"
-            }],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'sm' | 'xs'",
-          "resolved": "\"default\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{\"default\" | \"sm\" | \"xs\"} - button size"
-            }],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'submit' | 'reset' | 'button'",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{\"submit\" | \"reset\" | \"button\"} - button type attribute"
-            }],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{string} - button value attribute"
-            }],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'subtle'",
-          "resolved": "\"primary\" | \"secondary\" | \"subtle\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{\"primary\" | \"secondary\" | \"subtle\"} - button variant"
-            }],
-          "text": ""
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "state": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'neutral' | 'warning' | 'success'",
-          "resolved": "\"neutral\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "property",
-              "text": "{\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red"
-            }],
-          "text": ""
-        },
-        "attribute": "state",
-        "reflect": false,
-        "defaultValue": "'neutral'"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "whether button should be disabled"
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "link": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "whether button should yield a slot for a link tag"
+      },
+      "attribute": "link",
+      "reflect": false
+    },
+    "iconOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "whether button should render icon only"
+      },
+      "attribute": "icon-only",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "{string} - button name attribute",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'sm' | 'xs'",
+        "resolved": "\"default\" | \"sm\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{\"default\" | \"sm\" | \"xs\"} - button size",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'submit' | 'reset' | 'button'",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "{\"submit\" | \"reset\" | \"button\"} - button type attribute",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "{string} - button value attribute",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'subtle'",
+        "resolved": "\"primary\" | \"secondary\" | \"subtle\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{\"primary\" | \"secondary\" | \"subtle\"} - button variant",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'neutral' | 'warning' | 'success'",
+        "resolved": "\"neutral\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red",
+            "name": "property"
+          }],
+        "text": ""
+      },
+      "attribute": "state",
+      "reflect": false,
+      "defaultValue": "'neutral'"
+    }
+  }; }
 }
-//# sourceMappingURL=xpl-button.js.map