Initial button implementation

Add three buttons:

* content-kit-section-button
* content-kit-markup-button
* content-kit-link-button

Fixes #6

addon/components/content-kit-link-button/component.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+import layout from './template';
+
+let { computed } = Ember;
+
+export default Ember.Component.extend({
+  tagName: 'button',
+  layout,
+  classNameBindings: ['isActive:active'],
+  isActive: computed.bool('contentKit.activeMarkupTagNames.isA'),
+  click() {
+    let contentKit = this.get('contentKit');
+    contentKit.toggleLink();
+  }
+});

addon/components/content-kit-link-button/template.hbs

@@ -0,0 +1 @@
+{{#if hasBlock}}{{yield}}{{else}}Link{{/if~}}

addon/components/content-kit-markup-button/component.js

@@ -0,0 +1,31 @@
+import Ember from 'ember';
+import layout from './template';
+import titleize from '../../utils/titleize';
+
+let { computed, observer, defineProperty } = Ember;
+
+export default Ember.Component.extend({
+  tagName: 'button',
+  layout,
+  classNameBindings: ['isActive:active'],
+  init() {
+    this._super(...arguments);
+    this._updateIsActiveCP();
+  },
+  onForDidChange: observer('for', function() {
+    this._updateIsActiveCP();
+  }),
+  _updateIsActiveCP() {
+    let forProperty = this.get('for');
+    let fullPath = `contentKit.activeMarkupTagNames.is${titleize(forProperty)}`;
+    let cp = computed(fullPath, function() {
+      return this.get(fullPath);
+    }); 
+    defineProperty(this, 'isActive', cp);
+  },
+  click() {
+    let contentKit = this.get('contentKit');
+    let forProperty = this.get('for');
+    contentKit.toggleMarkup(forProperty);
+  }
+});

addon/components/content-kit-markup-button/template.hbs

@@ -0,0 +1 @@
+{{#if hasBlock}}{{yield}}{{else}}{{content-kit-titleize for}}{{/if~}}

addon/components/content-kit-section-button/component.js

@@ -0,0 +1,31 @@
+import Ember from 'ember';
+import layout from './template';
+import titleize from '../../utils/titleize';
+
+let { computed, observer, defineProperty } = Ember;
+
+export default Ember.Component.extend({
+  tagName: 'button',
+  layout,
+  classNameBindings: ['isActive:active'],
+  init() {
+    this._super(...arguments);
+    this._updateIsActiveCP();
+  },
+  onForDidChange: observer('for', function() {
+    this._updateIsActiveCP();
+  }),
+  _updateIsActiveCP() {
+    let forProperty = this.get('for');
+    let fullPath = `contentKit.activeSectionTagNames.is${titleize(forProperty)}`;
+    let cp = computed(fullPath, function() {
+      return this.get(fullPath);
+    }); 
+    defineProperty(this, 'isActive', cp);
+  },
+  click() {
+    let contentKit = this.get('contentKit');
+    let forProperty = this.get('for');
+    contentKit.toggleSectionTagName(forProperty);
+  }
+});

addon/components/content-kit-section-button/template.hbs

@@ -0,0 +1 @@
+{{#if hasBlock}}{{yield}}{{else}}{{content-kit-titleize for}}{{/if~}}

addon/helpers/content-kit-titleize.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import titleize from '../utils/titleize';
+
+export function contentKitTitleize([string]) {
+  return titleize(string);
+}
+
+export default Ember.Helper.helper(contentKitTitleize);

addon/utils/titleize.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+let { capitalize, camelize } = Ember.String;
+
+export default function(string) {
+  return capitalize(camelize(string));
+}

app/components/content-kit-link-button/component.js

@@ -0,0 +1 @@
+export { default } from 'ember-content-kit/components/content-kit-link-button/component';

app/components/content-kit-markup-button/component.js

@@ -0,0 +1 @@
+export { default } from 'ember-content-kit/components/content-kit-markup-button/component';

app/components/content-kit-section-button/component.js

@@ -0,0 +1 @@
+export { default } from 'ember-content-kit/components/content-kit-section-button/component';

app/content-kit-titleize/helper.js

@@ -0,0 +1 @@
+export { default, contentKitTitleize } from 'ember-content-kit/helpers/content-kit-titleize';

tests/integration/components/content-kit-link-button/component-test.js

@@ -0,0 +1,67 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+let { run, Object: EObject } = Ember;
+
+moduleForComponent('content-kit-link-button', 'Integration | Component | content kit link button', {
+  integration: true
+});
+
+test('it displays button', function(assert) {
+  let contentKit = EObject.create({
+    toggleLink() {},
+    activeMarkupTagNames: {}
+  });
+  this.set('contentKit', contentKit);
+  this.render(hbs`{{content-kit-link-button contentKit=contentKit}}`);
+
+  let button = this.$('button');
+  assert.equal(
+    button.html(), 'Link',
+    'default text is "Link"');
+  assert.ok(
+    !button.hasClass('active'),
+    'button is not active');
+
+  run(() => {
+    contentKit.set('activeMarkupTagNames', { isA: true });
+  });
+
+  assert.ok(
+    button.hasClass('active'),
+    'button activates');
+});
+
+test('it yields for html', function(assert) {
+  this.set('contentKit', {
+    toggleLink() {},
+    activeMarkupTagNames: {}
+  });
+  this.render(hbs`
+    {{~#content-kit-link-button contentKit=contentKit~}}
+      Fuerte
+    {{~/content-kit-link-button~}}
+  `);
+
+  let button = this.$('button');
+  assert.equal(
+    button.html(), 'Fuerte',
+    'text is yielded');
+});
+
+test('it calls toggleLink on click', function(assert) {
+  assert.expect(1);
+  this.set('contentKit', {
+    toggleLink() {
+      assert.ok(true, 'toggleLink called');
+    },
+    activeMarkupTagNames: {}
+  });
+  this.render(hbs`
+    {{~content-kit-link-button contentKit=contentKit~}}
+  `);
+
+  let button = this.$('button');
+  button.click();
+});

tests/integration/components/content-kit-markup-button/component-test.js

@@ -0,0 +1,68 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+let { run, Object: EObject } = Ember;
+
+moduleForComponent('content-kit-markup-button', 'Integration | Component | content kit markup button', {
+  integration: true
+});
+
+test('it displays button', function(assert) {
+  let contentKit = EObject.create({
+    toggleMarkup() {},
+    activeMarkupTagNames: {}
+  });
+  this.set('contentKit', contentKit);
+  this.render(hbs`{{content-kit-markup-button contentKit=contentKit for="strong"}}`);
+
+  let button = this.$('button');
+  assert.equal(
+    button.html(), 'Strong',
+    'default text is capitalization of `for`');
+  assert.ok(
+    !button.hasClass('active'),
+    'button is not active');
+
+  run(() => {
+    contentKit.set('activeMarkupTagNames', { isStrong: true });
+  });
+
+  assert.ok(
+    button.hasClass('active'),
+    'button activates');
+});
+
+test('it yields for html', function(assert) {
+  this.set('contentKit', {
+    toggleMarkup() {},
+    activeMarkupTagNames: {}
+  });
+  this.render(hbs`
+    {{~#content-kit-markup-button contentKit=contentKit for="strong"~}}
+      Fuerte
+    {{~/content-kit-markup-button~}}
+  `);
+
+  let button = this.$('button');
+  assert.equal(
+    button.html(), 'Fuerte',
+    'text is yielded');
+});
+
+test('it calls toggleMarkup on click', function(assert) {
+  assert.expect(2);
+  this.set('contentKit', {
+    toggleMarkup(tag) {
+      assert.ok(true, 'toggleMarkup called');
+      assert.equal(tag, 'strong', 'toggleMarkup called with "for" value');
+    },
+    activeMarkupTagNames: {}
+  });
+  this.render(hbs`
+    {{~content-kit-markup-button contentKit=contentKit for="strong"~}}
+  `);
+
+  let button = this.$('button');
+  button.click();
+});

tests/integration/components/content-kit-section-button/component-test.js

@@ -0,0 +1,68 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+let { run, Object: EObject } = Ember;
+
+moduleForComponent('content-kit-section-button', 'Integration | Component | content kit section button', {
+  integration: true
+});
+
+test('it displays button', function(assert) {
+  let contentKit = EObject.create({
+    toggleSectionTagName() {},
+    activeSectionTagNames: {}
+  });
+  this.set('contentKit', contentKit);
+  this.render(hbs`{{content-kit-section-button contentKit=contentKit for="h1"}}`);
+
+  let button = this.$('button');
+  assert.equal(
+    button.html(), 'H1',
+    'default text is capitalization of `for`');
+  assert.ok(
+    !button.hasClass('active'),
+    'button is not active');
+
+  run(() => {
+    contentKit.set('activeSectionTagNames', { isH1: true });
+  });
+
+  assert.ok(
+    button.hasClass('active'),
+    'button activates');
+});
+
+test('it yields for html', function(assert) {
+  this.set('contentKit', {
+    toggleSectionTagName() {},
+    activeSectionTagNames: {}
+  });
+  this.render(hbs`
+    {{~#content-kit-section-button contentKit=contentKit for="h1"~}}
+      Fuerte
+    {{~/content-kit-section-button~}}
+  `);
+
+  let button = this.$('button');
+  assert.equal(
+    button.html(), 'Fuerte',
+    'text is yielded');
+});
+
+test('it calls toggleSectionTagName on click', function(assert) {
+  assert.expect(2);
+  this.set('contentKit', {
+    toggleSectionTagName(tag) {
+      assert.ok(true, 'toggleSectionTagName called');
+      assert.equal(tag, 'h1', 'toggleSectionTagName called with "for" value');
+    },
+    activeSectionTagNames: {}
+  });
+  this.render(hbs`
+    {{~content-kit-section-button contentKit=contentKit for="h1"~}}
+  `);
+
+  let button = this.$('button');
+  button.click();
+});

tests/unit/helpers/content-kit-titleize-test.js

@@ -0,0 +1,10 @@
+import { contentKitTitleize } from 'ember-content-kit/helpers/content-kit-titleize';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | content kit titleize');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  var result = contentKitTitleize(['foo-bar']);
+  assert.equal(result, 'FooBar');
+});