feat: 🎸 Refactor rose table component

We refactor the component adding a condensed variant of the table,
refactor the hidden feature. We also provide different alignments for a
cell. Updated tests and storybook page

addons/rose/addon/components/rose/table/index.stories.mdx

@@ -30,8 +30,8 @@ Cell expansion style should be applied to only one cell in a row.
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
       <row.cell @style={{cellStyle}}>host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
+      <row.cell @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>
@@ -54,10 +54,10 @@ Cell expansion style should be applied to only one cell in a row.
     <Rose::Table @style={{style}} as |table|>
       <table.header as |header|>
         <header.row @hidden={{hideHeaderRow}} as |row|>
-          <row.headerCell>Address</row.headerCell>
-          <row.headerCell @style={{cellStyle}}>Host Set</row.headerCell>
-          <row.headerCell>Name</row.headerCell>
-          <row.headerCell>Description</row.headerCell>
+          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Address</row.headerCell>
+          <row.headerCell @style={{cellStyle}} @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Host Set</row.headerCell>
+          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Name</row.headerCell>
+          <row.headerCell @alignCenter={{cellAlignmentCenter}} @alignRight={{cellAlignmentRight}}>Description</row.headerCell>
         </header.row>
       </table.header>
       <table.body as |body|>
@@ -68,16 +68,16 @@ Cell expansion style should be applied to only one cell in a row.
           <row.cell>description</row.cell>
         </body.row>
         <body.row as |row|>
-          <row.cell>1.1.1.1</row.cell>
-          <row.cell @style={{cellStyle}}>host-set-2</row.cell>
-          <row.cell>optional name</row.cell>
-          <row.cell>description</row.cell>
+          <row.cell @alignCenter={{cellAlignmentCenter}}>1.1.1.1</row.cell>
+          <row.cell @style={{cellStyle}} @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
+          <row.cell @alignCenter={{cellAlignmentCenter}}>optional name</row.cell>
+          <row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
         </body.row>
         <body.row as |row|>
-          <row.cell>1.1.1.1</row.cell>
-          <row.cell @style={{cellStyle}}>host-set-1</row.cell>
-          <row.cell>optional name</row.cell>
-          <row.cell>description</row.cell>
+          <row.cell @alignRight={{cellAlignmentRight}}>1.1.1.1</row.cell>
+          <row.cell @style={{cellStyle}} @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
+          <row.cell @alignRight={{cellAlignmentRight}}>optional name</row.cell>
+          <row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
         </body.row>
       </table.body>
       <table.footer as |footer|>
@@ -102,7 +102,9 @@ Cell expansion style should be applied to only one cell in a row.
           'default': '',
           'condensed': 'condensed'
         }
-      )
+      ),
+      cellAlignmentCenter: boolean('cellAlignmentCenter', false),
+      cellAlignmentRight: boolean('cellAlignmentRight', false),
     },
   }}</Story>
 </Preview>

addons/rose/addon/components/rose/table/row/cell/index.js

@@ -5,7 +5,7 @@ import { computed } from '@ember/object';
 export default Component.extend({
   layout,
   tagName: 'td',
-  classNameBindings: ['cellTypeStyle', 'cellStyle'],
+  classNameBindings: ['cellTypeStyle', 'cellStyle', 'cellAlignmentStyle'],
   cellTypeStyle: computed(function () {
     return this.tagName.match('th')
       ? `rose-table-header-cell`
@@ -14,4 +14,13 @@ export default Component.extend({
   cellStyle: computed(function () {
     return this.style ? `rose-table-cell-${this.style}` : '';
   }),
+  cellAlignmentStyle: computed(function () {
+    if (this.alignRight) {
+      return 'align-right';
+    }
+    
+    if (this.alignCenter) {
+      return 'align-center';
+    }
+  })
 });

addons/rose/addon/components/rose/table/row/index.hbs

@@ -4,17 +4,3 @@
     headerCell=(component 'rose/table/row/cell' tagName='th')
   )}}
 </tr>
-
-
-{{!-- <tr ...attributes class='rose-table-row {{if @visually-hidden (concat "rose-table-row-visually-hidden")}}'>
-  {{yield (hash
-    cell=(component 'rose/anonymous'
-      tagName='td'
-      class='rose-table-cell'
-    )
-    headerCell=(component 'rose/anonymous'
-      tagName='th'
-      class='rose-table-header-cell'
-    )
-  )}}
-</tr> --}}

addons/rose/addon/styles/rose/components/table/_table.scss

@@ -14,6 +14,9 @@
   .rose-table-header-cell {
     vertical-align: middle;
     white-space: nowrap;
+
+    &.align-right { text-align: right; }
+    &.align-center { text-align: center; }
   }
 
   .rose-table-header-cell {
@@ -57,6 +60,7 @@
       line-height: $lineHeight;
       padding: (sizing.rems(s) / 2) sizing.rems(s);
     }
+
   }
 
   .rose-table-row-visually-hidden {

addons/rose/tests/dummy/app/templates/index.hbs

@@ -43,7 +43,7 @@
       <row.cell @style="expand">description</row.cell>
     </body.row>
   </table.body>
-  <table.footer @hidden=true as |footer|>
+  <table.footer @hidden={{true}} as |footer|>
     <footer.row as |row|>
       <row.cell>Footer</row.cell>
     </footer.row>
@@ -63,9 +63,9 @@
   <table.body as |body|>
     <body.row as |row|>
       <row.cell>1.1.1.1</row.cell>
-      <row.cell @align="center">host-set-1, host-set-2</row.cell>
-      <row.cell @alignRight=true>optional name</row.cell>
-      <row.cell @alignCenter=true>description</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|>
@@ -106,7 +106,7 @@
       </row.cell>
     </body.row>
   </table.body>
-  <table.footer @hidden=true as |footer|>
+  <table.footer @hidden={{true}} as |footer|>
     <footer.row as |row|>
       <row.cell>Footer</row.cell>
     </footer.row>
@@ -116,7 +116,7 @@
 <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|>
+    <header.row @hidden={{true}} as |row|>
       <row.headerCell >Address</row.headerCell>
       <row.headerCell>Host Set</row.headerCell>
       <row.headerCell>Name</row.headerCell>
@@ -132,7 +132,7 @@
     </body.row>
   </table.body>
   <table.footer as |footer|>
-    <footer.row @hidden=true as |row|>
+    <footer.row @hidden={{true}} as |row|>
       <row.cell>Footer</row.cell>
     </footer.row>
   </table.footer>

addons/rose/tests/integration/components/rose/table/row/cell-test.js

@@ -35,4 +35,36 @@ module('Integration | Component | rose/table/row/cell', function (hooks) {
     await render(hbs`<Rose::Table::Row::Cell @style='expand' />`);
     assert.ok(find('.rose-table-cell-expand'));
   });
+
+  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'));
+  });
 });