From deac1776005e46c554d1bb7085bf16a78fd59509 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 8 Jun 2020 19:18:49 -0400
Subject: [PATCH 1/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20table=20compo?=
 =?UTF-8?q?nent=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/table.js    |  7 +++
 .../addon/components/rose/table.stories.mdx   | 57 +++++++++++++++++++
 .../rose/addon/components/rose/table/body.js  |  7 +++
 .../rose/addon/components/rose/table/cell.js  |  7 +++
 .../addon/components/rose/table/header.js     |  7 +++
 .../rose/addon/components/rose/table/row.js   |  7 +++
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/table/_index.scss  | 17 ++++++
 .../addon/templates/components/rose/table.hbs | 10 ++++
 .../templates/components/rose/table/body.hbs  |  5 ++
 .../templates/components/rose/table/cell.hbs  | 11 ++++
 .../components/rose/table/header.hbs          |  5 ++
 .../templates/components/rose/table/row.hbs   |  5 ++
 addons/rose/app/components/rose/table.js      |  1 +
 addons/rose/app/components/rose/table/body.js |  1 +
 addons/rose/app/components/rose/table/cell.js |  1 +
 .../rose/app/components/rose/table/header.js  |  1 +
 addons/rose/app/components/rose/table/row.js  |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 19 +++++++
 .../integration/components/rose/table-test.js | 39 +++++++++++++
 .../components/rose/table/body-test.js        | 36 ++++++++++++
 .../components/rose/table/cell-test.js        | 26 +++++++++
 .../components/rose/table/header-test.js      | 36 ++++++++++++
 .../components/rose/table/row-test.js         | 26 +++++++++
 24 files changed, 333 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/table.js
 create mode 100644 addons/rose/addon/components/rose/table.stories.mdx
 create mode 100644 addons/rose/addon/components/rose/table/body.js
 create mode 100644 addons/rose/addon/components/rose/table/cell.js
 create mode 100644 addons/rose/addon/components/rose/table/header.js
 create mode 100644 addons/rose/addon/components/rose/table/row.js
 create mode 100644 addons/rose/addon/styles/rose/components/table/_index.scss
 create mode 100644 addons/rose/addon/templates/components/rose/table.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/table/body.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/table/cell.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/table/header.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/table/row.hbs
 create mode 100644 addons/rose/app/components/rose/table.js
 create mode 100644 addons/rose/app/components/rose/table/body.js
 create mode 100644 addons/rose/app/components/rose/table/cell.js
 create mode 100644 addons/rose/app/components/rose/table/header.js
 create mode 100644 addons/rose/app/components/rose/table/row.js
 create mode 100644 addons/rose/tests/integration/components/rose/table-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/body-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/cell-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/header-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/row-test.js

diff --git a/addons/rose/addon/components/rose/table.js b/addons/rose/addon/components/rose/table.js
new file mode 100644
index 000000000..bd991b9d8
--- /dev/null
+++ b/addons/rose/addon/components/rose/table.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/table';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
new file mode 100644
index 000000000..df20dcb17
--- /dev/null
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -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>
diff --git a/addons/rose/addon/components/rose/table/body.js b/addons/rose/addon/components/rose/table/body.js
new file mode 100644
index 000000000..2702ed983
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/body.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/body';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/cell.js b/addons/rose/addon/components/rose/table/cell.js
new file mode 100644
index 000000000..3943c8054
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/cell.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/cell';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/header.js b/addons/rose/addon/components/rose/table/header.js
new file mode 100644
index 000000000..bcc2ff040
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/table/row.js b/addons/rose/addon/components/rose/table/row.js
new file mode 100644
index 000000000..4012b9afd
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/row.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/row';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index f8ba54fb1..432c10562 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -6,3 +6,4 @@
 @import 'card';
 @import 'page-header';
 @import 'nav';
+@import 'table';
diff --git a/addons/rose/addon/styles/rose/components/table/_index.scss b/addons/rose/addon/styles/rose/components/table/_index.scss
new file mode 100644
index 000000000..4f75fd6b3
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/table/_index.scss
@@ -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);
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
new file mode 100644
index 000000000..1346d685c
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -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>
diff --git a/addons/rose/addon/templates/components/rose/table/body.hbs b/addons/rose/addon/templates/components/rose/table/body.hbs
new file mode 100644
index 000000000..f82c64d04
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/body.hbs
@@ -0,0 +1,5 @@
+<tbody ...attributes class="rose-table-body">
+  {{yield (hash
+    row=(component 'rose/table/row')
+  )}}
+</tbody>
diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs
new file mode 100644
index 000000000..cb7a4d31d
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/cell.hbs
@@ -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}}
diff --git a/addons/rose/addon/templates/components/rose/table/header.hbs b/addons/rose/addon/templates/components/rose/table/header.hbs
new file mode 100644
index 000000000..13344bc99
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/header.hbs
@@ -0,0 +1,5 @@
+<thead ...attributes class="rose-table-header">
+  {{yield (hash
+    row=(component 'rose/table/row' header=true)
+  )}}
+</thead>
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
new file mode 100644
index 000000000..af67886a1
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -0,0 +1,5 @@
+<tr ...attributes class="rose-table-row">
+  {{yield (hash
+    cell=(component 'rose/table/cell' header=@header)
+  )}}
+</tr>
diff --git a/addons/rose/app/components/rose/table.js b/addons/rose/app/components/rose/table.js
new file mode 100644
index 000000000..9101f15ac
--- /dev/null
+++ b/addons/rose/app/components/rose/table.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table';
diff --git a/addons/rose/app/components/rose/table/body.js b/addons/rose/app/components/rose/table/body.js
new file mode 100644
index 000000000..bf58d0690
--- /dev/null
+++ b/addons/rose/app/components/rose/table/body.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/body';
diff --git a/addons/rose/app/components/rose/table/cell.js b/addons/rose/app/components/rose/table/cell.js
new file mode 100644
index 000000000..7e3b6e8b8
--- /dev/null
+++ b/addons/rose/app/components/rose/table/cell.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/cell';
diff --git a/addons/rose/app/components/rose/table/header.js b/addons/rose/app/components/rose/table/header.js
new file mode 100644
index 000000000..c0a585fe7
--- /dev/null
+++ b/addons/rose/app/components/rose/table/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/header';
diff --git a/addons/rose/app/components/rose/table/row.js b/addons/rose/app/components/rose/table/row.js
new file mode 100644
index 000000000..91618b6a0
--- /dev/null
+++ b/addons/rose/app/components/rose/table/row.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/row';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 576a37395..e01c76049 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -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>
diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js
new file mode 100644
index 000000000..6f792bd70
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table-test.js
@@ -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'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/body-test.js b/addons/rose/tests/integration/components/rose/table/body-test.js
new file mode 100644
index 000000000..e7c026883
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/body-test.js
@@ -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'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js
new file mode 100644
index 000000000..b4dfb8de8
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/cell-test.js
@@ -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'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/header-test.js b/addons/rose/tests/integration/components/rose/table/header-test.js
new file mode 100644
index 000000000..9c1c7c795
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/header-test.js
@@ -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'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js
new file mode 100644
index 000000000..efb3182d4
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/row-test.js
@@ -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'));
+  });
+});

From 06b0d3ffcc4ab79e91633b79597f454049b992df Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 10:01:14 -0400
Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20table=20foote?=
 =?UTF-8?q?r=20component=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/table.stories.mdx   | 12 ++++++-
 .../addon/components/rose/table/footer.js     |  7 ++++
 .../addon/templates/components/rose/table.hbs |  1 +
 .../templates/components/rose/table/cell.hbs  |  2 +-
 .../components/rose/table/footer.hbs          |  5 +++
 .../templates/components/rose/table/row.hbs   |  2 +-
 .../rose/app/components/rose/table/footer.js  |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  5 +++
 .../integration/components/rose/table-test.js |  7 ++++
 .../components/rose/table/cell-test.js        |  6 ++++
 .../components/rose/table/footer-test.js      | 36 +++++++++++++++++++
 .../components/rose/table/header-test.js      | 10 +++---
 12 files changed, 86 insertions(+), 8 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/table/footer.js
 create mode 100644 addons/rose/addon/templates/components/rose/table/footer.hbs
 create mode 100644 addons/rose/app/components/rose/table/footer.js
 create mode 100644 addons/rose/tests/integration/components/rose/table/footer-test.js

diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
index df20dcb17..353980423 100644
--- a/addons/rose/addon/components/rose/table.stories.mdx
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -7,7 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # 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.
+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|>
@@ -27,6 +27,11 @@ A table component to display data in structure of rows and columns. It supports
       <row.cell @text="description" />
     </body.row>
   </table.body>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell @text="Footer" />
+    </footer.row>
+  </table.footer>
 </Rose::Table>
 ```
 
@@ -50,6 +55,11 @@ A table component to display data in structure of rows and columns. It supports
           <row.cell @text="description" />
         </body.row>
       </table.body>
+      <table.footer as |footer|>
+        <footer.row as |row|>
+          <row.cell @text="Footer" />
+        </footer.row>
+      </table.footer>
     </Rose::Table>
     `,
     context: {}
diff --git a/addons/rose/addon/components/rose/table/footer.js b/addons/rose/addon/components/rose/table/footer.js
new file mode 100644
index 000000000..ff0346354
--- /dev/null
+++ b/addons/rose/addon/components/rose/table/footer.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/table/footer';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/templates/components/rose/table.hbs b/addons/rose/addon/templates/components/rose/table.hbs
index 1346d685c..580885405 100644
--- a/addons/rose/addon/templates/components/rose/table.hbs
+++ b/addons/rose/addon/templates/components/rose/table.hbs
@@ -6,5 +6,6 @@
   {{yield (hash
     header=(component 'rose/table/header')
     body=(component 'rose/table/body')
+    footer=(component 'rose/table/footer')
   )}}
 </table>
diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs
index cb7a4d31d..211909d86 100644
--- a/addons/rose/addon/templates/components/rose/table/cell.hbs
+++ b/addons/rose/addon/templates/components/rose/table/cell.hbs
@@ -4,7 +4,7 @@
     {{yield}}
   </th>
 {{else}}
-  <td ...attributes class="rose-table-cell rose-table-body-cell">
+  <td ...attributes class="{{concat "rose-table-cell" (if @footer " rose-table-footer-cell" " rose-table-body-cell")}}">
     {{@text}}
     {{yield}}
   </td>
diff --git a/addons/rose/addon/templates/components/rose/table/footer.hbs b/addons/rose/addon/templates/components/rose/table/footer.hbs
new file mode 100644
index 000000000..107b0b53f
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/table/footer.hbs
@@ -0,0 +1,5 @@
+<tfoot ...attributes class="rose-table-footer">
+  {{yield (hash
+    row=(component 'rose/table/row' footer=true)
+  )}}
+</tfoot>
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/templates/components/rose/table/row.hbs
index af67886a1..aae991def 100644
--- a/addons/rose/addon/templates/components/rose/table/row.hbs
+++ b/addons/rose/addon/templates/components/rose/table/row.hbs
@@ -1,5 +1,5 @@
 <tr ...attributes class="rose-table-row">
   {{yield (hash
-    cell=(component 'rose/table/cell' header=@header)
+    cell=(component 'rose/table/cell' header=@header footer=@footer)
   )}}
 </tr>
diff --git a/addons/rose/app/components/rose/table/footer.js b/addons/rose/app/components/rose/table/footer.js
new file mode 100644
index 000000000..8fedb5800
--- /dev/null
+++ b/addons/rose/app/components/rose/table/footer.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/table/footer';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index e01c76049..0e4edd731 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -223,6 +223,11 @@
           <row.cell @text="description" />
         </body.row>
       </table.body>
+      <table.footer as |footer|>
+        <footer.row as |row|>
+          <row.cell @text="Footer" />
+        </footer.row>
+      </table.footer>
     </Rose::Table>
   </global.body>
 </Rose::Layout::Global>
diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js
index 6f792bd70..06f2a5b8c 100644
--- a/addons/rose/tests/integration/components/rose/table-test.js
+++ b/addons/rose/tests/integration/components/rose/table-test.js
@@ -36,4 +36,11 @@ module('Integration | Component | rose/table', function (hooks) {
     </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'));
+  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js
index b4dfb8de8..10a88e890 100644
--- a/addons/rose/tests/integration/components/rose/table/cell-test.js
+++ b/addons/rose/tests/integration/components/rose/table/cell-test.js
@@ -23,4 +23,10 @@ module('Integration | Component | rose/table/cell', function (hooks) {
     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'));
+  });
 });
diff --git a/addons/rose/tests/integration/components/rose/table/footer-test.js b/addons/rose/tests/integration/components/rose/table/footer-test.js
new file mode 100644
index 000000000..1e4cd8997
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/table/footer-test.js
@@ -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'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/table/header-test.js b/addons/rose/tests/integration/components/rose/table/header-test.js
index 9c1c7c795..f6ae7c289 100644
--- a/addons/rose/tests/integration/components/rose/table/header-test.js
+++ b/addons/rose/tests/integration/components/rose/table/header-test.js
@@ -18,17 +18,17 @@ module('Integration | Component | rose/table/header', function (hooks) {
   });
 
   test('it renders with row', async function (assert) {
-    await render(hbs`<Rose::Table::Header as |body|>
-      <body.row />
+    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 |body|>
-      <body.row as |row|>
+    await render(hbs`<Rose::Table::Header as |header|>
+      <header.row as |row|>
         <row.cell />
-      </body.row>
+      </header.row>
     </Rose::Table::Header>`);
     assert.ok(find('th'));
     assert.ok(find('.rose-table-header-cell'));

From 37ddd97bf913b3ad1c89363a3799b1eafb9fef33 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 10:14:16 -0400
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Add=20playground?=
 =?UTF-8?q?=20route=20to=20rose=20addon=20dummy=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Playground route in rose addon dummy app contains previous content from
index route. Since the number of components is increasing, examples of
said components in dummy app index route are causing merge conflicts.
Index route will now contain component example for what\'s being added
whereas playground route contains full component spectrum examples.
---
 .../tests/dummy/app/controllers/playground.js |  12 +
 addons/rose/tests/dummy/app/router.js         |   1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 256 ++----------------
 .../tests/dummy/app/templates/playground.hbs  | 209 ++++++++++++++
 4 files changed, 245 insertions(+), 233 deletions(-)
 create mode 100644 addons/rose/tests/dummy/app/controllers/playground.js
 create mode 100644 addons/rose/tests/dummy/app/templates/playground.hbs

diff --git a/addons/rose/tests/dummy/app/controllers/playground.js b/addons/rose/tests/dummy/app/controllers/playground.js
new file mode 100644
index 000000000..af7c86470
--- /dev/null
+++ b/addons/rose/tests/dummy/app/controllers/playground.js
@@ -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');
+  }
+}
diff --git a/addons/rose/tests/dummy/app/router.js b/addons/rose/tests/dummy/app/router.js
index c5464a74c..5668362d0 100644
--- a/addons/rose/tests/dummy/app/router.js
+++ b/addons/rose/tests/dummy/app/router.js
@@ -8,4 +8,5 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('about');
+  this.route('playground');
 });
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 0e4edd731..cd1600429 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,233 +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"/>
-
-    <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>
-      <table.footer as |footer|>
-        <footer.row as |row|>
-          <row.cell @text="Footer" />
-        </footer.row>
-      </table.footer>
-    </Rose::Table>
-  </global.body>
-</Rose::Layout::Global>
+<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>
+  <table.footer as |footer|>
+    <footer.row as |row|>
+      <row.cell @text="Footer" />
+    </footer.row>
+  </table.footer>
+</Rose::Table>
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
new file mode 100644
index 000000000..576a37395
--- /dev/null
+++ b/addons/rose/tests/dummy/app/templates/playground.hbs
@@ -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>

From 9bc5dee4c7e90ef7a6cef36bd9f8cdaa236cec11 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 14:17:56 -0400
Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Remove=20text=20?=
 =?UTF-8?q?attribute=20in=20table=20cell=20rose=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of providing table cell content using `<row.cell
@text="something" />`, update allows for content to be defined within
tags `<row.cell>something</row.cell>`
---
 .../addon/components/rose/table.stories.mdx   | 36 +++++++++----------
 .../templates/components/rose/table/cell.hbs  |  2 --
 .../rose/tests/dummy/app/templates/index.hbs  | 18 +++++-----
 .../components/rose/table/cell-test.js        |  7 ++++
 4 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/addons/rose/addon/components/rose/table.stories.mdx b/addons/rose/addon/components/rose/table.stories.mdx
index 353980423..0af8d7d0b 100644
--- a/addons/rose/addon/components/rose/table.stories.mdx
+++ b/addons/rose/addon/components/rose/table.stories.mdx
@@ -13,23 +13,23 @@ 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 @text="Address" />
-      <row.cell @text="Host Set" />
-      <row.cell @text="Name" />
-      <row.cell @text="Description" />
+      <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 @text="1.1.1.1" />
-      <row.cell @text="host-set-1, host-set-2" />
-      <row.cell @text="optional name" />
-      <row.cell @text="description" />
+      <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 @text="Footer" />
+      <row.cell>Footer</row.cell>
     </footer.row>
   </table.footer>
 </Rose::Table>
@@ -41,23 +41,23 @@ 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 @text="Address" />
-          <row.cell @text="Host Set" />
-          <row.cell @text="Name" />
-          <row.cell @text="Description" />
+          <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 @text="1.1.1.1" />
-          <row.cell @text="host-set-1, host-set-2" />
-          <row.cell @text="optional name" />
-          <row.cell @text="description" />
+          <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 @text="Footer" />
+          <row.cell>Footer</row.cell>
         </footer.row>
       </table.footer>
     </Rose::Table>
diff --git a/addons/rose/addon/templates/components/rose/table/cell.hbs b/addons/rose/addon/templates/components/rose/table/cell.hbs
index 211909d86..5cfc41c8d 100644
--- a/addons/rose/addon/templates/components/rose/table/cell.hbs
+++ b/addons/rose/addon/templates/components/rose/table/cell.hbs
@@ -1,11 +1,9 @@
 {{#if @header}}
   <th ...attributes class="rose-table-cell rose-table-header-cell">
-    {{@text}}
     {{yield}}
   </th>
 {{else}}
   <td ...attributes class="{{concat "rose-table-cell" (if @footer " rose-table-footer-cell" " rose-table-body-cell")}}">
-    {{@text}}
     {{yield}}
   </td>
 {{/if}}
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index cd1600429..3554ea5f2 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,23 +1,23 @@
 <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" />
+      <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 @text="1.1.1.1" />
-      <row.cell @text="host-set-1, host-set-2" />
-      <row.cell @text="optional name" />
-      <row.cell @text="description" />
+      <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 @text="Footer" />
+      <row.cell>Footer</row.cell>
     </footer.row>
   </table.footer>
 </Rose::Table>
diff --git a/addons/rose/tests/integration/components/rose/table/cell-test.js b/addons/rose/tests/integration/components/rose/table/cell-test.js
index 10a88e890..aeec60376 100644
--- a/addons/rose/tests/integration/components/rose/table/cell-test.js
+++ b/addons/rose/tests/integration/components/rose/table/cell-test.js
@@ -18,6 +18,13 @@ module('Integration | Component | rose/table/cell', function (hooks) {
     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'));

From 995bdaa657703e9f1ba38415cfdccce6a3e6dc72 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 15:20:14 -0400
Subject: [PATCH 5/5] =?UTF-8?q?style:=20=F0=9F=92=84=20Update=20rose=20tab?=
 =?UTF-8?q?le=20font=20size=20from=2012=20to=2014?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/table/_index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/table/_index.scss b/addons/rose/addon/styles/rose/components/table/_index.scss
index 4f75fd6b3..ef81e56e7 100644
--- a/addons/rose/addon/styles/rose/components/table/_index.scss
+++ b/addons/rose/addon/styles/rose/components/table/_index.scss
@@ -2,7 +2,7 @@
 @use '../../utilities/type';
 
 .rose-table {
-  @include type.type(xs, normal);
+  @include type.type(s, normal);
   width: 100%;
 
   .rose-table-header {