WIP: Beginnings of button and ClassBuilder

packages/materialdesign-components/src/Button.svelte

@@ -1,12 +1,39 @@
 <script>
   import "@material/button/mdc-button.scss";
-  export let raised = false;
+  import "@material/button/_mixins.scss";
 
-  let c = raised ? "mdc-button mdc-button--raised" : "mdc-button";
+  //TODO: How does theme color work for this?
+  //TODO: Add action for ripple
+  //TODO: Create class builder class or fn
+
+  /* 
+    ==BLOCK MODIFIERS==
+    raised = via variant prop
+    outlined = via variant prop
+    unelevated = via variant prop
+    touch = needs accessibility wrapper div
+   */
+
+  export let text = "";
+
+  //Either raised,outlined or unelevated
+  export let variant = "raised";
+  export let colour = "primary";
+  export let disabled = false; //added directly to button element (not in class)
+  export let icon = "";
+  export let trailingIcon = false;
+
+  $: renderLeadingIcon = !!icon && !trailingIcon;
+  $: renderTrailingIcon = !!icon && trailingIcon;
 </script>
 
-<button class={c}>
+<button class="mdc-button" {disabled}>
   <div class="mdc-button__ripple" />
-
+  {#if renderLeadingIcon}
-  <span class="mdc-button__label">Button</span>
+    <i class="material-icons mdc-button__icon" aria-hidden="true">{icon}</i>
+  {/if}
+  <span class="mdc-button__label">{text}</span>
+  {#if renderTrailingIcon}
+    <i class="material-icons mdc-button__icon" aria-hidden="true">{icon}</i>
+  {/if}
 </button>

packages/materialdesign-components/src/ClassBuilder.js

@@ -0,0 +1,6 @@
+export default class ClassBuilder {
+  block = "";
+  constructor(block) {
+    this.block = `mdc-${block}`;
+  }
+}

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

@@ -7,6 +7,6 @@ export const props = {
   button: {
     _component: "@budibase/materialdesign-components/button",
     _children: [],
-    raised: true
+    variant: "raised"
   }
 };