From 199cba6113abdfa6ce74201dfc0589fe5e5d6cde Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 23 Mar 2020 15:49:06 +0000
Subject: [PATCH] Completed MD Switch component

---
 .../materialdesign-components/package.json    |  1 +
 .../src/Switch/Switch.svelte                  | 41 +++++++++++++++++++
 .../src/Switch/_style.scss                    |  1 +
 .../src/Switch/index.js                       |  2 +
 .../src/Test/TestApp.svelte                   |  3 +-
 .../src/Test/props.js                         |  7 ++++
 .../materialdesign-components/src/index.js    |  8 +---
 7 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Switch/Switch.svelte
 create mode 100644 packages/materialdesign-components/src/Switch/_style.scss
 create mode 100644 packages/materialdesign-components/src/Switch/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 9a6fc7c616..93b4e3e233 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -24,6 +24,7 @@
     "@material/menu": "4.0.0",
     "@material/radio": "^4.0.0",
     "@material/select": "4.0.0",
+    "@material/switch": "4.0.0",
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
diff --git a/packages/materialdesign-components/src/Switch/Switch.svelte b/packages/materialdesign-components/src/Switch/Switch.svelte
new file mode 100644
index 0000000000..c98d384859
--- /dev/null
+++ b/packages/materialdesign-components/src/Switch/Switch.svelte
@@ -0,0 +1,41 @@
+<script>
+  import ClassBuilder from "../ClassBuilder.js"
+  import Formfield from "../Common/Formfield.svelte"
+  import Label from "../Common/Label.svelte"
+  export let onChange = checked => {}
+
+  export let _bb
+  export let alignEnd = true
+  export let disabled = false
+  export let checked = false
+  export let label = ""
+  export let id = "my-switch-component"
+
+  const cb = new ClassBuilder("switch")
+
+  function handleChange() {
+    checked = !checked
+    onChange(checked)
+  }
+
+  $: modifiers = { disabled, checked }
+  $: props = { modifiers }
+  $: switchCls = cb.build({ props })
+</script>
+
+<Formfield {_bb} {label} {alignEnd}>
+  <div class={switchCls} on:change={handleChange} style="margin: 0px 5px">
+    <div class="mdc-switch__track" />
+    <div class="mdc-switch__thumb-underlay">
+      <div class="mdc-switch__thumb" />
+      <input
+        type="checkbox"
+        {id}
+        class="mdc-switch__native-control"
+        role="switch"
+        aria-checked={checked}
+        {disabled}
+        {checked} />
+    </div>
+  </div>
+</Formfield>
diff --git a/packages/materialdesign-components/src/Switch/_style.scss b/packages/materialdesign-components/src/Switch/_style.scss
new file mode 100644
index 0000000000..a600664513
--- /dev/null
+++ b/packages/materialdesign-components/src/Switch/_style.scss
@@ -0,0 +1 @@
+@import "@material/switch/mdc-switch.scss";
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Switch/index.js b/packages/materialdesign-components/src/Switch/index.js
new file mode 100644
index 0000000000..f57acc1407
--- /dev/null
+++ b/packages/materialdesign-components/src/Switch/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss"
+export { default as Switch } from "./Switch.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 83b10b5814..0391a4d9b2 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -21,6 +21,7 @@
     IconButton,
     Card,
     Dialog,
+    Switch,
   } = props
 
   let currentComponent
@@ -39,7 +40,7 @@
             Radiobuttongroup,
             DatePicker,
             IconButton,
-            Dialog,
+            Switch,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 320fa96596..c5bf709045 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -307,4 +307,11 @@ export const props = {
       },
     ],
   },
+  Switch: {
+    _component: "@budibase/materialdesign-components/Switch",
+    label: "On / Off",
+    checked: true,
+    onChange: () => console.log("Switch Changed"),
+    _children: [],
+  }
 }
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 9f311cd08d..1fe55d3fa6 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -21,10 +21,6 @@ export { Menu } from "./Menu"
 export { Select } from "./Select"
 export { DatePicker } from "./DatePicker"
 export { IconButton } from "./IconButton"
-export { Card } from "./Card"
-export { CardHeader } from "./Card"
-export { CardImage } from "./Card"
-export { CardBody } from "./Card"
-export { CardFooter } from "./Card"
+export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
 export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
-
+export { Switch } from "./Switch"