vendor eve-button as temp fix for flashing styles as text

www/components/banner/banner.js

@@ -1,7 +1,7 @@
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import bannerCss from './banner.css?type=css';
 import buttonCss from './button.css?type=css';
-import '@evergreen-wc/eve-button';
+import './eve-button.js';
 import '@evergreen-wc/eve-container';
 
 class Banner extends LitElement {
@@ -22,7 +22,6 @@ class Banner extends LitElement {
 
   static get styles() {
     return css`
-      ${unsafeCSS(buttonCss)}
       ${unsafeCSS(bannerCss)}
     `;
   }

www/components/banner/button.css

@@ -8,6 +8,7 @@
   background-color: #201e2e;
   border: 1px solid white;
   transition: 0.3s;
+  text-decoration: none;
 }
 
 :host .btn:hover,

www/components/banner/eve-button.css

@@ -0,0 +1,37 @@
+/* stylelint-disable */
+:host {
+  & .btn {
+    margin: 2px;
+    border: 1px solid var(--btn-border-color, var(--primary-color, green));
+    color: var(--btn-text-color, var(--primary-color, green));
+    background-color: var(--btn-background, var(--secondary-color, white) );
+    text-decoration:none;
+    position:relative;
+    display: inline-block;
+    border-radius: var(--btn-border-radius, 0px);
+
+    &:hover {
+      background-color: var(--btn-hover-background-color, var(--primary-color, green));
+      color: var(--btn-hover-text-color, var(--secondary-color, white));
+      border: 1px solid var(--btn-hover-border-color, var(--primary-color, green));
+    }
+  }
+  & .btn-xs {
+    padding:5px;
+    font-size:12px;
+  }
+
+  & .btn-sm {
+    padding:5px;
+    font-size:16px;
+  }
+
+  & .btn-md {
+    padding:10px;
+    font-size:20px;
+  }
+  & .btn-lg {
+    padding:15px;
+    font-size:25px;
+  }
+}

www/components/banner/eve-button.js

@@ -0,0 +1,64 @@
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import eveButtonCss from './eve-button.css';
+
+class Button extends LitElement {
+
+  static get properties() {
+    return {
+      href: {
+        type: String
+      },
+      onClick: {
+        type: Function
+      },
+      size: {
+        type: String
+      },
+      style: {
+        type: String
+      }
+    };
+  }
+
+  get styles() {
+    return css`
+      ${unsafeCSS(eveButtonCss)}
+    `;
+  }
+
+  updated() {
+    const shadow = this.shadowRoot;
+    const childNodes = Array.from(shadow.childNodes);
+
+    childNodes.forEach(childNode => {
+      if (childNode.nodeName === 'STYLE') {
+        childNode.textContent += this.style;
+      } else if (childNode.nodeName === 'A') {
+        childNode.style = this.style;
+      }
+    });
+  }
+
+  /* eslint-disable indent */
+  render() {
+    const { size, href, onClick } = this;
+
+    return html`
+      <style>
+      </style>
+      ${href
+        ? html`
+          <a class="btn btn-${size}" href="${href}">
+            <slot></slot>
+          </a>
+          `
+        : html `
+          <a class="btn btn-${size}" href="#" @click="${onClick}">
+            <slot></slot>
+          </a>
+        `}
+    `;
+  }
+}
+
+customElements.define('eve-button', Button);