Merge branch 'develop' into chore-separator
This commit is contained in:
31 files changed
+637
-209
No files matched your search
@@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../templates/components/rose/table';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
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.
|
||||
|
||||
```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>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<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>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic">{{
|
||||
template: hbs`
|
||||
<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>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<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>
|
||||
`,
|
||||
context: {}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../../templates/components/rose/table/body';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../../templates/components/rose/table/cell';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../../templates/components/rose/table/footer';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../../templates/components/rose/table/header';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../../templates/components/rose/table/row';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
});
|
||||
@@ -7,3 +7,4 @@
|
||||
@import 'page-header';
|
||||
@import 'separator';
|
||||
@import 'nav';
|
||||
@import 'table';
|
||||
@@ -0,0 +1,17 @@
|
||||
@use '../../variables/sizing';
|
||||
@use '../../utilities/type';
|
||||
|
||||
.rose-table {
|
||||
@include type.type(s, normal);
|
||||
width: 100%;
|
||||
|
||||
.rose-table-header {
|
||||
background-color: var(--ui-gray-subtler-5);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rose-table-cell {
|
||||
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
|
||||
padding: sizing.rems(xs) sizing.rems(xxs);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<table ...attributes class="rose-table">
|
||||
{{#if @caption}}
|
||||
<caption>{{@caption}}</caption>
|
||||
{{/if}}
|
||||
|
||||
{{yield (hash
|
||||
header=(component 'rose/table/header')
|
||||
body=(component 'rose/table/body')
|
||||
footer=(component 'rose/table/footer')
|
||||
)}}
|
||||
</table>
|
||||
@@ -0,0 +1,5 @@
|
||||
<tbody ...attributes class="rose-table-body">
|
||||
{{yield (hash
|
||||
row=(component 'rose/table/row')
|
||||
)}}
|
||||
</tbody>
|
||||
@@ -0,0 +1,9 @@
|
||||
{{#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}}
|
||||
@@ -0,0 +1,5 @@
|
||||
<tfoot ...attributes class="rose-table-footer">
|
||||
{{yield (hash
|
||||
row=(component 'rose/table/row' footer=true)
|
||||
)}}
|
||||
</tfoot>
|
||||
@@ -0,0 +1,5 @@
|
||||
<thead ...attributes class="rose-table-header">
|
||||
{{yield (hash
|
||||
row=(component 'rose/table/row' header=true)
|
||||
)}}
|
||||
</thead>
|
||||
@@ -0,0 +1,5 @@
|
||||
<tr ...attributes class="rose-table-row">
|
||||
{{yield (hash
|
||||
cell=(component 'rose/table/cell' header=@header footer=@footer)
|
||||
)}}
|
||||
</tr>
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table';
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table/body';
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table/cell';
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table/footer';
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table/header';
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table/row';
|
||||
@@ -0,0 +1,12 @@
|
||||
import Controller from '@ember/controller';
|
||||
import { action } from '@ember/object';
|
||||
|
||||
export default class PlaygroundController extends Controller {
|
||||
color = 'green';
|
||||
|
||||
@action
|
||||
actionHandler(/*value*/) {
|
||||
// eslint-disable-next-line no-console
|
||||
//console.log('action handled');
|
||||
}
|
||||
}
|
||||
@@ -8,4 +8,5 @@ export default class Router extends EmberRouter {
|
||||
|
||||
Router.map(function () {
|
||||
this.route('about');
|
||||
this.route('playground');
|
||||
});
|
||||
@@ -1,209 +1,23 @@
|
||||
<Rose::Layout::Global as |global|>
|
||||
<global.header>
|
||||
<Rose::Header as |header|>
|
||||
|
||||
<header.brand @logo="logo" @text="Product Name" />
|
||||
|
||||
<header.nav as |nav|>
|
||||
<nav.dropdown @text="org-name" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</nav.dropdown>
|
||||
<nav.link @route="index">Section</nav.link>
|
||||
<nav.link @route="about">Section</nav.link>
|
||||
</header.nav>
|
||||
|
||||
|
||||
<header.utilities as |utilities|>
|
||||
<utilities.dropdown
|
||||
@text="user@example.net"
|
||||
@iconOnly={{true}}
|
||||
@icon="user-square-fill" as |dropdown|
|
||||
>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</utilities.dropdown>
|
||||
</header.utilities>
|
||||
|
||||
</Rose::Header>
|
||||
</global.header>
|
||||
|
||||
<global.navigation>
|
||||
<Rose::Nav::Sidebar @title="Title" as |nav|>
|
||||
<nav.link @route="index">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
</Rose::Nav::Sidebar>
|
||||
</global.navigation>
|
||||
|
||||
<global.body>
|
||||
<Rose::Layout::Page as |page|>
|
||||
<page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
|
||||
<page.header>Header</page.header>
|
||||
<page.navigation>Navigation</page.navigation>
|
||||
<page.actions>Actions</page.actions>
|
||||
<page.body>Body</page.body>
|
||||
</Rose::Layout::Page>
|
||||
|
||||
Dummy app index template
|
||||
|
||||
<Rose::Notification
|
||||
@style="error"
|
||||
@heading="Error"
|
||||
@dismiss={{this.actionHandler}}
|
||||
@dismissText="Dismiss"
|
||||
>
|
||||
An error occurred.
|
||||
</Rose::Notification>
|
||||
|
||||
<h2>Icon</h2>
|
||||
<Rose::Icon @name="alert-circle-fill" />
|
||||
<Rose::Icon @name="alert-circle-fill" @size="medium" />
|
||||
<Rose::Icon @name="alert-circle-fill" @size="small" />
|
||||
|
||||
<h2>Button</h2>
|
||||
<Rose::Button @style="primary">Primary</Rose::Button>
|
||||
<br>
|
||||
<Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
|
||||
<br>
|
||||
|
||||
<Rose::Button @style="secondary">Secondary</Rose::Button>
|
||||
<br>
|
||||
<Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
|
||||
<br>
|
||||
|
||||
<h2>Form</h2>
|
||||
<Rose::Form
|
||||
@onSubmit={{this.actionHandler}}
|
||||
@cancel={{this.actionHandler}}
|
||||
@disabled={{false}}
|
||||
as |form|
|
||||
>
|
||||
|
||||
<h3>Inputs</h3>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@value="Read only"
|
||||
readonly={{true}}
|
||||
/>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
/>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
@error={{true}}
|
||||
/>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
disabled={{true}}
|
||||
/>
|
||||
|
||||
<h3>Textareas</h3>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@value="Read only"
|
||||
readonly={{true}}
|
||||
/>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
/>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
@error={{true}}
|
||||
/>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
disabled={{true}}
|
||||
/>
|
||||
|
||||
<h3>Selects</h3>
|
||||
<form.select
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@onChange={{fn this.actionHandler}}
|
||||
as |field|
|
||||
>
|
||||
<field.field as |select|>
|
||||
<select.option>Choose an option</select.option>
|
||||
<select.option @value="value-1">Value 1</select.option>
|
||||
<select.option @value="value-2">Value 2</select.option>
|
||||
<select.option @value="value-3">Value 3</select.option>
|
||||
</field.field>
|
||||
</form.select>
|
||||
<form.select
|
||||
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@onChange={{fn this.actionHandler}}
|
||||
as |field|
|
||||
>
|
||||
<field.field as |select|>
|
||||
<select.option>Choose an option</select.option>
|
||||
</field.field>
|
||||
</form.select>
|
||||
|
||||
|
||||
<h3>Radio Group</h3>
|
||||
<form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@label="Red"
|
||||
@value="red"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@label="Green"
|
||||
@value="green"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@label="Blue"
|
||||
@value="blue"
|
||||
@disabled={{true}}
|
||||
/>
|
||||
</form.radioGroup>
|
||||
|
||||
<h3>Checkboxes</h3>
|
||||
<form.checkbox
|
||||
@label="Label"
|
||||
/>
|
||||
<form.checkbox
|
||||
@error={{true}}
|
||||
@label="Error"
|
||||
/>
|
||||
<form.checkbox
|
||||
@checked={{true}}
|
||||
@label="Checked"
|
||||
/>
|
||||
<form.checkbox
|
||||
@label="Disabled"
|
||||
disabled={{true}}
|
||||
/>
|
||||
<form.checkbox
|
||||
@checked={{true}}
|
||||
@label="Disabled + Checked"
|
||||
disabled={{true}}
|
||||
/>
|
||||
|
||||
<form.actions
|
||||
@submitText="Save"
|
||||
@cancelText="Cancel" />
|
||||
</Rose::Form>
|
||||
|
||||
<Rose::Card::Link @title="I'm a card" />
|
||||
<Rose::Card::Link @title="I'm a card" @description="I'm a description" />
|
||||
<Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
|
||||
</global.body>
|
||||
</Rose::Layout::Global>
|
||||
<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>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<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>
|
||||
@@ -0,0 +1,209 @@
|
||||
<Rose::Layout::Global as |global|>
|
||||
<global.header>
|
||||
<Rose::Header as |header|>
|
||||
|
||||
<header.brand @logo="logo" @text="Product Name" />
|
||||
|
||||
<header.nav as |nav|>
|
||||
<nav.dropdown @text="org-name" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</nav.dropdown>
|
||||
<nav.link @route="index">Section</nav.link>
|
||||
<nav.link @route="about">Section</nav.link>
|
||||
</header.nav>
|
||||
|
||||
|
||||
<header.utilities as |utilities|>
|
||||
<utilities.dropdown
|
||||
@text="user@example.net"
|
||||
@iconOnly={{true}}
|
||||
@icon="user-square-fill" as |dropdown|
|
||||
>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</utilities.dropdown>
|
||||
</header.utilities>
|
||||
|
||||
</Rose::Header>
|
||||
</global.header>
|
||||
|
||||
<global.navigation>
|
||||
<Rose::Nav::Sidebar @title="Title" as |nav|>
|
||||
<nav.link @route="index">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
</Rose::Nav::Sidebar>
|
||||
</global.navigation>
|
||||
|
||||
<global.body>
|
||||
<Rose::Layout::Page as |page|>
|
||||
<page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
|
||||
<page.header>Header</page.header>
|
||||
<page.navigation>Navigation</page.navigation>
|
||||
<page.actions>Actions</page.actions>
|
||||
<page.body>Body</page.body>
|
||||
</Rose::Layout::Page>
|
||||
|
||||
Dummy app index template
|
||||
|
||||
<Rose::Notification
|
||||
@style="error"
|
||||
@heading="Error"
|
||||
@dismiss={{this.actionHandler}}
|
||||
@dismissText="Dismiss"
|
||||
>
|
||||
An error occurred.
|
||||
</Rose::Notification>
|
||||
|
||||
<h2>Icon</h2>
|
||||
<Rose::Icon @name="alert-circle-fill" />
|
||||
<Rose::Icon @name="alert-circle-fill" @size="medium" />
|
||||
<Rose::Icon @name="alert-circle-fill" @size="small" />
|
||||
|
||||
<h2>Button</h2>
|
||||
<Rose::Button @style="primary">Primary</Rose::Button>
|
||||
<br>
|
||||
<Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
|
||||
<br>
|
||||
|
||||
<Rose::Button @style="secondary">Secondary</Rose::Button>
|
||||
<br>
|
||||
<Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
|
||||
<br>
|
||||
|
||||
<h2>Form</h2>
|
||||
<Rose::Form
|
||||
@onSubmit={{this.actionHandler}}
|
||||
@cancel={{this.actionHandler}}
|
||||
@disabled={{false}}
|
||||
as |form|
|
||||
>
|
||||
|
||||
<h3>Inputs</h3>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@value="Read only"
|
||||
readonly={{true}}
|
||||
/>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
/>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
@error={{true}}
|
||||
/>
|
||||
<form.input
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
disabled={{true}}
|
||||
/>
|
||||
|
||||
<h3>Textareas</h3>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@value="Read only"
|
||||
readonly={{true}}
|
||||
/>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
/>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
@error={{true}}
|
||||
/>
|
||||
<form.textarea
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@value="Text"
|
||||
disabled={{true}}
|
||||
/>
|
||||
|
||||
<h3>Selects</h3>
|
||||
<form.select
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@onChange={{fn this.actionHandler}}
|
||||
as |field|
|
||||
>
|
||||
<field.field as |select|>
|
||||
<select.option>Choose an option</select.option>
|
||||
<select.option @value="value-1">Value 1</select.option>
|
||||
<select.option @value="value-2">Value 2</select.option>
|
||||
<select.option @value="value-3">Value 3</select.option>
|
||||
</field.field>
|
||||
</form.select>
|
||||
<form.select
|
||||
|
||||
@label="Label"
|
||||
@helperText="Helper text"
|
||||
@onChange={{fn this.actionHandler}}
|
||||
as |field|
|
||||
>
|
||||
<field.field as |select|>
|
||||
<select.option>Choose an option</select.option>
|
||||
</field.field>
|
||||
</form.select>
|
||||
|
||||
|
||||
<h3>Radio Group</h3>
|
||||
<form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
|
||||
<radioGroup.radio
|
||||
@label="Red"
|
||||
@value="red"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@label="Green"
|
||||
@value="green"
|
||||
/>
|
||||
<radioGroup.radio
|
||||
@label="Blue"
|
||||
@value="blue"
|
||||
@disabled={{true}}
|
||||
/>
|
||||
</form.radioGroup>
|
||||
|
||||
<h3>Checkboxes</h3>
|
||||
<form.checkbox
|
||||
@label="Label"
|
||||
/>
|
||||
<form.checkbox
|
||||
@error={{true}}
|
||||
@label="Error"
|
||||
/>
|
||||
<form.checkbox
|
||||
@checked={{true}}
|
||||
@label="Checked"
|
||||
/>
|
||||
<form.checkbox
|
||||
@label="Disabled"
|
||||
disabled={{true}}
|
||||
/>
|
||||
<form.checkbox
|
||||
@checked={{true}}
|
||||
@label="Disabled + Checked"
|
||||
disabled={{true}}
|
||||
/>
|
||||
|
||||
<form.actions
|
||||
@submitText="Save"
|
||||
@cancelText="Cancel" />
|
||||
</Rose::Form>
|
||||
|
||||
<Rose::Card::Link @title="I'm a card" />
|
||||
<Rose::Card::Link @title="I'm a card" @description="I'm a description" />
|
||||
<Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
|
||||
</global.body>
|
||||
</Rose::Layout::Global>
|
||||
@@ -0,0 +1,46 @@
|
||||
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', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
await render(hbs`<Rose::Table />`);
|
||||
assert.ok(find('table'));
|
||||
assert.ok(find('.rose-table'));
|
||||
});
|
||||
|
||||
test('it renders with attributes', async function (assert) {
|
||||
await render(hbs`<Rose::Table id="table"/>`);
|
||||
assert.ok(find('#table'));
|
||||
});
|
||||
|
||||
test('it renders with caption', async function (assert) {
|
||||
await render(hbs`<Rose::Table @caption="table caption"/>`);
|
||||
assert.ok(find('caption'));
|
||||
assert.equal(find('caption').textContent.trim(), 'table caption');
|
||||
});
|
||||
|
||||
test('it renders with header', async function (assert) {
|
||||
await render(hbs`<Rose::Table as |table|>
|
||||
<table.header />
|
||||
</Rose::Table>`);
|
||||
assert.ok(find('thead'));
|
||||
});
|
||||
|
||||
test('it renders with body', async function (assert) {
|
||||
await render(hbs`<Rose::Table as |table|>
|
||||
<table.body />
|
||||
</Rose::Table>`);
|
||||
assert.ok(find('tbody'));
|
||||
});
|
||||
|
||||
test('it renders with footer', async function (assert) {
|
||||
await render(hbs`<Rose::Table as |table|>
|
||||
<table.footer />
|
||||
</Rose::Table>`);
|
||||
assert.ok(find('tfoot'));
|
||||
});
|
||||
});
|
||||
@@ -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/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'));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
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'));
|
||||
});
|
||||
});
|
||||
@@ -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`<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'));
|
||||
});
|
||||
});
|
||||
@@ -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/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'));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
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/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'));
|
||||
});
|
||||
|
||||
test('it renders with attributes', async function (assert) {
|
||||
await render(hbs`<Rose::Table::Row id="row"/>`);
|
||||
assert.ok(find('#row'));
|
||||
});
|
||||
|
||||
test('it renders with cell', async function (assert) {
|
||||
await render(hbs`<Rose::Table::Row as |row|>
|
||||
<row.cell />
|
||||
</Rose::Table::Row>`);
|
||||
assert.ok(find('.rose-table-cell'));
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user