chore: 🤖 Add table component to rose addon

2020-06-09 14:20:11 -04:00
1 parent 0d86dd235e
commit deac177600
@@ -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,57 @@
+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` and `body` 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 @text="Address" />
+      <row.cell @text="Host Set" />
+      <row.cell @text="Name" />
+      <row.cell @text="Description" />
+    </header.row>
+  </table.header>
+  <table.body as |body|>
+    <body.row as |row|>
+      <row.cell @text="1.1.1.1" />
+      <row.cell @text="host-set-1, host-set-2" />
+      <row.cell @text="optional name" />
+      <row.cell @text="description" />
+    </body.row>
+  </table.body>
+</Rose::Table>
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell @text="Address" />
+          <row.cell @text="Host Set" />
+          <row.cell @text="Name" />
+          <row.cell @text="Description" />
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        <body.row as |row|>
+          <row.cell @text="1.1.1.1" />
+          <row.cell @text="host-set-1, host-set-2" />
+          <row.cell @text="optional name" />
+          <row.cell @text="description" />
+        </body.row>
+      </table.body>
+    </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/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: '',
+});
@@ -6,3 +6,4 @@
@import 'card';
@import 'page-header';
@import 'nav';
+@import 'table';
@@ -0,0 +1,17 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-table {
+  @include type.type(xs, 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,10 @@
+<table ...attributes class="rose-table">
+  {{#if @caption}}
+    <caption>{{@caption}}</caption>
+  {{/if}}
+
+  {{yield (hash
+    header=(component 'rose/table/header')
+    body=(component 'rose/table/body')
+  )}}
+</table>
@@ -0,0 +1,5 @@
+<tbody ...attributes class="rose-table-body">
+  {{yield (hash
+    row=(component 'rose/table/row')
+  )}}
+</tbody>
@@ -0,0 +1,11 @@
+{{#if @header}}
+  <th ...attributes class="rose-table-cell rose-table-header-cell">
+    {{@text}}
+    {{yield}}
+  </th>
+{{else}}
+  <td ...attributes class="rose-table-cell rose-table-body-cell">
+    {{@text}}
+    {{yield}}
+  </td>
+{{/if}}
@@ -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)
+  )}}
+</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/header';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row';
@@ -205,5 +205,24 @@
    <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"/>
+
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell @text="Address" />
+          <row.cell @text="Host Set" />
+          <row.cell @text="Name" />
+          <row.cell @text="Description" />
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        <body.row as |row|>
+          <row.cell @text="1.1.1.1" />
+          <row.cell @text="host-set-1, host-set-2" />
+          <row.cell @text="optional name" />
+          <row.cell @text="description" />
+        </body.row>
+      </table.body>
+    </Rose::Table>
  </global.body>
 </Rose::Layout::Global>
@@ -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', 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'));
+  });
+});
@@ -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,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/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 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'));
+  });
+});
@@ -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 |body|>
+      <body.row />
+    </Rose::Table::Header>`);
+    assert.ok(find('tr'));
+  });
+
+  test('it renders with row cell', async function (assert) {
+    await render(hbs`<Rose::Table::Header as |body|>
+      <body.row as |row|>
+        <row.cell />
+      </body.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'));
+  });
+});
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/table';`