CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Add table section component

Browse Source 
Remove table header, footer, and body components as section component is
used to build them.
This commit is contained in:
Susmitha Girumala committed 2020-08-11 18:36:34 -04:00
1 parent 996f014114
commit 704bc263c8
21 files changed
+70 -163
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/table/body.js
-10
View File
@@ -1,10 +0,0 @@
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: '',
});
addons/rose/addon/components/rose/table/footer.js
-10
View File
@@ -1,10 +0,0 @@
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: '',
});
addons/rose/addon/components/rose/table/header.js
-10
View File
@@ -1,10 +0,0 @@
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: '',
});
addons/rose/addon/components/rose/table/row.js
+2 -1
View File
@@ -2,7 +2,8 @@ import Component from '@ember/component';
import layout from '../../../templates/components/rose/table/row';
/**
* A table row component that uses tr table element.
* A table row component that uses tr table element and
* configures a table cell element.
*/
export default Component.extend({
layout,
addons/rose/addon/components/rose/table/section.js
+11
View File
@@ -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: '',
});
addons/rose/addon/templates/components/rose/table.hbs
+12 -3
View File
@@ -4,8 +4,17 @@
{{/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'
cellTagName='th'
classNames='rose-table-header')
body=(component 'rose/table/section'
tagName='tbody'
cellTagName='td'
classNames='rose-table-body')
footer=(component 'rose/table/section'
tagName='tfoot'
cellTagName='td'
classNames='rose-table-foot')
)}}
</table>
addons/rose/addon/templates/components/rose/table/body.hbs
-5
View File
@@ -1,5 +0,0 @@
<tbody ...attributes class="rose-table-body">
{{yield (hash
row=(component 'rose/table/row')
)}}
</tbody>
addons/rose/addon/templates/components/rose/table/footer.hbs
-5
View File
@@ -1,5 +0,0 @@
<tfoot ...attributes class="rose-table-footer">
{{yield (hash
row=(component 'rose/table/row')
)}}
</tfoot>
addons/rose/addon/templates/components/rose/table/header.hbs
-5
View File
@@ -1,5 +0,0 @@
<thead ...attributes class="rose-table-header">
{{yield (hash
row=(component 'rose/table/row' header=true)
)}}
</thead>
addons/rose/addon/templates/components/rose/table/row.hbs
+6 -17
View File
@@ -1,17 +1,6 @@
<tr ...attributes class="rose-table-row">
{{#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>
{{yield (hash
cell=(component 'rose/anonymous'
tagName=@cellTagName
class='rose-table-cell'
)
)}}
addons/rose/addon/templates/components/rose/table/section.hbs
+6
View File
@@ -0,0 +1,6 @@
{{yield (hash
row=(component 'rose/table/row'
tagName='tr'
cellTagName=@cellTagName
class='rose-table-row')
)}}
addons/rose/app/components/rose/table/body.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/table/body';
addons/rose/app/components/rose/table/footer.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/table/footer';
addons/rose/app/components/rose/table/header.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/table/header';
addons/rose/app/components/rose/table/section.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/table/section';
addons/rose/tests/dummy/app/templates/index.hbs
+1 -1
View File
@@ -20,4 +20,4 @@
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
</Rose::Table>
addons/rose/tests/integration/components/rose/table/body-test.js
-26
View File
@@ -1,26 +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`<Rose::Table::Body />`);
assert.ok(find('tbody'));
assert.ok(find('.rose-table-body'));
});
test('it renders with attributes', async function (assert) {
await render(hbs`<Rose::Table::Body id="body"/>`);
assert.ok(find('#body'));
});
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'));
});
});
addons/rose/tests/integration/components/rose/table/footer-test.js
-26
View File
@@ -1,26 +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`<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'));
});
});
addons/rose/tests/integration/components/rose/table/header-test.js
-26
View File
@@ -1,26 +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`<Rose::Table::Header />`);
assert.ok(find('thead'));
assert.ok(find('.rose-table-header'));
});
test('it renders with attributes', async function (assert) {
await render(hbs`<Rose::Table::Header id="header"/>`);
assert.ok(find('#header'));
});
test('it renders with row', async function (assert) {
await render(hbs`<Rose::Table::Header as |header|>
<header.row />
</Rose::Table::Header>`);
assert.ok(find('tr'));
});
});
addons/rose/tests/integration/components/rose/table/row-test.js
+4 -15
View File
@@ -7,31 +7,20 @@ module('Integration | Component | rose/table/row', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Table::Row />`);
assert.ok(find('tr'));
assert.ok(find('.rose-table-row'));
await render(hbs`<Rose::Table::Row @tagName='tag'/>`);
assert.ok(find('tag'));
});
test('it renders with attributes', async function (assert) {
await render(hbs`<Rose::Table::Row id="row"/>`);
await render(hbs`<Rose::Table::Row @tagName='tag' id="row"/>`);
assert.ok(find('#row'));
});
test('it renders a cell', async function (assert) {
await render(hbs`<Rose::Table::Row as |row|>
await render(hbs`<Rose::Table::Row @tagName='tr' @cellTagName='td' 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'));
});
});
addons/rose/tests/integration/components/rose/table/section-test.js
+27
View File
@@ -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`<Rose::Table::Section @tagName='tag' class='tag-class'/>`);
assert.ok(find('tag'));
assert.ok(find('.tag-class'));
});
test('it renders with attributes', async function (assert) {
await render(hbs`<Rose::Table::section @tagName='tag' id="section"/>`);
assert.ok(find('#section'));
});
test('it renders a row', async function (assert) {
await render(hbs`<Rose::Table::Section @tagName='tag' cellTagName={{this.cellTagName}} as |section|>
<section.row />
</Rose::Table::Section>`);
assert.ok(find('tr'));
assert.ok(find('.rose-table-row'));
});
});