Added ButtonTheme/ButtonAttributes demo

src/demo/ButtonThemeDemo.js

@@ -0,0 +1,73 @@
+import Keyboard from "../lib";
+import "./css/ButtonThemeDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      theme: "hg-theme-default my-theme",
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      buttonTheme: [
+        {
+          class: "my-button",
+          buttons: "{enter} {bksp} q Q"
+        },
+        {
+          class: "my-button-outline",
+          buttons: "q Q b B"
+        }
+      ],
+      buttonAttributes: [
+        {
+          attribute: "aria-label",
+          value: "bee",
+          buttons: "b B"
+        }
+      ]
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    let currentLayout = this.keyboard.options.layoutName;
+    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/css/ButtonThemeDemo.css

@@ -0,0 +1,26 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
+
+.simple-keyboard.my-theme .hg-button.my-button {
+  background: blue;
+  color: white;
+}
+
+.simple-keyboard.my-theme .hg-button[aria-label] {
+  background: black;
+  color: white;
+}
+
+.simple-keyboard.my-theme .hg-button.my-button-outline {
+  border: 2px solid red;
+}

src/demo/tests/ButtonThemeDemo.test.js

@@ -0,0 +1,77 @@
+import TestUtility from '../../utils/TestUtility';
+import ButtonThemeDemo from '../ButtonThemeDemo';
+
+let testUtil = new TestUtility();
+
+it('Demo will load', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  demo.onChange("test");
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});
+
+it('Demo buttons will have proper attributes and classes', () => {
+  testUtil.setDOM();
+
+  let demo = new ButtonThemeDemo();
+
+  let buttonDOM = demo.keyboard.getButtonElement("b");
+
+  console.log("buttonDOM", buttonDOM.outerHTML);
+
+  let hasAttribute = buttonDOM.hasAttribute("aria-label");
+  expect(hasAttribute).toBeTruthy();
+
+  let hasClass = buttonDOM.classList.contains("my-button-outline");
+  expect(hasClass).toBeTruthy();
+});