Initial commit to github

static/js/components/button.js

@@ -0,0 +1,76 @@
+class ButtonComponent extends HTMLElement {
+  /**
+   * Parameters
+   *  - btnClasses: Additional classes to add to the block.
+   *  - element: The element to use for the button. Defaults to 'a'.
+   *  - url: The URL to link to.
+   *  - target: The target for the link.
+   *  - title: The text to display on the button.
+   *  - color: The color of the button.
+   *  - variant: The variant of the button.
+   *  - size: The size of the button.
+   *  - width: The width of the button.
+   *
+   */
+
+  connectedCallback() {
+    if (!this.querySelector(this.getAttribute('element'))) {
+      this.append(document.createElement(this.getAttribute('element')));
+    }
+
+    this.update();
+  }
+
+  static get observedAttributes() {
+    return [
+      'btnClasses',
+      'el',
+      'element',
+      'type',
+      'url',
+      'target',
+      'title',
+      'color',
+      'variant',
+      'size',
+      'width',
+    ]
+  }
+
+  attributeChangedCallback() {
+    this.update();
+  }
+
+  update() {
+    const btn = this.querySelector(this.getAttribute('element'));
+
+    if (btn) {
+      btn.classList = this.getAttribute('btnClasses') || '';
+
+      if (this.getAttribute('element') == 'a') {
+        btn.href = this.getAttribute('url') || '#';
+
+        if (btn.target) {
+          btn.target = 'target="${this.getAttribute(target)}"';
+        }
+      }
+
+      const type = this.getAttribute('type');
+      if (type && this.getAttribute('element') !== 'a') {
+        btn.type = type;
+      }
+
+      btn.title        = this.getAttribute('title') || '';
+      btn.textContent  = this.getAttribute('title') || '';
+
+      btn.setAttribute('data-button-color',   this.getAttribute('color'));
+      btn.setAttribute('data-button-variant', this.getAttribute('variant'));
+      btn.setAttribute('data-button-size',    this.getAttribute('size'));
+      btn.setAttribute('data-button-width',   this.getAttribute('width'));
+    }
+  }
+}
+
+export const registerButtonComponent = () => {
+  customElements.define('x-button', ButtonComponent);
+}