From 996f0141140db012a948dbec89ba084a62c0467b Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 16:48:07 -0400
Subject: [PATCH 1/4] chore: Use anonymous rose component as table cells

---
 addons/rose/addon/components/rose/table.js    |  4 ++
 .../rose/addon/components/rose/table/body.js  |  3 ++
 .../rose/addon/components/rose/table/cell.js  |  7 ----
 .../addon/components/rose/table/footer.js     |  3 ++
 .../addon/components/rose/table/header.js     |  3 ++
 .../rose/addon/components/rose/table/row.js   |  3 ++
 .../templates/components/rose/table/cell.hbs  |  9 -----
 .../components/rose/table/footer.hbs          |  2 +-
 .../templates/components/rose/table/row.hbs   | 18 +++++++--
 addons/rose/app/components/rose/table/cell.js |  1 -
 .../rose/tests/dummy/app/templates/index.hbs  | 29 +++++++++++---
 .../components/rose/table/body-test.js        | 12 +-----
 .../components/rose/table/cell-test.js        | 39 -------------------
 .../components/rose/table/footer-test.js      | 10 -----
 .../components/rose/table/header-test.js      | 10 -----
 .../components/rose/table/row-test.js         | 13 ++++++-
 16 files changed, 68 insertions(+), 98 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/table/cell.js
 delete mode 100644 addons/rose/addon/templates/components/rose/table/cell.hbs
 delete mode 100644 addons/rose/app/components/rose/table/cell.js
 delete mode 100644 addons/rose/tests/integration/components/rose/table/cell-test.js

diff --git a/addons/rose/addon/components/rose/table.js b/addons/rose/addon/components/rose/table.js
index bd991b9d8..ad4115469 100644
--- a/addons/rose/addon/components/rose/table.js
+++ b/addons/rose/addon/components/rose/table.js
@@ -1,6 +1,10 @@
 import Component from '@ember/component';
 import layout from '../../templates/components/rose/table';
 
+/**
+ * A table component that support displaying rows of data as header, body, and footer.
+ * Supports setting a caption for a11y.
+ */
 export default Component.extend({
   layout,
   tagName: '',
diff --git a/addons/rose/addon/components/rose/table/body.js b/addons/rose/addon/components/rose/table/body.js
index 2702ed983..eebd02b73 100644
--- a/addons/rose/addon/components/rose/table/body.js
+++ b/addons/rose/addon/components/rose/table/body.js
@@ -1,6 +1,9 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/table/body';
 
+/**
+ * A table body component that uses tbody table element.
+ */
 export default Component.extend({
   layout,
   tagName: '',
diff --git a/addons/rose/addon/components/rose/table/cell.js b/addons/rose/addon/components/rose/table/cell.js
deleted file mode 100644
index 3943c8054..000000000
--- a/addons/rose/addon/components/rose/table/cell.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/cell';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/table/footer.js b/addons/rose/addon/components/rose/table/footer.js
index ff0346354..3e1ab08bb 100644
--- a/addons/rose/addon/components/rose/table/footer.js
+++ b/addons/rose/addon/components/rose/table/footer.js
@@ -1,6 +1,9 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/table/footer';
 
+/**
+ * A table footer component that uses tfoot table element.
+ */
 export default Component.extend({
   layout,
   tagName: '',
diff --git a/addons/rose/addon/components/rose/table/header.js b/addons/rose/addon/components/rose/table/header.js
index bcc2ff040..c762042d4 100644
--- a/addons/rose/addon/components/rose/table/header.js
+++ b/addons/rose/addon/components/rose/table/header.js
@@ -1,6 +1,9 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/table/header';
 
+/**
+ * A table header component that uses thead table element.
+ */
 export default Component.extend({
   layout,
   tagName: '',
diff --git a/addons/rose/addon/components/rose/table/row.js b/addons/rose/addon/components/rose/table/row.js
index 4012b9afd..58be69420 100644
--- a/addons/rose/addon/components/rose/table/row.js
+++ b/addons/rose/addon/components/rose/table/row.js
@@ -1,6 +1,9 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/table/row';
 
+/**
+ * A table row component that uses tr table element.
+ */
 export default Component.extend({
   layout,
   tagName: '',
diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs
deleted file mode 100644
index 5cfc41c8d..000000000
--- a/addons/rose/addon/templates/components/rose/table/cell.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-{{#if @header}}
-  <th ...attributes class="rose-table-cell rose-table-header-cell">
-    {{yield}}
-  </th>
-{{else}}
-  <td ...attributes class="{{concat "rose-table-cell" (if @footer " rose-table-footer-cell" " rose-table-body-cell")}}">
-    {{yield}}
-  </td>
-{{/if}}
diff --git a/addons/rose/addon/templates/components/rose/table/footer.hbs b/addons/rose/addon/templates/components/rose/table/footer.hbs
index 107b0b53f..560a1ff72 100644
--- a/addons/rose/addon/templates/components/rose/table/footer.hbs
+++ b/addons/rose/addon/templates/components/rose/table/footer.hbs
@@ -1,5 +1,5 @@
 <tfoot ...attributes class="rose-table-footer">
   {{yield (hash
-    row=(component 'rose/table/row' footer=true)
+    row=(component 'rose/table/row')
   )}}
 </tfoot>
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
index aae991def..5bfb9f587 100644
--- a/addons/rose/addon/templates/components/rose/table/row.hbs
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -1,5 +1,17 @@
 <tr ...attributes class="rose-table-row">
-  {{yield (hash
-    cell=(component 'rose/table/cell' header=@header footer=@footer)
-  )}}
+  {{#if @header}}
+    {{yield (hash
+      cell=(component 'rose/anonymous'
+        tagName='th'
+        classNames='rose-table-cell rose-table-header-cell'
+      )
+    )}}
+  {{else}}
+    {{yield (hash
+      cell=(component 'rose/anonymous'
+        tagName='td'
+        classNames='rose-table-cell'
+      )
+    )}}
+  {{/if}}
 </tr>
diff --git a/addons/rose/app/components/rose/table/cell.js b/addons/rose/app/components/rose/table/cell.js
deleted file mode 100644
index 7e3b6e8b8..000000000
--- a/addons/rose/app/components/rose/table/cell.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/table/cell';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 2974ba49c..3554ea5f2 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,6 +1,23 @@
-<Rose::List::KeyValue as |list|>
-  <list.item as |item|>
-    <item.cell>Key</item.cell>
-    <item.cell>Value</item.cell>
-  </list.item>
-</Rose::List::KeyValue>
+<Rose::Table as |table|>
+  <table.header as |header|>
+    <header.row as |row|>
+      <row.cell>Address</row.cell>
+      <row.cell>Host Set</row.cell>
+      <row.cell>Name</row.cell>
+      <row.cell>Description</row.cell>
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell>1.1.1.1</row.cell>
+      <row.cell>host-set-1, host-set-2</row.cell>
+      <row.cell>optional name</row.cell>
+      <row.cell>description</row.cell>
+    </body.row>
+  </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell>Footer</row.cell>
+    </footer.row>
+  </table.footer>
+</Rose::Table>
diff --git a/addons/rose/tests/integration/components/rose/table/body-test.js b/addons/rose/tests/integration/components/rose/table/body-test.js
index e7c026883..c427d17b3 100644
--- a/addons/rose/tests/integration/components/rose/table/body-test.js
+++ b/addons/rose/tests/integration/components/rose/table/body-test.js
@@ -17,20 +17,10 @@ module('Integration | Component | rose/table/body', function (hooks) {
     assert.ok(find('#body'));
   });
 
-  test('it renders with row', async function (assert) {
+  test('it renders a row', async function (assert) {
     await render(hbs`<Rose::Table::Body as |body|>
       <body.row />
     </Rose::Table::Body>`);
     assert.ok(find('tr'));
   });
-
-  test('it renders with row cell', async function (assert) {
-    await render(hbs`<Rose::Table::Body as |body|>
-      <body.row as |row|>
-        <row.cell />
-      </body.row>
-    </Rose::Table::Body>`);
-    assert.ok(find('td'));
-    assert.ok(find('.rose-table-body-cell'));
-  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js
deleted file mode 100644
index aeec60376..000000000
--- a/addons/rose/tests/integration/components/rose/table/cell-test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/table/cell', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Cell />`);
-    assert.ok(find('td'));
-    assert.ok(find('.rose-table-cell'));
-    assert.ok(find('.rose-table-body-cell'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::Cell id="cell"/>`);
-    assert.ok(find('#cell'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Table::Cell>
-      Cell content
-    </Rose::Table::Cell>`);
-    assert.equal(find('.rose-table-cell').textContent.trim(), 'Cell content');
-  });
-
-  test('it renders as header cell', async function (assert) {
-    await render(hbs`<Rose::Table::Cell @header={{true}}/>`);
-    assert.ok(find('.rose-table-cell'));
-    assert.ok(find('.rose-table-header-cell'));
-  });
-
-  test('it renders as footer cell', async function (assert) {
-    await render(hbs`<Rose::Table::Cell @footer={{true}}/>`);
-    assert.ok(find('.rose-table-cell'));
-    assert.ok(find('.rose-table-footer-cell'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/table/footer-test.js b/addons/rose/tests/integration/components/rose/table/footer-test.js
index 1e4cd8997..235e4e573 100644
--- a/addons/rose/tests/integration/components/rose/table/footer-test.js
+++ b/addons/rose/tests/integration/components/rose/table/footer-test.js
@@ -23,14 +23,4 @@ module('Integration | Component | rose/table/footer', function (hooks) {
     </Rose::Table::Footer>`);
     assert.ok(find('tr'));
   });
-
-  test('it renders with row cell', async function (assert) {
-    await render(hbs`<Rose::Table::Footer as |footer|>
-      <footer.row as |row|>
-        <row.cell />
-      </footer.row>
-    </Rose::Table::Footer>`);
-    assert.ok(find('td'));
-    assert.ok(find('.rose-table-cell'));
-  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/header-test.js b/addons/rose/tests/integration/components/rose/table/header-test.js
index f6ae7c289..43862929f 100644
--- a/addons/rose/tests/integration/components/rose/table/header-test.js
+++ b/addons/rose/tests/integration/components/rose/table/header-test.js
@@ -23,14 +23,4 @@ module('Integration | Component | rose/table/header', function (hooks) {
     </Rose::Table::Header>`);
     assert.ok(find('tr'));
   });
-
-  test('it renders with row cell', async function (assert) {
-    await render(hbs`<Rose::Table::Header as |header|>
-      <header.row as |row|>
-        <row.cell />
-      </header.row>
-    </Rose::Table::Header>`);
-    assert.ok(find('th'));
-    assert.ok(find('.rose-table-header-cell'));
-  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js
index efb3182d4..bd9268c70 100644
--- a/addons/rose/tests/integration/components/rose/table/row-test.js
+++ b/addons/rose/tests/integration/components/rose/table/row-test.js
@@ -17,10 +17,21 @@ module('Integration | Component | rose/table/row', function (hooks) {
     assert.ok(find('#row'));
   });
 
-  test('it renders with cell', async function (assert) {
+  test('it renders a cell', async function (assert) {
     await render(hbs`<Rose::Table::Row as |row|>
       <row.cell />
     </Rose::Table::Row>`);
+    assert.ok(find('td'));
     assert.ok(find('.rose-table-cell'));
   });
+
+  test('it renders a header cell', async function (assert) {
+    await render(hbs`<Rose::Table::Row @header={{true}} as |row|>
+      <row.cell />
+    </Rose::Table::Row>`);
+    assert.ok(find('th'));
+    assert.notOk(find('td'));
+    assert.ok(find('.rose-table-cell'));
+    assert.ok(find('.rose-table-header-cell'));
+  });
 });

From 704bc263c8aa39753bef31ba530511933369e16d Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 18:27:31 -0400
Subject: [PATCH 2/4] chore: Add table section component

Remove table header, footer, and body components as section component is
used to build them.
---
 .../rose/addon/components/rose/table/body.js  | 10 -------
 .../addon/components/rose/table/footer.js     | 10 -------
 .../addon/components/rose/table/header.js     | 10 -------
 .../rose/addon/components/rose/table/row.js   |  3 ++-
 .../addon/components/rose/table/section.js    | 11 ++++++++
 .../addon/templates/components/rose/table.hbs | 15 ++++++++---
 .../templates/components/rose/table/body.hbs  |  5 ----
 .../components/rose/table/footer.hbs          |  5 ----
 .../components/rose/table/header.hbs          |  5 ----
 .../templates/components/rose/table/row.hbs   | 23 +++++-----------
 .../components/rose/table/section.hbs         |  6 +++++
 addons/rose/app/components/rose/table/body.js |  1 -
 .../rose/app/components/rose/table/footer.js  |  1 -
 .../rose/app/components/rose/table/header.js  |  1 -
 .../rose/app/components/rose/table/section.js |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  2 +-
 .../components/rose/table/body-test.js        | 26 ------------------
 .../components/rose/table/footer-test.js      | 26 ------------------
 .../components/rose/table/header-test.js      | 26 ------------------
 .../components/rose/table/row-test.js         | 19 +++----------
 .../components/rose/table/section-test.js     | 27 +++++++++++++++++++
 21 files changed, 70 insertions(+), 163 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/table/body.js
 delete mode 100644 addons/rose/addon/components/rose/table/footer.js
 delete mode 100644 addons/rose/addon/components/rose/table/header.js
 create mode 100644 addons/rose/addon/components/rose/table/section.js
 delete mode 100644 addons/rose/addon/templates/components/rose/table/body.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/table/footer.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/table/header.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/table/section.hbs
 delete mode 100644 addons/rose/app/components/rose/table/body.js
 delete mode 100644 addons/rose/app/components/rose/table/footer.js
 delete mode 100644 addons/rose/app/components/rose/table/header.js
 create mode 100644 addons/rose/app/components/rose/table/section.js
 delete mode 100644 addons/rose/tests/integration/components/rose/table/body-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/table/footer-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/table/header-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/section-test.js

diff --git a/addons/rose/addon/components/rose/table/body.js b/addons/rose/addon/components/rose/table/body.js
deleted file mode 100644
index eebd02b73..000000000
--- a/addons/rose/addon/components/rose/table/body.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/body';
-
-/**
- * A table body component that uses tbody table element.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/table/footer.js b/addons/rose/addon/components/rose/table/footer.js
deleted file mode 100644
index 3e1ab08bb..000000000
--- a/addons/rose/addon/components/rose/table/footer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/footer';
-
-/**
- * A table footer component that uses tfoot table element.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/table/header.js b/addons/rose/addon/components/rose/table/header.js
deleted file mode 100644
index c762042d4..000000000
--- a/addons/rose/addon/components/rose/table/header.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/header';
-
-/**
- * A table header component that uses thead table element.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/table/row.js b/addons/rose/addon/components/rose/table/row.js
index 58be69420..bf4bc17bf 100644
--- a/addons/rose/addon/components/rose/table/row.js
+++ b/addons/rose/addon/components/rose/table/row.js
@@ -2,7 +2,8 @@ import Component from '@ember/component';
 import layout from '../../../templates/components/rose/table/row';
 
 /**
- * A table row component that uses tr table element.
+ * A table row component that uses tr table element and 
+ * configures a table cell element.
  */
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/table/section.js b/addons/rose/addon/components/rose/table/section.js
new file mode 100644
index 000000000..503ed969b
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/section.js
@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/section';
+
+/**
+ * A table section component that configures a row component.
+ * Section can be: thead, tbody, or tfoot table elements.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
index 580885405..ae0208227 100644
--- a/addons/rose/addon/templates/components/rose/table.hbs
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -4,8 +4,17 @@
   {{/if}}
 
   {{yield (hash
-    header=(component 'rose/table/header')
-    body=(component 'rose/table/body')
-    footer=(component 'rose/table/footer')
+    header=(component 'rose/table/section'
+      tagName='thead'
+      cellTagName='th'
+      classNames='rose-table-header')
+    body=(component 'rose/table/section'
+      tagName='tbody'
+      cellTagName='td'
+      classNames='rose-table-body')
+    footer=(component 'rose/table/section'
+      tagName='tfoot'
+      cellTagName='td'
+      classNames='rose-table-foot')
   )}}
 </table>
diff --git a/addons/rose/addon/templates/components/rose/table/body.hbs b/addons/rose/addon/templates/components/rose/table/body.hbs
deleted file mode 100644
index f82c64d04..000000000
--- a/addons/rose/addon/templates/components/rose/table/body.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<tbody ...attributes class="rose-table-body">
-  {{yield (hash
-    row=(component 'rose/table/row')
-  )}}
-</tbody>
diff --git a/addons/rose/addon/templates/components/rose/table/footer.hbs b/addons/rose/addon/templates/components/rose/table/footer.hbs
deleted file mode 100644
index 560a1ff72..000000000
--- a/addons/rose/addon/templates/components/rose/table/footer.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<tfoot ...attributes class="rose-table-footer">
-  {{yield (hash
-    row=(component 'rose/table/row')
-  )}}
-</tfoot>
diff --git a/addons/rose/addon/templates/components/rose/table/header.hbs b/addons/rose/addon/templates/components/rose/table/header.hbs
deleted file mode 100644
index 13344bc99..000000000
--- a/addons/rose/addon/templates/components/rose/table/header.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<thead ...attributes class="rose-table-header">
-  {{yield (hash
-    row=(component 'rose/table/row' header=true)
-  )}}
-</thead>
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
index 5bfb9f587..4ed16dac0 100644
--- a/addons/rose/addon/templates/components/rose/table/row.hbs
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -1,17 +1,6 @@
-<tr ...attributes class="rose-table-row">
-  {{#if @header}}
-    {{yield (hash
-      cell=(component 'rose/anonymous'
-        tagName='th'
-        classNames='rose-table-cell rose-table-header-cell'
-      )
-    )}}
-  {{else}}
-    {{yield (hash
-      cell=(component 'rose/anonymous'
-        tagName='td'
-        classNames='rose-table-cell'
-      )
-    )}}
-  {{/if}}
-</tr>
+{{yield (hash
+  cell=(component 'rose/anonymous'
+    tagName=@cellTagName
+    class='rose-table-cell'
+  )
+)}}
diff --git a/addons/rose/addon/templates/components/rose/table/section.hbs b/addons/rose/addon/templates/components/rose/table/section.hbs
new file mode 100644
index 000000000..b1b8b1d65
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/section.hbs
@@ -0,0 +1,6 @@
+{{yield (hash
+  row=(component 'rose/table/row'
+    tagName='tr'
+    cellTagName=@cellTagName
+    class='rose-table-row')
+)}}
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/table/body.js b/addons/rose/app/components/rose/table/body.js
deleted file mode 100644
index bf58d0690..000000000
--- a/addons/rose/app/components/rose/table/body.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/table/body';
diff --git a/addons/rose/app/components/rose/table/footer.js b/addons/rose/app/components/rose/table/footer.js
deleted file mode 100644
index 8fedb5800..000000000
--- a/addons/rose/app/components/rose/table/footer.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/table/footer';
diff --git a/addons/rose/app/components/rose/table/header.js b/addons/rose/app/components/rose/table/header.js
deleted file mode 100644
index c0a585fe7..000000000
--- a/addons/rose/app/components/rose/table/header.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/table/header';
diff --git a/addons/rose/app/components/rose/table/section.js b/addons/rose/app/components/rose/table/section.js
new file mode 100644
index 000000000..a1f01158a
--- /dev/null
+++ b/addons/rose/app/components/rose/table/section.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/section';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 3554ea5f2..2960a10fc 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -20,4 +20,4 @@
       <row.cell>Footer</row.cell>
     </footer.row>
   </table.footer>
-</Rose::Table>
+</Rose::Table>
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/table/body-test.js b/addons/rose/tests/integration/components/rose/table/body-test.js
deleted file mode 100644
index c427d17b3..000000000
--- a/addons/rose/tests/integration/components/rose/table/body-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/table/body', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Body />`);
-    assert.ok(find('tbody'));
-    assert.ok(find('.rose-table-body'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::Body id="body"/>`);
-    assert.ok(find('#body'));
-  });
-
-  test('it renders a row', async function (assert) {
-    await render(hbs`<Rose::Table::Body as |body|>
-      <body.row />
-    </Rose::Table::Body>`);
-    assert.ok(find('tr'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/table/footer-test.js b/addons/rose/tests/integration/components/rose/table/footer-test.js
deleted file mode 100644
index 235e4e573..000000000
--- a/addons/rose/tests/integration/components/rose/table/footer-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/table/footer', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Footer />`);
-    assert.ok(find('tfoot'));
-    assert.ok(find('.rose-table-footer'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::Footer id="footer"/>`);
-    assert.ok(find('#footer'));
-  });
-
-  test('it renders with row', async function (assert) {
-    await render(hbs`<Rose::Table::Footer as |footer|>
-      <footer.row />
-    </Rose::Table::Footer>`);
-    assert.ok(find('tr'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/table/header-test.js b/addons/rose/tests/integration/components/rose/table/header-test.js
deleted file mode 100644
index 43862929f..000000000
--- a/addons/rose/tests/integration/components/rose/table/header-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/table/header', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Header />`);
-    assert.ok(find('thead'));
-    assert.ok(find('.rose-table-header'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::Header id="header"/>`);
-    assert.ok(find('#header'));
-  });
-
-  test('it renders with row', async function (assert) {
-    await render(hbs`<Rose::Table::Header as |header|>
-      <header.row />
-    </Rose::Table::Header>`);
-    assert.ok(find('tr'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js
index bd9268c70..96cf77369 100644
--- a/addons/rose/tests/integration/components/rose/table/row-test.js
+++ b/addons/rose/tests/integration/components/rose/table/row-test.js
@@ -7,31 +7,20 @@ module('Integration | Component | rose/table/row', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Row />`);
-    assert.ok(find('tr'));
-    assert.ok(find('.rose-table-row'));
+    await render(hbs`<Rose::Table::Row @tagName='tag'/>`);
+    assert.ok(find('tag'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::Row id="row"/>`);
+    await render(hbs`<Rose::Table::Row  @tagName='tag' id="row"/>`);
     assert.ok(find('#row'));
   });
 
   test('it renders a cell', async function (assert) {
-    await render(hbs`<Rose::Table::Row as |row|>
+    await render(hbs`<Rose::Table::Row @tagName='tr' @cellTagName='td' as |row|>
       <row.cell />
     </Rose::Table::Row>`);
     assert.ok(find('td'));
     assert.ok(find('.rose-table-cell'));
   });
-
-  test('it renders a header cell', async function (assert) {
-    await render(hbs`<Rose::Table::Row @header={{true}} as |row|>
-      <row.cell />
-    </Rose::Table::Row>`);
-    assert.ok(find('th'));
-    assert.notOk(find('td'));
-    assert.ok(find('.rose-table-cell'));
-    assert.ok(find('.rose-table-header-cell'));
-  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/section-test.js b/addons/rose/tests/integration/components/rose/table/section-test.js
new file mode 100644
index 000000000..5d91cf920
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/section-test.js
@@ -0,0 +1,27 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/table/section', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Table::Section @tagName='tag' class='tag-class'/>`);
+    assert.ok(find('tag'));
+    assert.ok(find('.tag-class'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Table::section @tagName='tag' id="section"/>`);
+    assert.ok(find('#section'));
+  });
+
+  test('it renders a row', async function (assert) {
+    await render(hbs`<Rose::Table::Section @tagName='tag' cellTagName={{this.cellTagName}} as |section|>
+      <section.row />
+    </Rose::Table::Section>`);
+    assert.ok(find('tr'));
+    assert.ok(find('.rose-table-row'));
+  });
+});

From eb230d2f9bf2584791aa4fedea2bd8f81a028d2b Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 18:29:50 -0400
Subject: [PATCH 3/4] style: Format table updates

---
 addons/rose/addon/components/rose/table/row.js                  | 2 +-
 addons/rose/app/components/rose/table/section.js                | 2 +-
 .../tests/integration/components/rose/table/section-test.js     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/components/rose/table/row.js b/addons/rose/addon/components/rose/table/row.js
index bf4bc17bf..e94f0cf28 100644
--- a/addons/rose/addon/components/rose/table/row.js
+++ b/addons/rose/addon/components/rose/table/row.js
@@ -2,7 +2,7 @@ import Component from '@ember/component';
 import layout from '../../../templates/components/rose/table/row';
 
 /**
- * A table row component that uses tr table element and 
+ * A table row component that uses tr table element and
  * configures a table cell element.
  */
 export default Component.extend({
diff --git a/addons/rose/app/components/rose/table/section.js b/addons/rose/app/components/rose/table/section.js
index a1f01158a..18f14b39b 100644
--- a/addons/rose/app/components/rose/table/section.js
+++ b/addons/rose/app/components/rose/table/section.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/table/section';
\ No newline at end of file
+export { default } from 'rose/components/rose/table/section';
diff --git a/addons/rose/tests/integration/components/rose/table/section-test.js b/addons/rose/tests/integration/components/rose/table/section-test.js
index 5d91cf920..a64c1d335 100644
--- a/addons/rose/tests/integration/components/rose/table/section-test.js
+++ b/addons/rose/tests/integration/components/rose/table/section-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/table/section', function(hooks) {
+module('Integration | Component | rose/table/section', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {

From c62cda353f6156222df13bd9c2d18b4536655a2c Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 14 Aug 2020 11:10:05 -0400
Subject: [PATCH 4/4] chore: Add headerCell definition to rose/table

---
 .../addon/components/rose/table.stories.mdx   | 20 +++++++++----------
 .../addon/templates/components/rose/table.hbs |  3 ---
 .../templates/components/rose/table/row.hbs   | 18 +++++++++++------
 .../components/rose/table/section.hbs         |  5 +----
 .../rose/tests/dummy/app/templates/index.hbs  | 10 +++++-----
 .../components/rose/table/row-test.js         | 17 ++++++++++++----
 .../components/rose/table/section-test.js     |  2 +-
 7 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
index 0af8d7d0b..a720bd877 100644
--- a/addons/rose/addon/components/rose/table.stories.mdx
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -1,22 +1,20 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Table" component="Table" />
 
 # Table
 
-A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table row to be defined with table cells.
+A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions. Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element.
 
 ```htmlbars
 <Rose::Table as |table|>
   <table.header as |header|>
     <header.row as |row|>
-      <row.cell>Address</row.cell>
-      <row.cell>Host Set</row.cell>
-      <row.cell>Name</row.cell>
-      <row.cell>Description</row.cell>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
@@ -41,10 +39,10 @@ A table component to display data in structure of rows and columns. It supports
     <Rose::Table as |table|>
       <table.header as |header|>
         <header.row as |row|>
-          <row.cell>Address</row.cell>
-          <row.cell>Host Set</row.cell>
-          <row.cell>Name</row.cell>
-          <row.cell>Description</row.cell>
+          <row.headerCell>Address</row.headerCell>
+          <row.headerCell>Host Set</row.headerCell>
+          <row.headerCell>Name</row.headerCell>
+          <row.headerCell>Description</row.headerCell>
         </header.row>
       </table.header>
       <table.body as |body|>
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
index ae0208227..d50ec970e 100644
--- a/addons/rose/addon/templates/components/rose/table.hbs
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -6,15 +6,12 @@
   {{yield (hash
     header=(component 'rose/table/section'
       tagName='thead'
-      cellTagName='th'
       classNames='rose-table-header')
     body=(component 'rose/table/section'
       tagName='tbody'
-      cellTagName='td'
       classNames='rose-table-body')
     footer=(component 'rose/table/section'
       tagName='tfoot'
-      cellTagName='td'
       classNames='rose-table-foot')
   )}}
 </table>
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
index 4ed16dac0..e5bad550e 100644
--- a/addons/rose/addon/templates/components/rose/table/row.hbs
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -1,6 +1,12 @@
-{{yield (hash
-  cell=(component 'rose/anonymous'
-    tagName=@cellTagName
-    class='rose-table-cell'
-  )
-)}}
+<tr ...attributes class='rose-table-row'>
+  {{yield (hash
+    cell=(component 'rose/anonymous'
+      tagName='td'
+      class='rose-table-cell'
+    )
+    headerCell=(component 'rose/anonymous'
+      tagName='th'
+      class='rose-table-header-cell'
+    )
+  )}}
+</tr>
diff --git a/addons/rose/addon/templates/components/rose/table/section.hbs b/addons/rose/addon/templates/components/rose/table/section.hbs
index b1b8b1d65..d39e97260 100644
--- a/addons/rose/addon/templates/components/rose/table/section.hbs
+++ b/addons/rose/addon/templates/components/rose/table/section.hbs
@@ -1,6 +1,3 @@
 {{yield (hash
-  row=(component 'rose/table/row'
-    tagName='tr'
-    cellTagName=@cellTagName
-    class='rose-table-row')
+  row=(component 'rose/table/row')
 )}}
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 2960a10fc..5c6efcf85 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,15 +1,15 @@
 <Rose::Table as |table|>
   <table.header as |header|>
     <header.row as |row|>
-      <row.cell>Address</row.cell>
-      <row.cell>Host Set</row.cell>
-      <row.cell>Name</row.cell>
-      <row.cell>Description</row.cell>
+      <row.headerCell>Address</row.headerCell>
+      <row.headerCell>Host Set</row.headerCell>
+      <row.headerCell>Name</row.headerCell>
+      <row.headerCell>Description</row.headerCell>
     </header.row>
   </table.header>
   <table.body as |body|>
     <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
+      <row.headerCell>1.1.1.1</row.headerCell>
       <row.cell>host-set-1, host-set-2</row.cell>
       <row.cell>optional name</row.cell>
       <row.cell>description</row.cell>
diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js
index 96cf77369..94c57cd08 100644
--- a/addons/rose/tests/integration/components/rose/table/row-test.js
+++ b/addons/rose/tests/integration/components/rose/table/row-test.js
@@ -7,20 +7,29 @@ module('Integration | Component | rose/table/row', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Table::Row @tagName='tag'/>`);
-    assert.ok(find('tag'));
+    await render(hbs`<Rose::Table::Row />`);
+    assert.ok(find('tr'));
+    assert.ok(find('.rose-table-row'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Table::Row  @tagName='tag' id="row"/>`);
+    await render(hbs`<Rose::Table::Row id="row"/>`);
     assert.ok(find('#row'));
   });
 
   test('it renders a cell', async function (assert) {
-    await render(hbs`<Rose::Table::Row @tagName='tr' @cellTagName='td' as |row|>
+    await render(hbs`<Rose::Table::Row as |row|>
       <row.cell />
     </Rose::Table::Row>`);
     assert.ok(find('td'));
     assert.ok(find('.rose-table-cell'));
   });
+
+  test('it renders a header cell', async function (assert) {
+    await render(hbs`<Rose::Table::Row as |row|>
+      <row.headerCell />
+    </Rose::Table::Row>`);
+    assert.ok(find('th'));
+    assert.ok(find('.rose-table-header-cell'));
+  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/section-test.js b/addons/rose/tests/integration/components/rose/table/section-test.js
index a64c1d335..6a7a9c64e 100644
--- a/addons/rose/tests/integration/components/rose/table/section-test.js
+++ b/addons/rose/tests/integration/components/rose/table/section-test.js
@@ -18,7 +18,7 @@ module('Integration | Component | rose/table/section', function (hooks) {
   });
 
   test('it renders a row', async function (assert) {
-    await render(hbs`<Rose::Table::Section @tagName='tag' cellTagName={{this.cellTagName}} as |section|>
+    await render(hbs`<Rose::Table::Section @tagName='tag' as |section|>
       <section.row />
     </Rose::Table::Section>`);
     assert.ok(find('tr'));