From cfb5363682b93b9b4076c0d8fab5a9cb14b33f54 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 28 May 2020 20:45:55 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Add=20static=20width?=
 =?UTF-8?q?=20for=20sidebar=20column=20in=20rose=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update project creation button from link to rose/button
---
 .../components/rose/layout/page.stories.mdx   | 37 ++-----------------
 .../styles/rose/components/layout/_index.scss |  4 +-
 .../templates/components/rose/header.hbs      |  4 +-
 .../components/rose/layout/page/header.hbs    |  4 +-
 .../rose/layout/page/header-test.js           |  1 +
 ui/core/app/routes/orgs/org/projects/index.js |  8 +++-
 ui/core/app/styles/app.scss                   |  7 ++--
 .../app/templates/orgs/org/projects/index.hbs | 10 ++++-
 8 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx
index 0984bbbd2..ae54e41f8 100644
--- a/addons/rose/addon/components/rose/layout/page.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/page.stories.mdx
@@ -22,40 +22,9 @@ Sidebar's content width determines it's column width.
   <Story name="Basic">{{
     template: hbs`
     <Rose::Layout::Page as |page|>
-      <page.header style="border: 1px solid var(--success);">Header</page.header>
-      <page.main style="border: 1px solid var(--action);">Main</page.main>
-      <page.sidebar style="border: 1px solid var(--alert);">Sidebar</page.sidebar>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
-
-Header, main, and sidebar components are optional.
-<Preview>
-  <Story name="Header">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.header style="border: 1px solid var(--success);">Header</page.header>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
-
-<Preview>
-  <Story name="Main">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.main style="border: 1px solid var(--action);">Main</page.main>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
-
-<Preview>
-  <Story name="Sidebar">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.sidebar style="border: 1px solid var(--alert);">Sidebar</page.sidebar>
+      <page.header style="background: var(--brand-gray-5);">Header</page.header>
+      <page.main style="background: var(--brand-gray-7);">Main</page.main>
+      <page.sidebar style="background: var(--brand-gray-6);">Sidebar</page.sidebar>
     </Rose::Layout::Page>
     `,
   }}</Story>
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 3da20011a..958cc197d 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -5,7 +5,8 @@
   grid-template-areas:
     'header header header header'
     'sidebar main main main';
-  grid-template-columns: auto 1fr;
+  // Define static grid column for sidebar
+  grid-template-columns: 12rem auto 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;
 }
@@ -25,6 +26,7 @@
 @media (max-width: media.width(small)) {
   .rose-layout-page {
     grid-template-columns: 1fr;
+    grid-template-rows: 0.1fr auto 1fr;
     grid-template-areas:
       'header'
       'sidebar'
diff --git a/addons/rose/addon/templates/components/rose/header.hbs b/addons/rose/addon/templates/components/rose/header.hbs
index 2d355f398..075ea7494 100644
--- a/addons/rose/addon/templates/components/rose/header.hbs
+++ b/addons/rose/addon/templates/components/rose/header.hbs
@@ -1,4 +1,4 @@
-<header
+<div
   ...attributes
   class="rose-header"
 >
@@ -7,4 +7,4 @@
     utilities=(component 'rose/header/utilities')
     nav=(component 'rose/header/nav')
   )}}
-</header>
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/header.hbs b/addons/rose/addon/templates/components/rose/layout/page/header.hbs
index 0f77561b5..545ac6c22 100644
--- a/addons/rose/addon/templates/components/rose/layout/page/header.hbs
+++ b/addons/rose/addon/templates/components/rose/layout/page/header.hbs
@@ -1,3 +1,3 @@
-<div ...attributes class="rose-layout-header" >
+<header ...attributes class="rose-layout-header" >
   {{yield}}
-</div>
+</header>
diff --git a/addons/rose/tests/integration/components/rose/layout/page/header-test.js b/addons/rose/tests/integration/components/rose/layout/page/header-test.js
index 6a8b305ad..8976dd726 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/header-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/page/header-test.js
@@ -8,6 +8,7 @@ module('Integration | Component | rose/layout/page/header', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`<Rose::Layout::Page::Header />`);
+    assert.ok(find('header'));
     assert.ok(find('.rose-layout-header'));
   });
 
diff --git a/ui/core/app/routes/orgs/org/projects/index.js b/ui/core/app/routes/orgs/org/projects/index.js
index be2068f6d..717ffbac5 100644
--- a/ui/core/app/routes/orgs/org/projects/index.js
+++ b/ui/core/app/routes/orgs/org/projects/index.js
@@ -1,3 +1,9 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
-export default class OrgsOrgProjectsIndexRoute extends Route {}
+export default class OrgsOrgProjectsIndexRoute extends Route {
+  @action
+  new() {
+    this.transitionTo('orgs.org.projects.new');
+  }
+}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 5271833cf..8604fb63b 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -38,10 +38,9 @@
   box-sizing: border-box;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 2px;
-  position: absolute;
-  right: 10px;
-  top: 70px;
-  display: inline-block;
+  position: relative;
+  float: right;
+  top: -50px;
 }
 
 .project-overview,
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index dd364442c..c873611a3 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,7 +1,13 @@
 <div class="projects-overview">
   <h2>{{t "resources.projects"}}</h2>
-
-  <LinkTo @route="orgs.org.projects.new" class="project-new-link">{{t "titles.new"}}</LinkTo>
+  <Rose::Button
+    class="project-new-link"
+    @style="primary"
+    @iconLeft="plus-plain"
+    {{on "click" (route-action "new")}}
+  >
+    {{t 'titles.new'}}
+  </Rose::Button>
 
   <ul class="projects">
     {{#each @model as |project|}}