Merge pull request #18 from miguelcobain/master

add support for color property

README.md

@@ -47,6 +47,20 @@ your different initials avatars:
 }}
 ```
 
+You can use a background-color directly you can pass in a `color` property.
+This is useful if you want to generate colors from unique strings like emails or ids.
+This background-color style will only be applied if `image` is a "falsy" value:
+
+```hbs
+{{initials-avatar
+  firstName=userGivenName
+  lastName=userFamilyName
+  company=userCompany
+  email=userEmail
+  color="#f6f8fa"
+}}
+```
+
 ## Installation
 
 * `git clone` this repository

addon/components/initials-avatar.js

@@ -31,9 +31,11 @@ export default Component.extend({
   /**
    * Display the image using a background-image inline style
    */
-  style: computed('hasImage', function() {
+  style: computed('hasImage', 'color', function() {
     if (this.get('hasImage')) {
       return htmlSafe(`background-image: url(${this.get('image')}); background-size: cover`);
+    } else if (this.get('color')) {
+      return htmlSafe(`background-color: ${this.get('color')};`);
     }
   }),
 

tests/integration/components/initials-avatar-test.js

@@ -33,3 +33,36 @@ test('displays image if one is provided', function(assert) {
   assert.equal(this.$('#initials-avatar').attr('style'), 'background-image: url(http://example.com/potus.jpg); background-size: cover');
   assert.equal(this.$('#initials-avatar').text().trim(), '');
 });
+
+test('uses color if no image', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{initials-avatar
+      id="initials-avatar"
+      color="#ffffff"
+      firstName="Barack"
+      lastName="Obama"
+    }}
+  `);
+
+  assert.equal(this.$('#initials-avatar').attr('style'), 'background-color: #ffffff;');
+  assert.equal(this.$('#initials-avatar').text().trim(), 'BO');
+});
+
+test('image supercedes color', function(assert) {
+  assert.expect(2);
+
+  this.render(hbs`
+    {{initials-avatar
+      id="initials-avatar"
+      color="#ffffff"
+      image="http://example.com/potus.jpg"
+      firstName="Barack"
+      lastName="Obama"
+    }}
+  `);
+
+  assert.equal(this.$('#initials-avatar').attr('style'), 'background-image: url(http://example.com/potus.jpg); background-size: cover');
+  assert.equal(this.$('#initials-avatar').text().trim(), '');
+});