From 339992f6567268a72aa79b0f55a2e758c02f76be Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 4 Dec 2019 21:49:16 +0000
Subject: [PATCH 1/6] Fix for field modal infinite render loop once closed from
 click away

---
 packages/builder/src/common/Modal.svelte      | 80 +++++++++----------
 .../builder/src/database/RecordView.svelte    |  3 +-
 2 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte
index 83479c759..0f47d553a 100644
--- a/packages/builder/src/common/Modal.svelte
+++ b/packages/builder/src/common/Modal.svelte
@@ -1,41 +1,41 @@
-<script>
-import UIkit from "uikit";
-
-export let isOpen = false;
-export let onClosed = () => {};
-export let id = "";
-
-let ukModal;
-let listenerAdded = false;
-
-$: {
-    if(ukModal && !listenerAdded) {
-        listenerAdded = true;
-        ukModal.addEventListener("hide", onClosed);
-    }
-
-    if(ukModal) {
-        if(isOpen) {
-            UIkit.modal(ukModal).show();
-        } else {
-            UIkit.modal(ukModal).hide();
-        }
-    }
-}
-
-</script>
-
-<div bind:this={ukModal} uk-modal {id}>
-    <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
-        <slot />
-    </div>
-</div>
-
-
-<style>
-
-.uk-modal-dialog {
-    border-radius: .3rem;
-}
-
+<script>
+import UIkit from "uikit";
+
+export let isOpen = false;
+export let onClosed = () => {};
+export let id = "";
+
+let ukModal;
+let listenerAdded = false;
+
+$: {
+    if(ukModal && !listenerAdded) {
+        listenerAdded = true;
+        ukModal.addEventListener("hidden", onClosed);
+    }
+
+    if(ukModal) {
+        if(isOpen) {
+            UIkit.modal(ukModal).show();
+        } else {
+            UIkit.modal(ukModal).hide();
+        }
+    }
+}
+
+</script>
+
+<div bind:this={ukModal} uk-modal {id}>
+    <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
+        <slot />
+    </div>
+</div>
+
+
+<style>
+
+.uk-modal-dialog {
+    border-radius: .3rem;
+}
+
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/database/RecordView.svelte b/packages/builder/src/database/RecordView.svelte
index d0a8f7acd..b6cf351b4 100644
--- a/packages/builder/src/database/RecordView.svelte
+++ b/packages/builder/src/database/RecordView.svelte
@@ -39,6 +39,7 @@ store.subscribe($store => {
         editingField = true;
     }
 
+
     onFinishedFieldEdit = (field) => {
         if(field) {
             store.saveField(field);
@@ -139,7 +140,7 @@ const nameChanged = ev => {
     {/if}
 
     {#if editingField}
-    <Modal bind:isOpen={editingField}>
+    <Modal bind:isOpen={editingField} onClosed={() => onFinishedFieldEdit(false) }>
         <FieldView field={fieldToEdit} 
                    onFinished={onFinishedFieldEdit}
                    allFields={record.fields} 

From 43b77a2572531e1d838b67edb944dffd1b0f052c Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 27 Jan 2020 13:10:16 +0000
Subject: [PATCH 2/6] Added rollupgenerators to md to keep builder happy

---
 .../rollup.generatorsconfig.js                     | 14 ++++++++++++++
 .../materialdesign-components/src/generators.js    |  0
 2 files changed, 14 insertions(+)
 create mode 100644 packages/materialdesign-components/rollup.generatorsconfig.js
 create mode 100644 packages/materialdesign-components/src/generators.js

diff --git a/packages/materialdesign-components/rollup.generatorsconfig.js b/packages/materialdesign-components/rollup.generatorsconfig.js
new file mode 100644
index 000000000..bbecc79c6
--- /dev/null
+++ b/packages/materialdesign-components/rollup.generatorsconfig.js
@@ -0,0 +1,14 @@
+import resolve from "rollup-plugin-node-resolve";
+
+export default {
+  input: "src/generators.js",
+  output: [
+    {
+      file: "dist/generators.js",
+      format: "esm",
+      name: "budibaseStandardComponents",
+      sourcemap: "inline"
+    }
+  ],
+  plugins: [resolve()]
+};
diff --git a/packages/materialdesign-components/src/generators.js b/packages/materialdesign-components/src/generators.js
new file mode 100644
index 000000000..e69de29bb

From ef5e9e534772243cedfd535299fe6303c23aaebc Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Wed, 29 Jan 2020 10:10:25 +0000
Subject: [PATCH 3/6] WIP: Beginnings of button and ClassBuilder

---
 .../src/Button.svelte                         | 37 ++++++++++++++++---
 .../src/ClassBuilder.js                       |  6 +++
 .../src/Test/props.js                         |  2 +-
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 packages/materialdesign-components/src/ClassBuilder.js

diff --git a/packages/materialdesign-components/src/Button.svelte b/packages/materialdesign-components/src/Button.svelte
index 639e0d3f5..1b28bf904 100644
--- a/packages/materialdesign-components/src/Button.svelte
+++ b/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" />
-
-  <span class="mdc-button__label">Button</span>
+  {#if renderLeadingIcon}
+    <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>
diff --git a/packages/materialdesign-components/src/ClassBuilder.js b/packages/materialdesign-components/src/ClassBuilder.js
new file mode 100644
index 000000000..e985b6545
--- /dev/null
+++ b/packages/materialdesign-components/src/ClassBuilder.js
@@ -0,0 +1,6 @@
+export default class ClassBuilder {
+  block = "";
+  constructor(block) {
+    this.block = `mdc-${block}`;
+  }
+}
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 00476b4fd..41f4f860a 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/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"
   }
 };

From f729863124c6b9e4d21a7cb7d6d19d5e23e62ec8 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 3 Feb 2020 18:38:09 +0000
Subject: [PATCH 4/6] functional md button and icon with ripple effect and
 classbuilder helper

---
 .../src/Button.svelte                         | 39 ------------
 .../src/Button/Button.svelte                  | 60 +++++++++++++++++++
 .../src/Button/_index.scss                    |  5 ++
 .../src/Button/_mixins.scss                   | 39 ++++++++++++
 .../src/Button/index.js                       |  2 +
 .../src/ClassBuilder.js                       | 36 ++++++++++-
 .../materialdesign-components/src/Icon.svelte | 13 ++++
 .../materialdesign-components/src/Ripple.js   | 28 +++++++++
 .../src/Test/props.js                         | 15 ++++-
 .../src/Test/testComponents.js                |  4 +-
 .../materialdesign-components/src/index.js    |  4 +-
 11 files changed, 199 insertions(+), 46 deletions(-)
 delete mode 100644 packages/materialdesign-components/src/Button.svelte
 create mode 100644 packages/materialdesign-components/src/Button/Button.svelte
 create mode 100644 packages/materialdesign-components/src/Button/_index.scss
 create mode 100644 packages/materialdesign-components/src/Button/_mixins.scss
 create mode 100644 packages/materialdesign-components/src/Button/index.js
 create mode 100644 packages/materialdesign-components/src/Icon.svelte
 create mode 100644 packages/materialdesign-components/src/Ripple.js

diff --git a/packages/materialdesign-components/src/Button.svelte b/packages/materialdesign-components/src/Button.svelte
deleted file mode 100644
index 1b28bf904..000000000
--- a/packages/materialdesign-components/src/Button.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-  import "@material/button/mdc-button.scss";
-  import "@material/button/_mixins.scss";
-
-  //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="mdc-button" {disabled}>
-  <div class="mdc-button__ripple" />
-  {#if renderLeadingIcon}
-    <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>
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
new file mode 100644
index 000000000..ecef43dd2
--- /dev/null
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -0,0 +1,60 @@
+<script>
+  import { setContext, getContext } from "svelte";
+  import Icon from "../Icon.svelte";
+  import ripple from "../Ripple.js";
+  import ClassBuilder from "../ClassBuilder.js";
+
+  const cb = new ClassBuilder("button", ["primary", "medium"]);
+
+  export let variant = "raised";
+  export let colour = "primary";
+  export let size = "medium";
+
+  export let href = "";
+  export let icon = "";
+  export let trailingIcon = false;
+  export let fullBleed = false;
+
+  export let text = "";
+  export let disabled = false;
+
+  $: if (!!icon) {
+    setContext("BBMD:icon:context", "button");
+  }
+
+  $: renderLeadingIcon = !!icon && !trailingIcon;
+  $: renderTrailingIcon = !!icon && trailingIcon;
+
+  let blockClasses = cb.blocks({
+    modifiers: !href ? [variant] : null,
+    customs: { size, colour }
+  });
+</script>
+
+<style>
+  .fullBleed {
+    width: 100%;
+  }
+</style>
+
+<!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird  -->
+{#if href}
+  <a class={blockClasses} {href} on:click>
+    <span class={cb.elements('label')}>{text}</span>
+  </a>
+{:else}
+  <button
+    use:ripple={{ colour }}
+    class={blockClasses}
+    class:fullBleed
+    {disabled}
+    on:click>
+    {#if renderLeadingIcon}
+      <Icon {icon} />
+    {/if}
+    <span class={cb.elements('label')}>{text}</span>
+    {#if renderTrailingIcon}
+      <Icon {icon} />
+    {/if}
+  </button>
+{/if}
diff --git a/packages/materialdesign-components/src/Button/_index.scss b/packages/materialdesign-components/src/Button/_index.scss
new file mode 100644
index 000000000..db3072f01
--- /dev/null
+++ b/packages/materialdesign-components/src/Button/_index.scss
@@ -0,0 +1,5 @@
+@import "@material/button/mdc-button.scss";
+@import "@material/ripple/mdc-ripple.scss";
+@import "./mixins.scss";
+
+@include bbmd-button-styles();
diff --git a/packages/materialdesign-components/src/Button/_mixins.scss b/packages/materialdesign-components/src/Button/_mixins.scss
new file mode 100644
index 000000000..909be472f
--- /dev/null
+++ b/packages/materialdesign-components/src/Button/_mixins.scss
@@ -0,0 +1,39 @@
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+
+@mixin bbmd-button-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .bbmd-mdc-button--size-large {
+    @include button-sizing($feat-structure, 21px, 40px, 15px);
+  }
+
+  .bbmd-mdc-button--size-small {
+    @include button-sizing($feat-structure, 9px, 32px, 13px);
+  }
+
+  .bbmd-mdc-button--colour-secondary {
+    //no feature target as relying on theme variable custom property
+    @include mdc-button-ink-color(secondary);
+
+    &.mdc-button--raised,
+    &.mdc-button--unelevated {
+      @include mdc-button-container-fill-color(secondary);
+      @include mdc-button-ink-color(on-secondary);
+    }
+
+    &.mdc-button--outlined {
+      @include mdc-button-outline-color(secondary);
+    }
+  }
+}
+
+@mixin button-sizing($feat, $padding, $height, $fontSize) {
+  @include mdc-feature-targets($feat) {
+    padding: 0px $padding;
+    height: $height;
+  }
+  > .mdc-button__label {
+    font-size: $fontSize;
+  }
+}
diff --git a/packages/materialdesign-components/src/Button/index.js b/packages/materialdesign-components/src/Button/index.js
new file mode 100644
index 000000000..7b0f4b393
--- /dev/null
+++ b/packages/materialdesign-components/src/Button/index.js
@@ -0,0 +1,2 @@
+import "./_index.scss";
+export { default as button } from "./Button.svelte";
diff --git a/packages/materialdesign-components/src/ClassBuilder.js b/packages/materialdesign-components/src/ClassBuilder.js
index e985b6545..f5dc8dfd3 100644
--- a/packages/materialdesign-components/src/ClassBuilder.js
+++ b/packages/materialdesign-components/src/ClassBuilder.js
@@ -1,6 +1,38 @@
 export default class ClassBuilder {
-  block = "";
-  constructor(block) {
+  constructor(block, customDefaults) {
     this.block = `mdc-${block}`;
+    this.customDefaults = customDefaults; //will be ignored when building custom classes
+  }
+
+  // classParams: {modifiers:[] (mdc), custom:[] (bbmd), extra:[] (any)}
+  blocks(classParams) {
+    let base = this.block;
+    if (classParams == undefined) return base;
+    return this.buildClass(base, classParams);
+  }
+
+  //elementName: string, classParams: {}
+  elements(elementName, classParams) {
+    let base = `${this.block}__${elementName}`;
+    if (classParams == undefined) return base;
+    return this.buildClass(base, classParams);
+  }
+
+  buildClass(base, classParams) {
+    let cls = base;
+    const { modifiers, customs, extras } = classParams;
+    if (!!modifiers) cls += modifiers.map(m => ` ${base}--${m}`).join(" ");
+    if (!!customs)
+      cls += Object.entries(customs)
+        .map(([property, value]) => {
+          //disregard falsy and values set by customDefaults constructor param
+          if (!!value && !this.customDefaults.includes(value)) {
+            //custom scss name convention = bbmd-[block | element]--[property]-[value]
+            return ` bbmd-${base}--${property}-${value}`;
+          }
+        })
+        .join("");
+    if (!!extras) cls += ` ${extras.join(" ")}`;
+    return cls.trim();
   }
 }
diff --git a/packages/materialdesign-components/src/Icon.svelte b/packages/materialdesign-components/src/Icon.svelte
new file mode 100644
index 000000000..2f51bd366
--- /dev/null
+++ b/packages/materialdesign-components/src/Icon.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { getContext } from "svelte";
+
+  export let icon = "";
+
+  let iconContext = getContext("BBMD:icon:context");
+  let cls =
+    iconContext == "button"
+      ? "material-icons mdc-button__icon"
+      : "material-icons";
+</script>
+
+<i class={cls}>{icon}</i>
diff --git a/packages/materialdesign-components/src/Ripple.js b/packages/materialdesign-components/src/Ripple.js
new file mode 100644
index 000000000..f16f43a1c
--- /dev/null
+++ b/packages/materialdesign-components/src/Ripple.js
@@ -0,0 +1,28 @@
+import { MDCRipple } from "@material/ripple";
+
+export default function ripple(
+  node,
+  props = { colour: "primary", unbounded: false }
+) {
+  node.classList.add("mdc-ripple-surface");
+  const component = new MDCRipple(node);
+  component.unbounded = props.unbounded;
+
+  if (props.colour === "secondary") {
+    node.classList.remove("mdc-ripple-surface--primary");
+    node.classList.add("mdc-ripple-surface--accent");
+  } else {
+    node.classList.add("mdc-ripple-surface--primary");
+    node.classList.remove("mdc-ripple-surface--accent");
+  }
+
+  return {
+    destroy() {
+      component.destroy();
+      node.classList.remove("mdc-ripple-surface");
+      node.classList.remove("mdc-ripple-surface--primary");
+      node.classList.remove("mdc-ripple-surface--accent");
+      component = null;
+    }
+  };
+}
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 41f4f860a..6aeb48f05 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -7,6 +7,19 @@ export const props = {
   button: {
     _component: "@budibase/materialdesign-components/button",
     _children: [],
-    variant: "raised"
+    variant: "raised",
+    colour: "secondary",
+    size: "large",
+    href: "",
+    icon: "alarm_on",
+    trailingIcon: true,
+    fullBleed: false,
+    text: "I am button",
+    disabled: false
+  },
+  icon: {
+    _component: "@budibase/materialdesign-components/icon",
+    _children: [],
+    icon: ""
   }
 };
diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js
index f03e26ea7..93a304d26 100644
--- a/packages/materialdesign-components/src/Test/testComponents.js
+++ b/packages/materialdesign-components/src/Test/testComponents.js
@@ -1,4 +1,4 @@
 import h1 from "../H1.svelte";
-import { button } from "@BBMD";
+import { button, icon } from "@BBMD";
 
-export default { h1, button };
+export default { h1, button, icon };
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index b714f3dfc..c46fe38fc 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -1,3 +1,3 @@
 export { default as h1 } from "./H1.svelte";
-export { default as button } from "./Button.svelte";
-
+export { default as icon } from "./Icon.svelte";
+export { button } from "./Button";

From 59f65335f624b1374113044fbd671d13e112657f Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 3 Feb 2020 18:48:49 +0000
Subject: [PATCH 5/6] Config updates to add bundles to build folder so that
 index.html can be un-gitignored

---
 packages/materialdesign-components/.gitignore  |  2 +-
 .../public/index.html                          | 18 ++++++++++++++++++
 .../rollup.testconfig.js                       |  4 ++--
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 packages/materialdesign-components/public/index.html

diff --git a/packages/materialdesign-components/.gitignore b/packages/materialdesign-components/.gitignore
index d1a78365b..f29fd6f0b 100644
--- a/packages/materialdesign-components/.gitignore
+++ b/packages/materialdesign-components/.gitignore
@@ -3,4 +3,4 @@ node_modules
 yarn.lock
 package-lock.json
 dist/index.js
-public/*
\ No newline at end of file
+public/build
\ No newline at end of file
diff --git a/packages/materialdesign-components/public/index.html b/packages/materialdesign-components/public/index.html
new file mode 100644
index 000000000..0008e34ed
--- /dev/null
+++ b/packages/materialdesign-components/public/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf8'>
+	<meta name='viewport' content='width=device-width'>
+
+	<title>Svelte app</title>
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+</head>
+
+<body>
+	<script src='/build/bundle.js'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/materialdesign-components/rollup.testconfig.js b/packages/materialdesign-components/rollup.testconfig.js
index 2ef69b870..e43e5f5aa 100644
--- a/packages/materialdesign-components/rollup.testconfig.js
+++ b/packages/materialdesign-components/rollup.testconfig.js
@@ -91,7 +91,7 @@ export default {
     sourcemap: true,
     format: "iife",
     name: "app",
-    file: "public/bundle.js",
+    file: "public/build/bundle.js",
     globals: {
       crypto: "crypto"
     }
@@ -104,7 +104,7 @@ export default {
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {
-        css.write("public/bundle.css");
+        css.write("public/build/bundle.css");
       },
 
       hydratable: true

From 3d743122d2414a1956b9300a1a40be75bda5d590 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 3 Feb 2020 21:10:47 +0000
Subject: [PATCH 6/6] Updating icon context if check as per Martins discussion
 point

---
 .../src/Button/Button.svelte                  | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index ecef43dd2..1bd40b2d7 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -1,42 +1,36 @@
 <script>
-  import { setContext, getContext } from "svelte";
-  import Icon from "../Icon.svelte";
-  import ripple from "../Ripple.js";
-  import ClassBuilder from "../ClassBuilder.js";
+  import { setContext, getContext } from "svelte"
+  import Icon from "../Icon.svelte"
+  import ripple from "../Ripple.js"
+  import ClassBuilder from "../ClassBuilder.js"
 
-  const cb = new ClassBuilder("button", ["primary", "medium"]);
+  const cb = new ClassBuilder("button", ["primary", "medium"])
 
-  export let variant = "raised";
-  export let colour = "primary";
-  export let size = "medium";
+  export let variant = "raised"
+  export let colour = "primary"
+  export let size = "medium"
 
-  export let href = "";
-  export let icon = "";
-  export let trailingIcon = false;
-  export let fullBleed = false;
+  export let href = ""
+  export let icon = ""
+  export let trailingIcon = false
+  export let fullBleed = false
 
-  export let text = "";
-  export let disabled = false;
+  export let text = ""
+  export let disabled = false
 
-  $: if (!!icon) {
-    setContext("BBMD:icon:context", "button");
+  $: if (icon) {
+    setContext("BBMD:icon:context", "button")
   }
 
-  $: renderLeadingIcon = !!icon && !trailingIcon;
-  $: renderTrailingIcon = !!icon && trailingIcon;
+  $: renderLeadingIcon = !!icon && !trailingIcon
+  $: renderTrailingIcon = !!icon && trailingIcon
 
   let blockClasses = cb.blocks({
     modifiers: !href ? [variant] : null,
-    customs: { size, colour }
-  });
+    customs: { size, colour },
+  })
 </script>
 
-<style>
-  .fullBleed {
-    width: 100%;
-  }
-</style>
-
 <!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird  -->
 {#if href}
   <a class={blockClasses} {href} on:click>
@@ -58,3 +52,9 @@
     {/if}
   </button>
 {/if}
+
+<style>
+  .fullBleed {
+    width: 100%;
+  }
+</style>