Turn user avatars into a component

This allows us to add them anywhere in the app, and also to add more
features, like e.g. hover info boxes, links, and so on.

app/components/contributor-list/template.hbs

@@ -2,8 +2,7 @@
   {{#each contributors as |contributor|}}
     <tr role="button" class={{if (is-current-user contributor) "current-user"}} {{action "toggleContributorInfo" contributor}}>
       <td class="person">
-        <img class="avatar" src={{contributor.avatarURL}} alt="">
-        {{contributor.name}}
+        {{user-avatar contributor=contributor}} {{contributor.name}}
       </td>
       <td class="kredits">
         <span class="amount">{{contributor.totalKreditsEarned}}</span>

app/components/user-avatar/component.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+
+export default Component.extend({
+  contributor: null,
+  tagName: 'img',
+  classNames: ['avatar'],
+  attributeBindings: ['src'],
+  src: alias('contributor.avatarURL')
+});

app/styles/app.scss

@@ -120,3 +120,4 @@ button, input[type=submit] {
 @import "components/add-contributor";
 @import "components/proposal-list";
 @import "components/contribution-list";
+@import "components/user-avatar";

app/styles/components/_contributor-list.scss

@@ -58,12 +58,9 @@ table.contributor-list {
       &.person {
         text-align: left;
         font-size: 1.4rem;
+
         img.avatar {
-          width: 2rem;
-          height: 2rem;
-          vertical-align: middle;
           margin-right: 0.2rem;
-          border-radius: 1rem;
         }
       }
 

app/styles/components/_user-avatar.scss

@@ -0,0 +1,7 @@
+img.avatar {
+  width: 2rem;
+  height: 2rem;
+  vertical-align: middle;
+  margin-right: 0.2rem;
+  border-radius: 1rem;
+}

tests/integration/components/user-avatar/component-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | user-avatar', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`{{user-avatar}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+  });
+});