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

chore: Add headerCell definition to rose/table

Browse Source
This commit is contained in:
Susmitha Girumala committed 2020-08-14 11:10:05 -04:00
1 parent eb230d2f9b
commit c62cda353f
7 files changed
+41 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/table.stories.mdx
+9 -11
View File
@@ -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';
<Meta title="Rose|Table" component="Table" />
# 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
<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>
<row.headerCell>Address</row.headerCell>
<row.headerCell>Host Set</row.headerCell>
<row.headerCell>Name</row.headerCell>
<row.headerCell>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
@@ -41,10 +39,10 @@ A table component to display data in structure of rows and columns. It supports
<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>
<row.headerCell>Address</row.headerCell>
<row.headerCell>Host Set</row.headerCell>
<row.headerCell>Name</row.headerCell>
<row.headerCell>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
addons/rose/addon/templates/components/rose/table.hbs
-3
View File
@@ -6,15 +6,12 @@
{{yield (hash
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/row.hbs
+12 -6
View File
@@ -1,6 +1,12 @@
{{yield (hash
cell=(component 'rose/anonymous'
tagName=@cellTagName
class='rose-table-cell'
)
)}}
<tr ...attributes class='rose-table-row'>
{{yield (hash
cell=(component 'rose/anonymous'
tagName='td'
class='rose-table-cell'
)
headerCell=(component 'rose/anonymous'
tagName='th'
class='rose-table-header-cell'
)
)}}
</tr>
addons/rose/addon/templates/components/rose/table/section.hbs
+1 -4
View File
@@ -1,6 +1,3 @@
{{yield (hash
row=(component 'rose/table/row'
tagName='tr'
cellTagName=@cellTagName
class='rose-table-row')
row=(component 'rose/table/row')
)}}
addons/rose/tests/dummy/app/templates/index.hbs
+5 -5
View File
@@ -1,15 +1,15 @@
<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>
<row.headerCell>Address</row.headerCell>
<row.headerCell>Host Set</row.headerCell>
<row.headerCell>Name</row.headerCell>
<row.headerCell>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.headerCell>1.1.1.1</row.headerCell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell>optional name</row.cell>
<row.cell>description</row.cell>
addons/rose/tests/integration/components/rose/table/row-test.js
+13 -4
View File
@@ -7,20 +7,29 @@ module('Integration | Component | rose/table/row', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Table::Row @tagName='tag'/>`);
assert.ok(find('tag'));
await render(hbs`<Rose::Table::Row />`);
assert.ok(find('tr'));
assert.ok(find('.rose-table-row'));
});
test('it renders with attributes', async function (assert) {
await render(hbs`<Rose::Table::Row @tagName='tag' id="row"/>`);
await render(hbs`<Rose::Table::Row id="row"/>`);
assert.ok(find('#row'));
});
test('it renders a cell', async function (assert) {
await render(hbs`<Rose::Table::Row @tagName='tr' @cellTagName='td' as |row|>
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 as |row|>
<row.headerCell />
</Rose::Table::Row>`);
assert.ok(find('th'));
assert.ok(find('.rose-table-header-cell'));
});
});
addons/rose/tests/integration/components/rose/table/section-test.js
+1 -1
View File
@@ -18,7 +18,7 @@ module('Integration | Component | rose/table/section', function (hooks) {
});
test('it renders a row', async function (assert) {
await render(hbs`<Rose::Table::Section @tagName='tag' cellTagName={{this.cellTagName}} as |section|>
await render(hbs`<Rose::Table::Section @tagName='tag' as |section|>
<section.row />
</Rose::Table::Section>`);
assert.ok(find('tr'));