chore: Use anonymous rose component as table cells

2020-08-11 18:36:34 -04:00
1 parent 89f2cfac6c
commit 996f014114
@@ -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: '',
@@ -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: '',
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/cell';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
@@ -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: '',
@@ -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: '',
@@ -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: '',
@@ -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}}
@@ -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>
@@ -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>
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/table/cell';
@@ -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>
@@ -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'));
-  });
 });
@@ -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'));
-  });
-});
@@ -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'));
-  });
 });
@@ -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'));
-  });
 });
@@ -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'));
+  });
 });
				`@@ -1 +0,0 @@`
				`export { default } from 'rose/components/rose/table/cell';`