From 8feeaa47dc5874d7c6753d8fc919856d1c97328f Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Date: Tue, 11 May 2021 15:06:04 -0700 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Refactor=20rose=20table?= =?UTF-8?q?=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../components/rose/table/index.stories.mdx | 32 ++++++++++--------- .../components/rose/table/row/cell/index.js | 11 ++++++- .../addon/components/rose/table/row/index.hbs | 14 -------- .../styles/rose/components/table/_table.scss | 4 +++ .../rose/tests/dummy/app/templates/index.hbs | 14 ++++---- .../components/rose/table/row/cell-test.js | 32 +++++++++++++++++++ 6 files changed, 70 insertions(+), 37 deletions(-) diff --git a/addons/rose/addon/components/rose/table/index.stories.mdx b/addons/rose/addon/components/rose/table/index.stories.mdx index d2f56a5b8..f11560e41 100644 --- a/addons/rose/addon/components/rose/table/index.stories.mdx +++ b/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. 1.1.1.1 host-set-2 - optional name - description + optional name + description 1.1.1.1 @@ -54,10 +54,10 @@ Cell expansion style should be applied to only one cell in a row. - Address - Host Set - Name - Description + Address + Host Set + Name + Description @@ -68,16 +68,16 @@ Cell expansion style should be applied to only one cell in a row. description - 1.1.1.1 - host-set-2 - optional name - description + 1.1.1.1 + host-set-2 + optional name + description - 1.1.1.1 - host-set-1 - optional name - description + 1.1.1.1 + host-set-1 + optional name + description @@ -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), }, }} diff --git a/addons/rose/addon/components/rose/table/row/cell/index.js b/addons/rose/addon/components/rose/table/row/cell/index.js index 01bcb5fd7..09f5f53dc 100644 --- a/addons/rose/addon/components/rose/table/row/cell/index.js +++ b/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'; + } + }) }); diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index 5183c0746..4b511d869 100644 --- a/addons/rose/addon/components/rose/table/row/index.hbs +++ b/addons/rose/addon/components/rose/table/row/index.hbs @@ -4,17 +4,3 @@ headerCell=(component 'rose/table/row/cell' tagName='th') )}} - - -{{!-- - {{yield (hash - cell=(component 'rose/anonymous' - tagName='td' - class='rose-table-cell' - ) - headerCell=(component 'rose/anonymous' - tagName='th' - class='rose-table-header-cell' - ) - )}} - --}} diff --git a/addons/rose/addon/styles/rose/components/table/_table.scss b/addons/rose/addon/styles/rose/components/table/_table.scss index 997ef944a..4f6ea31d8 100644 --- a/addons/rose/addon/styles/rose/components/table/_table.scss +++ b/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 { diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index eabd793cb..17cd6861b 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -43,7 +43,7 @@ description - + Footer @@ -63,9 +63,9 @@ 1.1.1.1 - host-set-1, host-set-2 - optional name - description + host-set-1, host-set-2 + optional name + description @@ -106,7 +106,7 @@ - + Footer @@ -116,7 +116,7 @@

Condensed Table With Visually Hidden Header & Footer

- + Address Host Set Name @@ -132,7 +132,7 @@ - + Footer diff --git a/addons/rose/tests/integration/components/rose/table/row/cell-test.js b/addons/rose/tests/integration/components/rose/table/row/cell-test.js index 48928d3d6..dcc93e33c 100644 --- a/addons/rose/tests/integration/components/rose/table/row/cell-test.js +++ b/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``); 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`` + ); + 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``); + 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`` + ); + 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``); + assert.ok(find('.rose-table-cell')); + assert.ok(find('.align-right')); + }); });