From 9eb0264043cdcfda4132582a2a5d312b73b1a944 Mon Sep 17 00:00:00 2001 From: Matthew Beale Date: Tue, 6 Oct 2015 12:29:57 -0400 Subject: [PATCH] Initial button implementation Add three buttons: * content-kit-section-button * content-kit-markup-button * content-kit-link-button Fixes #6 --- .../content-kit-link-button/component.js | 15 ++++ .../content-kit-link-button/template.hbs | 1 + .../content-kit-markup-button/component.js | 31 +++++++++ .../content-kit-markup-button/template.hbs | 1 + .../content-kit-section-button/component.js | 31 +++++++++ .../content-kit-section-button/template.hbs | 1 + addon/helpers/content-kit-titleize.js | 8 +++ addon/utils/titleize.js | 7 ++ .../content-kit-link-button/component.js | 1 + .../content-kit-markup-button/component.js | 1 + .../content-kit-section-button/component.js | 1 + app/content-kit-titleize/helper.js | 1 + .../content-kit-link-button/component-test.js | 67 ++++++++++++++++++ .../component-test.js | 68 +++++++++++++++++++ .../component-test.js | 68 +++++++++++++++++++ .../unit/helpers/content-kit-titleize-test.js | 10 +++ 16 files changed, 312 insertions(+) create mode 100644 addon/components/content-kit-link-button/component.js create mode 100644 addon/components/content-kit-link-button/template.hbs create mode 100644 addon/components/content-kit-markup-button/component.js create mode 100644 addon/components/content-kit-markup-button/template.hbs create mode 100644 addon/components/content-kit-section-button/component.js create mode 100644 addon/components/content-kit-section-button/template.hbs create mode 100644 addon/helpers/content-kit-titleize.js create mode 100644 addon/utils/titleize.js create mode 100644 app/components/content-kit-link-button/component.js create mode 100644 app/components/content-kit-markup-button/component.js create mode 100644 app/components/content-kit-section-button/component.js create mode 100644 app/content-kit-titleize/helper.js create mode 100644 tests/integration/components/content-kit-link-button/component-test.js create mode 100644 tests/integration/components/content-kit-markup-button/component-test.js create mode 100644 tests/integration/components/content-kit-section-button/component-test.js create mode 100644 tests/unit/helpers/content-kit-titleize-test.js diff --git a/addon/components/content-kit-link-button/component.js b/addon/components/content-kit-link-button/component.js new file mode 100644 index 0000000..80fab4d --- /dev/null +++ b/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(); + } +}); diff --git a/addon/components/content-kit-link-button/template.hbs b/addon/components/content-kit-link-button/template.hbs new file mode 100644 index 0000000..b5883cb --- /dev/null +++ b/addon/components/content-kit-link-button/template.hbs @@ -0,0 +1 @@ +{{#if hasBlock}}{{yield}}{{else}}Link{{/if~}} diff --git a/addon/components/content-kit-markup-button/component.js b/addon/components/content-kit-markup-button/component.js new file mode 100644 index 0000000..9a2a4dd --- /dev/null +++ b/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); + } +}); diff --git a/addon/components/content-kit-markup-button/template.hbs b/addon/components/content-kit-markup-button/template.hbs new file mode 100644 index 0000000..dfb7f0b --- /dev/null +++ b/addon/components/content-kit-markup-button/template.hbs @@ -0,0 +1 @@ +{{#if hasBlock}}{{yield}}{{else}}{{content-kit-titleize for}}{{/if~}} diff --git a/addon/components/content-kit-section-button/component.js b/addon/components/content-kit-section-button/component.js new file mode 100644 index 0000000..35e0721 --- /dev/null +++ b/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); + } +}); diff --git a/addon/components/content-kit-section-button/template.hbs b/addon/components/content-kit-section-button/template.hbs new file mode 100644 index 0000000..dfb7f0b --- /dev/null +++ b/addon/components/content-kit-section-button/template.hbs @@ -0,0 +1 @@ +{{#if hasBlock}}{{yield}}{{else}}{{content-kit-titleize for}}{{/if~}} diff --git a/addon/helpers/content-kit-titleize.js b/addon/helpers/content-kit-titleize.js new file mode 100644 index 0000000..adc308c --- /dev/null +++ b/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); diff --git a/addon/utils/titleize.js b/addon/utils/titleize.js new file mode 100644 index 0000000..9deadba --- /dev/null +++ b/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)); +} diff --git a/app/components/content-kit-link-button/component.js b/app/components/content-kit-link-button/component.js new file mode 100644 index 0000000..ff96db4 --- /dev/null +++ b/app/components/content-kit-link-button/component.js @@ -0,0 +1 @@ +export { default } from 'ember-content-kit/components/content-kit-link-button/component'; \ No newline at end of file diff --git a/app/components/content-kit-markup-button/component.js b/app/components/content-kit-markup-button/component.js new file mode 100644 index 0000000..1770f6d --- /dev/null +++ b/app/components/content-kit-markup-button/component.js @@ -0,0 +1 @@ +export { default } from 'ember-content-kit/components/content-kit-markup-button/component'; \ No newline at end of file diff --git a/app/components/content-kit-section-button/component.js b/app/components/content-kit-section-button/component.js new file mode 100644 index 0000000..fce7a29 --- /dev/null +++ b/app/components/content-kit-section-button/component.js @@ -0,0 +1 @@ +export { default } from 'ember-content-kit/components/content-kit-section-button/component'; \ No newline at end of file diff --git a/app/content-kit-titleize/helper.js b/app/content-kit-titleize/helper.js new file mode 100644 index 0000000..964541e --- /dev/null +++ b/app/content-kit-titleize/helper.js @@ -0,0 +1 @@ +export { default, contentKitTitleize } from 'ember-content-kit/helpers/content-kit-titleize'; diff --git a/tests/integration/components/content-kit-link-button/component-test.js b/tests/integration/components/content-kit-link-button/component-test.js new file mode 100644 index 0000000..30ac265 --- /dev/null +++ b/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(); +}); diff --git a/tests/integration/components/content-kit-markup-button/component-test.js b/tests/integration/components/content-kit-markup-button/component-test.js new file mode 100644 index 0000000..2384d46 --- /dev/null +++ b/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(); +}); diff --git a/tests/integration/components/content-kit-section-button/component-test.js b/tests/integration/components/content-kit-section-button/component-test.js new file mode 100644 index 0000000..c3ee40d --- /dev/null +++ b/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(); +}); diff --git a/tests/unit/helpers/content-kit-titleize-test.js b/tests/unit/helpers/content-kit-titleize-test.js new file mode 100644 index 0000000..8973e46 --- /dev/null +++ b/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'); +});