chore: 🤖 Add table footer component to rose addon

addons/rose/addon/components/rose/table.stories.mdx

@@ -7,7 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # Table
 
-A table component to display data in structure of rows and columns. It supports `header` and `body` 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 table cells.
 
 ```htmlbars
 <Rose::Table as |table|>
@@ -27,6 +27,11 @@ A table component to display data in structure of rows and columns. It supports
       <row.cell @text="description" />
     </body.row>
   </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell @text="Footer" />
+    </footer.row>
+  </table.footer>
 </Rose::Table>
 ```
 
@@ -50,6 +55,11 @@ A table component to display data in structure of rows and columns. It supports
           <row.cell @text="description" />
         </body.row>
       </table.body>
+      <table.footer as |footer|>
+        <footer.row as |row|>
+          <row.cell @text="Footer" />
+        </footer.row>
+      </table.footer>
     </Rose::Table>
     `,
     context: {}

addons/rose/addon/components/rose/table/footer.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/footer';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/templates/components/rose/table.hbs

@@ -6,5 +6,6 @@
   {{yield (hash
     header=(component 'rose/table/header')
     body=(component 'rose/table/body')
+    footer=(component 'rose/table/footer')
   )}}
 </table>

addons/rose/addon/templates/components/rose/table/cell.hbs

@@ -4,7 +4,7 @@
     {{yield}}
   </th>
 {{else}}
-  <td ...attributes class="rose-table-cell rose-table-body-cell">
+  <td ...attributes class="{{concat "rose-table-cell" (if @footer " rose-table-footer-cell" " rose-table-body-cell")}}">
     {{@text}}
     {{yield}}
   </td>

addons/rose/addon/templates/components/rose/table/footer.hbs

@@ -0,0 +1,5 @@
+<tfoot ...attributes class="rose-table-footer">
+  {{yield (hash
+    row=(component 'rose/table/row' footer=true)
+  )}}
+</tfoot>

addons/rose/addon/templates/components/rose/table/row.hbs

@@ -1,5 +1,5 @@
 <tr ...attributes class="rose-table-row">
   {{yield (hash
-    cell=(component 'rose/table/cell' header=@header)
+    cell=(component 'rose/table/cell' header=@header footer=@footer)
   )}}
 </tr>

addons/rose/app/components/rose/table/footer.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/footer';

addons/rose/tests/dummy/app/templates/index.hbs

@@ -223,6 +223,11 @@
           <row.cell @text="description" />
         </body.row>
       </table.body>
+      <table.footer as |footer|>
+        <footer.row as |row|>
+          <row.cell @text="Footer" />
+        </footer.row>
+      </table.footer>
     </Rose::Table>
   </global.body>
 </Rose::Layout::Global>

addons/rose/tests/integration/components/rose/table-test.js

@@ -36,4 +36,11 @@ module('Integration | Component | rose/table', function (hooks) {
     </Rose::Table>`);
     assert.ok(find('tbody'));
   });
+
+  test('it renders with footer', async function (assert) {
+    await render(hbs`<Rose::Table as |table|>
+      <table.footer />
+    </Rose::Table>`);
+    assert.ok(find('tfoot'));
+  });
 });

addons/rose/tests/integration/components/rose/table/cell-test.js

@@ -23,4 +23,10 @@ module('Integration | Component | rose/table/cell', function (hooks) {
     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'));
+  });
 });

addons/rose/tests/integration/components/rose/table/footer-test.js

@@ -0,0 +1,36 @@
+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'));
+  });
+
+  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'));
+  });
+});

addons/rose/tests/integration/components/rose/table/header-test.js

@@ -18,17 +18,17 @@ module('Integration | Component | rose/table/header', function (hooks) {
   });
 
   test('it renders with row', async function (assert) {
-    await render(hbs`<Rose::Table::Header as |body|>
-      <body.row />
+    await render(hbs`<Rose::Table::Header as |header|>
+      <header.row />
     </Rose::Table::Header>`);
     assert.ok(find('tr'));
   });
 
   test('it renders with row cell', async function (assert) {
-    await render(hbs`<Rose::Table::Header as |body|>
-      <body.row as |row|>
+    await render(hbs`<Rose::Table::Header as |header|>
+      <header.row as |row|>
         <row.cell />
-      </body.row>
+      </header.row>
     </Rose::Table::Header>`);
     assert.ok(find('th'));
     assert.ok(find('.rose-table-header-cell'));