From d38d846746df9d0b2529971659f574b9ef4db0d3 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 3 Jun 2020 17:07:27 -0400
Subject: [PATCH 1/3] =?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';
+
+<Meta title="Rose|Layout" component="Tabs" />
+
+# Tabs
+
+A tabs layout component to hold `Rose::Tab` definitions.
+
+```html
+<Rose::Layout::Tabs>
+  <Rose::Tab @title="Tab item" @badge="3" @icon="info-circle-outline" @disabled={{false}} />
+</Rose::Layout::Tabs>
+```
+
+<Preview>
+  <Story name="Tabs">{{
+    template: hbs`
+    <Rose::Layout::Tabs>
+      <Rose::Tab @title="Text" />
+      <Rose::Tab @title="Text" />
+      <Rose::Tab @title="Text" />
+    </Rose::Layout::Tabs>`,
+  }}</Story>
+</Preview>
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';
+
+<Meta title="Rose|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}} />
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+    <Rose::Tab
+      @title={{title}}
+      @badge={{badge}}
+      @icon={{icon}}
+      @disabled={{disabled}}
+    />`,
+    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)
+    },
+  }}</Story>
+</Preview>
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 @@
+<div ...attributes class="rose-layout-tabs">
+  {{yield}}
+</div>
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 @@
+<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>
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 @@
     <Rose::Card::Link @title="I'm a card" />
     <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
     <Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
+
+    <Rose::Nav::Tab @title="Text" @badge="3" @icon="info-circle-outline" />
   </page.main>
 </Rose::Layout::Page>
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`<Rose::Layout::Tabs />`);
+    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`
       <Rose::Notification
         @style="info"
@@ -16,10 +16,13 @@ module('Integration | Component | rose/notification', function(hooks) {
       </Rose::Notification>
     `);
     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`<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'));
+  });
+});

From 4f37dc040c4c80ae654f9b852dab5dc3cae1c264 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 4 Jun 2020 11:40:26 -0400
Subject: [PATCH 2/3] =?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';
 
-<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}}
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/addon/styles/rose/components/nav/_index.scss b/addons/rose/addon/styles/rose/components/nav/_index.scss
index 0abffa8bd..b56832ff9 100644
--- a/addons/rose/addon/styles/rose/components/nav/_index.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_index.scss
@@ -1 +1,2 @@
 @import "sidebar";
+@import 'tab';
diff --git a/addons/rose/addon/styles/rose/components/_tab.scss b/addons/rose/addon/styles/rose/components/nav/_tab.scss
similarity index 84%
rename from addons/rose/addon/styles/rose/components/_tab.scss
rename to addons/rose/addon/styles/rose/components/nav/_tab.scss
index f6138608a..6eb332810 100644
--- a/addons/rose/addon/styles/rose/components/_tab.scss
+++ b/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);
   }
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 @@
-<div ...attributes class="rose-layout-tabs">
-  {{yield}}
-</div>
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 @@
+<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>
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 @@
-<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>
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`<Rose::Layout::Tabs />`);
-    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`<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'));
+  });
+});
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`<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'));
-  });
-});

From feb7f5a727a102771f8dc41dddb12c6a845c1549 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 4 Jun 2020 13:46:23 -0400
Subject: [PATCH 3/3] =?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 @@
     <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
   </div>
 
-  <h2>{{@model.name}}</h2>
+  <h2>{{t "resources.project.settings"}}</h2>
+
+  <div class="tabs">
+    <Rose::Nav::Tab @title={{t "nav.overview"}} @route='orgs.org.projects.project' @model={{@model}} />
+  </div>
 
   <Form::Project
     @model={{@model}}
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index ca4bc7961..6e1074b4a 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -5,6 +5,8 @@ actions:
   save: Save
 resources:
   projects: Projects
+  project:
+    settings: Project Settings
 titles:
   new: New
 states:
@@ -16,6 +18,8 @@ form:
   label:
     name: Name
     description: Description
+nav:
+  overview: Overview
 dev:
   default-org: Default Org
   menu-item: Menu item