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

Merge branch 'develop' into feature-host-set-api

Browse Source
This commit is contained in:
Randall Morey committed 2020-08-14 13:32:28 -04:00
2 parents c7f1b6830e 7bf26d6bb5
commit 553bd74c5c
30 files changed
+110 -247
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/table.js
+4
View File
@@ -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: '',
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/components/rose/table/body.js
-7
View File
@@ -1,7 +0,0 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/table/body';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/table/cell.js
-7
View File
@@ -1,7 +0,0 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/table/cell';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/table/footer.js
-7
View File
@@ -1,7 +0,0 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/table/footer';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/table/header.js
-7
View File
@@ -1,7 +0,0 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/table/header';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/table/row.js
+4
View File
@@ -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: '',
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
+9 -3
View File
@@ -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')
)}}
</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/cell.hbs
-9
View File
@@ -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}}
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' footer=true)
)}}
</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
+9 -2
View File
@@ -1,5 +1,12 @@
<tr ...attributes class="rose-table-row">
<tr ...attributes class='rose-table-row'>
{{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'
)
)}}
</tr>
addons/rose/addon/templates/components/rose/table/section.hbs
+3
View File
@@ -0,0 +1,3 @@
{{yield (hash
row=(component '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/cell.js
-1
View File
@@ -1 +0,0 @@
export { default } from 'rose/components/rose/table/cell';
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
+23 -6
View File
@@ -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.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.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>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
addons/rose/tests/integration/components/rose/table/body-test.js
-36
View File
@@ -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`<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 with 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'));
});
});
addons/rose/tests/integration/components/rose/table/cell-test.js
-39
View File
@@ -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'));
});
});
addons/rose/tests/integration/components/rose/table/footer-test.js
-36
View File
@@ -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`<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'));
});
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'));
});
});
addons/rose/tests/integration/components/rose/table/header-test.js
-36
View File
@@ -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`<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'));
});
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'));
});
});
addons/rose/tests/integration/components/rose/table/row-test.js
+10 -1
View File
@@ -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`<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
+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' as |section|>
<section.row />
</Rose::Table::Section>`);
assert.ok(find('tr'));
assert.ok(find('.rose-table-row'));
});
});
ui/core/app/index.html
-2
View File
@@ -7,8 +7,6 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="default-org-id" content="{{DEFAULT_ORG_ID}}">
{{content-for "head"}}
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
ui/core/app/templates/application.hbs
-12
View File
@@ -7,18 +7,6 @@
<Rose::Header as |header|>
<header.brand @logo="logo-hashi" @text={{app-name}} />
{{!--
<header.nav as |nav|>
<nav.dropdown @text={{t 'dev.default-org'}} as |dropdown|>
<dropdown.link @route="index">{{t 'dev.menu-item'}}</dropdown.link>
<dropdown.link @route="orgs">{{t 'dev.menu-item'}}</dropdown.link>
<dropdown.button>{{t 'dev.button-menu-item'}}</dropdown.button>
</nav.dropdown>
<nav.link @route="index">{{t 'dev.section'}}</nav.link>
<nav.link @route="index">{{t 'dev.section'}}</nav.link>
</header.nav>
--}}
{{#if this.session.isAuthenticated}}
<header.utilities as |utilities|>
<utilities.dropdown
ui/core/translations/en-us.yaml
-7
View File
@@ -92,10 +92,3 @@ notify:
create-success: Created succesfully.
save-success: Saved succesfully.
delete-success: Deleted successfully.
dev:
default-org: Default Scope
menu-item: Menu item
button-menu-item: Button menu item
section: Section
title: Title
item-name: Item Name