Updated

Author: djthorpe

src/button/ButtonElement.js

@@ -13,6 +13,7 @@ import { EventType } from '../core/Event';
  * @property {String} textTransform - If the button text should be transformed
  *                                    (uppercase, lowercase, capitalize)
  * @property {Boolean} disabled - Whether the button is disabled
+ * @property {String} popup - The associated popup to show when the button is clicked
  *
  * @example
  * <wc-button type="control">Close</wc-button>
@@ -30,6 +31,7 @@ export class ButtonElement extends LitElement {
     this.type = '';
     this.textTransform = '';
     this.disabled = false;
+    this.popup = '';
   }
 
   static get properties() {
@@ -38,6 +40,7 @@ export class ButtonElement extends LitElement {
       type: { type: String },
       textTransform: { type: String },
       disabled: { type: Boolean },
+      popup: { type: String },
     };
   }
 
@@ -103,25 +106,48 @@ export class ButtonElement extends LitElement {
     }
   }
 
+  firstUpdated() {
+    if (this.popup) {
+      // Attach the popover target element
+      const buttonNode = this.shadowRoot.querySelector('button');
+      const targetNode = document.getElementById(this.popup);
+      if (buttonNode && targetNode) {
+        buttonNode.popoverTargetElement = targetNode;
+      }
+    }
+  }
+
   renderButton() {
     return html`
-      <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}>
+      <button class=${this.classes.join(' ') || nothing} 
+        name=${this.name || nothing} value=${this.buttonTitle || nothing}       
+        ?disabled=${this.disabled} 
+        @click=${this.onClick}>
         <slot></slot>
       </button>
     `;
   }
 
   renderSubmit() {
     return html`
-      <button class=${this.classes.join(' ') || nothing} type="submit" ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}><slot></slot></button>
+      <button class=${this.classes.join(' ') || nothing} 
+        type="submit" ?disabled=${this.disabled} 
+        name=${this.name || nothing} value=${this.buttonTitle || nothing} 
+        ?disabled=${this.disabled} 
+        @click=${this.onClick}>
+        <slot></slot>
+      </button>
     `;
   }
 
   renderControl() {
     const icon = this.controlButtonIcon;
     if (icon) {
       return html`
-        <button class=${this.classes.join(' ') || nothing} ?disabled=${this.disabled} name=${this.name || nothing} value=${this.buttonTitle || nothing} @click=${this.onClick}>
+        <button class=${this.classes.join(' ') || nothing} 
+          name=${this.name || nothing} value=${this.buttonTitle || nothing} 
+          ?disabled=${this.disabled} 
+          @click=${this.onClick}>
           <wc-icon name=${icon}></wc-icon>
         </button>
       `;

src/index.html

@@ -84,10 +84,23 @@ <h4>Card</h4>
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                         voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                         non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                    <wc-button popup="poop">Toggle</wc-button>
+                    <wc-popup id="poop">
+                        <h4>Card</h4>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+                            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                            cupidatat
+                            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                        Popover content
+                    </wc-popup>
                 </wc-card>
                 <wc-card id="card" backgroundColor="secondary" width="2">
                     <h4>Card</h4>
-                    <wc-form-select id="backgroundColor" options='[ "primary", "secondary", "light", "dark", "black", "white", "success", "warning", "error" ]'>Background
+                    <wc-form-select id="backgroundColor"
+                        options='[ "primary", "secondary", "light", "dark", "black", "white", "success", "warning", "error" ]'>Background
                         Colour</wc-form-select>
                     <script>
                         document.querySelector('wc-form-select#backgroundColor').addEventListener('wc-change', (e) => {
@@ -116,7 +129,7 @@ <h2>Subtitle</h2>
                     <script>
                         document.querySelector('wc-control-button-group#controls').addEventListener('wc-click', (e) => {
                             var card = e.target.closest('wc-card');
-                            if(card) {
+                            if (card) {
                                 card.setAttribute('hidden', true);
                             }
                         });

src/index.js

@@ -9,6 +9,7 @@ import './app/app';
 import './layout/layout';
 import './form/form';
 import './button/button';
+import './popup/popup';
 
 // Other
 import './esbuild';

src/old/badge/BadgeElement.js renamed to src/old/component/badge/BadgeElement.js

@@ -0,0 +1,28 @@
+import { LitElement, html, nothing } from 'lit';
+
+/**
+ * @class PopupElement
+ *
+ * This class is used as a popup, which is initially hidden but can be shown indefinitely
+ * or for a specific duration.
+ *
+ * @example
+ * <wc-popup id="popup">Suprise!</wc-popup>
+ */
+export class PopupElement extends LitElement {
+  static get localName() {
+    return 'wc-popup';
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get classes() {
+    const classes = [];
+    return classes;
+  }
+
+  render() {
+    return html`
+      <div class=${this.classes.join(' ') || nothing} popover><slot></slot></div>
+    `;
+  }
+}

src/old/badge/BadgeGroupElement.js renamed to src/old/component/badge/BadgeGroupElement.js

@@ -0,0 +1,8 @@
+// CSS
+import './popup.css';
+
+// Classes
+import { PopupElement } from './PopupElement';
+
+// Web Components
+customElements.define(PopupElement.localName, PopupElement); // wc-popup