Add file type icons

app/components/directory-listing/template.hbs

@@ -8,6 +8,7 @@
   <tbody>
     {{#each items as |item|}}
     <tr>
+      <td class="icon">{{item-icon type=item.type}}</td>
       <td class="name">{{item.name}}</td>
       <td class="type">{{item.type}}</td>
     </tr>

app/components/item-icon/component.js

@@ -0,0 +1,9 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  classNames: ['item-icon'],
+
+  type: null,
+
+});

app/components/item-icon/template.hbs

@@ -0,0 +1 @@
+<img src="/img/file-icons/{{type}}.svg">

app/styles/app.scss

@@ -11,4 +11,5 @@ body {
   padding: 0;
 }
 
-@import "components/directory_listing";
+@import "components/directory-listing";
+@import "components/item-icon";

app/styles/components/_directory-listing.scss

@@ -18,6 +18,10 @@
       td {
         padding: 1rem 1.5rem;
 
+        &.icon {
+          width: 1rem;
+          padding-right: 0;
+        }
         &.type {
           color: #aaa;
         }

app/styles/components/_item-icon.scss

@@ -0,0 +1,8 @@
+.item-icon {
+
+  img {
+    height: 1.2rem;
+    vertical-align: middle;
+  }
+
+}

public/img/file-icons/folder.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 216 180" enable-background="new 0 0 216 180" xml:space="preserve">
+<path fill="#333" d="M212,24H94.1408L79.328,1.7813C78.586,0.668,77.338,0,76,0H4C1.7912,0,0,1.7893,0,4v24v16v116.0117
+	C0,171.0353,8.9608,180,19.9764,180h176.0472C207.0392,180,216,171.0353,216,160.0117V44V28C216,25.7893,214.2088,24,212,24z
+	 M208,40H8v-8h84h116V40z M8,8h65.8592l10.666,16H8V8z M208,160.0117C208,166.6213,202.6268,172,196.0236,172H19.9764
+	C13.3732,172,8,166.6213,8,160.0117V48h200V160.0117z"/>
+</svg>

tests/integration/components/directory-listing/component-test.js

@@ -13,6 +13,6 @@ test('it renders directory items', function(assert) {
 
   this.render(hbs`{{directory-listing items=items}}`);
 
-  assert.equal(this.$('table tbody tr:first td:first').text(), 'documents');
-  assert.equal(this.$('table tbody tr:first td:last').text(), 'folder');
+  assert.equal(this.$('table tbody tr:first td:nth-of-type(2)').text(), 'documents');
+  assert.equal(this.$('table tbody tr:first td:nth-of-type(3)').text(), 'folder');
 });

tests/integration/components/item-icon/component-test.js

@@ -0,0 +1,12 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('item-icon', 'Integration | Component | item icon', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  this.render(hbs`{{item-icon type='folder'}}`);
+
+  assert.equal(this.$('img').attr('src'), '/img/file-icons/folder.svg');
+});