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] 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'));