From fd38267422bb1e58f3b13602dcbb976af61adc81 Mon Sep 17 00:00:00 2001
From: spwoodcock <sam.woodcock@protonmail.com>
Date: Wed, 13 Mar 2024 15:32:40 +0000
Subject: [PATCH] feat: add click event to hot-button element

---
 src/button/Button.stories.ts | 24 +++++++++++++++++++++---
 src/button/Button.ts         |  4 ++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/button/Button.stories.ts b/src/button/Button.stories.ts
index e70f8cb..b663ced 100644
--- a/src/button/Button.stories.ts
+++ b/src/button/Button.stories.ts
@@ -9,7 +9,6 @@ export default meta;
 
 export const Template: StoryObj = {
   args: {
-    children: "Button",
     intent: "primary",
     disabled: false,
   },
@@ -21,6 +20,25 @@ export const Template: StoryObj = {
       },
     },
   },
-  render: (args) =>
-    html`<hot-button ?disabled=${args.disabled}>${args.children}</hot-button>`,
+  render: (args) => {
+    let buttonRendered = false;
+    const handleClick = () => {
+      // Function required as the click event is triggered once on render
+      if (buttonRendered) {
+        alert("Button Clicked");
+        return;
+      }
+      buttonRendered = true;
+    };
+
+    return html`
+      <hot-button
+        intent=${args.intent}
+        ?disabled=${args.disabled}
+        @click=${handleClick}
+      >
+        Button
+      </hot-button>
+    `;
+  },
 };
diff --git a/src/button/Button.ts b/src/button/Button.ts
index fd68a98..b504932 100644
--- a/src/button/Button.ts
+++ b/src/button/Button.ts
@@ -51,4 +51,8 @@ export class button extends LitElement {
       <slot></slot>
     </button>`;
   }
+
+  updated(changedProperties) {
+    this.dispatchEvent(new Event("click"));
+  }
 }