Merge pull request #554 from hashicorp/new-table-style
Refactor rose table component
This commit is contained in:
11 files changed
+486
-113
No files matched your search
@@ -1,4 +1,4 @@
|
||||
<table ...attributes class="rose-table">
|
||||
<table ...attributes class="rose-table {{if @style (concat "rose-table-" @style)}}">
|
||||
{{#if @caption}}
|
||||
<caption>{{@caption}}</caption>
|
||||
{{/if}}
|
||||
|
||||
@@ -1,27 +1,42 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { 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 either a `cell` or `headerCell` table element.
|
||||
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. Rows can be visually hidden, and cells can be shrinked to its content with, and center/right cell alignment is supported.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Table as |table|>
|
||||
Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
|
||||
|
||||
```html
|
||||
<Rose::Table @style={{style}} as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<header.row @hidden={{hideHeaderRow}} as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell>Host Set</row.headerCell>
|
||||
<row.headerCell>Name</row.headerCell>
|
||||
<row.headerCell>Description</row.headerCell>
|
||||
<row.headerCell @alignCenter={{true}}>Description</row.headerCell>
|
||||
</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 @shrink={{true}}>optional name</row.cell>
|
||||
<row.cell @alignCenter={{true}}>description</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-2</row.cell>
|
||||
<row.cell @shrink={{true}} @alignCenter={{true}}>optional name</row.cell>
|
||||
<row.cell @alignRight={{true}}>description</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-1</row.cell>
|
||||
<row.cell @shrink={{true}}>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
@@ -36,22 +51,34 @@ A table component to display data in structure of rows and columns. It supports
|
||||
<Preview>
|
||||
<Story name="Basic">{{
|
||||
template: hbs`
|
||||
<Rose::Table as |table|>
|
||||
<Rose::Table @style={{style}} 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 @hidden={{hideHeaderRow}} as |row|>
|
||||
<row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Address</row.headerCell>
|
||||
<row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Host Set</row.headerCell>
|
||||
<row.headerCell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Name</row.headerCell>
|
||||
<row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Description</row.headerCell>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>1.1.1.1</row.cell>
|
||||
<row.cell @shrink={{cellShrink}}>1.1.1.1</row.cell>
|
||||
<row.cell>host-set-1, host-set-2</row.cell>
|
||||
<row.cell>optional name</row.cell>
|
||||
<row.cell @shrink={{cellShrink}}>optional name</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>1.1.1.1</row.cell>
|
||||
<row.cell @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
|
||||
<row.cell @shrink={{cellShrink}} @alignCenter={{cellAlignmentCenter}}>optional name</row.cell>
|
||||
<row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>1.1.1.1</row.cell>
|
||||
<row.cell @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
|
||||
<row.cell @shrink={{cellShrink}} @alignRight={{cellAlignmentRight}}>optional name</row.cell>
|
||||
<row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer as |footer|>
|
||||
<footer.row as |row|>
|
||||
@@ -60,6 +87,102 @@ A table component to display data in structure of rows and columns. It supports
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
`,
|
||||
context: {}
|
||||
context: {
|
||||
hideHeaderRow: boolean('hideHeaderRow', false),
|
||||
cellShrink: boolean('cellShrink', false),
|
||||
style: select(
|
||||
'style',
|
||||
{
|
||||
'default': '',
|
||||
'condensed': 'condensed'
|
||||
}
|
||||
),
|
||||
cellAlignmentCenter: boolean('cellAlignmentCenter', false),
|
||||
cellAlignmentRight: boolean('cellAlignmentRight', false),
|
||||
},
|
||||
}}</Story>
|
||||
</Preview>
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic Key/Value Table">{{
|
||||
template: hbs`
|
||||
<Rose::Table @style={{style}} as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<row.headerCell @shrink={{true}}>Key</row.headerCell>
|
||||
<row.headerCell colspan="2">Value</row.headerCell>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Input @contextual={{true}} as |input|>
|
||||
<input.field />
|
||||
</Rose::Form::Input>
|
||||
</row.cell>
|
||||
<row.cell @shrink={{true}} @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Select
|
||||
@name="Test select"
|
||||
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>
|
||||
</Rose::Form::Select>
|
||||
</row.cell>
|
||||
<row.cell @shrink={{true}} @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Input @contextual={{true}} as |input|>
|
||||
<input.field />
|
||||
</Rose::Form::Input>
|
||||
</row.cell>
|
||||
<row.cell @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Textarea
|
||||
@name="field"
|
||||
readonly={{false}}
|
||||
/>
|
||||
</row.cell>
|
||||
<row.cell @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer @hidden={{true}} as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell colspan="3">Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
`,
|
||||
context: {
|
||||
style: select(
|
||||
'style',
|
||||
{
|
||||
'condensed': 'condensed',
|
||||
'default': ''
|
||||
}
|
||||
)
|
||||
}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1 @@
|
||||
{{yield}}
|
||||
@@ -0,0 +1,28 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from './index';
|
||||
import { computed } from '@ember/object';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: 'td',
|
||||
classNameBindings: ['cellTypeStyle', 'cellShrink', 'cellAlignmentStyle'],
|
||||
cellTypeStyle: computed(function () {
|
||||
return this.tagName.match('th')
|
||||
? `rose-table-header-cell`
|
||||
: 'rose-table-cell';
|
||||
}),
|
||||
cellShrink: computed(function () {
|
||||
if (this.shrink) {
|
||||
return 'rose-table-cell-shrink'
|
||||
}
|
||||
}),
|
||||
cellAlignmentStyle: computed(function () {
|
||||
if (this.alignRight) {
|
||||
return 'align-right';
|
||||
}
|
||||
|
||||
if (this.alignCenter) {
|
||||
return 'align-center';
|
||||
}
|
||||
})
|
||||
});
|
||||
@@ -1,12 +1,6 @@
|
||||
<tr ...attributes class='rose-table-row'>
|
||||
<tr ...attributes class='rose-table-row {{if @hidden (concat "rose-table-row-visually-hidden")}} {{if @style (concat "rose-table-row-" @style)}}'>
|
||||
{{yield (hash
|
||||
cell=(component 'rose/anonymous'
|
||||
tagName='td'
|
||||
class='rose-table-cell'
|
||||
)
|
||||
headerCell=(component 'rose/anonymous'
|
||||
tagName='th'
|
||||
class='rose-table-header-cell'
|
||||
)
|
||||
cell=(component 'rose/table/row/cell')
|
||||
headerCell=(component 'rose/table/row/cell' tagName='th')
|
||||
)}}
|
||||
</tr>
|
||||
@@ -10,9 +10,20 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// This styles are add to stop the input to apply extra margin (default on forms)
|
||||
.rose-form-input-field,
|
||||
.rose-form-select,
|
||||
.rose-form-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rose-table-cell,
|
||||
.rose-table-header-cell {
|
||||
vertical-align: middle;
|
||||
|
||||
&.align-right { text-align: right; }
|
||||
&.align-center { text-align: center; }
|
||||
}
|
||||
|
||||
.rose-table-header-cell {
|
||||
@@ -35,7 +46,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.rose-table-cell-shrink {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[class*='rose-button'] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.rose-table-condensed {
|
||||
.rose-table-cell {
|
||||
@include type.type(s);
|
||||
$lineHeight: 36 / 14;
|
||||
line-height: $lineHeight;
|
||||
padding: (sizing.rems(s) / 2) sizing.rems(s);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rose-table-row-visually-hidden {
|
||||
position: absolute;
|
||||
top: -9999rem;
|
||||
left: -9999rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from 'rose/components/rose/table/row/cell';
|
||||
@@ -1,93 +1,196 @@
|
||||
<Rose::Header as |header|>
|
||||
<header.brand @logo="logo" @text="Product Name" />
|
||||
<h2>Condensed Table</h2>
|
||||
<Rose::Table @style="condensed" 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.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>
|
||||
|
||||
<header.nav as |nav|>
|
||||
<nav.dropdown @text="org-name" @icon="user-organization" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
||||
<dropdown.separator />
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</nav.dropdown>
|
||||
<h2>Condensed Table with Shrink Cells</h2>
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell @shrink={{true}}>Host Set</row.headerCell>
|
||||
<row.headerCell @shrink={{true}}>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.cell @shrink={{true}}>host-set-1, host-set-2</row.cell>
|
||||
<row.cell @shrink={{true}}>
|
||||
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
|
||||
</row.cell>
|
||||
<row.cell>description</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer @hidden={{true}} as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
|
||||
<nav.link @route="index">Section</nav.link>
|
||||
<nav.link @route="about">Section</nav.link>
|
||||
</header.nav>
|
||||
<h2>Condensed Table with Right and Center aligned cells</h2>
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<row.headerCell>Address</row.headerCell>
|
||||
<row.headerCell @alignCenter={{true}}>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.cell @alignCenter={{true}}>host-set-1, host-set-2</row.cell>
|
||||
<row.cell @alignRight={{true}}>optional name</row.cell>
|
||||
<row.cell @alignCenter={{true}}>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>
|
||||
|
||||
<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" @style="danger">Menu item - danger</dropdown.link>
|
||||
<dropdown.button>Button - default</dropdown.button>
|
||||
<dropdown.separator />
|
||||
<dropdown.button @style="danger">Button - danger</dropdown.button>
|
||||
</utilities.dropdown>
|
||||
</header.utilities>
|
||||
</Rose::Header>
|
||||
<h2>Condensed Table Key/Value Lookalike (edit mode)</h2>
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row as |row|>
|
||||
<row.headerCell @shrink={{true}}>Key</row.headerCell>
|
||||
<row.headerCell colspan="2">Value</row.headerCell>
|
||||
</header.row>
|
||||
</table.header>
|
||||
<table.body as |body|>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Input @contextual={{true}} as |input|>
|
||||
<input.field />
|
||||
</Rose::Form::Input>
|
||||
</row.cell>
|
||||
<row.cell @shrink={{true}} @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Select
|
||||
@name="Test select"
|
||||
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>
|
||||
</Rose::Form::Select>
|
||||
</row.cell>
|
||||
<row.cell @shrink={{true}} @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Input @contextual={{true}} as |input|>
|
||||
<input.field />
|
||||
</Rose::Form::Input>
|
||||
</row.cell>
|
||||
<row.cell @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
<body.row as |row|>
|
||||
<row.cell>Key</row.cell>
|
||||
<row.cell>
|
||||
<Rose::Form::Textarea
|
||||
@name="field"
|
||||
readonly={{false}}
|
||||
/>
|
||||
</row.cell>
|
||||
<row.cell @alignRight={{true}}>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
</row.cell>
|
||||
</body.row>
|
||||
</table.body>
|
||||
<table.footer @hidden={{true}} as |footer|>
|
||||
<footer.row as |row|>
|
||||
<row.cell colspan="3">Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
|
||||
<Rose::Dropdown @text="Dropdown" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
|
||||
<dropdown.separator></dropdown.separator>
|
||||
<h2>Condensed Table With Visually Hidden Header & Footer</h2>
|
||||
<Rose::Table @style="condensed" as |table|>
|
||||
<table.header as |header|>
|
||||
<header.row @hidden={{true}} 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.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 @hidden={{true}} as |row|>
|
||||
<row.cell>Footer</row.cell>
|
||||
</footer.row>
|
||||
</table.footer>
|
||||
</Rose::Table>
|
||||
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
<dropdown.button @style="danger">Button - danger</dropdown.button>
|
||||
<dropdown.separator />
|
||||
|
||||
<dropdown.section @title="Dropdown Section Title">
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
</dropdown.section>
|
||||
</Rose::Dropdown>
|
||||
|
||||
<Rose::Dropdown @showCaret={{false}} @icon="more-horizontal" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</Rose::Dropdown>
|
||||
|
||||
<Rose::Form as |form|>
|
||||
<form.radioGroup tagName="ul" @name="color" @selectedValue="red" as |radioGroup|>
|
||||
<Rose::Dropdown @text="Color" as |dropdown|>
|
||||
<ul>
|
||||
<li>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label="Red"
|
||||
@value="red"
|
||||
@icon="user-organization" />
|
||||
</dropdown.item>
|
||||
</li>
|
||||
<li>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label="Green"
|
||||
@value="green"
|
||||
/>
|
||||
</dropdown.item>
|
||||
</li>
|
||||
<li>
|
||||
<dropdown.item>
|
||||
<radioGroup.radio
|
||||
@label="Blue"
|
||||
@value="blue"
|
||||
/>
|
||||
</dropdown.item>
|
||||
</li>
|
||||
</ul>
|
||||
</Rose::Dropdown>
|
||||
</form.radioGroup>
|
||||
</Rose::Form>
|
||||
|
||||
|
||||
<Rose::Dialog::Cover>
|
||||
<:header>
|
||||
<h1>Authentication Pending</h1>
|
||||
</:header>
|
||||
<:body>
|
||||
<p>Complete authentication in the newly-opened window.</p>
|
||||
<p>Don't see the new window? <a href="#">Try again.</a></p>
|
||||
<p><a href="#">Cancel</a></p>
|
||||
</:body>
|
||||
</Rose::Dialog::Cover>
|
||||
<h2>Table</h2>
|
||||
<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.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>
|
||||
@@ -43,4 +43,9 @@ module('Integration | Component | rose/table', function (hooks) {
|
||||
</Rose::Table>`);
|
||||
assert.ok(find('tfoot'));
|
||||
});
|
||||
|
||||
test('it supports a style class', async function (assert) {
|
||||
await render(hbs`<Rose::Table @style="condensed" />`);
|
||||
assert.ok(find('.rose-table-condensed'));
|
||||
});
|
||||
});
|
||||
@@ -7,17 +7,20 @@ module('Integration | Component | rose/table/row', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(hbs`<Rose::Table::Row />`);
|
||||
assert.ok(find('tr'));
|
||||
assert.ok(find('.rose-table-row'));
|
||||
});
|
||||
|
||||
test('it renders with attributes', async function (assert) {
|
||||
assert.expect(1);
|
||||
await render(hbs`<Rose::Table::Row id="row"/>`);
|
||||
assert.ok(find('#row'));
|
||||
});
|
||||
|
||||
test('it renders a cell', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(hbs`<Rose::Table::Row as |row|>
|
||||
<row.cell />
|
||||
</Rose::Table::Row>`);
|
||||
@@ -26,10 +29,17 @@ module('Integration | Component | rose/table/row', function (hooks) {
|
||||
});
|
||||
|
||||
test('it renders a header cell', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(hbs`<Rose::Table::Row as |row|>
|
||||
<row.headerCell />
|
||||
</Rose::Table::Row>`);
|
||||
assert.ok(find('th'));
|
||||
assert.ok(find('.rose-table-header-cell'));
|
||||
});
|
||||
|
||||
test('it can be hidden', async function (assert) {
|
||||
assert.expect(1);
|
||||
await render(hbs`<Rose::Table::Row @hidden=true />`);
|
||||
assert.ok(find('.rose-table-row-visually-hidden'));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,76 @@
|
||||
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/cell', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(hbs`<Rose::Table::Row::Cell>
|
||||
content
|
||||
</Rose::Table::Row::Cell>`);
|
||||
assert.ok(find('td'));
|
||||
assert.equal(find('.rose-table-cell').textContent.trim(), 'content');
|
||||
});
|
||||
|
||||
test('it renders with attributes', async function (assert) {
|
||||
assert.expect(1);
|
||||
await render(hbs`<Rose::Table::Row::Cell id="cell"/>`);
|
||||
assert.ok(find('#cell'));
|
||||
});
|
||||
|
||||
test('it renders as header cell', async function (assert) {
|
||||
assert.expect(4);
|
||||
await render(hbs`<Rose::Table::Row::Cell @tagName='th'/>`);
|
||||
assert.ok(find('th'));
|
||||
assert.ok(find('.rose-table-header-cell'));
|
||||
assert.notOk(find('td'));
|
||||
assert.notOk(find('.rose-table-cell'));
|
||||
});
|
||||
|
||||
test('it adds shrink style class', async function (assert) {
|
||||
assert.expect(1);
|
||||
await render(hbs`<Rose::Table::Row::Cell @shrink={{true}} />`);
|
||||
assert.ok(find('.rose-table-cell-shrink'));
|
||||
});
|
||||
|
||||
test('it does not add expand style class in default cells', async function (assert) {
|
||||
assert.expect(1);
|
||||
await render(hbs`<Rose::Table::Row::Cell />`);
|
||||
assert.notOk(find('.rose-table-cell-shrink'));
|
||||
});
|
||||
|
||||
test('it renders with align center in a header cell', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(
|
||||
hbs`<Rose::Table::Row::Cell @tagName='th' @alignCenter=true />`
|
||||
);
|
||||
assert.ok(find('.rose-table-header-cell'));
|
||||
assert.ok(find('.align-center'));
|
||||
});
|
||||
|
||||
test('it renders with align center in a body', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(hbs`<Rose::Table::Row::Cell @alignCenter=true />`);
|
||||
assert.ok(find('.rose-table-cell'));
|
||||
assert.ok(find('.align-center'));
|
||||
});
|
||||
|
||||
test('it renders with align right in a header cell', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(
|
||||
hbs`<Rose::Table::Row::Cell @tagName='th' @alignRight=true />`
|
||||
);
|
||||
assert.ok(find('.rose-table-header-cell'));
|
||||
assert.ok(find('.align-right'));
|
||||
});
|
||||
|
||||
test('it renders with align right', async function (assert) {
|
||||
assert.expect(2);
|
||||
await render(hbs`<Rose::Table::Row::Cell @alignRight=true />`);
|
||||
assert.ok(find('.rose-table-cell'));
|
||||
assert.ok(find('.align-right'));
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user