MD button onclick hooked

packages/materialdesign-components/src/Button/Button.svelte

@@ -6,7 +6,7 @@
 
   const cb = new ClassBuilder("button", ["primary", "medium", "text"])
 
-  export let onClick = () => {}
+  export let onClick
 
   export let variant = "text"
   export let colour = "primary"
@@ -20,6 +20,8 @@
   export let text = ""
   export let disabled = false
 
+  export let _bb
+
   let modifiers = {}
   let customs = { size, colour }
 
@@ -30,6 +32,8 @@
   let blockClasses = cb.build({ props })
   const labelClass = cb.elem("label")
 
+  const clicked = () => _bb.call(onClick)
+
   $: if (icon) {
     setContext("BBMD:icon:context", "button")
   }
@@ -39,7 +43,7 @@
 </script>
 
 {#if href}
-  <a class={blockClasses} {href} on:click={onClick}>
+  <a class={blockClasses} {href} on:click={clicked}>
     <span class={labelClass}>{text}</span>
   </a>
 {:else}
@@ -48,7 +52,7 @@
     class={blockClasses}
     class:fullwidth
     {disabled}
-    on:click={onClick}>
+    on:click={clicked}>
     {#if renderLeadingIcon}
       <Icon {icon} />
     {/if}

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -6,6 +6,7 @@
     H1,
     Overline,
     Button,
+    BodyBoundToStore,
     Textfield,
     Checkbox,
     Checkboxgroup,
@@ -28,6 +29,7 @@
             H1,
             Overline,
             Button,
+            BodyBoundToStore,
             Textfield,
             Checkbox,
             Checkboxgroup,

packages/materialdesign-components/src/Test/props.js

@@ -43,7 +43,15 @@ export const props = {
     fullwidth: false,
     text: "I am button",
     disabled: false,
-    onClick: () => alert`Button Clicked`,
+    onClick: [
+      {
+        "##eventHandlerType": "Set State",
+        parameters: {
+          path: "surname",
+          value: "hi",
+        },
+      },
+    ],
   },
   Icon: {
     _component: "@budibase/materialdesign-components/Icon",
@@ -58,7 +66,11 @@ export const props = {
     fullwidth: true,
     maxLength: 500,
     helperText: "Add Surname",
-    onChange: text => console.log("Text: ", text),
+    value: "store.surname",
+  },
+  BodyBoundToStore: {
+    _component: "@budibase/materialdesign-components/Body1",
+    text: "store.surname",
   },
   Checkbox: {
     _component: "@budibase/materialdesign-components/Checkbox",