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}}
-
-{{else}}
-
- {{yield}}
- |
-{{/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 @@
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 @@
- {{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}}
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 @@
-
-
- Key
- Value
-
-
+
+
+
+ Address
+ Host Set
+ Name
+ Description
+
+
+
+
+ 1.1.1.1
+ host-set-1, host-set-2
+ optional name
+ description
+
+
+
+
+ Footer
+
+
+
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`
`);
assert.ok(find('tr'));
});
-
- test('it renders with row cell', async function (assert) {
- await render(hbs`
-
-
-
- `);
- 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``);
- 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``);
- assert.ok(find('#cell'));
- });
-
- test('it renders with content', async function (assert) {
- await render(hbs`
- Cell content
- `);
- assert.equal(find('.rose-table-cell').textContent.trim(), 'Cell content');
- });
-
- test('it renders as header cell', async function (assert) {
- await render(hbs``);
- 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``);
- 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) {
`);
assert.ok(find('tr'));
});
-
- test('it renders with row cell', async function (assert) {
- await render(hbs`
-
-
-
- `);
- 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) {
`);
assert.ok(find('tr'));
});
-
- test('it renders with row cell', async function (assert) {
- await render(hbs`
-
-
-
- `);
- 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`
`);
+ assert.ok(find('td'));
assert.ok(find('.rose-table-cell'));
});
+
+ test('it renders a header cell', async function (assert) {
+ await render(hbs`
+
+ `);
+ assert.ok(find('th'));
+ assert.notOk(find('td'));
+ assert.ok(find('.rose-table-cell'));
+ assert.ok(find('.rose-table-header-cell'));
+ });
});