app/components/add-reimbursement/template.hbs

@@ -0,0 +1 @@
+{{yield}}

app/router.js

@@ -31,5 +31,11 @@ Router.map(function() {
   });
   this.route('budget', function() {
     this.route('expenses');
+
+    this.route('reimbursements', function() {});
+  });
+
+  this.route('reimbursements', function() {
+    this.route('new');
   });
 });

app/routes/reimbursements/new.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default class ReimbursementsNewRoute extends Route {
+
+  model (params) {
+    return { params };
+  }
+
+}

app/styles/components/_reimbursement-list.scss

@@ -3,7 +3,7 @@ ul.reimbursement-list {
 
   li {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto 10rem;
     grid-row-gap: 0.5rem;
     padding-top: 1.6rem;
 

app/templates/budget.hbs

@@ -50,8 +50,11 @@
   <div id="content">
     {{#if this.reimbursementsUnconfirmed}}
       <section id="expenses-unconfirmed">
-        <header>
+        <header class="with-nav">
           <h2>Proposed Reimbursements</h2>
+          <nav>
+            <LinkTo @route="reimbursements.new" @title="Submit a reimbursement" class="button small green">add</LinkTo>
+          </nav>
         </header>
         <div class="content">
           <ReimbursementList @items={{this.reimbursementsUnconfirmed}} />
@@ -61,8 +64,11 @@
 
     {{#if this.reimbursementsConfirmed}}
       <section id="expenses-confirmed">
-        <header>
+        <header class="with-nav">
           <h2>Confirmed Expenses</h2>
+          <nav>
+            <LinkTo @route="reimbursements.new" @title="Submit a reimbursement" class="button small green">add</LinkTo>
+          </nav>
         </header>
         <div class="content">
           <ReimbursementList @items={{this.reimbursementsConfirmed}} />

app/templates/reimbursements/new.hbs

@@ -0,0 +1,13 @@
+<main class="center-column">
+
+  <section id="add-item">
+    <header>
+      <h2>Submit a reimbursement</h2>
+    </header>
+
+    <div class="content">
+      <AddReimbursement @attributes={{this.model.params}} />
+    </div>
+  </section>
+
+</main>

tests/integration/components/add-reimbursement/component-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | add-reimbursement', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<AddReimbursement />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <AddReimbursement>
+        template block text
+      </AddReimbursement>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/unit/routes/reimbursements/new-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | reimbursements/new', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:reimbursements/new');
+    assert.ok(route);
+  });
+});