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')); - }); -});