refactor: 💡 Refactor tab and layout into a single tab component

addons/rose/addon/components/rose/layout/tabs.js

@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/tabs';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});

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,

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';
 
-<Meta title="Rose|Tab" component="Tab" />
+<Meta title="Rose|Nav|Tab" component="Tab" />
 
 # Tab
 
 A tab item component with ability to configure icon, title, and badge sections.
 
 ```html
-<Rose::Tab @title="Tab item" @badge="3" @icon="info-circle-outline" @disabled={{false}} />
+<Rose::Nav::Tab @title="Tab item" @badge="3" @icon="info-circle-outline" @disabled={{false}} />
 ```
 
 <Preview>
   <Story name="Basic">{{
     template: hbs`
-    <Rose::Tab
+    <Rose::Nav::Tab
       @title={{title}}
       @badge={{badge}}
       @icon={{icon}}

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:

addons/rose/addon/styles/rose/components/layout/_tabs.scss

@@ -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;
-}

addons/rose/addon/styles/rose/components/nav/_index.scss

@@ -1 +1,2 @@
 @import "sidebar";
+@import 'tab';

addons/rose/addon/styles/rose/components/nav/_tab.scss

@@ -1,19 +1,19 @@
-@use '../variables/sizing';
-@use '../utilities/type';
+@use '../../variables/sizing';
+@use '../../utilities/type';
 
-.rose-tab {
+.rose-nav-tab {
   @include type.type(s);
   display: inline-block;
   background-color: var(--subtle);
 
-  .rose-tab-link {
+  .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-tab-link-disabled {
+    &.rose-nav-tab-link-disabled {
       cursor: not-allowed;
       pointer-events: none;
       color: var(--ui-gray-subtler-2);
@@ -38,7 +38,7 @@
     }
   }
 
-  .rose-tab-icon {
+  .rose-nav-tab-icon {
     svg {
       width: sizing.rems(m);
       height: sizing.rems(m);
@@ -46,7 +46,7 @@
     }
   }
 
-  .rose-tab-badge {
+  .rose-nav-tab-badge {
     @include type.type(xs);
     margin-left: sizing.rems(xxs);
   }

addons/rose/addon/templates/components/rose/layout/tabs.hbs

@@ -1,3 +0,0 @@
-<div ...attributes class="rose-layout-tabs">
-  {{yield}}
-</div>

addons/rose/addon/templates/components/rose/nav/tab.hbs

@@ -0,0 +1,22 @@
+<div ...attributes class="rose-nav-tab">
+  <LinkTo
+    title={{@title}}
+    @route={{if @route @route "index"}}
+    @model={{@model}}
+    class={{concat "rose-nav-tab-link" (if @disabled " rose-nav-tab-link-disabled")}}
+  >
+    {{#if @icon}}
+      <span class="rose-nav-tab-icon">{{inline-svg @icon}}</span>
+    {{/if}}
+
+    {{#if @title}}
+      <span class="rose-nav-tab-title">{{@title}}</span>
+    {{/if}}
+
+    {{#if @badge}}
+      <span class="rose-nav-tab-badge">{{@badge}}</span>
+    {{/if}}
+  </LinkTo>
+
+  {{yield}}
+</div>

addons/rose/addon/templates/components/rose/tab.hbs

@@ -1,22 +0,0 @@
-<div ...attributes class="rose-tab">
-  <LinkTo
-    title={{@title}}
-    @route={{if @route @route "index"}}
-    @model={{@model}}
-    class={{concat "rose-tab-link" (if @disabled " rose-tab-link-disabled")}}
-  >
-    {{#if @icon}}
-      <span class="rose-tab-icon">{{inline-svg @icon}}</span>
-    {{/if}}
-
-    {{#if @title}}
-      <span class="rose-tab-title">{{@title}}</span>
-    {{/if}}
-
-    {{#if @badge}}
-      <span class="rose-tab-badge">{{@badge}}</span>
-    {{/if}}
-  </LinkTo>
-
-  {{yield}}
-</div>

addons/rose/app/components/rose/layout/tabs.js

@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/tabs';

addons/rose/app/components/rose/nav/tab.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/nav/tab';

addons/rose/app/components/rose/tab.js

@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/tab';

addons/rose/tests/integration/components/rose/layout/tabs-test.js

@@ -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`<Rose::Layout::Tabs />`);
-    assert.ok(find('.rose-layout-tabs'));
-  });
-});

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`<Rose::Nav::Tab />`);
+    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`<Rose::Nav::Tab @title="Tab title" />`);
+    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`<Rose::Nav::Tab @icon="info-circle-outline" />`);
+    assert.ok(find('svg'));
+    assert.ok(find('.rose-nav-tab-icon'));
+  });
+
+  test('it renders with badge', async function (assert) {
+    await render(hbs`<Rose::Nav::Tab @badge="3" />`);
+    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`<Rose::Nav::Tab id="tab" />`);
+    assert.ok(find('#tab'));
+  });
+
+  test('it renders disabled', async function (assert) {
+    this.set('disabled', true);
+    await render(hbs`<Rose::Nav::Tab @disabled={{this.disabled}} />`);
+    assert.ok(find('.rose-nav-tab-link-disabled'));
+
+    this.set('disabled', false);
+    assert.notOk(find('.rose-nav-tab-link-disabled'));
+  });
+});

addons/rose/tests/integration/components/rose/tab-test.js

@@ -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`<Rose::Tab />`);
-    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`<Rose::Tab @title="Tab title" />`);
-    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`<Rose::Tab @icon="info-circle-outline" />`);
-    assert.ok(find('svg'));
-    assert.ok(find('.rose-tab-icon'));
-  });
-
-  test('it renders with badge', async function (assert) {
-    await render(hbs`<Rose::Tab @badge="3" />`);
-    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`<Rose::Tab id="tab" />`);
-    assert.ok(find('#tab'));
-  });
-
-  test('it renders disabled', async function (assert) {
-    this.set('disabled', true);
-    await render(hbs`<Rose::Tab @disabled={{this.disabled}} />`);
-    assert.ok(find('.rose-tab-link-disabled'));
-
-    this.set('disabled', false);
-    assert.notOk(find('.rose-tab-link-disabled'));
-  });
-});