Completed radiobutton, radiobutton group and checkbox group

packages/materialdesign-components/package.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "@material/checkbox": "^4.0.0",
     "@material/form-field": "^4.0.0",
+    "@material/radio": "^4.0.0",
     "@material/textfield": "^4.0.0"
   }
 }

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

@@ -5,11 +5,14 @@
   import ClassBuilder from "../ClassBuilder.js";
   import { MDCCheckbox } from "@material/checkbox";
 
+  export let onClick = item => {};
+
   export let id = "";
   export let label = "";
   export let disabled = false;
   export let alignEnd = false;
   export let indeterminate = false;
+  export let checked = false;
 
   let instance = null;
   let checkbox = null;
@@ -34,7 +37,13 @@
 
 <Formfield {label} {id} {alignEnd}>
   <div bind:this={checkbox} class={blockClass}>
-    <input type="checkbox" class={cb.elem`native-control`} {id} {disabled} />
+    <input
+      type="checkbox"
+      class={cb.elem`native-control`}
+      {id}
+      {disabled}
+      {checked}
+      on:click={onClick} />
     <div class={cb.elem`background`}>
       <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
         <path

packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte

@@ -0,0 +1,77 @@
+<script>
+  import Checkbox from "./Checkbox.svelte";
+  import Label from "../Common/Label.svelte";
+
+  export let label = "";
+  export let orientation = "row";
+  export let fullwidth = false;
+  export let onChange = selectedItems => {};
+
+  export let items = [];
+
+  export let disabled = false;
+  export let alignEnd = false;
+  let selectedItems = [];
+
+  function handleonChange(item) {
+    if (!!item.checked) {
+      item.checked = !item.checked;
+    } else {
+      item.checked = true;
+    }
+    onChange(items.filter(i => i.checked));
+  }
+</script>
+
+<style>
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox-group__boxes.row > div:not(:first-child) {
+    padding-left: 10px;
+  }
+
+  .checkbox-group > div {
+    text-align: left;
+    flex: 1;
+  }
+
+  .row {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+  }
+
+  .column {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: flex-start;
+  }
+
+  .fullwidth {
+    flex: 1;
+    text-align: left;
+  }
+</style>
+
+<div class="checkbox-group">
+  <div class="checkbox-group__label">
+    <Label text={label} bold />
+  </div>
+  <div class={`checkbox-group__boxes ${orientation}`}>
+    {#each items as item, i}
+      <div class:fullwidth>
+        <Checkbox
+          id={`${item.label}-${i}`}
+          {disabled}
+          {alignEnd}
+          indeterminate={item.indeterminate || false}
+          label={item.label}
+          checked={item.checked || false}
+          onClick={() => handleonChange(item)} />
+      </div>
+    {/each}
+  </div>
+</div>

packages/materialdesign-components/src/Checkbox/index.js

@@ -1,2 +1,4 @@
 import "./_style.scss";
 export { default as checkbox } from "./Checkbox.svelte";
+export { default as checkboxgroup } from "./CheckboxGroup.svelte";
+

packages/materialdesign-components/src/Common/Label.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let bold = false;
+  export let text = "";
+</script>
+
+<style>
+  .bold {
+    font-weight: 500;
+  }
+</style>
+
+<span class="mdc-typography" class:bold>{text}</span>

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

@@ -0,0 +1,50 @@
+<script>
+  import { onMount, onDestroy, getContext } from "svelte"
+  import Formfield from "../Common/Formfield.svelte"
+  import ClassBuilder from "../ClassBuilder.js"
+  import { MDCRadio } from "@material/radio"
+
+  export let onClick = item => {}
+
+  export let id = ""
+  export let label = ""
+  export let names = "radios"
+  export let checked = false
+  export let disabled = false
+  export let alignEnd = false
+
+  let instance = null
+  let radiobtn = null
+
+  onMount(() => {
+    if (!!radiobtn) {
+      instance = new MDCRadio(radiobtn)
+      let fieldStore = getContext("BBMD:field-element")
+      fieldStore.setInput(instance)
+    }
+  })
+
+  const cb = new ClassBuilder("radio")
+  let modifiers = { disabled }
+  let props = { modifiers }
+
+  const blockClass = cb.build({ props })
+</script>
+
+<Formfield {id} {label} {alignEnd}>
+  <div class={blockClass}>
+    <input
+      {id}
+      class={cb.elem`native-control`}
+      type="radio"
+      {names}
+      {checked}
+      {disabled}
+      on:click={onClick} />
+    <div class={cb.elem`background`}>
+      <div class={cb.elem`outer-circle`} />
+      <div class={cb.elem`inner-circle`} />
+    </div>
+    <div class={cb.elem`ripple`} />
+  </div>
+</Formfield>

packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte

@@ -0,0 +1,80 @@
+<script>
+  import Radiobutton from "./Radiobutton.svelte"
+  import Label from "../Common/Label.svelte"
+
+  export let name = "radio-group"
+  export let label = ""
+  export let orientation = "row"
+  export let fullwidth = false
+  export let alignEnd = false
+
+  export let onChange = selected => {}
+
+  export let items = []
+
+  let selected = null
+
+  $: alignRight = orientation === "column" && alignEnd
+
+  function handleOnClick(item) {
+    if (!!selected) selected.checked = false
+    item.checked = true
+    selected = item
+    items = items
+    onChange(selected)
+  }
+</script>
+
+<div class="radiobutton-group">
+  <div class="radiobutton-group__label">
+    <Label text={label} bold />
+  </div>
+  <div class={`radiobutton-group__radios ${orientation}`} class:alignRight>
+    {#each items as item, i}
+      <div class:fullwidth>
+        <Radiobutton
+          id={`${item.label}-${i}`}
+          {name}
+          {alignEnd}
+          label={item.label}
+          checked={item.checked}
+          onClick={() => handleOnClick(item)} />
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .radiobutton-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .radiobutton-group__radios.row > div:not(:first-child) {
+    padding-left: 10px;
+  }
+
+  .radiobutton-group > div {
+    flex: 1;
+  }
+
+  .alignRight {
+    text-align: right;
+  }
+
+  .row {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .column {
+    display: flex;
+    flex-flow: column wrap;
+  }
+
+  .fullwidth {
+    flex: 1;
+    text-align: left;
+  }
+</style>

packages/materialdesign-components/src/Radiobutton/_style.scss

@@ -0,0 +1,2 @@
+@import "@material/form-field/mdc-form-field";
+@import "@material/radio/mdc-radio.scss";

packages/materialdesign-components/src/Radiobutton/index.js

@@ -0,0 +1,3 @@
+import "./_style.scss";
+export { default as radiobutton } from "./Radiobutton.svelte";
+export { default as radiobuttongroup } from "./RadiobuttonGroup.svelte";

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

@@ -2,7 +2,17 @@
   import createApp from "./createApp"
   import { props } from "./props"
   let _bb
-  const { h1, overline, button, textfield, checkbox } = props
+  const {
+    h1,
+    overline,
+    button,
+    textfield,
+    checkbox,
+    checkboxgroup,
+    radiobutton,
+    radiobuttongroup,
+  } = props
+
   let currentComponent
   let _appPromise
   $: {
@@ -11,11 +21,20 @@
       const page = {
         props: {
           _component: "testcomponents/rootComponent",
-          _children: [h1, overline, button, textfield, checkbox],
+          _children: [
+            h1,
+            overline,
+            button,
+            textfield,
+            checkbox,
+            checkboxgroup,
+            radiobutton,
+            radiobuttongroup,
+          ],
         },
       }
       _appPromise.then(initialise => {
-        initialise(page, window.document.body, "")
+        initialise(page, currentComponent, "")
       })
     }
   }

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

@@ -43,5 +43,36 @@ export const props = {
     _children: [],
     id: "test-check",
     label: "Check Yo Self",
+    onClick: () => alert`Before ya reck yo'self`,
+  },
+  checkboxgroup: {
+    _component: "@budibase/materialdesign-components/checkboxgroup",
+    _children: [],
+    label: "Whats your favourite?",
+    items: [
+      { label: "Currys", indeterminate: true },
+      { label: "Chips", checked: true },
+      { label: "Pasties" },
+    ],
+    onChange: selectedItems => console.log(selectedItems),
+  },
+  radiobutton: {
+    _component: "@budibase/materialdesign-components/radiobutton",
+    _children: [],
+    label: "Hi radio",
+    alignEnd: true,
+    onClick: () => alert`Roger That`,
+  },
+  radiobuttongroup: {
+    _component: "@budibase/materialdesign-components/radiobuttongroup",
+    _children: [],
+    label: "Preferred method of contact: ",
+    orientation: "column",
+    items: [
+      { label: "Email", value: 1 },
+      { label: "Phone", value: 2 },
+      { label: "Social Media", value: 3 },
+    ],
+    onChange: selected => console.log(selected),
   }
 }

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

@@ -1,3 +1,23 @@
-import { H1, Overline, button, icon, checkbox, textfield } from "@BBMD"
+import {
+  H1,
+  Overline,
+  button,
+  icon,
+  textfield,
+  checkbox,
+  checkboxgroup,
+  radiobutton,
+  radiobuttongroup,
+} from "@BBMD"
 
-export default {H1, Overline, button, icon, checkbox, textfield }
+export default {
+  H1,
+  Overline,
+  button,
+  icon,
+  textfield,
+  checkbox,
+  checkboxgroup,
+  radiobutton,
+  radiobuttongroup,
+}

packages/materialdesign-components/src/index.js

@@ -4,11 +4,6 @@ export { button } from "./Button"
 export { default as icon } from "./Icon.svelte"
 export { textfield } from "./Textfield"
 export * from "./Typography"
-export { checkbox } from "./Checkbox"
+export { checkbox, checkboxgroup } from "./Checkbox"
+export { radiobutton, radiobuttongroup } from "./Radiobutton"
 
-// import { Button } from "./Button";
-// import Icon from "./Icon.svelte";
-// import { Textfield } from "./Textfield";
-// export { Button, Icon, Textfield };
-// export * from "./Typography";
-// export { Checkbox } from "./Checkbox";