From 07cdcb207265363a10ad5fc83ef6194a044bba4c Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 23 Mar 2020 13:58:40 +0000
Subject: [PATCH] MD Dialog Complete and Margins for Typography

---
 .../materialdesign-components/package.json    |  1 +
 .../src/Button/Button.svelte                  |  5 ++-
 .../src/Dialog/Dialog.svelte                  | 44 +++++++++++++++++++
 .../src/Dialog/DialogActions.svelte           | 13 ++++++
 .../src/Dialog/DialogContent.svelte           | 11 +++++
 .../src/Dialog/DialogHeader.svelte            |  5 +++
 .../src/Dialog/_style.scss                    |  1 +
 .../src/Dialog/index.js                       |  5 +++
 .../src/Test/TestApp.svelte                   |  4 +-
 .../src/Test/props.js                         | 42 ++++++++++++++++++
 .../src/Typography/Body1.svelte               |  8 +++-
 .../src/Typography/Caption.svelte             |  8 +++-
 .../src/Typography/H1.svelte                  |  8 +++-
 .../src/Typography/H2.svelte                  |  8 +++-
 .../src/Typography/H3.svelte                  |  8 +++-
 .../src/Typography/H4.svelte                  |  8 +++-
 .../src/Typography/H5.svelte                  |  8 +++-
 .../src/Typography/Overline.svelte            |  8 +++-
 .../src/Typography/Sub1.svelte                |  8 +++-
 .../materialdesign-components/src/index.js    |  2 +-
 20 files changed, 191 insertions(+), 14 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Dialog/Dialog.svelte
 create mode 100644 packages/materialdesign-components/src/Dialog/DialogActions.svelte
 create mode 100644 packages/materialdesign-components/src/Dialog/DialogContent.svelte
 create mode 100644 packages/materialdesign-components/src/Dialog/DialogHeader.svelte
 create mode 100644 packages/materialdesign-components/src/Dialog/_style.scss
 create mode 100644 packages/materialdesign-components/src/Dialog/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 42bea7428c..9a6fc7c616 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -17,6 +17,7 @@
     "@material/button": "^4.0.0",
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
+    "@material/dialog": "4.0.0",
     "@material/form-field": "^4.0.0",
     "@material/icon-button": "4.0.0",
     "@material/list": "4.0.0",
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index 80b3ddd792..a2948613ea 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -33,15 +33,16 @@
 
   if (!href) modifiers = { variant }
 
-  let props = { modifiers, customs, extras }
+  $: props = { modifiers, customs, extras }
 
-  let blockClasses = cb.build({ props })
+  $: blockClasses = cb.build({ props })
   const labelClass = cb.elem("label")
 
   const clicked = () => _bb.call(onClick)
 
   $: renderLeadingIcon = !!icon && !trailingIcon
   $: renderTrailingIcon = !!icon && trailingIcon
+  $: console.log(blockClasses)
 </script>
 
 {#if href}
diff --git a/packages/materialdesign-components/src/Dialog/Dialog.svelte b/packages/materialdesign-components/src/Dialog/Dialog.svelte
new file mode 100644
index 0000000000..c316c6a249
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/Dialog.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { onMount } from "svelte"
+  import { fade } from "svelte/transition"
+  import { MDCDialog } from "@material/dialog"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  let dialog
+  let dialogSurface
+  let instance
+
+  export let _bb
+  // TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side
+  export let open = true
+
+  onMount(() => {
+    instance = new MDCDialog(dialog)
+    return () => {
+      instance && instance.destroy()
+    }
+  })
+
+  $: dialogSurface && _bb.attachChildren(dialogSurface)
+
+  $: {
+    if (open) {
+      instance && instance.open()
+    } else {
+      instance && instance.close()
+    }
+  }
+</script>
+
+<div bind:this={dialog} class="mdc-dialog">
+  <div class="mdc-dialog__container">
+    <div
+      bind:this={dialogSurface}
+      class="mdc-dialog__surface"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="my-dialog-title"
+      aria-describedby="my-dialog-content" />
+  </div>
+  <div class="mdc-dialog__scrim" on:click={() => (open = false)} />
+</div>
diff --git a/packages/materialdesign-components/src/Dialog/DialogActions.svelte b/packages/materialdesign-components/src/Dialog/DialogActions.svelte
new file mode 100644
index 0000000000..1bb23cee44
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/DialogActions.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { onMount } from "svelte"
+  export let _bb
+  let dialogActions
+
+  onMount(() => {
+    _bb.setContext("BBMD:button:context", "mdc-dialog__button")
+  })
+
+  $: dialogActions && _bb.attachChildren(dialogActions)
+</script>
+
+<footer bind:this={dialogActions} class="mdc-dialog__actions" />
diff --git a/packages/materialdesign-components/src/Dialog/DialogContent.svelte b/packages/materialdesign-components/src/Dialog/DialogContent.svelte
new file mode 100644
index 0000000000..f3155ffced
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/DialogContent.svelte
@@ -0,0 +1,11 @@
+<script>
+  let dialogContent
+  export let _bb
+
+  $: dialogContent && _bb.attachChildren(dialogContent)
+</script>
+
+<div
+  class="mdc-dialog__content"
+  bind:this={dialogContent}
+  id="my-dialog-content" />
diff --git a/packages/materialdesign-components/src/Dialog/DialogHeader.svelte b/packages/materialdesign-components/src/Dialog/DialogHeader.svelte
new file mode 100644
index 0000000000..d2fda14280
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/DialogHeader.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let title = ""
+</script>
+
+<h2 class="mdc-dialog__title" id="my-dialog-title">{title}</h2>
diff --git a/packages/materialdesign-components/src/Dialog/_style.scss b/packages/materialdesign-components/src/Dialog/_style.scss
new file mode 100644
index 0000000000..fb123801ff
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/_style.scss
@@ -0,0 +1 @@
+@import "@material/dialog/mdc-dialog.scss"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Dialog/index.js b/packages/materialdesign-components/src/Dialog/index.js
new file mode 100644
index 0000000000..0776cd6543
--- /dev/null
+++ b/packages/materialdesign-components/src/Dialog/index.js
@@ -0,0 +1,5 @@
+import "./_style.scss"
+export { default as Dialog } from "./Dialog.svelte"
+export { default as DialogActions } from "./DialogActions.svelte"
+export { default as DialogContent } from "./DialogContent.svelte"
+export { default as DialogHeader } from "./DialogHeader.svelte"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index b6956809d7..83b10b5814 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -20,6 +20,7 @@
     DatePicker,
     IconButton,
     Card,
+    Dialog,
   } = props
 
   let currentComponent
@@ -31,7 +32,6 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            Button,
             BodyBoundToStore,
             Textfield,
             Select,
@@ -39,7 +39,7 @@
             Radiobuttongroup,
             DatePicker,
             IconButton,
-            Card,
+            Dialog,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index a0a2c9b3ad..320fa96596 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -265,4 +265,46 @@ export const props = {
       },
     ],
   },
+  Dialog: {
+    _component: "@budibase/materialdesign-components/Dialog",
+    _children: [
+      {
+        _component: "@budibase/materialdesign-components/DialogHeader",
+        title: "Important Message",
+        _children: [],
+      },
+      {
+        _component: "@budibase/materialdesign-components/DialogContent",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/H3",
+            text: "An announcement from your service provider",
+            _children: [],
+          },
+          {
+            _component: "@budibase/materialdesign-components/Body2",
+            text:
+              "All non-essential services will be shut down as of tomorrow. Please acknowledge that you have seen this message by confirming below.",
+            _children: [],
+          },
+        ],
+      },
+      {
+        _component: "@budibase/materialdesign-components/DialogActions",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Confirm",
+            variant: "unelevated",
+            _children: [],
+          },
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Cancel",
+            _children: [],
+          },
+        ],
+      },
+    ],
+  },
 }
diff --git a/packages/materialdesign-components/src/Typography/Body1.svelte b/packages/materialdesign-components/src/Typography/Body1.svelte
index 9d71d17e62..d653bcee98 100644
--- a/packages/materialdesign-components/src/Typography/Body1.svelte
+++ b/packages/materialdesign-components/src/Typography/Body1.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--body1">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--body1">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/Caption.svelte b/packages/materialdesign-components/src/Typography/Caption.svelte
index 84c8c39d61..33406afb1e 100644
--- a/packages/materialdesign-components/src/Typography/Caption.svelte
+++ b/packages/materialdesign-components/src/Typography/Caption.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--caption">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--caption">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/H1.svelte b/packages/materialdesign-components/src/Typography/H1.svelte
index f5daec4c67..92492a971e 100644
--- a/packages/materialdesign-components/src/Typography/H1.svelte
+++ b/packages/materialdesign-components/src/Typography/H1.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h1 class="mdc-typography--headline1">{text}</h1>
+<h1
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline1">
+  {text}
+</h1>
diff --git a/packages/materialdesign-components/src/Typography/H2.svelte b/packages/materialdesign-components/src/Typography/H2.svelte
index cd75c8facb..9576570a5c 100644
--- a/packages/materialdesign-components/src/Typography/H2.svelte
+++ b/packages/materialdesign-components/src/Typography/H2.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h2 class="mdc-typography--headline2">{text}</h2>
+<h2
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline2">
+  {text}
+</h2>
diff --git a/packages/materialdesign-components/src/Typography/H3.svelte b/packages/materialdesign-components/src/Typography/H3.svelte
index abcf5d3a78..d5f0c2b4eb 100644
--- a/packages/materialdesign-components/src/Typography/H3.svelte
+++ b/packages/materialdesign-components/src/Typography/H3.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h3 class="mdc-typography--headline3">{text}</h3>
+<h3
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline3">
+  {text}
+</h3>
diff --git a/packages/materialdesign-components/src/Typography/H4.svelte b/packages/materialdesign-components/src/Typography/H4.svelte
index b48ad4c4e4..0a0e490a3e 100644
--- a/packages/materialdesign-components/src/Typography/H4.svelte
+++ b/packages/materialdesign-components/src/Typography/H4.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h4 class="mdc-typography--headline4">{text}</h4>
+<h4
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline4">
+  {text}
+</h4>
diff --git a/packages/materialdesign-components/src/Typography/H5.svelte b/packages/materialdesign-components/src/Typography/H5.svelte
index 1854ed494c..d45e4e15ab 100644
--- a/packages/materialdesign-components/src/Typography/H5.svelte
+++ b/packages/materialdesign-components/src/Typography/H5.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h5 class="mdc-typography--headline5">{text}</h5>
+<h5
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline5">
+  {text}
+</h5>
diff --git a/packages/materialdesign-components/src/Typography/Overline.svelte b/packages/materialdesign-components/src/Typography/Overline.svelte
index 160b60b0eb..df33194a29 100644
--- a/packages/materialdesign-components/src/Typography/Overline.svelte
+++ b/packages/materialdesign-components/src/Typography/Overline.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--overline">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--overline">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/Sub1.svelte b/packages/materialdesign-components/src/Typography/Sub1.svelte
index c2092868aa..a887f7372c 100644
--- a/packages/materialdesign-components/src/Typography/Sub1.svelte
+++ b/packages/materialdesign-components/src/Typography/Sub1.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--subtitle1">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--subtitle1">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 5ae421467b..9f311cd08d 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -26,5 +26,5 @@ export { CardHeader } from "./Card"
 export { CardImage } from "./Card"
 export { CardBody } from "./Card"
 export { CardFooter } from "./Card"
-
+export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"