From 874d7c598362b6bbb6a6a0260a08ef30041999e1 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 3 Jun 2020 17:07:27 -0400 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20tab=20item=20?= =?UTF-8?q?and=20tab=20layout=20components=20to=20rose=20addon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/layout/tabs.js | 7 +++ .../components/rose/layout/tabs.stories.mdx | 26 +++++++++ .../addon/components/rose/notification.js | 5 +- addons/rose/addon/components/rose/tab.js | 7 +++ .../addon/components/rose/tab.stories.mdx | 43 +++++++++++++++ .../addon/styles/rose/components/_index.scss | 1 + .../styles/rose/components/_notification.scss | 4 +- .../addon/styles/rose/components/_tab.scss | 53 +++++++++++++++++++ .../styles/rose/components/card/_link.scss | 2 +- .../styles/rose/components/layout/_index.scss | 2 + .../styles/rose/components/layout/_tabs.scss | 8 +++ .../templates/components/rose/layout/tabs.hbs | 3 ++ .../addon/templates/components/rose/tab.hbs | 22 ++++++++ .../rose/app/components/rose/layout/tabs.js | 1 + .../rose/app/components/rose/notification.js | 2 +- addons/rose/app/components/rose/tab.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 5 +- .../components/rose/layout/tabs-test.js | 13 +++++ .../components/rose/notification-test.js | 11 ++-- .../integration/components/rose/tab-test.js | 50 +++++++++++++++++ 20 files changed, 254 insertions(+), 12 deletions(-) create mode 100644 addons/rose/addon/components/rose/layout/tabs.js create mode 100644 addons/rose/addon/components/rose/layout/tabs.stories.mdx create mode 100644 addons/rose/addon/components/rose/tab.js create mode 100644 addons/rose/addon/components/rose/tab.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/_tab.scss create mode 100644 addons/rose/addon/styles/rose/components/layout/_tabs.scss create mode 100644 addons/rose/addon/templates/components/rose/layout/tabs.hbs create mode 100644 addons/rose/addon/templates/components/rose/tab.hbs create mode 100644 addons/rose/app/components/rose/layout/tabs.js create mode 100644 addons/rose/app/components/rose/tab.js create mode 100644 addons/rose/tests/integration/components/rose/layout/tabs-test.js create mode 100644 addons/rose/tests/integration/components/rose/tab-test.js diff --git a/addons/rose/addon/components/rose/layout/tabs.js b/addons/rose/addon/components/rose/layout/tabs.js new file mode 100644 index 000000000..88f0a170b --- /dev/null +++ b/addons/rose/addon/components/rose/layout/tabs.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/layout/tabs'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/tabs.stories.mdx b/addons/rose/addon/components/rose/layout/tabs.stories.mdx new file mode 100644 index 000000000..5ba3ad3f2 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/tabs.stories.mdx @@ -0,0 +1,26 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; + + + +# Tabs + +A tabs layout component to hold `Rose::Tab` definitions. + +```html + + + +``` + + + {{ + template: hbs` + + + + + `, + }} + diff --git a/addons/rose/addon/components/rose/notification.js b/addons/rose/addon/components/rose/notification.js index 0ff646e2d..2741d7f66 100644 --- a/addons/rose/addon/components/rose/notification.js +++ b/addons/rose/addon/components/rose/notification.js @@ -20,7 +20,7 @@ export default Component.extend({ get icon() { let icon = 'info-circle-fill'; - switch(this.style) { + switch (this.style) { case 'failure': icon = 'cancel-square-fill'; break; @@ -33,6 +33,5 @@ export default Component.extend({ } return icon; - } - + }, }); diff --git a/addons/rose/addon/components/rose/tab.js b/addons/rose/addon/components/rose/tab.js new file mode 100644 index 000000000..c37635f9b --- /dev/null +++ b/addons/rose/addon/components/rose/tab.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../templates/components/rose/tab'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/tab.stories.mdx b/addons/rose/addon/components/rose/tab.stories.mdx new file mode 100644 index 000000000..a4b7136aa --- /dev/null +++ b/addons/rose/addon/components/rose/tab.stories.mdx @@ -0,0 +1,43 @@ +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'; + + + +# Tab + +A tab item component with ability to configure icon, title, and badge sections. + +```html + +``` + + + {{ + template: hbs` + `, + context: { + title: text('title', 'Tab item'), + badge: text('badge', '3'), + icon: select( + 'icon', + { + 'info-circle-outline': 'info-circle-outline', + 'user-square-fill': 'user-square-fill', + 'check-circle-outline': 'check-circle-outline', + 'copy-action': 'copy-action', + 'unfold-more': 'unfold-more', + 'unfold-less': 'unfold-less', + }, + 'info-circle-outline' + ), + disabled: boolean('disabled', false) + }, + }} + diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index bbd2ebcda..3c4670299 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -4,3 +4,4 @@ @import 'layout'; @import 'notification'; @import 'card'; +@import 'tab'; diff --git a/addons/rose/addon/styles/rose/components/_notification.scss b/addons/rose/addon/styles/rose/components/_notification.scss index 71de0adf0..31d878749 100644 --- a/addons/rose/addon/styles/rose/components/_notification.scss +++ b/addons/rose/addon/styles/rose/components/_notification.scss @@ -58,11 +58,11 @@ } &:hover { - background-color: rgba(var(--stark-components), var(--opacity-3)) + background-color: rgba(var(--stark-components), var(--opacity-3)); } &:active { - background-color: rgba(var(--stark-components), var(--opacity-2)) + background-color: rgba(var(--stark-components), var(--opacity-2)); } } diff --git a/addons/rose/addon/styles/rose/components/_tab.scss b/addons/rose/addon/styles/rose/components/_tab.scss new file mode 100644 index 000000000..f6138608a --- /dev/null +++ b/addons/rose/addon/styles/rose/components/_tab.scss @@ -0,0 +1,53 @@ +@use '../variables/sizing'; +@use '../utilities/type'; + +.rose-tab { + @include type.type(s); + display: inline-block; + background-color: var(--subtle); + + .rose-tab-link { + text-decoration: none; + color: var(--ui-gray); + display: inline-block; + padding: sizing.rems(s) sizing.rems(m); + border-bottom: sizing.rems(xxxs) solid var(--subtle); + + &.rose-tab-link-disabled { + cursor: not-allowed; + pointer-events: none; + color: var(--ui-gray-subtler-2); + } + + &:active { + color: var(--action); + border-color: var(--action); + background-color: var(--subtle); + } + + &:hover { + color: var(--ui-gray); + border-color: var(--ui-gray-subtler-2); + background-color: var(--ui-gray-subtler-4); + } + + &:hover:active { + color: var(--action); + border-color: var(--action); + background-color: var(--ui-gray-subtler-4); + } + } + + .rose-tab-icon { + svg { + width: sizing.rems(m); + height: sizing.rems(m); + vertical-align: sub; + } + } + + .rose-tab-badge { + @include type.type(xs); + margin-left: sizing.rems(xxs); + } +} diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss index 949734531..c32153d01 100644 --- a/addons/rose/addon/styles/rose/components/card/_link.scss +++ b/addons/rose/addon/styles/rose/components/card/_link.scss @@ -3,7 +3,7 @@ .rose-card-link { @include type.type(s); - border: 1px solid var(--ui-gray-subtler-2); + border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); border-radius: sizing.rems(xxxs); color: var(--ui-gray); display: inline-flex; diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 958cc197d..ec0e4bc50 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,5 +1,7 @@ @use '../../variables/media'; +@import 'tabs'; + .rose-layout-page { display: grid; grid-template-areas: diff --git a/addons/rose/addon/styles/rose/components/layout/_tabs.scss b/addons/rose/addon/styles/rose/components/layout/_tabs.scss new file mode 100644 index 000000000..999018422 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/_tabs.scss @@ -0,0 +1,8 @@ +@use '../../variables/sizing'; + +.rose-layout-tabs { + border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); + display: flex; + flex-wrap: wrap; + flex-direction: row; +} diff --git a/addons/rose/addon/templates/components/rose/layout/tabs.hbs b/addons/rose/addon/templates/components/rose/layout/tabs.hbs new file mode 100644 index 000000000..7b777cb8b --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/tabs.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/tab.hbs b/addons/rose/addon/templates/components/rose/tab.hbs new file mode 100644 index 000000000..cfb65cf12 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/tab.hbs @@ -0,0 +1,22 @@ +
+ + {{#if @icon}} + {{inline-svg @icon}} + {{/if}} + + {{#if @title}} + {{@title}} + {{/if}} + + {{#if @badge}} + {{@badge}} + {{/if}} + + + {{yield}} +
diff --git a/addons/rose/app/components/rose/layout/tabs.js b/addons/rose/app/components/rose/layout/tabs.js new file mode 100644 index 000000000..9de968192 --- /dev/null +++ b/addons/rose/app/components/rose/layout/tabs.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/tabs'; diff --git a/addons/rose/app/components/rose/notification.js b/addons/rose/app/components/rose/notification.js index 228bd468c..bf9252122 100644 --- a/addons/rose/app/components/rose/notification.js +++ b/addons/rose/app/components/rose/notification.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/notification'; \ No newline at end of file +export { default } from 'rose/components/rose/notification'; diff --git a/addons/rose/app/components/rose/tab.js b/addons/rose/app/components/rose/tab.js new file mode 100644 index 000000000..37b6e680c --- /dev/null +++ b/addons/rose/app/components/rose/tab.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/tab'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 3b791ba07..fe5cfac6e 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -27,7 +27,6 @@ - Dummy app index template + + + + diff --git a/addons/rose/tests/integration/components/rose/layout/tabs-test.js b/addons/rose/tests/integration/components/rose/layout/tabs-test.js new file mode 100644 index 000000000..d14c5bc5f --- /dev/null +++ b/addons/rose/tests/integration/components/rose/layout/tabs-test.js @@ -0,0 +1,13 @@ +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/layout/tabs', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-layout-tabs')); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/notification-test.js b/addons/rose/tests/integration/components/rose/notification-test.js index 6027644d0..f8c1573b5 100644 --- a/addons/rose/tests/integration/components/rose/notification-test.js +++ b/addons/rose/tests/integration/components/rose/notification-test.js @@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find, click } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/notification', function(hooks) { +module('Integration | Component | rose/notification', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { + test('it renders', async function (assert) { await render(hbs` `); assert.ok(find('.rose-notification')); - assert.equal(find('.rose-notification-body').textContent.trim(), 'An error occurred.'); + assert.equal( + find('.rose-notification-body').textContent.trim(), + 'An error occurred.' + ); }); - test('it has optional dismiss button which triggers a function', async function(assert) { + test('it has optional dismiss button which triggers a function', async function (assert) { assert.expect(1); this.dismiss = () => assert.ok(true, 'dismiss clicked'); await render(hbs` diff --git a/addons/rose/tests/integration/components/rose/tab-test.js b/addons/rose/tests/integration/components/rose/tab-test.js new file mode 100644 index 000000000..b8eb0a74e --- /dev/null +++ b/addons/rose/tests/integration/components/rose/tab-test.js @@ -0,0 +1,50 @@ +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/tab', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('a')); + assert.ok(find('.rose-tab')); + assert.ok(find('.rose-tab-link')); + assert.notOk(find('.rose-tab-icon')); + assert.notOk(find('.rose-tab-badge')); + assert.notOk(find('.rose-tab-link-disabled')); + }); + + test('it renders with title', async function (assert) { + await render(hbs``); + assert.equal(find('a').title, 'Tab title'); + assert.equal(find('.rose-tab-link').textContent.trim(), 'Tab title'); + }); + + test('it renders with icon', async function (assert) { + await render(hbs``); + assert.ok(find('svg')); + assert.ok(find('.rose-tab-icon')); + }); + + test('it renders with badge', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-tab-badge')); + assert.equal(find('.rose-tab-badge').textContent.trim(), '3'); + }); + + test('it render with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#tab')); + }); + + test('it renders disabled', async function (assert) { + this.set('disabled', true); + await render(hbs``); + assert.ok(find('.rose-tab-link-disabled')); + + this.set('disabled', false); + assert.notOk(find('.rose-tab-link-disabled')); + }); +}); From d38d846746df9d0b2529971659f574b9ef4db0d3 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 3 Jun 2020 17:07:27 -0400 Subject: [PATCH 2/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20tab=20item=20?= =?UTF-8?q?and=20tab=20layout=20components=20to=20rose=20addon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/layout/tabs.js | 7 +++ .../components/rose/layout/tabs.stories.mdx | 26 +++++++++ .../addon/components/rose/notification.js | 3 +- addons/rose/addon/components/rose/tab.js | 7 +++ .../addon/components/rose/tab.stories.mdx | 43 +++++++++++++++ .../styles/rose/components/_notification.scss | 4 +- .../addon/styles/rose/components/_tab.scss | 53 +++++++++++++++++++ .../styles/rose/components/card/_link.scss | 2 +- .../styles/rose/components/layout/_index.scss | 2 + .../styles/rose/components/layout/_tabs.scss | 8 +++ .../templates/components/rose/layout/tabs.hbs | 3 ++ .../addon/templates/components/rose/tab.hbs | 22 ++++++++ .../rose/app/components/rose/layout/tabs.js | 1 + .../rose/app/components/rose/notification.js | 2 +- addons/rose/app/components/rose/tab.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 2 + .../components/rose/layout/tabs-test.js | 13 +++++ .../components/rose/notification-test.js | 11 ++-- .../integration/components/rose/tab-test.js | 50 +++++++++++++++++ 19 files changed, 250 insertions(+), 10 deletions(-) create mode 100644 addons/rose/addon/components/rose/layout/tabs.js create mode 100644 addons/rose/addon/components/rose/layout/tabs.stories.mdx create mode 100644 addons/rose/addon/components/rose/tab.js create mode 100644 addons/rose/addon/components/rose/tab.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/_tab.scss create mode 100644 addons/rose/addon/styles/rose/components/layout/_tabs.scss create mode 100644 addons/rose/addon/templates/components/rose/layout/tabs.hbs create mode 100644 addons/rose/addon/templates/components/rose/tab.hbs create mode 100644 addons/rose/app/components/rose/layout/tabs.js create mode 100644 addons/rose/app/components/rose/tab.js create mode 100644 addons/rose/tests/integration/components/rose/layout/tabs-test.js create mode 100644 addons/rose/tests/integration/components/rose/tab-test.js diff --git a/addons/rose/addon/components/rose/layout/tabs.js b/addons/rose/addon/components/rose/layout/tabs.js new file mode 100644 index 000000000..88f0a170b --- /dev/null +++ b/addons/rose/addon/components/rose/layout/tabs.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/layout/tabs'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/tabs.stories.mdx b/addons/rose/addon/components/rose/layout/tabs.stories.mdx new file mode 100644 index 000000000..5ba3ad3f2 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/tabs.stories.mdx @@ -0,0 +1,26 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; + + + +# Tabs + +A tabs layout component to hold `Rose::Tab` definitions. + +```html + + + +``` + + + {{ + template: hbs` + + + + + `, + }} + diff --git a/addons/rose/addon/components/rose/notification.js b/addons/rose/addon/components/rose/notification.js index 856dbc863..8000e87b4 100644 --- a/addons/rose/addon/components/rose/notification.js +++ b/addons/rose/addon/components/rose/notification.js @@ -33,6 +33,5 @@ export default Component.extend({ } return icon; - } - + }, }); diff --git a/addons/rose/addon/components/rose/tab.js b/addons/rose/addon/components/rose/tab.js new file mode 100644 index 000000000..c37635f9b --- /dev/null +++ b/addons/rose/addon/components/rose/tab.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../templates/components/rose/tab'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/tab.stories.mdx b/addons/rose/addon/components/rose/tab.stories.mdx new file mode 100644 index 000000000..a4b7136aa --- /dev/null +++ b/addons/rose/addon/components/rose/tab.stories.mdx @@ -0,0 +1,43 @@ +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'; + + + +# Tab + +A tab item component with ability to configure icon, title, and badge sections. + +```html + +``` + + + {{ + template: hbs` + `, + context: { + title: text('title', 'Tab item'), + badge: text('badge', '3'), + icon: select( + 'icon', + { + 'info-circle-outline': 'info-circle-outline', + 'user-square-fill': 'user-square-fill', + 'check-circle-outline': 'check-circle-outline', + 'copy-action': 'copy-action', + 'unfold-more': 'unfold-more', + 'unfold-less': 'unfold-less', + }, + 'info-circle-outline' + ), + disabled: boolean('disabled', false) + }, + }} + diff --git a/addons/rose/addon/styles/rose/components/_notification.scss b/addons/rose/addon/styles/rose/components/_notification.scss index ac88ea4f4..c69dde3f1 100644 --- a/addons/rose/addon/styles/rose/components/_notification.scss +++ b/addons/rose/addon/styles/rose/components/_notification.scss @@ -58,11 +58,11 @@ } &:hover { - background-color: rgba(var(--stark-components), var(--opacity-3)) + background-color: rgba(var(--stark-components), var(--opacity-3)); } &:active { - background-color: rgba(var(--stark-components), var(--opacity-2)) + background-color: rgba(var(--stark-components), var(--opacity-2)); } } diff --git a/addons/rose/addon/styles/rose/components/_tab.scss b/addons/rose/addon/styles/rose/components/_tab.scss new file mode 100644 index 000000000..f6138608a --- /dev/null +++ b/addons/rose/addon/styles/rose/components/_tab.scss @@ -0,0 +1,53 @@ +@use '../variables/sizing'; +@use '../utilities/type'; + +.rose-tab { + @include type.type(s); + display: inline-block; + background-color: var(--subtle); + + .rose-tab-link { + text-decoration: none; + color: var(--ui-gray); + display: inline-block; + padding: sizing.rems(s) sizing.rems(m); + border-bottom: sizing.rems(xxxs) solid var(--subtle); + + &.rose-tab-link-disabled { + cursor: not-allowed; + pointer-events: none; + color: var(--ui-gray-subtler-2); + } + + &:active { + color: var(--action); + border-color: var(--action); + background-color: var(--subtle); + } + + &:hover { + color: var(--ui-gray); + border-color: var(--ui-gray-subtler-2); + background-color: var(--ui-gray-subtler-4); + } + + &:hover:active { + color: var(--action); + border-color: var(--action); + background-color: var(--ui-gray-subtler-4); + } + } + + .rose-tab-icon { + svg { + width: sizing.rems(m); + height: sizing.rems(m); + vertical-align: sub; + } + } + + .rose-tab-badge { + @include type.type(xs); + margin-left: sizing.rems(xxs); + } +} diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss index ba0e367e8..26b3e3f8c 100644 --- a/addons/rose/addon/styles/rose/components/card/_link.scss +++ b/addons/rose/addon/styles/rose/components/card/_link.scss @@ -3,7 +3,7 @@ .rose-card-link { @include type.type(s); - border: 1px solid var(--ui-gray-subtler-2); + border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); border-radius: sizing.rems(xxxs); color: var(--ui-gray); display: inline-flex; diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 909cdbc83..27a5cbba3 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,6 +1,8 @@ @use '../../variables/sizing'; @use '../../variables/media'; +@import 'tabs'; + .rose-layout-page { display: grid; grid-template-areas: diff --git a/addons/rose/addon/styles/rose/components/layout/_tabs.scss b/addons/rose/addon/styles/rose/components/layout/_tabs.scss new file mode 100644 index 000000000..999018422 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/_tabs.scss @@ -0,0 +1,8 @@ +@use '../../variables/sizing'; + +.rose-layout-tabs { + border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); + display: flex; + flex-wrap: wrap; + flex-direction: row; +} diff --git a/addons/rose/addon/templates/components/rose/layout/tabs.hbs b/addons/rose/addon/templates/components/rose/layout/tabs.hbs new file mode 100644 index 000000000..7b777cb8b --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/tabs.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/tab.hbs b/addons/rose/addon/templates/components/rose/tab.hbs new file mode 100644 index 000000000..cfb65cf12 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/tab.hbs @@ -0,0 +1,22 @@ +
+ + {{#if @icon}} + {{inline-svg @icon}} + {{/if}} + + {{#if @title}} + {{@title}} + {{/if}} + + {{#if @badge}} + {{@badge}} + {{/if}} + + + {{yield}} +
diff --git a/addons/rose/app/components/rose/layout/tabs.js b/addons/rose/app/components/rose/layout/tabs.js new file mode 100644 index 000000000..9de968192 --- /dev/null +++ b/addons/rose/app/components/rose/layout/tabs.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/tabs'; diff --git a/addons/rose/app/components/rose/notification.js b/addons/rose/app/components/rose/notification.js index 228bd468c..bf9252122 100644 --- a/addons/rose/app/components/rose/notification.js +++ b/addons/rose/app/components/rose/notification.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/notification'; \ No newline at end of file +export { default } from 'rose/components/rose/notification'; diff --git a/addons/rose/app/components/rose/tab.js b/addons/rose/app/components/rose/tab.js new file mode 100644 index 000000000..37b6e680c --- /dev/null +++ b/addons/rose/app/components/rose/tab.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/tab'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index a58b48caf..4b0ad9bdf 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -198,5 +198,7 @@ + + diff --git a/addons/rose/tests/integration/components/rose/layout/tabs-test.js b/addons/rose/tests/integration/components/rose/layout/tabs-test.js new file mode 100644 index 000000000..d14c5bc5f --- /dev/null +++ b/addons/rose/tests/integration/components/rose/layout/tabs-test.js @@ -0,0 +1,13 @@ +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/layout/tabs', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-layout-tabs')); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/notification-test.js b/addons/rose/tests/integration/components/rose/notification-test.js index 6027644d0..f8c1573b5 100644 --- a/addons/rose/tests/integration/components/rose/notification-test.js +++ b/addons/rose/tests/integration/components/rose/notification-test.js @@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find, click } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/notification', function(hooks) { +module('Integration | Component | rose/notification', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { + test('it renders', async function (assert) { await render(hbs` `); assert.ok(find('.rose-notification')); - assert.equal(find('.rose-notification-body').textContent.trim(), 'An error occurred.'); + assert.equal( + find('.rose-notification-body').textContent.trim(), + 'An error occurred.' + ); }); - test('it has optional dismiss button which triggers a function', async function(assert) { + test('it has optional dismiss button which triggers a function', async function (assert) { assert.expect(1); this.dismiss = () => assert.ok(true, 'dismiss clicked'); await render(hbs` diff --git a/addons/rose/tests/integration/components/rose/tab-test.js b/addons/rose/tests/integration/components/rose/tab-test.js new file mode 100644 index 000000000..b8eb0a74e --- /dev/null +++ b/addons/rose/tests/integration/components/rose/tab-test.js @@ -0,0 +1,50 @@ +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/tab', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('a')); + assert.ok(find('.rose-tab')); + assert.ok(find('.rose-tab-link')); + assert.notOk(find('.rose-tab-icon')); + assert.notOk(find('.rose-tab-badge')); + assert.notOk(find('.rose-tab-link-disabled')); + }); + + test('it renders with title', async function (assert) { + await render(hbs``); + assert.equal(find('a').title, 'Tab title'); + assert.equal(find('.rose-tab-link').textContent.trim(), 'Tab title'); + }); + + test('it renders with icon', async function (assert) { + await render(hbs``); + assert.ok(find('svg')); + assert.ok(find('.rose-tab-icon')); + }); + + test('it renders with badge', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-tab-badge')); + assert.equal(find('.rose-tab-badge').textContent.trim(), '3'); + }); + + test('it render with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#tab')); + }); + + test('it renders disabled', async function (assert) { + this.set('disabled', true); + await render(hbs``); + assert.ok(find('.rose-tab-link-disabled')); + + this.set('disabled', false); + assert.notOk(find('.rose-tab-link-disabled')); + }); +}); From 4f37dc040c4c80ae654f9b852dab5dc3cae1c264 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 4 Jun 2020 11:40:26 -0400 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Refactor=20tab?= =?UTF-8?q?=20and=20layout=20into=20a=20single=20tab=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/layout/tabs.js | 7 --- .../addon/components/rose/{ => nav}/tab.js | 2 +- .../components/rose/{ => nav}/tab.stories.mdx | 6 +-- .../styles/rose/components/layout/_index.scss | 2 - .../styles/rose/components/layout/_tabs.scss | 8 --- .../styles/rose/components/nav/_index.scss | 1 + .../rose/components/{ => nav}/_tab.scss | 14 +++--- .../templates/components/rose/layout/tabs.hbs | 3 -- .../templates/components/rose/nav/tab.hbs | 22 ++++++++ .../addon/templates/components/rose/tab.hbs | 22 -------- .../rose/app/components/rose/layout/tabs.js | 1 - addons/rose/app/components/rose/nav/tab.js | 1 + addons/rose/app/components/rose/tab.js | 1 - .../components/rose/layout/tabs-test.js | 13 ----- .../components/rose/nav/tab-test.js | 50 +++++++++++++++++++ .../integration/components/rose/tab-test.js | 50 ------------------- 16 files changed, 85 insertions(+), 118 deletions(-) delete mode 100644 addons/rose/addon/components/rose/layout/tabs.js rename addons/rose/addon/components/rose/{ => nav}/tab.js (61%) rename addons/rose/addon/components/rose/{ => nav}/tab.stories.mdx (86%) delete mode 100644 addons/rose/addon/styles/rose/components/layout/_tabs.scss rename addons/rose/addon/styles/rose/components/{ => nav}/_tab.scss (84%) delete mode 100644 addons/rose/addon/templates/components/rose/layout/tabs.hbs create mode 100644 addons/rose/addon/templates/components/rose/nav/tab.hbs delete mode 100644 addons/rose/addon/templates/components/rose/tab.hbs delete mode 100644 addons/rose/app/components/rose/layout/tabs.js create mode 100644 addons/rose/app/components/rose/nav/tab.js delete mode 100644 addons/rose/app/components/rose/tab.js delete mode 100644 addons/rose/tests/integration/components/rose/layout/tabs-test.js create mode 100644 addons/rose/tests/integration/components/rose/nav/tab-test.js delete mode 100644 addons/rose/tests/integration/components/rose/tab-test.js diff --git a/addons/rose/addon/components/rose/layout/tabs.js b/addons/rose/addon/components/rose/layout/tabs.js deleted file mode 100644 index 88f0a170b..000000000 --- a/addons/rose/addon/components/rose/layout/tabs.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/layout/tabs'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/components/rose/tab.js b/addons/rose/addon/components/rose/nav/tab.js similarity index 61% rename from addons/rose/addon/components/rose/tab.js rename to addons/rose/addon/components/rose/nav/tab.js index c37635f9b..c4c84358c 100644 --- a/addons/rose/addon/components/rose/tab.js +++ b/addons/rose/addon/components/rose/nav/tab.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import layout from '../../templates/components/rose/tab'; +import layout from '../../../templates/components/rose/nav/tab'; export default Component.extend({ layout, diff --git a/addons/rose/addon/components/rose/tab.stories.mdx b/addons/rose/addon/components/rose/nav/tab.stories.mdx similarity index 86% rename from addons/rose/addon/components/rose/tab.stories.mdx rename to addons/rose/addon/components/rose/nav/tab.stories.mdx index a4b7136aa..6a9b6889e 100644 --- a/addons/rose/addon/components/rose/tab.stories.mdx +++ b/addons/rose/addon/components/rose/nav/tab.stories.mdx @@ -3,20 +3,20 @@ import { hbs } from 'ember-cli-htmlbars'; import { action } from '@storybook/addon-actions'; import { text, boolean, select } from '@storybook/addon-knobs'; - + # Tab A tab item component with ability to configure icon, title, and badge sections. ```html - + ``` {{ template: hbs` - - {{yield}} - diff --git a/addons/rose/addon/templates/components/rose/nav/tab.hbs b/addons/rose/addon/templates/components/rose/nav/tab.hbs new file mode 100644 index 000000000..3d1c5e4cd --- /dev/null +++ b/addons/rose/addon/templates/components/rose/nav/tab.hbs @@ -0,0 +1,22 @@ +
+ + {{#if @icon}} + {{inline-svg @icon}} + {{/if}} + + {{#if @title}} + {{@title}} + {{/if}} + + {{#if @badge}} + {{@badge}} + {{/if}} + + + {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/tab.hbs b/addons/rose/addon/templates/components/rose/tab.hbs deleted file mode 100644 index cfb65cf12..000000000 --- a/addons/rose/addon/templates/components/rose/tab.hbs +++ /dev/null @@ -1,22 +0,0 @@ -
- - {{#if @icon}} - {{inline-svg @icon}} - {{/if}} - - {{#if @title}} - {{@title}} - {{/if}} - - {{#if @badge}} - {{@badge}} - {{/if}} - - - {{yield}} -
diff --git a/addons/rose/app/components/rose/layout/tabs.js b/addons/rose/app/components/rose/layout/tabs.js deleted file mode 100644 index 9de968192..000000000 --- a/addons/rose/app/components/rose/layout/tabs.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/layout/tabs'; diff --git a/addons/rose/app/components/rose/nav/tab.js b/addons/rose/app/components/rose/nav/tab.js new file mode 100644 index 000000000..92c7185e3 --- /dev/null +++ b/addons/rose/app/components/rose/nav/tab.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/nav/tab'; diff --git a/addons/rose/app/components/rose/tab.js b/addons/rose/app/components/rose/tab.js deleted file mode 100644 index 37b6e680c..000000000 --- a/addons/rose/app/components/rose/tab.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/tab'; diff --git a/addons/rose/tests/integration/components/rose/layout/tabs-test.js b/addons/rose/tests/integration/components/rose/layout/tabs-test.js deleted file mode 100644 index d14c5bc5f..000000000 --- a/addons/rose/tests/integration/components/rose/layout/tabs-test.js +++ /dev/null @@ -1,13 +0,0 @@ -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/layout/tabs', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-layout-tabs')); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/nav/tab-test.js b/addons/rose/tests/integration/components/rose/nav/tab-test.js new file mode 100644 index 000000000..963b31b17 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/nav/tab-test.js @@ -0,0 +1,50 @@ +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/nav/tab', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('a')); + assert.ok(find('.rose-nav-tab')); + assert.ok(find('.rose-nav-tab-link')); + assert.notOk(find('.rose-nav-tab-icon')); + assert.notOk(find('.rose-nav-tab-badge')); + assert.notOk(find('.rose-nav-tab-link-disabled')); + }); + + test('it renders with title', async function (assert) { + await render(hbs``); + assert.equal(find('a').title, 'Tab title'); + assert.equal(find('.rose-nav-tab-link').textContent.trim(), 'Tab title'); + }); + + test('it renders with icon', async function (assert) { + await render(hbs``); + assert.ok(find('svg')); + assert.ok(find('.rose-nav-tab-icon')); + }); + + test('it renders with badge', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-nav-tab-badge')); + assert.equal(find('.rose-nav-tab-badge').textContent.trim(), '3'); + }); + + test('it render with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#tab')); + }); + + test('it renders disabled', async function (assert) { + this.set('disabled', true); + await render(hbs``); + assert.ok(find('.rose-nav-tab-link-disabled')); + + this.set('disabled', false); + assert.notOk(find('.rose-nav-tab-link-disabled')); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/tab-test.js b/addons/rose/tests/integration/components/rose/tab-test.js deleted file mode 100644 index b8eb0a74e..000000000 --- a/addons/rose/tests/integration/components/rose/tab-test.js +++ /dev/null @@ -1,50 +0,0 @@ -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/tab', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('a')); - assert.ok(find('.rose-tab')); - assert.ok(find('.rose-tab-link')); - assert.notOk(find('.rose-tab-icon')); - assert.notOk(find('.rose-tab-badge')); - assert.notOk(find('.rose-tab-link-disabled')); - }); - - test('it renders with title', async function (assert) { - await render(hbs``); - assert.equal(find('a').title, 'Tab title'); - assert.equal(find('.rose-tab-link').textContent.trim(), 'Tab title'); - }); - - test('it renders with icon', async function (assert) { - await render(hbs``); - assert.ok(find('svg')); - assert.ok(find('.rose-tab-icon')); - }); - - test('it renders with badge', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-tab-badge')); - assert.equal(find('.rose-tab-badge').textContent.trim(), '3'); - }); - - test('it render with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#tab')); - }); - - test('it renders disabled', async function (assert) { - this.set('disabled', true); - await render(hbs``); - assert.ok(find('.rose-tab-link-disabled')); - - this.set('disabled', false); - assert.notOk(find('.rose-tab-link-disabled')); - }); -}); From feb7f5a727a102771f8dc41dddb12c6a845c1549 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 4 Jun 2020 13:46:23 -0400 Subject: [PATCH 4/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Integrate=20tab=20r?= =?UTF-8?q?ose=20component=20into=20ui/core?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/styles/rose/components/nav/_tab.scss | 2 +- ui/core/app/styles/app.scss | 8 ++++++++ ui/core/app/templates/orgs/org/projects/project.hbs | 6 +++++- ui/core/translations/en-us.yaml | 4 ++++ 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/nav/_tab.scss b/addons/rose/addon/styles/rose/components/nav/_tab.scss index 6eb332810..8bbad4116 100644 --- a/addons/rose/addon/styles/rose/components/nav/_tab.scss +++ b/addons/rose/addon/styles/rose/components/nav/_tab.scss @@ -19,7 +19,7 @@ color: var(--ui-gray-subtler-2); } - &:active { + &:active, &.active { color: var(--action); border-color: var(--action); background-color: var(--subtle); diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index 667cc9039..56c8e3df1 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -64,4 +64,12 @@ width: 100%; } } + + .tabs { + border-bottom: 2px solid #bac1cc; + display: flex; + flex-wrap: wrap; + flex-direction: row; + margin-bottom: 10px; + } } diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs index 4c360b74c..3b20217e0 100644 --- a/ui/core/app/templates/orgs/org/projects/project.hbs +++ b/ui/core/app/templates/orgs/org/projects/project.hbs @@ -7,7 +7,11 @@ {{@model.name}} -

{{@model.name}}

+

{{t "resources.project.settings"}}

+ +
+ +
Date: Thu, 4 Jun 2020 14:20:53 -0400 Subject: [PATCH 5/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20unused=20t?= =?UTF-8?q?ab=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/layout/tabs.js | 7 --- .../components/rose/layout/tabs.stories.mdx | 26 --------- addons/rose/addon/components/rose/tab.js | 7 --- .../addon/components/rose/tab.stories.mdx | 43 --------------- .../addon/styles/rose/components/_index.scss | 1 - .../addon/styles/rose/components/_tab.scss | 53 ------------------- .../styles/rose/components/layout/_index.scss | 2 - .../styles/rose/components/layout/_tabs.scss | 8 --- .../components/rose/layout/tabs-test.js | 13 ----- .../integration/components/rose/tab-test.js | 50 ----------------- 10 files changed, 210 deletions(-) delete mode 100644 addons/rose/addon/components/rose/layout/tabs.js delete mode 100644 addons/rose/addon/components/rose/layout/tabs.stories.mdx delete mode 100644 addons/rose/addon/components/rose/tab.js delete mode 100644 addons/rose/addon/components/rose/tab.stories.mdx delete mode 100644 addons/rose/addon/styles/rose/components/_tab.scss delete mode 100644 addons/rose/addon/styles/rose/components/layout/_tabs.scss delete mode 100644 addons/rose/tests/integration/components/rose/layout/tabs-test.js delete mode 100644 addons/rose/tests/integration/components/rose/tab-test.js diff --git a/addons/rose/addon/components/rose/layout/tabs.js b/addons/rose/addon/components/rose/layout/tabs.js deleted file mode 100644 index 88f0a170b..000000000 --- a/addons/rose/addon/components/rose/layout/tabs.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/layout/tabs'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/components/rose/layout/tabs.stories.mdx b/addons/rose/addon/components/rose/layout/tabs.stories.mdx deleted file mode 100644 index 5ba3ad3f2..000000000 --- a/addons/rose/addon/components/rose/layout/tabs.stories.mdx +++ /dev/null @@ -1,26 +0,0 @@ -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; -import { hbs } from 'ember-cli-htmlbars'; -import { action } from '@storybook/addon-actions'; - - - -# Tabs - -A tabs layout component to hold `Rose::Tab` definitions. - -```html - - - -``` - - - {{ - template: hbs` - - - - - `, - }} - diff --git a/addons/rose/addon/components/rose/tab.js b/addons/rose/addon/components/rose/tab.js deleted file mode 100644 index c37635f9b..000000000 --- a/addons/rose/addon/components/rose/tab.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../templates/components/rose/tab'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/components/rose/tab.stories.mdx b/addons/rose/addon/components/rose/tab.stories.mdx deleted file mode 100644 index a4b7136aa..000000000 --- a/addons/rose/addon/components/rose/tab.stories.mdx +++ /dev/null @@ -1,43 +0,0 @@ -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'; - - - -# Tab - -A tab item component with ability to configure icon, title, and badge sections. - -```html - -``` - - - {{ - template: hbs` - `, - context: { - title: text('title', 'Tab item'), - badge: text('badge', '3'), - icon: select( - 'icon', - { - 'info-circle-outline': 'info-circle-outline', - 'user-square-fill': 'user-square-fill', - 'check-circle-outline': 'check-circle-outline', - 'copy-action': 'copy-action', - 'unfold-more': 'unfold-more', - 'unfold-less': 'unfold-less', - }, - 'info-circle-outline' - ), - disabled: boolean('disabled', false) - }, - }} - diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index 77ee3478a..ec7bd22af 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -4,5 +4,4 @@ @import 'layout'; @import 'notification'; @import 'card'; -@import 'tab'; @import 'nav'; diff --git a/addons/rose/addon/styles/rose/components/_tab.scss b/addons/rose/addon/styles/rose/components/_tab.scss deleted file mode 100644 index f6138608a..000000000 --- a/addons/rose/addon/styles/rose/components/_tab.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use '../variables/sizing'; -@use '../utilities/type'; - -.rose-tab { - @include type.type(s); - display: inline-block; - background-color: var(--subtle); - - .rose-tab-link { - text-decoration: none; - color: var(--ui-gray); - display: inline-block; - padding: sizing.rems(s) sizing.rems(m); - border-bottom: sizing.rems(xxxs) solid var(--subtle); - - &.rose-tab-link-disabled { - cursor: not-allowed; - pointer-events: none; - color: var(--ui-gray-subtler-2); - } - - &:active { - color: var(--action); - border-color: var(--action); - background-color: var(--subtle); - } - - &:hover { - color: var(--ui-gray); - border-color: var(--ui-gray-subtler-2); - background-color: var(--ui-gray-subtler-4); - } - - &:hover:active { - color: var(--action); - border-color: var(--action); - background-color: var(--ui-gray-subtler-4); - } - } - - .rose-tab-icon { - svg { - width: sizing.rems(m); - height: sizing.rems(m); - vertical-align: sub; - } - } - - .rose-tab-badge { - @include type.type(xs); - margin-left: sizing.rems(xxs); - } -} diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 27a5cbba3..909cdbc83 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,8 +1,6 @@ @use '../../variables/sizing'; @use '../../variables/media'; -@import 'tabs'; - .rose-layout-page { display: grid; grid-template-areas: diff --git a/addons/rose/addon/styles/rose/components/layout/_tabs.scss b/addons/rose/addon/styles/rose/components/layout/_tabs.scss deleted file mode 100644 index 999018422..000000000 --- a/addons/rose/addon/styles/rose/components/layout/_tabs.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use '../../variables/sizing'; - -.rose-layout-tabs { - border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); - display: flex; - flex-wrap: wrap; - flex-direction: row; -} diff --git a/addons/rose/tests/integration/components/rose/layout/tabs-test.js b/addons/rose/tests/integration/components/rose/layout/tabs-test.js deleted file mode 100644 index d14c5bc5f..000000000 --- a/addons/rose/tests/integration/components/rose/layout/tabs-test.js +++ /dev/null @@ -1,13 +0,0 @@ -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/layout/tabs', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-layout-tabs')); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/tab-test.js b/addons/rose/tests/integration/components/rose/tab-test.js deleted file mode 100644 index b8eb0a74e..000000000 --- a/addons/rose/tests/integration/components/rose/tab-test.js +++ /dev/null @@ -1,50 +0,0 @@ -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/tab', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('a')); - assert.ok(find('.rose-tab')); - assert.ok(find('.rose-tab-link')); - assert.notOk(find('.rose-tab-icon')); - assert.notOk(find('.rose-tab-badge')); - assert.notOk(find('.rose-tab-link-disabled')); - }); - - test('it renders with title', async function (assert) { - await render(hbs``); - assert.equal(find('a').title, 'Tab title'); - assert.equal(find('.rose-tab-link').textContent.trim(), 'Tab title'); - }); - - test('it renders with icon', async function (assert) { - await render(hbs``); - assert.ok(find('svg')); - assert.ok(find('.rose-tab-icon')); - }); - - test('it renders with badge', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-tab-badge')); - assert.equal(find('.rose-tab-badge').textContent.trim(), '3'); - }); - - test('it render with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#tab')); - }); - - test('it renders disabled', async function (assert) { - this.set('disabled', true); - await render(hbs``); - assert.ok(find('.rose-tab-link-disabled')); - - this.set('disabled', false); - assert.notOk(find('.rose-tab-link-disabled')); - }); -}); From ffdeb8b1c3bb4953f1d6911f0573962cd8514016 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 4 Jun 2020 14:25:06 -0400 Subject: [PATCH 6/7] chore: remove unused code --- .../templates/components/rose/layout/tabs.hbs | 3 --- .../addon/templates/components/rose/tab.hbs | 22 ------------------- 2 files changed, 25 deletions(-) delete mode 100644 addons/rose/addon/templates/components/rose/layout/tabs.hbs delete mode 100644 addons/rose/addon/templates/components/rose/tab.hbs diff --git a/addons/rose/addon/templates/components/rose/layout/tabs.hbs b/addons/rose/addon/templates/components/rose/layout/tabs.hbs deleted file mode 100644 index 7b777cb8b..000000000 --- a/addons/rose/addon/templates/components/rose/layout/tabs.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{yield}} -
diff --git a/addons/rose/addon/templates/components/rose/tab.hbs b/addons/rose/addon/templates/components/rose/tab.hbs deleted file mode 100644 index cfb65cf12..000000000 --- a/addons/rose/addon/templates/components/rose/tab.hbs +++ /dev/null @@ -1,22 +0,0 @@ -
- - {{#if @icon}} - {{inline-svg @icon}} - {{/if}} - - {{#if @title}} - {{@title}} - {{/if}} - - {{#if @badge}} - {{@badge}} - {{/if}} - - - {{yield}} -
From b03b31ff1add2ebec3ef79c131329397400aa415 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 4 Jun 2020 15:33:24 -0400 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20simplify=20tabs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/rose/nav/sidebar.stories.mdx | 2 +- .../addon/components/rose/nav/tab.stories.mdx | 43 --------------- .../components/rose/nav/{tab.js => tabs.js} | 3 +- .../components/rose/nav/tabs.stories.mdx | 31 +++++++++++ .../addon/components/rose/notification.js | 3 +- .../styles/rose/components/nav/_index.scss | 4 +- .../styles/rose/components/nav/_tab.scss | 53 ------------------- .../styles/rose/components/nav/_tabs.scss | 33 ++++++++++++ .../templates/components/rose/nav/tab.hbs | 22 -------- .../templates/components/rose/nav/tabs.hbs | 9 ++++ addons/rose/app/components/rose/nav/tab.js | 1 - addons/rose/app/components/rose/nav/tabs.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 2 - .../components/rose/nav/sidebar-test.js | 8 +-- .../components/rose/nav/tab-test.js | 50 ----------------- .../components/rose/nav/tabs-test.js | 19 +++++++ ui/core/app/styles/app.scss | 10 +--- .../templates/orgs/org/projects/project.hbs | 11 ++-- 18 files changed, 111 insertions(+), 194 deletions(-) delete mode 100644 addons/rose/addon/components/rose/nav/tab.stories.mdx rename addons/rose/addon/components/rose/nav/{tab.js => tabs.js} (53%) create mode 100644 addons/rose/addon/components/rose/nav/tabs.stories.mdx delete mode 100644 addons/rose/addon/styles/rose/components/nav/_tab.scss create mode 100644 addons/rose/addon/styles/rose/components/nav/_tabs.scss delete mode 100644 addons/rose/addon/templates/components/rose/nav/tab.hbs create mode 100644 addons/rose/addon/templates/components/rose/nav/tabs.hbs delete mode 100644 addons/rose/app/components/rose/nav/tab.js create mode 100644 addons/rose/app/components/rose/nav/tabs.js delete mode 100644 addons/rose/tests/integration/components/rose/nav/tab-test.js create mode 100644 addons/rose/tests/integration/components/rose/nav/tabs-test.js diff --git a/addons/rose/addon/components/rose/nav/sidebar.stories.mdx b/addons/rose/addon/components/rose/nav/sidebar.stories.mdx index 353cf0e86..6fb344b7f 100644 --- a/addons/rose/addon/components/rose/nav/sidebar.stories.mdx +++ b/addons/rose/addon/components/rose/nav/sidebar.stories.mdx @@ -3,7 +3,7 @@ import { hbs } from 'ember-cli-htmlbars'; import { action } from '@storybook/addon-actions'; import { text, boolean, select } from '@storybook/addon-knobs'; - + # Sidebar Navigation diff --git a/addons/rose/addon/components/rose/nav/tab.stories.mdx b/addons/rose/addon/components/rose/nav/tab.stories.mdx deleted file mode 100644 index 6a9b6889e..000000000 --- a/addons/rose/addon/components/rose/nav/tab.stories.mdx +++ /dev/null @@ -1,43 +0,0 @@ -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'; - - - -# Tab - -A tab item component with ability to configure icon, title, and badge sections. - -```html - -``` - - - {{ - template: hbs` - `, - context: { - title: text('title', 'Tab item'), - badge: text('badge', '3'), - icon: select( - 'icon', - { - 'info-circle-outline': 'info-circle-outline', - 'user-square-fill': 'user-square-fill', - 'check-circle-outline': 'check-circle-outline', - 'copy-action': 'copy-action', - 'unfold-more': 'unfold-more', - 'unfold-less': 'unfold-less', - }, - 'info-circle-outline' - ), - disabled: boolean('disabled', false) - }, - }} - diff --git a/addons/rose/addon/components/rose/nav/tab.js b/addons/rose/addon/components/rose/nav/tabs.js similarity index 53% rename from addons/rose/addon/components/rose/nav/tab.js rename to addons/rose/addon/components/rose/nav/tabs.js index c4c84358c..5ee542903 100644 --- a/addons/rose/addon/components/rose/nav/tab.js +++ b/addons/rose/addon/components/rose/nav/tabs.js @@ -1,7 +1,6 @@ import Component from '@ember/component'; -import layout from '../../../templates/components/rose/nav/tab'; +import layout from '../../../templates/components/rose/nav/tabs'; export default Component.extend({ layout, - tagName: '', }); diff --git a/addons/rose/addon/components/rose/nav/tabs.stories.mdx b/addons/rose/addon/components/rose/nav/tabs.stories.mdx new file mode 100644 index 000000000..fd429ce62 --- /dev/null +++ b/addons/rose/addon/components/rose/nav/tabs.stories.mdx @@ -0,0 +1,31 @@ +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'; + + + +# Tabs Navigation + +A simple tabbed navigation component. + +```html + + Text + Text + Text + +``` + + + {{ + template: hbs` + + Text + Text + Text + + `, + context: {}, + }} + diff --git a/addons/rose/addon/components/rose/notification.js b/addons/rose/addon/components/rose/notification.js index f1df73616..1b1677a67 100644 --- a/addons/rose/addon/components/rose/notification.js +++ b/addons/rose/addon/components/rose/notification.js @@ -20,8 +20,7 @@ export default Component.extend({ get icon() { let icon = 'info-circle-fill'; - - switch(this.style) { + switch (this.style) { case 'error': icon = 'cancel-square-fill'; break; diff --git a/addons/rose/addon/styles/rose/components/nav/_index.scss b/addons/rose/addon/styles/rose/components/nav/_index.scss index b56832ff9..4a208cbee 100644 --- a/addons/rose/addon/styles/rose/components/nav/_index.scss +++ b/addons/rose/addon/styles/rose/components/nav/_index.scss @@ -1,2 +1,2 @@ -@import "sidebar"; -@import 'tab'; +@import 'sidebar'; +@import 'tabs'; diff --git a/addons/rose/addon/styles/rose/components/nav/_tab.scss b/addons/rose/addon/styles/rose/components/nav/_tab.scss deleted file mode 100644 index 8bbad4116..000000000 --- a/addons/rose/addon/styles/rose/components/nav/_tab.scss +++ /dev/null @@ -1,53 +0,0 @@ -@use '../../variables/sizing'; -@use '../../utilities/type'; - -.rose-nav-tab { - @include type.type(s); - display: inline-block; - background-color: var(--subtle); - - .rose-nav-tab-link { - text-decoration: none; - color: var(--ui-gray); - display: inline-block; - padding: sizing.rems(s) sizing.rems(m); - border-bottom: sizing.rems(xxxs) solid var(--subtle); - - &.rose-nav-tab-link-disabled { - cursor: not-allowed; - pointer-events: none; - color: var(--ui-gray-subtler-2); - } - - &:active, &.active { - color: var(--action); - border-color: var(--action); - background-color: var(--subtle); - } - - &:hover { - color: var(--ui-gray); - border-color: var(--ui-gray-subtler-2); - background-color: var(--ui-gray-subtler-4); - } - - &:hover:active { - color: var(--action); - border-color: var(--action); - background-color: var(--ui-gray-subtler-4); - } - } - - .rose-nav-tab-icon { - svg { - width: sizing.rems(m); - height: sizing.rems(m); - vertical-align: sub; - } - } - - .rose-nav-tab-badge { - @include type.type(xs); - margin-left: sizing.rems(xxs); - } -} diff --git a/addons/rose/addon/styles/rose/components/nav/_tabs.scss b/addons/rose/addon/styles/rose/components/nav/_tabs.scss new file mode 100644 index 000000000..73c2f78b2 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/nav/_tabs.scss @@ -0,0 +1,33 @@ +@use '../../variables/sizing'; +@use '../../utilities/type'; + +.rose-nav-tabs { + display: flex; + margin-bottom: sizing.rems(m); + box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-gray-subtler-2); + + .rose-nav-link { + --color: var(--ui-gray); + --background: transparent; + --box-shadow-color: transparent; + + @include type.type(s, semibold); + display: inline-block; + color: var(--color); + background-color: var(--background); + box-shadow: inset 0 -#{sizing.rems(xxxxs) * 3} 0 var(--box-shadow-color); + text-decoration: none; + padding: sizing.rems(m); + + &:hover { + --box-shadow-color: var(--ui-gray-subtler-2); + --background: var(--ui-gray-subtler-4); + } + + &:active, + &.active { + --color: var(--action); + --box-shadow-color: currentColor; + } + } +} diff --git a/addons/rose/addon/templates/components/rose/nav/tab.hbs b/addons/rose/addon/templates/components/rose/nav/tab.hbs deleted file mode 100644 index 3d1c5e4cd..000000000 --- a/addons/rose/addon/templates/components/rose/nav/tab.hbs +++ /dev/null @@ -1,22 +0,0 @@ -
- - {{#if @icon}} - {{inline-svg @icon}} - {{/if}} - - {{#if @title}} - {{@title}} - {{/if}} - - {{#if @badge}} - {{@badge}} - {{/if}} - - - {{yield}} -
diff --git a/addons/rose/addon/templates/components/rose/nav/tabs.hbs b/addons/rose/addon/templates/components/rose/nav/tabs.hbs new file mode 100644 index 000000000..18470f7d5 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/nav/tabs.hbs @@ -0,0 +1,9 @@ + diff --git a/addons/rose/app/components/rose/nav/tab.js b/addons/rose/app/components/rose/nav/tab.js deleted file mode 100644 index 92c7185e3..000000000 --- a/addons/rose/app/components/rose/nav/tab.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/nav/tab'; diff --git a/addons/rose/app/components/rose/nav/tabs.js b/addons/rose/app/components/rose/nav/tabs.js new file mode 100644 index 000000000..91a0d8fe8 --- /dev/null +++ b/addons/rose/app/components/rose/nav/tabs.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/nav/tabs'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 08352c8df..ec3965039 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -198,7 +198,5 @@ - - diff --git a/addons/rose/tests/integration/components/rose/nav/sidebar-test.js b/addons/rose/tests/integration/components/rose/nav/sidebar-test.js index dfda90191..293079caa 100644 --- a/addons/rose/tests/integration/components/rose/nav/sidebar-test.js +++ b/addons/rose/tests/integration/components/rose/nav/sidebar-test.js @@ -3,11 +3,11 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/nav/sidebar', function(hooks) { +module('Integration | Component | rose/nav/sidebar', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { - assert.expect(2) + test('it renders', async function (assert) { + assert.expect(2); await render(hbs` Item Name @@ -18,7 +18,7 @@ module('Integration | Component | rose/nav/sidebar', function(hooks) { }); test('it associates title with nav via aria-labelledby', async function (assert) { - assert.expect(2) + assert.expect(2); await render(hbs` Item Name diff --git a/addons/rose/tests/integration/components/rose/nav/tab-test.js b/addons/rose/tests/integration/components/rose/nav/tab-test.js deleted file mode 100644 index 963b31b17..000000000 --- a/addons/rose/tests/integration/components/rose/nav/tab-test.js +++ /dev/null @@ -1,50 +0,0 @@ -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/nav/tab', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('a')); - assert.ok(find('.rose-nav-tab')); - assert.ok(find('.rose-nav-tab-link')); - assert.notOk(find('.rose-nav-tab-icon')); - assert.notOk(find('.rose-nav-tab-badge')); - assert.notOk(find('.rose-nav-tab-link-disabled')); - }); - - test('it renders with title', async function (assert) { - await render(hbs``); - assert.equal(find('a').title, 'Tab title'); - assert.equal(find('.rose-nav-tab-link').textContent.trim(), 'Tab title'); - }); - - test('it renders with icon', async function (assert) { - await render(hbs``); - assert.ok(find('svg')); - assert.ok(find('.rose-nav-tab-icon')); - }); - - test('it renders with badge', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-nav-tab-badge')); - assert.equal(find('.rose-nav-tab-badge').textContent.trim(), '3'); - }); - - test('it render with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#tab')); - }); - - test('it renders disabled', async function (assert) { - this.set('disabled', true); - await render(hbs``); - assert.ok(find('.rose-nav-tab-link-disabled')); - - this.set('disabled', false); - assert.notOk(find('.rose-nav-tab-link-disabled')); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/nav/tabs-test.js b/addons/rose/tests/integration/components/rose/nav/tabs-test.js new file mode 100644 index 000000000..733f9e997 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/nav/tabs-test.js @@ -0,0 +1,19 @@ +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/nav/tabs', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + assert.expect(2); + await render(hbs` + + Item Name + + `); + assert.ok(find('.rose-nav-tabs')); + assert.equal(find('.rose-nav-link').textContent.trim(), 'Item Name'); + }); +}); diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index 56c8e3df1..7cf4f25cd 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -9,7 +9,7 @@ .rose-form { width: 66%; - + .rose-form-input { width: 100%; @@ -64,12 +64,4 @@ width: 100%; } } - - .tabs { - border-bottom: 2px solid #bac1cc; - display: flex; - flex-wrap: wrap; - flex-direction: row; - margin-bottom: 10px; - } } diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs index 3b20217e0..26770d11b 100644 --- a/ui/core/app/templates/orgs/org/projects/project.hbs +++ b/ui/core/app/templates/orgs/org/projects/project.hbs @@ -9,9 +9,14 @@

{{t "resources.project.settings"}}

-
- -
+ + + {{t 'dev.item-name'}} + + + {{t 'dev.item-name'}} + +