feat(switch): Adds switch element and documentation, closes #16

demo/pages/switch/templates/SwitchDemo.html

@@ -4,6 +4,7 @@
 <label>Toggled
     <span>{{toggledCheck}}</span>
 </label>
-<novo-switch [checked]="checked" (checkedChange)="increment(); toggled($event)"></novo-switch>
+<novo-switch [checked]="checked" (checkedChange)="increment(); toggled($event)"
+    data-automation-id="switchTest"></novo-switch>
 <novo-switch class="grapefruit"></novo-switch>
 <novo-switch disabled></novo-switch>

src/elements/switch/README.md

@@ -1,23 +1,16 @@
 # Switches & Toggles
 
-# Button
-A button clearly indicates a point of action for the user. Bullhorn buttons come in a variety of themes, custom tailored to fit your use-case.
-
 ## Usage
-
 ```javascript
 import { NOVO_BUTTON_ELEMENTS } from 'novo-elements';
 ```
 
 ##### Properties
-- `'theme' : String`
-    * Defines the theme of the button
-    * Available Values: `['primary', 'secondary', 'neutral', 'dialogue', 'negative', 'icon', 'header']`
-- `'icon' : String`
-    * Icon to be placed in the button
-    * Available Values: `['check', 'send', 'collapse']`
-- `'side' : String`
-    * Defines what side to place the icon on a **dialogue** theme button.
-    * Available Values: `['left', 'right']`
-- `'inverse' : Bool`
-    * Can be added to 'dialogue' theme buttons for buttons on a dark background
+- `'checked' : Bool`
+    * Sets the initial state to checked
+- `'disabled' : Bool`
+    * Defines whether the switch is disabled
+
+#### Outputs
+- `'checkedChange': Function`
+    * An event function that is fired when a switch is switched

src/elements/switch/Switch.e2e.js

@@ -1,11 +1,22 @@
-describe('Component: Button', () => {
+describe('Component: Switch', () => {
     beforeEach(() => {
-        browser.get('/#/button');
+        browser.get('/#/switch');
     });
 
-    it('should have <button>', () => {
-        let subject = element(by.css('demo-app button')).isPresent();
-        let result = true;
-        expect(subject).toEqual(result);
+    it('should have <novo-switch>', () => {
+        let subject = element(by.css('demo-app novo-switch')).isPresent();
+        expect(subject).toBeTruthy();
+    });
+
+    it('should fire switch event', () => {
+        let subject = element(by.css('novo-switch[data-automation-id="switchTest"]'));
+        // test switch
+        subject.click();
+        browser.sleep(300);
+        expect(subject.getAttribute('aria-checked')).toMatch('false');
+        // test switch back
+        subject.click();
+        browser.sleep(300);
+        expect(subject.getAttribute('aria-checked')).toMatch('true');
     });
 });

src/elements/switch/Switch.spec.js

@@ -1,10 +1,8 @@
-// import {DOM} from 'angular2/src/platform/dom/dom_adapter';
 import { Component } from 'angular2/core';
-// import {By} from 'angular2/platform/common_dom';
 import { beforeEach, expect, describe, it } from 'angular2/testing';
 
 import { createTestContext } from '../../testing/TestContext';
-import { NOVO_SWITCH_ELEMENTS } from './BhSwitch';
+import { NOVO_SWITCH_ELEMENTS } from './Switch';
 
 @Component({
     selector: 'test-cmp',