Refactor layout of verse template and add some new components

app/components/commentary/entry.hbs

@@ -0,0 +1 @@
+<h4>Commentary</h4>

app/components/words/word-row.hbs

@@ -0,0 +1,5 @@
+<tr ...attributes>
+  <td>{{@model.greek}}</td>
+  <td>{{@model.ulb}}</td>
+  <td>{{@model.morph}}</td>
+</tr>

app/components/words/word-table.hbs

@@ -0,0 +1,11 @@
+<h4>Word Details</h4>
+<table class="word-details" ...attributes>
+  <thead>
+  <th>Greek</th>
+  <th>ULB</th>
+  <th>Morphology</th>
+  </thead>
+  {{#each @model as |word|}}
+    <Words::WordRow @model={{word}} />
+  {{/each}}
+</table>

app/styles/app.scss

@@ -2,3 +2,5 @@
 @import "ember-bootstrap/bootstrap";
 
 @import "components/scrollmenu";
+
+@import "components/words";

app/styles/components/words.scss

@@ -0,0 +1,10 @@
+table.word-details {
+  border: 1px solid grey;
+}
+
+table.word-details th,
+table.word-details td {
+  border: 1px solid grey;
+  padding: 10px;
+}
+

app/templates/verse.hbs

@@ -1,18 +1,19 @@
 <div class="container">
   <div class="row">
-    <div class="col-6">
+    <div class="col-12">
       <h1>{{model.reference}}</h1>
       <h4>Greek</h4>
       <p>{{model.greek_text}}</p>
       <h4>ULB</h4>
       <p>{{model.ulb_text}}</p>
     </div>
+  </div>
+  <div class="row">
     <div class="col-6">
-      <ul>
-        {{#each @model.words as |word|}}
-          <li>{{word.greek}} : {{word.ulb}} :  {{word.morph}}</li>
-        {{/each}}
-      </ul>
+      <Words::WordTable @model={{model.words}} />
+    </div>
+    <div class="col-6">
+      <Commentary::Entry />
     </div>
   </div>
 </div>

tests/integration/components/commentary/entry-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 | commentary/entry', 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`<Commentary::Entry />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Commentary::Entry>
+        template block text
+      </Commentary::Entry>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/words/word-row-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 | words/word-row', 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`<Words::WordRow />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Words::WordRow>
+        template block text
+      </Words::WordRow>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/words/word-table-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 | words/word-table', 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`<Words::WordTable />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Words::WordTable>
+        template block text
+      </Words::WordTable>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});