Updates

Author: djthorpe

src/component/button/ButtonElement.js

@@ -36,7 +36,7 @@ export class ButtonElement extends LitElement {
 
   static get styles() {
     return css`
-    button {
+    .button {
       display: inline-block;
       position: relative;
       color: var(--button-color); 
@@ -50,20 +50,21 @@ export class ButtonElement extends LitElement {
       border-bottom-left-radius: var(--button-border-radius-left);
       border-top-right-radius: var(--button-border-radius-right);
       border-bottom-right-radius: var(--button-border-radius-right);      
+      text-decoration: none;
     }
-    button:active {          
+    .button:active {          
       top: var(--button-offset-active); 
       left: var(--button-offset-active); 
       color: var(--button-color-active); 
       background-color: var(--button-background-color-active); 
       font-weight: var(--button-font-weight-active);
     }
-    button:hover {
+    .button:hover {
       color: var(--button-color-hover); 
       background-color: var(--button-background-color-hover); 
       font-weight:  var(--button-font-weight-hover);
     }
-    button:disabled {
+    .button:disabled {
       pointer-events: none;
       color: var(--button-color-disabled); 
       background-color: var(--button-background-color-disabled); 
@@ -111,7 +112,11 @@ export class ButtonElement extends LitElement {
 
   onClick() {
     this.dispatchEvent(new CustomEvent(
-      Event.EVENT_CLICK, { detail: this.name || this.textContent },
+      Event.EVENT_CLICK, { 
+        bubbles: true,
+        composed: true,
+        detail: this.name || this.textContent 
+      },
     ));
   }
 }

src/component/button/ButtonGroupElement.js

@@ -7,6 +7,10 @@ import { LitElement, html, css } from 'lit';
  * @slot - This element has a slot to include wc-button elements
  */
 export class ButtonGroupElement extends LitElement {
+    constructor() {
+        super();
+    }
+
     static get styles() {
         return css`
             :host {
@@ -24,14 +28,11 @@ export class ButtonGroupElement extends LitElement {
                 --button-border-radius-right: var(--button-border-radius);
             }
           `;
-      }
-    
+    }
+
     render() {
         return html`<slot></slot>`;
     }
-    constructor() {
-        super();
-    }
 }
 
 customElements.define('wc-button-group', ButtonGroupElement);

src/component/button/CloseButtonElement.js

@@ -75,7 +75,11 @@ export class CloseButtonElement extends LitElement {
 
     onClick() {
         this.dispatchEvent(new CustomEvent(
-            Event.EVENT_CLICK, { detail: this.name },
+            Event.EVENT_CLICK, { 
+                bubbles: true,
+                composed: true,
+                detail: this.name 
+            },
         ));
     }
 }

src/index.html

@@ -14,16 +14,16 @@
     <div class="container">
         <h1>Button Group</h1>
         <wc-button-group>
-            <wc-button name="save">Save</wc-button> 
+            <wc-button name="save" link="http://news.bbc.co.uk/">Save</wc-button>
             <wc-button name="retry">Retry</wc-button> 
-            <wc-button name="cancel">Cancel</wc-button> 
+            <wc-button name="cancel">Cancel</wc-button>
         </wc-button-group>    
     </div>
 
-    <div class="container">
+    <div class="container wc-card">
         <h1>Close Button</h1>
         <div style="position:relative; border: 1px solid red; margin: 0 100px 0 100px; padding: 5px;">
-            <wc-close></wc-close>
+            <wc-close name="close"></wc-close>
             <p>Here is some content within a container</p>
         </div>
     </div>

src/index.js

@@ -20,6 +20,17 @@ import './css/document.css';
 window.addEventListener('load', () => {
     new EventSource('/esbuild').addEventListener('change', () => location.reload());
 
+    // Button Group
+    document.querySelector('wc-button-group').addEventListener(Event.EVENT_CLICK, (evt) => {
+        console.log("Button Group Click",evt.detail);
+    });
+
+    // Card
+    document.querySelector('.wc-card').addEventListener(Event.EVENT_CLICK, (evt) => {
+        console.log("Card Click",evt.detail);
+    });
+
+    // Provider
     var p = new Provider("http://localhost:8000/");
     p.addEventListener(Event.EVENT_ERROR,(evt) => {
         console.log("Got error:",evt);