diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx index df20dcb17..353980423 100644 --- a/addons/rose/addon/components/rose/table.stories.mdx +++ b/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 @@ -27,6 +27,11 @@ A table component to display data in structure of rows and columns. It supports + + + + + ``` @@ -50,6 +55,11 @@ A table component to display data in structure of rows and columns. It supports + + + + + `, context: {} diff --git a/addons/rose/addon/components/rose/table/footer.js b/addons/rose/addon/components/rose/table/footer.js new file mode 100644 index 000000000..ff0346354 --- /dev/null +++ b/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: '', +}); diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs index 1346d685c..580885405 100644 --- a/addons/rose/addon/templates/components/rose/table.hbs +++ b/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') )}} diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs index cb7a4d31d..211909d86 100644 --- a/addons/rose/addon/templates/components/rose/table/cell.hbs +++ b/addons/rose/addon/templates/components/rose/table/cell.hbs @@ -4,7 +4,7 @@ {{yield}} {{else}} - + {{@text}} {{yield}} diff --git a/addons/rose/addon/templates/components/rose/table/footer.hbs b/addons/rose/addon/templates/components/rose/table/footer.hbs new file mode 100644 index 000000000..107b0b53f --- /dev/null +++ b/addons/rose/addon/templates/components/rose/table/footer.hbs @@ -0,0 +1,5 @@ + + {{yield (hash + row=(component 'rose/table/row' footer=true) + )}} + diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs index af67886a1..aae991def 100644 --- a/addons/rose/addon/templates/components/rose/table/row.hbs +++ b/addons/rose/addon/templates/components/rose/table/row.hbs @@ -1,5 +1,5 @@ {{yield (hash - cell=(component 'rose/table/cell' header=@header) + cell=(component 'rose/table/cell' header=@header footer=@footer) )}} diff --git a/addons/rose/app/components/rose/table/footer.js b/addons/rose/app/components/rose/table/footer.js new file mode 100644 index 000000000..8fedb5800 --- /dev/null +++ b/addons/rose/app/components/rose/table/footer.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/table/footer'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index e01c76049..0e4edd731 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -223,6 +223,11 @@ + + + + + diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js index 6f792bd70..06f2a5b8c 100644 --- a/addons/rose/tests/integration/components/rose/table-test.js +++ b/addons/rose/tests/integration/components/rose/table-test.js @@ -36,4 +36,11 @@ module('Integration | Component | rose/table', function (hooks) { `); assert.ok(find('tbody')); }); + + test('it renders with footer', async function (assert) { + await render(hbs` + + `); + assert.ok(find('tfoot')); + }); }); diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js index b4dfb8de8..10a88e890 100644 --- a/addons/rose/tests/integration/components/rose/table/cell-test.js +++ b/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``); + 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 new file mode 100644 index 000000000..1e4cd8997 --- /dev/null +++ b/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``); + 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 index 9c1c7c795..f6ae7c289 100644 --- a/addons/rose/tests/integration/components/rose/table/header-test.js +++ b/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` - + await render(hbs` + `); assert.ok(find('tr')); }); test('it renders with row cell', async function (assert) { - await render(hbs` - + await render(hbs` + - + `); assert.ok(find('th')); assert.ok(find('.rose-table-header-cell'));