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.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'; # 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 - Address - Host Set - Name - Description + Address + Host Set + Name + Description @@ -41,10 +39,10 @@ A table component to display data in structure of rows and columns. It supports - Address - Host Set - Name - Description + Address + Host Set + Name + Description 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 2702ed983..000000000 --- a/addons/rose/addon/components/rose/table/body.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/table/body'; - -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 deleted file mode 100644 index ff0346354..000000000 --- a/addons/rose/addon/components/rose/table/footer.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/table/footer'; - -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 bcc2ff040..000000000 --- a/addons/rose/addon/components/rose/table/header.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/table/header'; - -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..e94f0cf28 100644 --- a/addons/rose/addon/components/rose/table/row.js +++ b/addons/rose/addon/components/rose/table/row.js @@ -1,6 +1,10 @@ import Component from '@ember/component'; import layout from '../../../templates/components/rose/table/row'; +/** + * A table row component that uses tr table element and + * configures a table cell element. + */ export default Component.extend({ layout, tagName: '', 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..d50ec970e 100644 --- a/addons/rose/addon/templates/components/rose/table.hbs +++ b/addons/rose/addon/templates/components/rose/table.hbs @@ -4,8 +4,14 @@ {{/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' + classNames='rose-table-header') + body=(component 'rose/table/section' + tagName='tbody' + classNames='rose-table-body') + footer=(component 'rose/table/section' + tagName='tfoot' + classNames='rose-table-foot') )}} 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 @@ - - {{yield (hash - row=(component 'rose/table/row') - )}} - 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}} - - {{yield}} - -{{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 deleted file mode 100644 index 107b0b53f..000000000 --- a/addons/rose/addon/templates/components/rose/table/footer.hbs +++ /dev/null @@ -1,5 +0,0 @@ - - {{yield (hash - row=(component 'rose/table/row' footer=true) - )}} - 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 @@ - - {{yield (hash - row=(component 'rose/table/row' header=true) - )}} - diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs index aae991def..e5bad550e 100644 --- a/addons/rose/addon/templates/components/rose/table/row.hbs +++ b/addons/rose/addon/templates/components/rose/table/row.hbs @@ -1,5 +1,12 @@ - + {{yield (hash - cell=(component 'rose/table/cell' header=@header footer=@footer) + cell=(component 'rose/anonymous' + tagName='td' + class='rose-table-cell' + ) + headerCell=(component 'rose/anonymous' + tagName='th' + class='rose-table-header-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..d39e97260 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/table/section.hbs @@ -0,0 +1,3 @@ +{{yield (hash + row=(component '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/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/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..18f14b39b --- /dev/null +++ b/addons/rose/app/components/rose/table/section.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/table/section'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 2974ba49c..5c6efcf85 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 + + + \ 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 e7c026883..000000000 --- a/addons/rose/tests/integration/components/rose/table/body-test.js +++ /dev/null @@ -1,36 +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``); - assert.ok(find('tbody')); - assert.ok(find('.rose-table-body')); - }); - - test('it renders with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#body')); - }); - - test('it renders with 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 deleted file mode 100644 index 1e4cd8997..000000000 --- a/addons/rose/tests/integration/components/rose/table/footer-test.js +++ /dev/null @@ -1,36 +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``); - assert.ok(find('tfoot')); - assert.ok(find('.rose-table-footer')); - }); - - test('it renders with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#footer')); - }); - - test('it renders with 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-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 deleted file mode 100644 index f6ae7c289..000000000 --- a/addons/rose/tests/integration/components/rose/table/header-test.js +++ /dev/null @@ -1,36 +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``); - assert.ok(find('thead')); - assert.ok(find('.rose-table-header')); - }); - - test('it renders with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#header')); - }); - - test('it renders with 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('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..94c57cd08 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,19 @@ 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.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..6a7a9c64e --- /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``); + assert.ok(find('tag')); + assert.ok(find('.tag-class')); + }); + + test('it renders with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#section')); + }); + + test('it renders a row', async function (assert) { + await render(hbs` + + `); + assert.ok(find('tr')); + assert.ok(find('.rose-table-row')); + }); +});