Merge pull request #271 from SaladFork/feature/paper-icon-positional-…

…params

Improvements to `paper-icon`

addon/components/paper-icon.js

@@ -1,46 +1,49 @@
 import Ember from 'ember';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
-export default Ember.Component.extend(ColorMixin, {
+var PaperIconComponent = Ember.Component.extend(ColorMixin, {
   tagName: 'md-icon',
   classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'],
   classNameBindings: ['iconClass', 'sizeClass', 'spinClass'],
 
+  icon: '',
   spin: false,
   reverseSpin: false,
 
   iconClass: Ember.computed('icon', function() {
-    return Ember.String.dasherize(this.get('icon'));
+    var icon = this.getWithDefault('positionalIcon', this.get('icon'));
+    return Ember.String.dasherize(icon);
   }),
 
   spinClass: Ember.computed('spin', 'reverseSpin', function() {
     if (this.get('spin')) {
-      return ' md-spin';
+      return 'md-spin';
     } else if (this.get('reverseSpin')) {
-      return ' md-spin-reverse';
+      return 'md-spin-reverse';
     }
   }),
 
   sizeClass : Ember.computed('size', function() {
     switch(this.get('size')) {
       case 'lg':
-        return ' md-lg';
+        return 'md-lg';
       case 'sm':
-        return ' md-sm';
+        return 'md-sm';
       case 2:
-        return ' md-2x';
+        return 'md-2x';
       case 3:
-        return ' md-3x';
+        return 'md-3x';
       case 4:
-        return ' md-4x';
+        return 'md-4x';
       case 5:
-        return ' md-5x';
+        return 'md-5x';
     }
-  }),
+  })
+});
 
-  /*click() {
-    if (this.get('action')) {
-      this.sendAction('action', this.get('param'));
-    }
-  }*/
+PaperIconComponent.reopenClass({
+  positionalParams: ['positionalIcon']
 });
+
+export default PaperIconComponent;
+

tests/integration/components/paper-icon-test.js

@@ -0,0 +1,97 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-icon', 'Integration | Component | paper icon', {
+  integration: true
+});
+
+test('it renders with tag name', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`{{paper-icon}}`);
+
+  assert.ok(this.$('md-icon').length);
+});
+
+test('it renders with classes', function(assert) {
+  assert.expect(6);
+
+  this.set('icon', 'foo');
+  this.render(hbs`{{paper-icon icon=icon}}`);
+
+  const $component = this.$('md-icon');
+
+  assert.ok($component.hasClass('paper-icon'));
+  assert.ok($component.hasClass('material-icons'));
+  assert.ok($component.hasClass('foo'));
+  assert.ok($component.hasClass('md-default-theme'));
+
+  this.set('icon', 'bar');
+  assert.ok($component.hasClass('bar'));
+  assert.notOk($component.hasClass('foo'));
+});
+
+test('it renders with spin class', function(assert) {
+  assert.expect(2);
+
+  this.set('spin', true);
+  this.render(hbs`{{paper-icon spin=spin}}`);
+
+  var $component = this.$('md-icon');
+
+  assert.ok($component.hasClass('md-spin'));
+
+  this.set('spin', false);
+  assert.notOk($component.hasClass('md-spin'));
+});
+
+test('it renders with reverse spin class', function(assert) {
+  assert.expect(2);
+
+  this.set('reverseSpin', true);
+  this.render(hbs`{{paper-icon reverseSpin=reverseSpin}}`);
+
+  var $component = this.$('md-icon');
+
+  assert.ok($component.hasClass('md-spin-reverse'));
+
+  this.set('reverseSpin', false);
+  assert.notOk($component.hasClass('md-spin-reverse'));
+});
+
+test('it renders with size class', function(assert) {
+  assert.expect(6);
+
+  this.set('size', 'lg');
+  this.render(hbs`{{paper-icon size=size}}`);
+
+  var $component = this.$('md-icon');
+
+  assert.ok($component.hasClass('md-lg'));
+
+  this.set('size', 'sm');
+  assert.ok($component.hasClass('md-sm'));
+
+  this.set('size', 2);
+  assert.ok($component.hasClass('md-2x'));
+
+  this.set('size', 3);
+  assert.ok($component.hasClass('md-3x'));
+
+  this.set('size', 4);
+  assert.ok($component.hasClass('md-4x'));
+
+  this.set('size', 5);
+  assert.ok($component.hasClass('md-5x'));
+});
+
+test('it works with positional icon param', function(assert) {
+  assert.expect(3);
+
+  this.render(hbs`{{paper-icon "foo"}}`);
+  assert.ok(this.$('md-icon').hasClass('foo'));
+
+  this.render(hbs`{{paper-icon "bar"}}`);
+  assert.ok(this.$('md-icon').hasClass('bar'));
+  assert.notOk(this.$('md-icon').hasClass('foo'));
+});