Adds initial implementation

.travis.yml

@@ -22,7 +22,6 @@ matrix:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
 before_install:
-  - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH
   - "npm config set spin false"
   - "npm install -g npm@^2"
 

addon/components/ff-checkbox-base.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'input',
+  value: null,
+  type: 'checkbox',
+
+  attributeBindings: ['type', 'checked', 'disabled', 'indeterminate', 'value'],
+
+  change() {
+    const checked = this.element.checked;
+    const indeterminate = this.element.indeterminate;
+    const value = this.get('value');
+
+    // Checked and indeterminate state have been changed, but that's not DDAU!
+    // Reset the change, send the action and wait for it to be changed manually
+    this.element.checked = this.get('checked');
+    this.element.indeterminate = this.get('indeterminate');
+
+    this.sendAction('on-change', checked, { value, indeterminate });
+  },
+});

addon/components/ff-checkbox.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+import layout from '../templates/components/ff-checkbox';
+
+export default Ember.Component.extend({
+  layout: layout,
+  value: null,
+  classNames: ['ff-checkbox'],
+
+  actions: {
+    sendChecked(checked, value) {
+      this.sendAction('on-change', checked, value);
+    }
+  }
+});

addon/templates/components/ff-checkbox.hbs

@@ -0,0 +1,8 @@
+{{ff-checkbox-base
+  on-change="sendChecked"
+  value=value
+  checked=checked
+  disabled=disabled
+  indeterminate=indeterminate
+}}
+<div class="ff-checkbox-mark"></div>

app/components/ff-checkbox-base.js

@@ -0,0 +1 @@
+export { default } from 'ff-checkbox/components/ff-checkbox-base';

app/components/ff-checkbox.js

@@ -0,0 +1 @@
+export { default } from 'ff-checkbox/components/ff-checkbox';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ff-checkbox",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Theme-able checkbox component for Ember 2.0! Supports Foundation and Bootstrap, part of Firefly UI",
   "directories": {
     "doc": "doc",
@@ -36,7 +36,8 @@
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
     "ember-try": "^0.2.2",
-    "loader.js": "^4.0.1"
+    "loader.js": "^4.0.1",
+    "phantomjs": "^2.1.7"
   },
   "keywords": [
     "ember-addon"

tests/dummy/app/controllers/application.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    toggleProperty(property) {
+      this.toggleProperty(property);
+    }
+  }
+});

tests/dummy/app/templates/application.hbs

@@ -1,18 +1,23 @@
 <h2 id="title">Welcome to Ember</h2>
 
 {{ff-checkbox
-  on-change=(action (mut checked))
-  on-indeterminate-change=(action (mut indeterminate))
   checked=checked
   indeterminate=indeterminate
+  disabled=disabled
+  on-change=(action (mut checked))
 }}
 
 <div>
-  <button {{action "toggleChecked"}}>Toggle Checked</button>
+  <button {{action "toggleProperty" "checked"}}>Toggle Checked</button>
   Checked: {{checked}}
 </div>
 
 <div>
-  <button {{action "toggleIndeterminate"}}>Toggle Indeterminate</button>
+  <button {{action "toggleProperty" "indeterminate"}}>Toggle Indeterminate</button>
   Indeterminate: {{indeterminate}}
 </div>
+
+<div>
+  <button {{action "toggleProperty" "disabled"}}>Toggle Disabled</button>
+  Disabled: {{disabled}}
+</div>

tests/index.html

@@ -21,6 +21,7 @@
     {{content-for "body"}}
     {{content-for "test-body"}}
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
     <script src="testem.js" integrity=""></script>
     <script src="assets/vendor.js"></script>
     <script src="assets/test-support.js"></script>

tests/integration/components/ff-checkbox-test.js

@@ -0,0 +1,68 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('ff-checkbox', 'Integration | Component | ff checkbox', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{ff-checkbox}}`);
+
+  assert.equal(this.$('input').length, 1);
+});
+
+
+test('it updates toggles checked property correctly', function(assert) {
+  assert.expect(4);
+
+  this.render(hbs`{{ff-checkbox checked=checked on-change=(action (mut checked))}}`);
+
+  this.$('input').click();
+
+  assert.equal(this.$('input').prop('checked'), true, 'it updates input');
+  assert.equal(this.get('checked'), true, 'it updates property');
+
+  this.$('input').click();
+
+  assert.equal(this.$('input').prop('checked'), false, 'it updates input');
+  assert.equal(this.get('checked'), false, 'it updates property');
+});
+
+test('when disabled it does not update `checked` property to true when clicked', function(assert) {
+  assert.expect(0);
+
+  this.set('onChangeAction', () => {
+      assert.ok('should not happen');
+  });
+
+  this.render(hbs`{{ff-checkbox disabled=true on-change=(action onChangeAction)}}`);
+
+  this.$('input').click();
+});
+
+test('does not update indeterminate state when no action is passed', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`{{ff-checkbox indeterminate=true}}`);
+
+  this.$('input').click();
+
+  assert.equal(this.$('input').prop('indeterminate'), true, 'it does not remove indeterminate state');
+});
+
+test('it sends the correct values on change', function(assert) {
+  assert.expect(3);
+
+  this.set('onChangeAction', (checked, { value, indeterminate }) => {
+      assert.equal(checked, false, 'sent checked value is correct');
+      assert.equal(indeterminate, false, 'sent indeterminate value is correct');
+      assert.equal(value, 'test', 'sent value is correct');
+  });
+
+  this.render(hbs`{{ff-checkbox checked=true indeterminate=true value="test" on-change=(action onChangeAction)}}`);
+
+  this.$('input').click();
+});