From 6b09b643ab7f9acd0288ce25435fc634bbd9a536 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 2 Jun 2020 09:29:40 -0400
Subject: [PATCH 1/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Introduce=20main=20?=
 =?UTF-8?q?content=20header=20rose=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Main content header component contains a title(basic & dropdown) with
actions.
---
 .../components/rose/layout/main/header.js     |  7 ++
 .../rose/layout/main/header.stories.mdx       | 66 ++++++++++++++++
 .../rose/layout/main/header/title.js          |  7 ++
 .../rose/components/header/_dropdown.scss     | 23 ++++--
 .../styles/rose/components/layout/_index.scss |  2 +
 .../rose/components/layout/main/_index.scss   |  1 +
 .../components/layout/main/header/_index.scss | 75 +++++++++++++++++++
 .../styles/rose/utilities/_dropdown.scss      | 18 +++++
 .../components/rose/header/dropdown.hbs       |  2 +-
 .../components/rose/layout/main/header.hbs    | 11 +++
 .../rose/layout/main/header/title.hbs         | 19 +++++
 .../app/components/rose/layout/main/header.js |  1 +
 .../rose/layout/main/header/title.js          |  1 +
 .../rose/layout/main/header-test.js           | 60 +++++++++++++++
 .../rose/layout/main/header/title-test.js     | 59 +++++++++++++++
 15 files changed, 345 insertions(+), 7 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/layout/main/header.js
 create mode 100644 addons/rose/addon/components/rose/layout/main/header.stories.mdx
 create mode 100644 addons/rose/addon/components/rose/layout/main/header/title.js
 create mode 100644 addons/rose/addon/styles/rose/components/layout/main/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/main/header/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/utilities/_dropdown.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/main/header.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/main/header/title.hbs
 create mode 100644 addons/rose/app/components/rose/layout/main/header.js
 create mode 100644 addons/rose/app/components/rose/layout/main/header/title.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/main/header-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/main/header/title-test.js

diff --git a/addons/rose/addon/components/rose/layout/main/header.js b/addons/rose/addon/components/rose/layout/main/header.js
new file mode 100644
index 0000000000..74d5391270
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/main/header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/main/header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/main/header.stories.mdx b/addons/rose/addon/components/rose/layout/main/header.stories.mdx
new file mode 100644
index 0000000000..3d2dda848a
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/main/header.stories.mdx
@@ -0,0 +1,66 @@
+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|Layout|Main" component="Header" />
+
+# Layout | Main Header
+
+A header component for main layout component with ability to configure title and action buttons. Title can be configured to be a either a dropdown component or a simple heading title. The title dropdown is `Rose::Header::Dropdown` component where as all header actions are `Rose::Button` components.
+
+```html
+<Rose::Layout::Main::Header as |header|>
+  <header.title as |title|>
+    <title.dropdown @text="Page title" as |dropdown|>
+      <dropdown.link @route="index">Menu item</dropdown.link>
+      <dropdown.link @route="about">Menu item</dropdown.link>
+      <dropdown.button>Button menu item</dropdown.button>
+    </title.dropdown>
+  </header.title>
+  <header.action @style="secondary">Secondary</header.action>
+  <header.action @style="primary">Primary</header.action>
+</Rose::Layout::Main::Header>
+```
+
+<Preview>
+  <Story name="Main Header">{{
+    template: hbs`
+    <Rose::Layout::Main::Header as |header|>
+      <header.title as |title|>
+        <title.dropdown
+          @text={{pagetitle}}
+          @icon={{dropdownIcon}} as |dropdown|>
+          <dropdown.link @route="index">Menu item</dropdown.link>
+          <dropdown.link @route="about">Menu item</dropdown.link>
+          <dropdown.button>Button menu item</dropdown.button>
+        </title.dropdown>
+      </header.title>
+      <header.action @style="secondary">Secondary</header.action>
+      <header.action @style="primary">Primary</header.action>
+    </Rose::Layout::Main::Header>
+    `,
+    context: {
+      pagetitle: text('page title', 'Page Section Title'),
+      dropdownIcon: select(
+        'dropdown icon',
+        {
+          'user-square-fill': 'user-square-fill',
+          'check-circle-outline': 'check-circle-outline',
+          'copy-action': 'copy-action',
+          'unfold-more': 'unfold-more',
+          'unfold-less': 'unfold-less',
+        },
+        'user-square-fill'
+      ),
+    },
+  }}</Story>
+</Preview>
+
+Main page title can configured to be a basic title.
+
+```html
+<Rose::Layout::Main::Header as |header|>
+  <header.title @text="Page title" @icon="user-square-fill"/>
+</Rose::Layout::Main::Header>
+```
diff --git a/addons/rose/addon/components/rose/layout/main/header/title.js b/addons/rose/addon/components/rose/layout/main/header/title.js
new file mode 100644
index 0000000000..285af1ebbf
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/main/header/title.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../../templates/components/rose/layout/main/header/title';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index bf6ab366d2..5436c1b572 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -1,22 +1,32 @@
-@use 'sass:map';
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use '../../utilities/dropdown';
 
-$dropdown-chevron: (
-  'default':
-    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
+@include dropdown.dropdown-style(
+  'light',
+  (
+    color: var(--white),
+    chevron: 'light',
+  )
+);
+
+@include dropdown.dropdown-style(
+  'dark',
+  (
+    color: var(--black),
+    chevron: 'dark',
+  )
 );
 
 .rose-header-dropdown {
   position: relative;
+  display: inline-block;
 
   .rose-header-dropdown-trigger {
     cursor: default;
     overflow: hidden;
     display: flex;
     align-items: center;
-    color: var(--white);
-    background: url(map.get($dropdown-chevron, default)) no-repeat right center;
     background-size: sizing.rems(m);
     margin-right: sizing.rems(s);
     padding-right: sizing.rems(l) - sizing.rems(xxs);
@@ -68,6 +78,7 @@ $dropdown-chevron: (
     background: var(--subtle);
     box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)),
       0 $xxs $xs rgba(var(--stark-components), var(--opacity-4));
+    z-index: 99;
   }
 
   &.dropdown-right {
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 909cdbc83c..33944c8fe9 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 'main';
+
 .rose-layout-page {
   display: grid;
   grid-template-areas:
diff --git a/addons/rose/addon/styles/rose/components/layout/main/_index.scss b/addons/rose/addon/styles/rose/components/layout/main/_index.scss
new file mode 100644
index 0000000000..6053ec3184
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/main/_index.scss
@@ -0,0 +1 @@
+@import 'header';
diff --git a/addons/rose/addon/styles/rose/components/layout/main/header/_index.scss b/addons/rose/addon/styles/rose/components/layout/main/header/_index.scss
new file mode 100644
index 0000000000..6e4be91b63
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/main/header/_index.scss
@@ -0,0 +1,75 @@
+@use '../../../../utilities/type' as typography;
+@use '../../../../variables/sizing';
+@use '../../../../variables/media';
+
+.rose-layout-main-header {
+  display: grid;
+  grid-template-areas: 'title title actions';
+  grid-template-columns: 1fr auto;
+
+  .rose-layout-main-header-title {
+    display: inline-block;
+    grid-area: title;
+
+    .rose-layout-main-header-title-text {
+      display: inline-block;
+      color: var(--stark);
+    }
+
+    .rose-layout-main-header-title-icon {
+      vertical-align: sub;
+
+      svg {
+        width: sizing.rems(l);
+        width: sizing.rems(l);
+      }
+    }
+  }
+
+  .rose-header-dropdown {
+    .rose-header-dropdown-trigger-text {
+      // Apply heading level 1 style to text to fit page section style spec
+      //  Duplicate of h1 style defined in typography
+      @include typography.type(h1, bold);
+      margin-top: sizing.rems(m);
+      margin-bottom: sizing.rems(xs);
+
+      margin-right: sizing.rems(xs);
+    }
+
+    .rose-header-dropdown-trigger {
+      background-size: sizing.rems(l);
+      background-position: right (sizing.rems(m) + sizing.rems(s));
+    }
+
+    .rose-icon > svg {
+      vertical-align: sub;
+    }
+  }
+
+  .rose-layout-main-header-actions {
+    grid-area: actions;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    // Remove margin to align action buttons with h1 text
+    button {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-main-header {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+    grid-template-areas:
+      'title'
+      'actions';
+
+    .rose-layout-main-header-actions {
+      flex-wrap: wrap;
+    }
+  }
+}
diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
new file mode 100644
index 0000000000..059d2d56dc
--- /dev/null
+++ b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+$dropdown-chevron: (
+  'light':
+    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
+  'dark':
+    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
+);
+
+@mixin dropdown-style($name, $default) {
+  .rose-header-dropdown-#{$name} {
+    .rose-header-dropdown-trigger {
+      color: map.get($default, color);
+      background: url(map.get($dropdown-chevron, map.get($default, chevron)))
+        no-repeat right center;
+    }
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/header/dropdown.hbs b/addons/rose/addon/templates/components/rose/header/dropdown.hbs
index 86406b2d9a..cc874c2840 100644
--- a/addons/rose/addon/templates/components/rose/header/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/header/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-header-dropdown{{if @alignRight " dropdown-right"}}"
+  class="rose-header-dropdown{{if @alignRight " dropdown-right"}} {{if  @style (concat "rose-header-dropdown-" @style) "rose-header-dropdown-light"}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/templates/components/rose/layout/main/header.hbs b/addons/rose/addon/templates/components/rose/layout/main/header.hbs
new file mode 100644
index 0000000000..9634fdb25d
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/main/header.hbs
@@ -0,0 +1,11 @@
+<div ...attributes class="rose-layout-main-header" >
+  {{yield (hash
+    title=(component 'rose/layout/main/header/title')
+  )}}
+
+  <div class="rose-layout-main-header-actions">
+    {{yield (hash
+      action=(component 'rose/button')
+    )}}
+  </div>
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/main/header/title.hbs b/addons/rose/addon/templates/components/rose/layout/main/header/title.hbs
new file mode 100644
index 0000000000..1147d6c483
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/main/header/title.hbs
@@ -0,0 +1,19 @@
+<div ...attributes
+  class="rose-layout-main-header-title"
+>
+  {{#if (has-block)}}
+    {{yield (hash
+      dropdown=(component 'rose/header/dropdown' style='dark')
+    )}}
+  {{else}}
+    <section class="rose-layout-main-header-title-section">
+      {{#if @icon}}
+        <span class="rose-layout-main-header-title-icon">{{inline-svg @icon}}</span>
+      {{/if}}
+
+      {{#if @text}}
+        <h1 class="rose-layout-main-header-title-text">{{@text}}</h1>
+      {{/if}}
+    </section>
+  {{/if}}
+</div>
diff --git a/addons/rose/app/components/rose/layout/main/header.js b/addons/rose/app/components/rose/layout/main/header.js
new file mode 100644
index 0000000000..cc3ca87693
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/main/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/main/header';
diff --git a/addons/rose/app/components/rose/layout/main/header/title.js b/addons/rose/app/components/rose/layout/main/header/title.js
new file mode 100644
index 0000000000..c189eb8d51
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/main/header/title.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/main/header/title';
diff --git a/addons/rose/tests/integration/components/rose/layout/main/header-test.js b/addons/rose/tests/integration/components/rose/layout/main/header-test.js
new file mode 100644
index 0000000000..e2261a66d9
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/main/header-test.js
@@ -0,0 +1,60 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/main/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header />`);
+    assert.ok(find('.rose-layout-main-header'));
+  });
+
+  test('it renders with title', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header as |header|>
+      <header.title @text="header title" />
+    </Rose::Layout::Main::Header>`);
+    assert.ok(find('.rose-layout-main-header-title'));
+    assert.equal(
+      find('.rose-layout-main-header-title').textContent.trim(),
+      'header title'
+    );
+  });
+
+  test('it renders with dropdown title', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header as |header|>
+      <header.title as |title|>
+        <title.dropdown @text="Dropdown title" />
+      </header.title>
+    </Rose::Layout::Main::Header>`);
+    assert.ok(find('.rose-header-dropdown'));
+    assert.equal(
+      find('.rose-layout-main-header-title').textContent.trim(),
+      'Dropdown title'
+    );
+  });
+
+  test('it renders with dropdown title menu', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header as |header|>
+      <header.title as |title|>
+        <title.dropdown as |dropdown|>
+          <dropdown.link @route="index">Menu item</dropdown.link>
+          <dropdown.button>Button menu item</dropdown.button>
+        </title.dropdown>
+      </header.title>
+    </Rose::Layout::Main::Header>`);
+    assert.ok(find('.rose-header-dropdown'));
+    assert.equal(findAll('a').length, 1);
+    assert.equal(findAll('button').length, 1);
+  });
+
+  test('it renders with actions', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header as |header|>
+      <header.action />
+      <header.action />
+    </Rose::Layout::Main::Header>`);
+    assert.ok(find('.rose-layout-main-header-actions'));
+    assert.ok(findAll('button').length, 2);
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/main/header/title-test.js b/addons/rose/tests/integration/components/rose/layout/main/header/title-test.js
new file mode 100644
index 0000000000..8d7fef6ac6
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/main/header/title-test.js
@@ -0,0 +1,59 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/main/header/title', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header::Title />`);
+    assert.ok(find('.rose-layout-main-header-title'));
+  });
+
+  test('it renders with title', async function (assert) {
+    await render(
+      hbs`<Rose::Layout::Main::Header::Title @text="header title" />`
+    );
+    assert.equal(
+      find('.rose-layout-main-header-title-text').textContent.trim(),
+      'header title'
+    );
+  });
+
+  test('it renders with title as dropdown', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header::Title as |title|>
+      <title.dropdown @text="header title" as |dropdown|>
+        <dropdown.link @route="index">Menu item</dropdown.link>
+        <dropdown.link @route="index">Menu item</dropdown.link>
+        <dropdown.button>Button menu item</dropdown.button>
+        <dropdown.button>Button menu item</dropdown.button>
+        <dropdown.button>Button menu item</dropdown.button>
+      </title.dropdown>
+    </Rose::Layout::Main::Header::Title>`);
+    assert.equal(
+      find('.rose-header-dropdown-trigger').textContent.trim(),
+      'header title'
+    );
+    assert.equal(findAll('a').length, 2);
+    assert.equal(findAll('button').length, 3);
+  });
+
+  test('it opens title dropdown on click', async function (assert) {
+    await render(hbs`<Rose::Layout::Main::Header::Title id="title" as |title|>
+      <title.dropdown id="dropdown" as |dropdown|>
+        <dropdown.link @route="index">Menu item</dropdown.link>
+        <dropdown.link @route="index">Menu item</dropdown.link>
+        <dropdown.button>Button menu item</dropdown.button>
+        <dropdown.button>Button menu item</dropdown.button>
+        <dropdown.button>Button menu item</dropdown.button>
+      </title.dropdown>
+    </Rose::Layout::Main::Header::Title>`);
+    await click('summary');
+    assert.ok(find('#dropdown').open);
+    await click('#title');
+    assert.notOk(find('#dropdown').open);
+  });
+});

From 33d85940bf4af15c6a6aec1caa9f300fa249483e Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 2 Jun 2020 15:17:47 -0400
Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20page=20header?=
 =?UTF-8?q?=20component=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Page header component comprises of a simple 1x1 grid component
---
 .../components/rose/layout/page-header.js     |  7 ++++++
 .../rose/layout/page-header.stories.mdx       | 23 +++++++++++++++++++
 .../styles/rose/components/layout/_index.scss |  1 +
 .../rose/components/layout/_page-header.scss  | 19 +++++++++++++++
 .../components/rose/layout/page-header.hbs    |  3 +++
 .../app/components/rose/layout/page-header.js |  1 +
 .../rose/layout/page-header-test.js           | 23 +++++++++++++++++++
 7 files changed, 77 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/layout/page-header.js
 create mode 100644 addons/rose/addon/components/rose/layout/page-header.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/layout/_page-header.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page-header.hbs
 create mode 100644 addons/rose/app/components/rose/layout/page-header.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page-header-test.js

diff --git a/addons/rose/addon/components/rose/layout/page-header.js b/addons/rose/addon/components/rose/layout/page-header.js
new file mode 100644
index 0000000000..e7ed1d3900
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page-header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/layout/page-header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page-header.stories.mdx b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
new file mode 100644
index 0000000000..c771ba93af
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
@@ -0,0 +1,23 @@
+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="PageHeader" />
+
+# Layout|Page Header
+
+A page layout/positioning component that configures a single column grid for use as a header.
+
+```htmlbars
+<Rose::Layout::PageHeader />
+```
+
+<Preview>
+  <Story name="Page Header">{{
+    template: hbs`
+    <Rose::Layout::PageHeader style="background: var(--brand-gray-5); padding: 1rem;">
+      Page Header
+    </Rose::Layout::PageHeader>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 33944c8fe9..40c35ee12c 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -2,6 +2,7 @@
 @use '../../variables/media';
 
 @import 'main';
+@import 'page-header';
 
 .rose-layout-page {
   display: grid;
diff --git a/addons/rose/addon/styles/rose/components/layout/_page-header.scss b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
new file mode 100644
index 0000000000..0fb1fe8eb0
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
@@ -0,0 +1,19 @@
+@use '../../variables/media';
+
+.rose-layout-page-header {
+  display: grid;
+  grid-template-areas:
+    'title title utilities';
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-page {
+    grid-template-columns: 1fr;
+    grid-template-rows: 0.1fr auto 1fr;
+    grid-template-areas:
+      'title'
+      'utilities';
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/page-header.hbs b/addons/rose/addon/templates/components/rose/layout/page-header.hbs
new file mode 100644
index 0000000000..090d7b83d4
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page-header.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-header">
+  {{yield}}
+</div>
diff --git a/addons/rose/app/components/rose/layout/page-header.js b/addons/rose/app/components/rose/layout/page-header.js
new file mode 100644
index 0000000000..0ee6126310
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page-header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page-header';
\ No newline at end of file
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
new file mode 100644
index 0000000000..a5f0be46b7
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page-header-test.js
@@ -0,0 +1,23 @@
+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/page-header', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`<Rose::Layout::PageHeader />`);
+    assert.ok(find('.rose-layout-page-header'));
+  });
+
+  test('it renders with html attributes', async function(assert) {
+    await render(hbs`<Rose::Layout::PageHeader id="page-header"/>`);
+    assert.ok(find('#page-header'));
+  });
+
+  test('it renders with content', async function(assert) {
+    await render(hbs`<Rose::Layout::PageHeader>Page header content</Rose::Layout::PageHeader>`);
+    assert.equal(find('.rose-layout-page-header').textContent.trim(), 'Page header content');
+  });
+});

From 1a8a0d062f07e0b6dd61b084118c2e15f6352d74 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 2 Jun 2020 17:53:18 -0400
Subject: [PATCH 3/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Separate=20page=20h?=
 =?UTF-8?q?eader=20into=20layout=20&=20content=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce new PageHeader layout, title, and utilities components
---
 .../rose/layout/main/header.stories.mdx       | 66 ----------------
 .../rose/layout/page-header.stories.mdx       |  7 +-
 .../main/header.js => page-header/title.js}   |  2 +-
 .../rose/page-header/title.stories.mdx        | 62 +++++++++++++++
 .../title.js => page-header/utilities.js}     |  2 +-
 .../rose/page-header/utilities.stories.mdx    | 31 ++++++++
 .../addon/styles/rose/components/_index.scss  |  2 +-
 .../styles/rose/components/layout/_index.scss |  1 -
 .../rose/components/layout/_page-header.scss  | 13 +++-
 .../rose/components/layout/main/_index.scss   |  1 -
 .../components/layout/main/header/_index.scss | 75 -------------------
 .../rose/components/page-header/_index.scss   |  2 +
 .../rose/components/page-header/_title.scss   | 35 +++++++++
 .../components/page-header/_utilities.scss    |  8 ++
 .../components/rose/layout/main/header.hbs    | 11 ---
 .../rose/layout/main/header/title.hbs         | 19 -----
 .../components/rose/page-header/title.hbs     | 17 +++++
 .../components/rose/page-header/utilities.hbs |  5 ++
 .../app/components/rose/layout/main/header.js |  1 -
 .../rose/layout/main/header/title.js          |  1 -
 .../app/components/rose/layout/page-header.js |  2 +-
 .../app/components/rose/page-header/title.js  |  1 +
 .../components/rose/page-header/utilities.js  |  1 +
 .../rose/layout/main/header-test.js           | 60 ---------------
 .../rose/layout/page-header-test.js           | 17 +++--
 .../main/header => page-header}/title-test.js | 22 +++---
 .../rose/page-header/utilities-test.js        | 38 ++++++++++
 27 files changed, 237 insertions(+), 265 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/layout/main/header.stories.mdx
 rename addons/rose/addon/components/rose/{layout/main/header.js => page-header/title.js} (57%)
 create mode 100644 addons/rose/addon/components/rose/page-header/title.stories.mdx
 rename addons/rose/addon/components/rose/{layout/main/header/title.js => page-header/utilities.js} (54%)
 create mode 100644 addons/rose/addon/components/rose/page-header/utilities.stories.mdx
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/main/_index.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/main/header/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/page-header/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/page-header/_title.scss
 create mode 100644 addons/rose/addon/styles/rose/components/page-header/_utilities.scss
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/main/header.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/main/header/title.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/page-header/title.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/page-header/utilities.hbs
 delete mode 100644 addons/rose/app/components/rose/layout/main/header.js
 delete mode 100644 addons/rose/app/components/rose/layout/main/header/title.js
 create mode 100644 addons/rose/app/components/rose/page-header/title.js
 create mode 100644 addons/rose/app/components/rose/page-header/utilities.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/main/header-test.js
 rename addons/rose/tests/integration/components/rose/{layout/main/header => page-header}/title-test.js (73%)
 create mode 100644 addons/rose/tests/integration/components/rose/page-header/utilities-test.js

diff --git a/addons/rose/addon/components/rose/layout/main/header.stories.mdx b/addons/rose/addon/components/rose/layout/main/header.stories.mdx
deleted file mode 100644
index 3d2dda848a..0000000000
--- a/addons/rose/addon/components/rose/layout/main/header.stories.mdx
+++ /dev/null
@@ -1,66 +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';
-
-<Meta title="Rose|Layout|Main" component="Header" />
-
-# Layout | Main Header
-
-A header component for main layout component with ability to configure title and action buttons. Title can be configured to be a either a dropdown component or a simple heading title. The title dropdown is `Rose::Header::Dropdown` component where as all header actions are `Rose::Button` components.
-
-```html
-<Rose::Layout::Main::Header as |header|>
-  <header.title as |title|>
-    <title.dropdown @text="Page title" as |dropdown|>
-      <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.link @route="about">Menu item</dropdown.link>
-      <dropdown.button>Button menu item</dropdown.button>
-    </title.dropdown>
-  </header.title>
-  <header.action @style="secondary">Secondary</header.action>
-  <header.action @style="primary">Primary</header.action>
-</Rose::Layout::Main::Header>
-```
-
-<Preview>
-  <Story name="Main Header">{{
-    template: hbs`
-    <Rose::Layout::Main::Header as |header|>
-      <header.title as |title|>
-        <title.dropdown
-          @text={{pagetitle}}
-          @icon={{dropdownIcon}} as |dropdown|>
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.link @route="about">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </title.dropdown>
-      </header.title>
-      <header.action @style="secondary">Secondary</header.action>
-      <header.action @style="primary">Primary</header.action>
-    </Rose::Layout::Main::Header>
-    `,
-    context: {
-      pagetitle: text('page title', 'Page Section Title'),
-      dropdownIcon: select(
-        'dropdown icon',
-        {
-          'user-square-fill': 'user-square-fill',
-          'check-circle-outline': 'check-circle-outline',
-          'copy-action': 'copy-action',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
-        },
-        'user-square-fill'
-      ),
-    },
-  }}</Story>
-</Preview>
-
-Main page title can configured to be a basic title.
-
-```html
-<Rose::Layout::Main::Header as |header|>
-  <header.title @text="Page title" @icon="user-square-fill"/>
-</Rose::Layout::Main::Header>
-```
diff --git a/addons/rose/addon/components/rose/layout/page-header.stories.mdx b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
index c771ba93af..218fa75c1d 100644
--- a/addons/rose/addon/components/rose/layout/page-header.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 
 # Layout|Page Header
 
-A page layout/positioning component that configures a single column grid for use as a header.
+A page layout/positioning component that configures a two column grid with defined areas: title and utilities
 
 ```htmlbars
 <Rose::Layout::PageHeader />
@@ -15,8 +15,9 @@ A page layout/positioning component that configures a single column grid for use
 <Preview>
   <Story name="Page Header">{{
     template: hbs`
-    <Rose::Layout::PageHeader style="background: var(--brand-gray-5); padding: 1rem;">
-      Page Header
+    <Rose::Layout::PageHeader>
+      <div style="grid-area: title; background: var(--brand-gray-7)">Grid area: title</div>
+      <div style="grid-area: utilities; background: var(--brand-gray-5)">Grid area: utilities</div>
     </Rose::Layout::PageHeader>
     `,
   }}</Story>
diff --git a/addons/rose/addon/components/rose/layout/main/header.js b/addons/rose/addon/components/rose/page-header/title.js
similarity index 57%
rename from addons/rose/addon/components/rose/layout/main/header.js
rename to addons/rose/addon/components/rose/page-header/title.js
index 74d5391270..9ac3c14317 100644
--- a/addons/rose/addon/components/rose/layout/main/header.js
+++ b/addons/rose/addon/components/rose/page-header/title.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/main/header';
+import layout from '../../../templates/components/rose/page-header/title';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/page-header/title.stories.mdx b/addons/rose/addon/components/rose/page-header/title.stories.mdx
new file mode 100644
index 0000000000..050c771923
--- /dev/null
+++ b/addons/rose/addon/components/rose/page-header/title.stories.mdx
@@ -0,0 +1,62 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|PageHeader|Title" component="Title" />
+
+# Title
+
+A header title component with ability to configure dropdown using `Rose::Header::Dropdown`. To be used with `Rose::Layout::PageHeader`.
+
+```html
+<Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
+  <Rose::PageHeader::Title as |title| >
+    <title.dropdown
+      @text="Page Header Title"
+      @icon="user-square-fill" as |dropdown|
+    >
+      <dropdown.link @route="index">Menu item</dropdown.link>
+      <dropdown.button>Button menu item</dropdown.button>
+    </title.dropdown>
+  </Rose::PageHeader::Title>
+</Rose::Layout::PageHeader>
+```
+
+<Preview>
+  <Story name="Title">{{
+    template: hbs`
+    <Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
+      <Rose::PageHeader::Title as |title| >
+        <title.dropdown
+          @text={{pageTitle}}
+          @icon={{dropdownIcon}} as |dropdown|
+        >
+          <dropdown.link @route="index">Menu item</dropdown.link>
+          <dropdown.button>Button menu item</dropdown.button>
+        </title.dropdown>
+      </Rose::PageHeader::Title>
+    </Rose::Layout::PageHeader>
+    `,
+    context: {
+      pageTitle: text('pageTitle', 'Page Section Title'),
+      dropdownIcon: select(
+        'dropdownIcon',
+        {
+          'user-square-fill': 'user-square-fill',
+          'check-circle-outline': 'check-circle-outline',
+          'copy-action': 'copy-action',
+          'unfold-more': 'unfold-more',
+          'unfold-less': 'unfold-less',
+        },
+        'user-square-fill'
+      ),
+    },
+  }}</Story>
+</Preview>
+
+Title can be configured to be a level 1 heading with optional icon.
+
+```html
+<Rose::PageHeader::Title @text="Page Header Title" @icon="alert-circle-fill" />
+```
diff --git a/addons/rose/addon/components/rose/layout/main/header/title.js b/addons/rose/addon/components/rose/page-header/utilities.js
similarity index 54%
rename from addons/rose/addon/components/rose/layout/main/header/title.js
rename to addons/rose/addon/components/rose/page-header/utilities.js
index 285af1ebbf..71b82bc1c9 100644
--- a/addons/rose/addon/components/rose/layout/main/header/title.js
+++ b/addons/rose/addon/components/rose/page-header/utilities.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../../templates/components/rose/layout/main/header/title';
+import layout from '../../../templates/components/rose/page-header/utilities';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx b/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
new file mode 100644
index 0000000000..e1077084ee
--- /dev/null
+++ b/addons/rose/addon/components/rose/page-header/utilities.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';
+
+<Meta title="Rose|PageHeader" component="Utilities" />
+
+# Utilities
+
+An component comprised of `Rose::Button` as actions. To be used with `Rose::Layout::PageHeader`.
+
+```html
+<Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
+  <Rose::PageHeader::Utilities as |utilities|>
+    <utilities.action @style="secondary">Secondary</utilities.action>
+    <utilities.action @style="primary">Primary</utilities.action>
+  </Rose::PageHeader::Utilities>
+</Rose::Layout::PageHeader>
+```
+
+<Preview>
+  <Story name="Utilities">{{
+    template: hbs`
+    <Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
+      <Rose::PageHeader::Utilities as |utilities|>
+        <utilities.action @style="secondary">Secondary</utilities.action>
+        <utilities.action @style="primary">Primary</utilities.action>
+      </Rose::PageHeader::Utilities>
+    </Rose::Layout::PageHeader>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index ec7bd22afd..fd25c4bf2b 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -4,4 +4,4 @@
 @import 'layout';
 @import 'notification';
 @import 'card';
-@import 'nav';
+@import 'page-header';
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 40c35ee12c..9b927fb2c7 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,7 +1,6 @@
 @use '../../variables/sizing';
 @use '../../variables/media';
 
-@import 'main';
 @import 'page-header';
 
 .rose-layout-page {
diff --git a/addons/rose/addon/styles/rose/components/layout/_page-header.scss b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
index 0fb1fe8eb0..ccd539138b 100644
--- a/addons/rose/addon/styles/rose/components/layout/_page-header.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
@@ -2,16 +2,21 @@
 
 .rose-layout-page-header {
   display: grid;
-  grid-template-areas:
-    'title title utilities';
+  grid-template-areas: 'title title utilities';
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
+
+  .rose-page-header-utilities {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
 }
 
 @media (max-width: media.width(small)) {
-  .rose-layout-page {
+  .rose-layout-page-header {
     grid-template-columns: 1fr;
-    grid-template-rows: 0.1fr auto 1fr;
     grid-template-areas:
       'title'
       'utilities';
diff --git a/addons/rose/addon/styles/rose/components/layout/main/_index.scss b/addons/rose/addon/styles/rose/components/layout/main/_index.scss
deleted file mode 100644
index 6053ec3184..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/main/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'header';
diff --git a/addons/rose/addon/styles/rose/components/layout/main/header/_index.scss b/addons/rose/addon/styles/rose/components/layout/main/header/_index.scss
deleted file mode 100644
index 6e4be91b63..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/main/header/_index.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@use '../../../../utilities/type' as typography;
-@use '../../../../variables/sizing';
-@use '../../../../variables/media';
-
-.rose-layout-main-header {
-  display: grid;
-  grid-template-areas: 'title title actions';
-  grid-template-columns: 1fr auto;
-
-  .rose-layout-main-header-title {
-    display: inline-block;
-    grid-area: title;
-
-    .rose-layout-main-header-title-text {
-      display: inline-block;
-      color: var(--stark);
-    }
-
-    .rose-layout-main-header-title-icon {
-      vertical-align: sub;
-
-      svg {
-        width: sizing.rems(l);
-        width: sizing.rems(l);
-      }
-    }
-  }
-
-  .rose-header-dropdown {
-    .rose-header-dropdown-trigger-text {
-      // Apply heading level 1 style to text to fit page section style spec
-      //  Duplicate of h1 style defined in typography
-      @include typography.type(h1, bold);
-      margin-top: sizing.rems(m);
-      margin-bottom: sizing.rems(xs);
-
-      margin-right: sizing.rems(xs);
-    }
-
-    .rose-header-dropdown-trigger {
-      background-size: sizing.rems(l);
-      background-position: right (sizing.rems(m) + sizing.rems(s));
-    }
-
-    .rose-icon > svg {
-      vertical-align: sub;
-    }
-  }
-
-  .rose-layout-main-header-actions {
-    grid-area: actions;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    // Remove margin to align action buttons with h1 text
-    button {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@media (max-width: media.width(small)) {
-  .rose-layout-main-header {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto;
-    grid-template-areas:
-      'title'
-      'actions';
-
-    .rose-layout-main-header-actions {
-      flex-wrap: wrap;
-    }
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/page-header/_index.scss b/addons/rose/addon/styles/rose/components/page-header/_index.scss
new file mode 100644
index 0000000000..6cd272653c
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/page-header/_index.scss
@@ -0,0 +1,2 @@
+@import 'title';
+@import 'utilities';
diff --git a/addons/rose/addon/styles/rose/components/page-header/_title.scss b/addons/rose/addon/styles/rose/components/page-header/_title.scss
new file mode 100644
index 0000000000..32fdb890db
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/page-header/_title.scss
@@ -0,0 +1,35 @@
+@use '../../variables/sizing';
+@use '../../utilities/type' as typography;
+
+.rose-page-header-title {
+  display: inline-block;
+  grid-area: title;
+
+  .rose-page-header-title-text {
+    display: inline-block;
+    color: var(--stark);
+  }
+
+  .rose-page-header-title-icon {
+    vertical-align: sub;
+
+    svg {
+      width: sizing.rems(l);
+      width: sizing.rems(l);
+    }
+  }
+
+  .rose-header-dropdown {
+    .rose-header-dropdown-trigger-text {
+      @include typography.type(h1, bold);
+      margin-top: sizing.rems(xs);
+      margin-bottom: sizing.rems(xs);
+
+      margin-right: sizing.rems(xs);
+    }
+
+    .rose-header-dropdown-trigger {
+      background-size: sizing.rems(l);
+    }
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/page-header/_utilities.scss b/addons/rose/addon/styles/rose/components/page-header/_utilities.scss
new file mode 100644
index 0000000000..45a78dd820
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/page-header/_utilities.scss
@@ -0,0 +1,8 @@
+.rose-page-header-utilities {
+  grid-area: utilities;
+
+  // Remove margin to align action buttons with h1 text
+  button {
+    margin-bottom: 0;
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/main/header.hbs b/addons/rose/addon/templates/components/rose/layout/main/header.hbs
deleted file mode 100644
index 9634fdb25d..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/main/header.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<div ...attributes class="rose-layout-main-header" >
-  {{yield (hash
-    title=(component 'rose/layout/main/header/title')
-  )}}
-
-  <div class="rose-layout-main-header-actions">
-    {{yield (hash
-      action=(component 'rose/button')
-    )}}
-  </div>
-</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/main/header/title.hbs b/addons/rose/addon/templates/components/rose/layout/main/header/title.hbs
deleted file mode 100644
index 1147d6c483..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/main/header/title.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-<div ...attributes
-  class="rose-layout-main-header-title"
->
-  {{#if (has-block)}}
-    {{yield (hash
-      dropdown=(component 'rose/header/dropdown' style='dark')
-    )}}
-  {{else}}
-    <section class="rose-layout-main-header-title-section">
-      {{#if @icon}}
-        <span class="rose-layout-main-header-title-icon">{{inline-svg @icon}}</span>
-      {{/if}}
-
-      {{#if @text}}
-        <h1 class="rose-layout-main-header-title-text">{{@text}}</h1>
-      {{/if}}
-    </section>
-  {{/if}}
-</div>
diff --git a/addons/rose/addon/templates/components/rose/page-header/title.hbs b/addons/rose/addon/templates/components/rose/page-header/title.hbs
new file mode 100644
index 0000000000..388e538127
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/page-header/title.hbs
@@ -0,0 +1,17 @@
+<div ...attributes class="rose-page-header-title">
+  {{#if (has-block)}}
+    {{yield (hash
+      dropdown=(component 'rose/header/dropdown' style='dark')
+    )}}
+  {{else}}
+    <section class="rose-page-header-title-section">
+      {{#if @icon}}
+        <span class="rose-page-header-title-icon">{{inline-svg @icon}}</span>
+      {{/if}}
+
+      {{#if @text}}
+        <h1 class="rose-page-header-title-text">{{@text}}</h1>
+      {{/if}}
+    </section>
+  {{/if}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/page-header/utilities.hbs b/addons/rose/addon/templates/components/rose/page-header/utilities.hbs
new file mode 100644
index 0000000000..3203ea86e0
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/page-header/utilities.hbs
@@ -0,0 +1,5 @@
+<div ...attributes class="rose-page-header-utilities">
+  {{yield (hash
+    action=(component 'rose/button')
+  )}}
+</div>
diff --git a/addons/rose/app/components/rose/layout/main/header.js b/addons/rose/app/components/rose/layout/main/header.js
deleted file mode 100644
index cc3ca87693..0000000000
--- a/addons/rose/app/components/rose/layout/main/header.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/main/header';
diff --git a/addons/rose/app/components/rose/layout/main/header/title.js b/addons/rose/app/components/rose/layout/main/header/title.js
deleted file mode 100644
index c189eb8d51..0000000000
--- a/addons/rose/app/components/rose/layout/main/header/title.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/main/header/title';
diff --git a/addons/rose/app/components/rose/layout/page-header.js b/addons/rose/app/components/rose/layout/page-header.js
index 0ee6126310..5235f3c7bd 100644
--- a/addons/rose/app/components/rose/layout/page-header.js
+++ b/addons/rose/app/components/rose/layout/page-header.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/page-header';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/page-header';
diff --git a/addons/rose/app/components/rose/page-header/title.js b/addons/rose/app/components/rose/page-header/title.js
new file mode 100644
index 0000000000..880f984d0c
--- /dev/null
+++ b/addons/rose/app/components/rose/page-header/title.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/page-header/title';
diff --git a/addons/rose/app/components/rose/page-header/utilities.js b/addons/rose/app/components/rose/page-header/utilities.js
new file mode 100644
index 0000000000..69dd95a0ce
--- /dev/null
+++ b/addons/rose/app/components/rose/page-header/utilities.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/page-header/utilities';
diff --git a/addons/rose/tests/integration/components/rose/layout/main/header-test.js b/addons/rose/tests/integration/components/rose/layout/main/header-test.js
deleted file mode 100644
index e2261a66d9..0000000000
--- a/addons/rose/tests/integration/components/rose/layout/main/header-test.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find, findAll } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/layout/main/header', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header />`);
-    assert.ok(find('.rose-layout-main-header'));
-  });
-
-  test('it renders with title', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header as |header|>
-      <header.title @text="header title" />
-    </Rose::Layout::Main::Header>`);
-    assert.ok(find('.rose-layout-main-header-title'));
-    assert.equal(
-      find('.rose-layout-main-header-title').textContent.trim(),
-      'header title'
-    );
-  });
-
-  test('it renders with dropdown title', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header as |header|>
-      <header.title as |title|>
-        <title.dropdown @text="Dropdown title" />
-      </header.title>
-    </Rose::Layout::Main::Header>`);
-    assert.ok(find('.rose-header-dropdown'));
-    assert.equal(
-      find('.rose-layout-main-header-title').textContent.trim(),
-      'Dropdown title'
-    );
-  });
-
-  test('it renders with dropdown title menu', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header as |header|>
-      <header.title as |title|>
-        <title.dropdown as |dropdown|>
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </title.dropdown>
-      </header.title>
-    </Rose::Layout::Main::Header>`);
-    assert.ok(find('.rose-header-dropdown'));
-    assert.equal(findAll('a').length, 1);
-    assert.equal(findAll('button').length, 1);
-  });
-
-  test('it renders with actions', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header as |header|>
-      <header.action />
-      <header.action />
-    </Rose::Layout::Main::Header>`);
-    assert.ok(find('.rose-layout-main-header-actions'));
-    assert.ok(findAll('button').length, 2);
-  });
-});
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 a5f0be46b7..723df72c11 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
@@ -3,21 +3,26 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page-header', function(hooks) {
+module('Integration | Component | rose/layout/page-header', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
+  test('it renders', async function (assert) {
     await render(hbs`<Rose::Layout::PageHeader />`);
     assert.ok(find('.rose-layout-page-header'));
   });
 
-  test('it renders with html attributes', async function(assert) {
+  test('it renders with html attributes', async function (assert) {
     await render(hbs`<Rose::Layout::PageHeader id="page-header"/>`);
     assert.ok(find('#page-header'));
   });
 
-  test('it renders with content', async function(assert) {
-    await render(hbs`<Rose::Layout::PageHeader>Page header content</Rose::Layout::PageHeader>`);
-    assert.equal(find('.rose-layout-page-header').textContent.trim(), 'Page header content');
+  test('it renders with content', async function (assert) {
+    await render(
+      hbs`<Rose::Layout::PageHeader>Page header content</Rose::Layout::PageHeader>`
+    );
+    assert.equal(
+      find('.rose-layout-page-header').textContent.trim(),
+      'Page header content'
+    );
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/main/header/title-test.js b/addons/rose/tests/integration/components/rose/page-header/title-test.js
similarity index 73%
rename from addons/rose/tests/integration/components/rose/layout/main/header/title-test.js
rename to addons/rose/tests/integration/components/rose/page-header/title-test.js
index 8d7fef6ac6..b4e8d7e741 100644
--- a/addons/rose/tests/integration/components/rose/layout/main/header/title-test.js
+++ b/addons/rose/tests/integration/components/rose/page-header/title-test.js
@@ -3,28 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, click, find, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/main/header/title', function (
-  hooks
-) {
+module('Integration | Component | rose/page-header/title', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header::Title />`);
-    assert.ok(find('.rose-layout-main-header-title'));
+    await render(hbs`<Rose::PageHeader::Title />`);
+    assert.ok(find('.rose-page-header-title'));
   });
 
   test('it renders with title', async function (assert) {
-    await render(
-      hbs`<Rose::Layout::Main::Header::Title @text="header title" />`
-    );
+    await render(hbs`<Rose::PageHeader::Title @text="header title" />`);
     assert.equal(
-      find('.rose-layout-main-header-title-text').textContent.trim(),
+      find('.rose-page-header-title-text').textContent.trim(),
       'header title'
     );
   });
 
   test('it renders with title as dropdown', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header::Title as |title|>
+    await render(hbs`<Rose::PageHeader::Title as |title|>
       <title.dropdown @text="header title" as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="index">Menu item</dropdown.link>
@@ -32,7 +28,7 @@ module('Integration | Component | rose/layout/main/header/title', function (
         <dropdown.button>Button menu item</dropdown.button>
         <dropdown.button>Button menu item</dropdown.button>
       </title.dropdown>
-    </Rose::Layout::Main::Header::Title>`);
+    </Rose::PageHeader::Title>`);
     assert.equal(
       find('.rose-header-dropdown-trigger').textContent.trim(),
       'header title'
@@ -42,7 +38,7 @@ module('Integration | Component | rose/layout/main/header/title', function (
   });
 
   test('it opens title dropdown on click', async function (assert) {
-    await render(hbs`<Rose::Layout::Main::Header::Title id="title" as |title|>
+    await render(hbs`<Rose::PageHeader::Title id="title" as |title|>
       <title.dropdown id="dropdown" as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="index">Menu item</dropdown.link>
@@ -50,7 +46,7 @@ module('Integration | Component | rose/layout/main/header/title', function (
         <dropdown.button>Button menu item</dropdown.button>
         <dropdown.button>Button menu item</dropdown.button>
       </title.dropdown>
-    </Rose::Layout::Main::Header::Title>`);
+    </Rose::PageHeader::Title>`);
     await click('summary');
     assert.ok(find('#dropdown').open);
     await click('#title');
diff --git a/addons/rose/tests/integration/components/rose/page-header/utilities-test.js b/addons/rose/tests/integration/components/rose/page-header/utilities-test.js
new file mode 100644
index 0000000000..5685c96d42
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/page-header/utilities-test.js
@@ -0,0 +1,38 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/page-header/utilities', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::PageHeader::Utilities />`);
+    assert.ok(find('.rose-page-header-utilities'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::PageHeader::Utilities id="utilities"/>`);
+    assert.ok(find('#utilities'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(
+      hbs`<Rose::PageHeader::Utilities>Page header utilities</Rose::PageHeader::Utilities>`
+    );
+    assert.equal(
+      find('.rose-page-header-utilities').textContent.trim(),
+      'Page header utilities'
+    );
+  });
+
+  test('it renders utility action buttons', async function (assert) {
+    await render(hbs`<Rose::PageHeader::Utilities as |utility|>
+      <utility.action />
+      <utility.action />
+    </Rose::PageHeader::Utilities>`);
+    assert.equal(findAll('button').length, 2);
+  });
+});

From 9ef514e63b1ced6a1820b21bef152e1fd8ccd7f2 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 2 Jun 2020 18:18:27 -0400
Subject: [PATCH 4/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Integrate=20rose=20?=
 =?UTF-8?q?pageheader=20components=20into=20core=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/templates/orgs/org/projects/index.hbs | 19 ++++++++++++-------
 .../app/templates/orgs/org/projects/new.hbs   |  4 +++-
 .../templates/orgs/org/projects/project.hbs   |  4 ++++
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index c2fb6fa590..ed49140497 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,11 +1,16 @@
 <div class="projects-overview">
-
-  <h2>{{t "resources.projects"}}</h2>
-
-  <LinkTo @route="orgs.org.projects.new">
-    <Rose::Icon @name="plus-circle-outline" @size="medium" />
-    {{t "titles.new"}}
-  </LinkTo>
+  <Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title @text={{t "resources.projects"}} />
+    <Rose::PageHeader::Utilities as |utility|>
+      <utility.action
+        @style="primary"
+        @iconLeft="plus-plain"
+        {{on "click" (route-action "new")}}
+      >
+        {{t 'titles.new'}}
+      </utility.action>
+    </Rose::PageHeader::Utilities>
+  </Rose::Layout::PageHeader>
 
   <ul class="projects">
     {{#each @model as |project|}}
diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs
index 920983b023..90011f7d04 100644
--- a/ui/core/app/templates/orgs/org/projects/new.hbs
+++ b/ui/core/app/templates/orgs/org/projects/new.hbs
@@ -7,7 +7,9 @@
     <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
   </div>
 
-  <h2>{{t "titles.new"}}</h2>
+  <Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title @text={{t "titles.new"}} />
+  </Rose::Layout::PageHeader>
 
   <Form::Project
     @model={{@model}}
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index 26770d11bb..f76c8bcaaf 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -18,6 +18,10 @@
     </nav.link>
   </Rose::Nav::Tabs>
 
+  <Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title @text={{@model.name}} />
+  </Rose::Layout::PageHeader>
+
   <Form::Project
     @model={{@model}}
     @submit={{route-action "save" @model}}

From 6b15aeda1d708804d4714120fbebb12e3b9bf6e9 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 5 Jun 2020 15:44:02 -0400
Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Rename=20layout/?=
 =?UTF-8?q?page=20to=20layout/global=20in=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/layout/{page.js => global.js}        |  2 +-
 .../components/rose/layout/global.stories.mdx | 30 ++++++++++++
 .../layout/{page/header.js => global/body.js} |  2 +-
 .../{page/sidebar.js => global/header.js}     |  2 +-
 .../{page/main.js => global/navigation.js}    |  2 +-
 .../components/rose/layout/page.stories.mdx   | 31 ------------
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/layout/_index.scss | 40 +---------------
 .../rose/components/layout/global/_body.scss  |  3 ++
 .../components/layout/global/_header.scss     |  3 ++
 .../rose/components/layout/global/_index.scss | 29 ++++++++++++
 .../components/layout/global/_navigation.scss |  6 +++
 .../components/rose/layout/global.hbs         |  7 +++
 .../components/rose/layout/global/body.hbs    |  3 ++
 .../components/rose/layout/global/header.hbs  |  3 ++
 .../rose/layout/global/navigation.hbs         |  3 ++
 .../templates/components/rose/layout/page.hbs |  7 ---
 .../components/rose/layout/page/header.hbs    |  3 --
 .../components/rose/layout/page/main.hbs      |  3 --
 .../components/rose/layout/page/sidebar.hbs   |  3 --
 .../rose/app/components/rose/layout/global.js |  1 +
 .../app/components/rose/layout/global/body.js |  1 +
 .../components/rose/layout/global/header.js   |  1 +
 .../rose/layout/global/navigation.js          |  1 +
 .../rose/app/components/rose/layout/page.js   |  1 -
 .../app/components/rose/layout/page/header.js |  1 -
 .../app/components/rose/layout/page/main.js   |  1 -
 .../components/rose/layout/page/sidebar.js    |  1 -
 .../rose/tests/dummy/app/templates/index.hbs  | 16 +++----
 .../components/rose/layout/global-test.js     | 47 +++++++++++++++++++
 .../main-test.js => global/body-test.js}      | 12 ++---
 .../layout/{page => global}/header-test.js    | 12 ++---
 .../navigation-test.js}                       | 14 +++---
 .../components/rose/layout/page-test.js       | 47 -------------------
 ui/core/app/routes/orgs/org/projects/index.js | 13 ++++-
 ui/core/app/templates/application.hbs         | 20 ++++----
 .../templates/orgs/org/projects/project.hbs   | 10 ++--
 37 files changed, 195 insertions(+), 187 deletions(-)
 rename addons/rose/addon/components/rose/layout/{page.js => global.js} (59%)
 create mode 100644 addons/rose/addon/components/rose/layout/global.stories.mdx
 rename addons/rose/addon/components/rose/layout/{page/header.js => global/body.js} (91%)
 rename addons/rose/addon/components/rose/layout/{page/sidebar.js => global/header.js} (90%)
 rename addons/rose/addon/components/rose/layout/{page/main.js => global/navigation.js} (89%)
 delete mode 100644 addons/rose/addon/components/rose/layout/page.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_body.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_header.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global/body.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global/header.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/header.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/main.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs
 create mode 100644 addons/rose/app/components/rose/layout/global.js
 create mode 100644 addons/rose/app/components/rose/layout/global/body.js
 create mode 100644 addons/rose/app/components/rose/layout/global/header.js
 create mode 100644 addons/rose/app/components/rose/layout/global/navigation.js
 delete mode 100644 addons/rose/app/components/rose/layout/page.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/header.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/main.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/sidebar.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/global-test.js
 rename addons/rose/tests/integration/components/rose/layout/{page/main-test.js => global/body-test.js} (61%)
 rename addons/rose/tests/integration/components/rose/layout/{page => global}/header-test.js (60%)
 rename addons/rose/tests/integration/components/rose/layout/{page/sidebar-test.js => global/navigation-test.js} (55%)
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page-test.js

diff --git a/addons/rose/addon/components/rose/layout/page.js b/addons/rose/addon/components/rose/layout/global.js
similarity index 59%
rename from addons/rose/addon/components/rose/layout/page.js
rename to addons/rose/addon/components/rose/layout/global.js
index 10190bcba9..c9beb6f91c 100644
--- a/addons/rose/addon/components/rose/layout/page.js
+++ b/addons/rose/addon/components/rose/layout/global.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/page';
+import layout from '../../../templates/components/rose/layout/global';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global.stories.mdx
new file mode 100644
index 0000000000..2adb2f277a
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/global.stories.mdx
@@ -0,0 +1,30 @@
+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|Layout|Global" component="Global" />
+
+# Layout|Global
+
+A top-level layout/positioning component that allows three distinct sections to be configured: header, navigation, and body.
+
+```htmlbars
+<Rose::Layout::Global as |global|>
+  <global.header />
+  <global.body />
+  <global.navigation />
+</Rose::Layout::Global>
+```
+
+<Preview>
+  <Story name="Global">{{
+    template: hbs`
+    <Rose::Layout::Global as |global|>
+      <global.header style="background: var(--brand-gray-5);">Header</global.header>
+      <global.body style="background: var(--brand-gray-7);">Body</global.body>
+      <global.navigation style="background: var(--brand-gray-6);">Navigation</global.navigation>
+    </Rose::Layout::Global>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/layout/page/header.js b/addons/rose/addon/components/rose/layout/global/body.js
similarity index 91%
rename from addons/rose/addon/components/rose/layout/page/header.js
rename to addons/rose/addon/components/rose/layout/global/body.js
index 45f4c68617..a7de3a0e1c 100644
--- a/addons/rose/addon/components/rose/layout/page/header.js
+++ b/addons/rose/addon/components/rose/layout/global/body.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/page/header';
+import layout from '../../../../templates/components/rose/layout/global/body';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page/sidebar.js b/addons/rose/addon/components/rose/layout/global/header.js
similarity index 90%
rename from addons/rose/addon/components/rose/layout/page/sidebar.js
rename to addons/rose/addon/components/rose/layout/global/header.js
index 9df366f6d5..274e815845 100644
--- a/addons/rose/addon/components/rose/layout/page/sidebar.js
+++ b/addons/rose/addon/components/rose/layout/global/header.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/page/sidebar';
+import layout from '../../../../templates/components/rose/layout/global/header';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page/main.js b/addons/rose/addon/components/rose/layout/global/navigation.js
similarity index 89%
rename from addons/rose/addon/components/rose/layout/page/main.js
rename to addons/rose/addon/components/rose/layout/global/navigation.js
index 83b4d6dcb3..8759a341f8 100644
--- a/addons/rose/addon/components/rose/layout/page/main.js
+++ b/addons/rose/addon/components/rose/layout/global/navigation.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/page/main';
+import layout from '../../../../templates/components/rose/layout/global/navigation';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx
deleted file mode 100644
index ae54e41f8c..0000000000
--- a/addons/rose/addon/components/rose/layout/page.stories.mdx
+++ /dev/null
@@ -1,31 +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';
-
-<Meta title="Rose|Layout|Page" component="Page" />
-
-# Layout|Page
-
-A page layout/positioning component that allows three distinct sections to be configured: header, sidebar, and main.
-Sidebar's content width determines it's column width.
-
-```htmlbars
-<Rose::Layout::Page as |page|>
-  <page.header />
-  <page.sidebar />
-  <page.main />
-</Rose::Layout::Page>
-```
-
-<Preview>
-  <Story name="Basic">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <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>
-</Preview>
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index fd25c4bf2b..f8ba54fb12 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -5,3 +5,4 @@
 @import 'notification';
 @import 'card';
 @import 'page-header';
+@import 'nav';
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 9b927fb2c7..8ec7ba2ab5 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,40 +1,2 @@
-@use '../../variables/sizing';
-@use '../../variables/media';
-
+@import 'global';
 @import 'page-header';
-
-.rose-layout-page {
-  display: grid;
-  grid-template-areas:
-    'header header header header'
-    'sidebar main main main';
-  // Define static grid column for sidebar
-  grid-template-columns: 16rem auto 1fr;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
-}
-
-.rose-layout-header {
-  grid-area: header;
-}
-
-.rose-layout-main {
-  grid-area: main;
-}
-
-.rose-layout-sidebar {
-  grid-area: sidebar;
-  border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
-}
-
-@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'
-      'main';
-    padding-bottom: 0;
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_body.scss b/addons/rose/addon/styles/rose/components/layout/global/_body.scss
new file mode 100644
index 0000000000..926856f49e
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_body.scss
@@ -0,0 +1,3 @@
+.rose-layout-global-body {
+  grid-area: body;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_header.scss b/addons/rose/addon/styles/rose/components/layout/global/_header.scss
new file mode 100644
index 0000000000..0c784bc7e6
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_header.scss
@@ -0,0 +1,3 @@
+.rose-layout-global-header {
+  grid-area: header;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_index.scss b/addons/rose/addon/styles/rose/components/layout/global/_index.scss
new file mode 100644
index 0000000000..6f6af52c5c
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_index.scss
@@ -0,0 +1,29 @@
+@use '../../../variables/sizing';
+@use '../../../variables/media';
+
+@import 'header';
+@import 'body';
+@import 'navigation';
+
+.rose-layout-global {
+  display: grid;
+  grid-template-areas:
+    'header header header header'
+    'navigation body body body';
+  // Define 16rem static grid column for navigation
+  grid-template-columns: (sizing.rems(m) * 16) auto 1fr;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-global {
+    grid-template-columns: 1fr;
+    grid-template-rows: 0.1fr auto 1fr;
+    grid-template-areas:
+      'header'
+      'navigation'
+      'body';
+    padding-bottom: 0;
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
new file mode 100644
index 0000000000..9482c0223e
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
@@ -0,0 +1,6 @@
+@use '../../../variables/sizing';
+
+.rose-layout-global-navigation {
+  grid-area: navigation;
+  border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs
new file mode 100644
index 0000000000..4ed9a90337
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global.hbs
@@ -0,0 +1,7 @@
+<div ...attributes class="rose-layout-global">
+  {{yield (hash
+    header=(component 'rose/layout/global/header')
+    body=(component 'rose/layout/global/body')
+    navigation=(component 'rose/layout/global/navigation')
+  )}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/global/body.hbs b/addons/rose/addon/templates/components/rose/layout/global/body.hbs
new file mode 100644
index 0000000000..b89c802f7f
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global/body.hbs
@@ -0,0 +1,3 @@
+<main ...attributes class="rose-layout-global-body">
+  {{yield}}
+</main>
diff --git a/addons/rose/addon/templates/components/rose/layout/global/header.hbs b/addons/rose/addon/templates/components/rose/layout/global/header.hbs
new file mode 100644
index 0000000000..b2e966d0db
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global/header.hbs
@@ -0,0 +1,3 @@
+<header ...attributes class="rose-layout-global-header" >
+  {{yield}}
+</header>
diff --git a/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
new file mode 100644
index 0000000000..b23782e923
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
@@ -0,0 +1,3 @@
+<aside ...attributes class="rose-layout-global-navigation">
+  {{yield}}
+</aside>
diff --git a/addons/rose/addon/templates/components/rose/layout/page.hbs b/addons/rose/addon/templates/components/rose/layout/page.hbs
deleted file mode 100644
index 73a8b205fb..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/page.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div ...attributes class="rose-layout-page">
-  {{yield (hash
-    header=(component 'rose/layout/page/header')
-    main=(component 'rose/layout/page/main')
-    sidebar=(component 'rose/layout/page/sidebar')
-  )}}
-</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
deleted file mode 100644
index 545ac6c22a..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/header.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<header ...attributes class="rose-layout-header" >
-  {{yield}}
-</header>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/main.hbs b/addons/rose/addon/templates/components/rose/layout/page/main.hbs
deleted file mode 100644
index 1752414ce3..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/main.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<main ...attributes class="rose-layout-main">
-  {{yield}}
-</main>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs b/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs
deleted file mode 100644
index 07f519a2bb..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<aside ...attributes class="rose-layout-sidebar">
-  {{yield}}
-</aside>
diff --git a/addons/rose/app/components/rose/layout/global.js b/addons/rose/app/components/rose/layout/global.js
new file mode 100644
index 0000000000..d55398ff9f
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/global/body.js b/addons/rose/app/components/rose/layout/global/body.js
new file mode 100644
index 0000000000..3f6780e177
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global/body.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/body';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/global/header.js b/addons/rose/app/components/rose/layout/global/header.js
new file mode 100644
index 0000000000..6d737401be
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/header';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/global/navigation.js b/addons/rose/app/components/rose/layout/global/navigation.js
new file mode 100644
index 0000000000..fa056e99e8
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/global/navigation.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/navigation';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/layout/page.js b/addons/rose/app/components/rose/layout/page.js
deleted file mode 100644
index a88273d718..0000000000
--- a/addons/rose/app/components/rose/layout/page.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page';
diff --git a/addons/rose/app/components/rose/layout/page/header.js b/addons/rose/app/components/rose/layout/page/header.js
deleted file mode 100644
index 77437dd121..0000000000
--- a/addons/rose/app/components/rose/layout/page/header.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/header';
diff --git a/addons/rose/app/components/rose/layout/page/main.js b/addons/rose/app/components/rose/layout/page/main.js
deleted file mode 100644
index 3bde34d59f..0000000000
--- a/addons/rose/app/components/rose/layout/page/main.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/main';
diff --git a/addons/rose/app/components/rose/layout/page/sidebar.js b/addons/rose/app/components/rose/layout/page/sidebar.js
deleted file mode 100644
index aa6735e844..0000000000
--- a/addons/rose/app/components/rose/layout/page/sidebar.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/sidebar';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index ec39650390..841d801224 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,5 +1,5 @@
-<Rose::Layout::Page as |page|>
-  <page.header>
+<Rose::Layout::Global as |global|>
+  <global.header>
     <Rose::Header as |header|>
 
       <header.brand @logo="logo" @text="Product Name" />
@@ -28,18 +28,18 @@
       </header.utilities>
 
     </Rose::Header>
-  </page.header>
+  </global.header>
 
-  <page.sidebar>
+  <global.navigation>
     <Rose::Nav::Sidebar @title="Title" as |nav|>
       <nav.link @route="index">Item Name</nav.link>
       <nav.link @route="about">Item Name</nav.link>
       <nav.link @route="about">Item Name</nav.link>
       <nav.link @route="about">Item Name</nav.link>
     </Rose::Nav::Sidebar>
-  </page.sidebar>
+  </global.navigation>
 
-  <page.main>
+  <global.body>
 
     Dummy app index template
 
@@ -198,5 +198,5 @@
     <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"/>
-  </page.main>
-</Rose::Layout::Page>
+  </global.body>
+</Rose::Layout::Global>
diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js
new file mode 100644
index 0000000000..7bff3a3b6f
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/global-test.js
@@ -0,0 +1,47 @@
+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/global', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Global />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-global'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Global id="global"/>`);
+    assert.ok(find('#global'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <button id="content" />
+    </Rose::Layout::Global>`);
+    assert.ok(find('#content'));
+  });
+
+  test('it renders with header', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <global.header />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-header'));
+  });
+
+  test('it renders with main', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <global.body />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-body'));
+  });
+
+  test('it renders with sidebar', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |global|>
+      <global.navigation />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-navigation'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/main-test.js b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
similarity index 61%
rename from addons/rose/tests/integration/components/rose/layout/page/main-test.js
rename to addons/rose/tests/integration/components/rose/layout/global/body-test.js
index 9d677c85ca..9cdf1224de 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/main-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
@@ -3,24 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page/main', function (hooks) {
+module('Integration | Component | rose/layout/global/body', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Main />`);
+    await render(hbs`<Rose::Layout::Global::Body />`);
     assert.ok(find('main'));
-    assert.ok(find('.rose-layout-main'));
+    assert.ok(find('.rose-layout-global-body'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Main id="main"/>`);
+    await render(hbs`<Rose::Layout::Global::Body id="main"/>`);
     assert.ok(find('#main'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Main>
+    await render(hbs`<Rose::Layout::Global::Body>
       <button id="content" />
-    </Rose::Layout::Page::Main>`);
+    </Rose::Layout::Global::Body>`);
     assert.ok(find('#content'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/page/header-test.js b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
similarity index 60%
rename from addons/rose/tests/integration/components/rose/layout/page/header-test.js
rename to addons/rose/tests/integration/components/rose/layout/global/header-test.js
index 8976dd7269..61dee13119 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/header-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
@@ -3,24 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page/header', function (hooks) {
+module('Integration | Component | rose/layout/global/header', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Header />`);
+    await render(hbs`<Rose::Layout::Global::Header />`);
     assert.ok(find('header'));
-    assert.ok(find('.rose-layout-header'));
+    assert.ok(find('.rose-layout-global-header'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Header id="header"/>`);
+    await render(hbs`<Rose::Layout::Global::Header id="header"/>`);
     assert.ok(find('#header'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Header>
+    await render(hbs`<Rose::Layout::Global::Header>
       <button id="content" />
-    </Rose::Layout::Page::Header>`);
+    </Rose::Layout::Global::Header>`);
     assert.ok(find('#content'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/page/sidebar-test.js b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
similarity index 55%
rename from addons/rose/tests/integration/components/rose/layout/page/sidebar-test.js
rename to addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
index e09886c0cd..087a66392b 100644
--- a/addons/rose/tests/integration/components/rose/layout/page/sidebar-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
@@ -3,24 +3,24 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/page/sidebar', function (hooks) {
+module('Integration | Component | rose/layout/global/navigation', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Sidebar />`);
+    await render(hbs`<Rose::Layout::Global::Navigation />`);
     assert.ok(find('aside'));
-    assert.ok(find('.rose-layout-sidebar'));
+    assert.ok(find('.rose-layout-global-navigation'));
   });
 
   test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Sidebar id="sidebar"/>`);
-    assert.ok(find('#sidebar'));
+    await render(hbs`<Rose::Layout::Global::Navigation id="navigation"/>`);
+    assert.ok(find('#navigation'));
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page::Sidebar>
+    await render(hbs`<Rose::Layout::Global::Navigation>
       <button id="content" />
-    </Rose::Layout::Page::Sidebar>`);
+    </Rose::Layout::Global::Navigation>`);
     assert.ok(find('#content'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/layout/page-test.js b/addons/rose/tests/integration/components/rose/layout/page-test.js
deleted file mode 100644
index f1f7feb87f..0000000000
--- a/addons/rose/tests/integration/components/rose/layout/page-test.js
+++ /dev/null
@@ -1,47 +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/page', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Page />`);
-    assert.ok(find('div'));
-    assert.ok(find('.rose-layout-page'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::Page id="page"/>`);
-    assert.ok(find('#page'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <button id="content" />
-    </Rose::Layout::Page>`);
-    assert.ok(find('#content'));
-  });
-
-  test('it renders with header', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <page.header />
-    </Rose::Layout::Page>`);
-    assert.ok(find('.rose-layout-header'));
-  });
-
-  test('it renders with main', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <page.main />
-    </Rose::Layout::Page>`);
-    assert.ok(find('.rose-layout-main'));
-  });
-
-  test('it renders with sidebar', async function (assert) {
-    await render(hbs`<Rose::Layout::Page as |page|>
-      <page.sidebar />
-    </Rose::Layout::Page>`);
-    assert.ok(find('.rose-layout-sidebar'));
-  });
-});
diff --git a/ui/core/app/routes/orgs/org/projects/index.js b/ui/core/app/routes/orgs/org/projects/index.js
index be2068f6d1..d0ab28a1d4 100644
--- a/ui/core/app/routes/orgs/org/projects/index.js
+++ b/ui/core/app/routes/orgs/org/projects/index.js
@@ -1,3 +1,14 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
-export default class OrgsOrgProjectsIndexRoute extends Route {}
+export default class OrgsOrgProjectsIndexRoute extends Route {
+  // =methods
+
+  /**
+   * Route to new project view.
+   */
+  @action
+  new() {
+    this.transitionTo('orgs.org.projects.new');
+  }
+}
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 5d66d58f11..1746e62470 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -1,9 +1,5 @@
-<HeadLayout />
-
-{{title (app-name)}}
-
-<Rose::Layout::Page as |page|>
-  <page.header>
+<Rose::Layout::Global as |global|>
+  <global.header>
     <Rose::Header as |header|>
       <header.brand @logo="logo-hashi" @text={{app-name}} />
       <header.nav as |nav|>
@@ -26,20 +22,20 @@
         </utilities.dropdown>
       </header.utilities>
     </Rose::Header>
-  </page.header>
+  </global.header>
 
-  <page.main>
+  <global.body>
     {{outlet}}
-  </page.main>
+  </global.body>
 
-  <page.sidebar>
+  <global.navigation>
     <Rose::Nav::Sidebar @title={{t 'dev.title'}} as |nav|>
       <nav.link @route="orgs" class="active">{{t 'dev.item-name'}}</nav.link>
       <nav.link @route="index">{{t 'dev.item-name'}}</nav.link>
     </Rose::Nav::Sidebar>
-  </page.sidebar>
+  </global.navigation>
 
-</Rose::Layout::Page>
+</Rose::Layout::Global>
 
 <EmberNotify @closeAfter={{4000}} as |message close|>
   <Rose::Notification
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index f76c8bcaaf..7cdf10d876 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -7,21 +7,19 @@
     <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
   </div>
 
-  <h2>{{t "resources.project.settings"}}</h2>
+  <Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title @text={{t "resources.project.settings"}} />
+  </Rose::Layout::PageHeader>
 
   <Rose::Nav::Tabs as |nav|>
     <nav.link @route='orgs.org.projects.project'>
-      {{t 'dev.item-name'}}
+      {{t "nav.overview"}}
     </nav.link>
     <nav.link @route='index'>
       {{t 'dev.item-name'}}
     </nav.link>
   </Rose::Nav::Tabs>
 
-  <Rose::Layout::PageHeader>
-    <Rose::PageHeader::Title @text={{@model.name}} />
-  </Rose::Layout::PageHeader>
-
   <Form::Project
     @model={{@model}}
     @submit={{route-action "save" @model}}

From c4023abf813229caee875196af0974984fe5e5df Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Sun, 7 Jun 2020 21:03:29 -0400
Subject: [PATCH 6/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Refactor=20global?=
 =?UTF-8?q?=20and=20page=20layouts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/layout/page-header.stories.mdx       | 24 -------
 .../rose/layout/{page-header.js => page.js}   |  2 +-
 .../components/rose/layout/page.stories.mdx   | 33 +++++++++
 .../components/rose/layout/page/actions.js    |  7 ++
 .../addon/components/rose/layout/page/body.js |  7 ++
 .../rose/layout/page/breadcrumbs.js           |  7 ++
 .../components/rose/layout/page/header.js     |  7 ++
 .../components/rose/layout/page/navigation.js |  7 ++
 .../rose/page-header/title.stories.mdx        | 40 +++++------
 .../rose/page-header/utilities.stories.mdx    | 20 +++---
 .../styles/rose/components/layout/_index.scss |  2 +-
 .../rose/components/layout/_page-header.scss  | 24 -------
 .../rose/components/layout/page/_actions.scss |  3 +
 .../rose/components/layout/page/_body.scss    |  3 +
 .../components/layout/page/_breadcrumbs.scss  |  3 +
 .../rose/components/layout/page/_header.scss  |  3 +
 .../rose/components/layout/page/_index.scss   | 31 +++++++++
 .../components/layout/page/_navigation.scss   |  3 +
 .../templates/components/rose/layout/page.hbs |  9 +++
 .../components/rose/layout/page/actions.hbs   |  3 +
 .../components/rose/layout/page/body.hbs      |  3 +
 .../rose/layout/page/breadcrumbs.hbs          |  3 +
 .../{page-header.hbs => page/header.hbs}      |  0
 .../rose/layout/page/navigation.hbs           |  3 +
 .../unit/mixins/component-auto-id-test.js     | 11 +++
 .../rose/app/components/rose/layout/global.js |  2 +-
 .../app/components/rose/layout/global/body.js |  2 +-
 .../components/rose/layout/global/header.js   |  2 +-
 .../rose/layout/global/navigation.js          |  2 +-
 .../app/components/rose/layout/page-header.js |  1 -
 .../rose/app/components/rose/layout/page.js   |  1 +
 .../components/rose/layout/page/actions.js    |  1 +
 .../app/components/rose/layout/page/body.js   |  1 +
 .../rose/layout/page/breadcrumbs.js           |  1 +
 .../app/components/rose/layout/page/header.js |  1 +
 .../components/rose/layout/page/navigation.js |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  7 ++
 .../components/rose/layout/global-test.js     |  2 +-
 .../rose/layout/global/body-test.js           |  2 +-
 .../rose/layout/global/header-test.js         |  2 +-
 .../rose/layout/global/navigation-test.js     |  4 +-
 .../rose/layout/page-header-test.js           | 28 --------
 .../components/rose/layout/page-test.js       | 26 +++++++
 .../rose/layout/page/actions-test.js          | 26 +++++++
 .../components/rose/layout/page/body-test.js  | 26 +++++++
 .../rose/layout/page/breadcrumbs-test.js      | 28 ++++++++
 .../rose/layout/page/header-test.js           | 26 +++++++
 .../rose/layout/page/navigation-test.js       | 28 ++++++++
 .../app/templates/orgs/org/projects/index.hbs | 37 +++++-----
 .../app/templates/orgs/org/projects/new.hbs   | 36 +++++-----
 .../templates/orgs/org/projects/project.hbs   | 68 ++++++++++---------
 51 files changed, 433 insertions(+), 186 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/layout/page-header.stories.mdx
 rename addons/rose/addon/components/rose/layout/{page-header.js => page.js} (93%)
 create mode 100644 addons/rose/addon/components/rose/layout/page.stories.mdx
 create mode 100644 addons/rose/addon/components/rose/layout/page/actions.js
 create mode 100644 addons/rose/addon/components/rose/layout/page/body.js
 create mode 100644 addons/rose/addon/components/rose/layout/page/breadcrumbs.js
 create mode 100644 addons/rose/addon/components/rose/layout/page/header.js
 create mode 100644 addons/rose/addon/components/rose/layout/page/navigation.js
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/_page-header.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/page/_actions.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/page/_body.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/page/_header.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/page/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page/actions.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page/body.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs
 rename addons/rose/addon/templates/components/rose/layout/{page-header.hbs => page/header.hbs} (100%)
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
 delete mode 100644 addons/rose/app/components/rose/layout/page-header.js
 create mode 100644 addons/rose/app/components/rose/layout/page.js
 create mode 100644 addons/rose/app/components/rose/layout/page/actions.js
 create mode 100644 addons/rose/app/components/rose/layout/page/body.js
 create mode 100644 addons/rose/app/components/rose/layout/page/breadcrumbs.js
 create mode 100644 addons/rose/app/components/rose/layout/page/header.js
 create mode 100644 addons/rose/app/components/rose/layout/page/navigation.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page-header-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page/actions-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page/body-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page/header-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page/navigation-test.js

diff --git a/addons/rose/addon/components/rose/layout/page-header.stories.mdx b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
deleted file mode 100644
index 218fa75c1d..0000000000
--- a/addons/rose/addon/components/rose/layout/page-header.stories.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-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="PageHeader" />
-
-# Layout|Page Header
-
-A page layout/positioning component that configures a two column grid with defined areas: title and utilities
-
-```htmlbars
-<Rose::Layout::PageHeader />
-```
-
-<Preview>
-  <Story name="Page Header">{{
-    template: hbs`
-    <Rose::Layout::PageHeader>
-      <div style="grid-area: title; background: var(--brand-gray-7)">Grid area: title</div>
-      <div style="grid-area: utilities; background: var(--brand-gray-5)">Grid area: utilities</div>
-    </Rose::Layout::PageHeader>
-    `,
-  }}</Story>
-</Preview>
diff --git a/addons/rose/addon/components/rose/layout/page-header.js b/addons/rose/addon/components/rose/layout/page.js
similarity index 93%
rename from addons/rose/addon/components/rose/layout/page-header.js
rename to addons/rose/addon/components/rose/layout/page.js
index e7ed1d3900..10190bcba9 100644
--- a/addons/rose/addon/components/rose/layout/page-header.js
+++ b/addons/rose/addon/components/rose/layout/page.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/page-header';
+import layout from '../../../templates/components/rose/layout/page';
 
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx
new file mode 100644
index 0000000000..5206d551b3
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page.stories.mdx
@@ -0,0 +1,33 @@
+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|Page" component="Page" />
+
+# Layout|Page
+
+A page layout/positioning component that allows five distinct sections to be configured: breadcrumbs, header, actions, navigation, and body.
+
+```htmlbars
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs />
+  <page.header />
+  <page.actions />
+  <page.navigation />
+  <page.body />
+</Rose::Layout::Page>
+```
+
+<Preview>
+  <Story name="Page">{{
+    template: hbs`
+    <Rose::Layout::Page as |page|>
+      <page.breadcrumbs style="background: var(--brand-gray-4);">Breadcrumbs</page.breadcrumbs>
+      <page.header style="background: var(--brand-gray-5);">Header</page.header>
+      <page.actions style="background: var(--brand-gray-8);">Actions</page.actions>
+      <page.navigation style="background: var(--brand-gray-6);">Navigation</page.navigation>
+      <page.body style="background: var(--brand-gray-7);">Body</page.body>
+    </Rose::Layout::Page>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/layout/page/actions.js b/addons/rose/addon/components/rose/layout/page/actions.js
new file mode 100644
index 0000000000..e5bd07bb72
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/actions.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/actions';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/body.js b/addons/rose/addon/components/rose/layout/page/body.js
new file mode 100644
index 0000000000..82c9b9b76e
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/body.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/body';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/breadcrumbs.js b/addons/rose/addon/components/rose/layout/page/breadcrumbs.js
new file mode 100644
index 0000000000..21cb71c9f0
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/breadcrumbs.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/breadcrumbs';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/header.js b/addons/rose/addon/components/rose/layout/page/header.js
new file mode 100644
index 0000000000..45f4c68617
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page/navigation.js b/addons/rose/addon/components/rose/layout/page/navigation.js
new file mode 100644
index 0000000000..7356be5e03
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page/navigation.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/layout/page/navigation';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/page-header/title.stories.mdx b/addons/rose/addon/components/rose/page-header/title.stories.mdx
index 050c771923..4955afe261 100644
--- a/addons/rose/addon/components/rose/page-header/title.stories.mdx
+++ b/addons/rose/addon/components/rose/page-header/title.stories.mdx
@@ -10,33 +10,29 @@ import { text, select } from '@storybook/addon-knobs';
 A header title component with ability to configure dropdown using `Rose::Header::Dropdown`. To be used with `Rose::Layout::PageHeader`.
 
 ```html
-<Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-  <Rose::PageHeader::Title as |title| >
-    <title.dropdown
-      @text="Page Header Title"
-      @icon="user-square-fill" as |dropdown|
-    >
-      <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.button>Button menu item</dropdown.button>
-    </title.dropdown>
-  </Rose::PageHeader::Title>
-</Rose::Layout::PageHeader>
+<Rose::PageHeader::Title as |title| >
+  <title.dropdown
+    @text="Page Header Title"
+    @icon="user-square-fill" as |dropdown|
+  >
+    <dropdown.link @route="index">Menu item</dropdown.link>
+    <dropdown.button>Button menu item</dropdown.button>
+  </title.dropdown>
+</Rose::PageHeader::Title>
 ```
 
 <Preview>
   <Story name="Title">{{
     template: hbs`
-    <Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-      <Rose::PageHeader::Title as |title| >
-        <title.dropdown
-          @text={{pageTitle}}
-          @icon={{dropdownIcon}} as |dropdown|
-        >
-          <dropdown.link @route="index">Menu item</dropdown.link>
-          <dropdown.button>Button menu item</dropdown.button>
-        </title.dropdown>
-      </Rose::PageHeader::Title>
-    </Rose::Layout::PageHeader>
+    <Rose::PageHeader::Title as |title| >
+      <title.dropdown
+        @text={{pageTitle}}
+        @icon={{dropdownIcon}} as |dropdown|
+      >
+        <dropdown.link @route="index">Menu item</dropdown.link>
+        <dropdown.button>Button menu item</dropdown.button>
+      </title.dropdown>
+    </Rose::PageHeader::Title>
     `,
     context: {
       pageTitle: text('pageTitle', 'Page Section Title'),
diff --git a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx b/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
index e1077084ee..c752ae8a87 100644
--- a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
+++ b/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
@@ -9,23 +9,19 @@ import { action } from '@storybook/addon-actions';
 An component comprised of `Rose::Button` as actions. To be used with `Rose::Layout::PageHeader`.
 
 ```html
-<Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-  <Rose::PageHeader::Utilities as |utilities|>
-    <utilities.action @style="secondary">Secondary</utilities.action>
-    <utilities.action @style="primary">Primary</utilities.action>
-  </Rose::PageHeader::Utilities>
-</Rose::Layout::PageHeader>
+<Rose::PageHeader::Utilities as |utilities|>
+  <utilities.action @style="secondary">Secondary</utilities.action>
+  <utilities.action @style="primary">Primary</utilities.action>
+</Rose::PageHeader::Utilities>
 ```
 
 <Preview>
   <Story name="Utilities">{{
     template: hbs`
-    <Rose::Layout::PageHeader style="border: 1px solid var(--brand-gray-5);">
-      <Rose::PageHeader::Utilities as |utilities|>
-        <utilities.action @style="secondary">Secondary</utilities.action>
-        <utilities.action @style="primary">Primary</utilities.action>
-      </Rose::PageHeader::Utilities>
-    </Rose::Layout::PageHeader>
+    <Rose::PageHeader::Utilities as |utilities|>
+      <utilities.action @style="secondary">Secondary</utilities.action>
+      <utilities.action @style="primary">Primary</utilities.action>
+    </Rose::PageHeader::Utilities>
     `,
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 8ec7ba2ab5..02f7021b27 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,2 +1,2 @@
 @import 'global';
-@import 'page-header';
+@import 'page';
diff --git a/addons/rose/addon/styles/rose/components/layout/_page-header.scss b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
deleted file mode 100644
index ccd539138b..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/_page-header.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use '../../variables/media';
-
-.rose-layout-page-header {
-  display: grid;
-  grid-template-areas: 'title title utilities';
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto 1fr;
-
-  .rose-page-header-utilities {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-  }
-}
-
-@media (max-width: media.width(small)) {
-  .rose-layout-page-header {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      'title'
-      'utilities';
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_actions.scss b/addons/rose/addon/styles/rose/components/layout/page/_actions.scss
new file mode 100644
index 0000000000..68ec334a46
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_actions.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-actions {
+  grid-area: actions;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_body.scss b/addons/rose/addon/styles/rose/components/layout/page/_body.scss
new file mode 100644
index 0000000000..cec7602762
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_body.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-body {
+  grid-area: body;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
new file mode 100644
index 0000000000..638549ff5d
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-breadcrumbs {
+  grid-area: breadcrumbs;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_header.scss b/addons/rose/addon/styles/rose/components/layout/page/_header.scss
new file mode 100644
index 0000000000..d5d3af830e
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_header.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-header {
+  grid-area: header;
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_index.scss b/addons/rose/addon/styles/rose/components/layout/page/_index.scss
new file mode 100644
index 0000000000..31f47115c4
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_index.scss
@@ -0,0 +1,31 @@
+@use '../../../variables/sizing';
+@use '../../../variables/media';
+
+@import 'breadcrumbs';
+@import 'header';
+@import 'actions';
+@import 'navigation';
+@import 'body';
+
+.rose-layout-page {
+  display: grid;
+  grid-template-areas:
+    'breadcrumbs breadcrumbs breadcrumbs'
+    'header header actions'
+    'navigation navigation navigation'
+    'body body body';
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-page {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'breadcrumbs'
+      'header'
+      'actions'
+      'navigation'
+      'body';
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
new file mode 100644
index 0000000000..5d35caaa7d
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
@@ -0,0 +1,3 @@
+.rose-layout-page-navigation {
+  grid-area: navigation;
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/page.hbs b/addons/rose/addon/templates/components/rose/layout/page.hbs
new file mode 100644
index 0000000000..9afad989b7
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page.hbs
@@ -0,0 +1,9 @@
+<div ...attributes class="rose-layout-page">
+  {{yield (hash
+    breadcrumbs=(component 'rose/layout/page/breadcrumbs')
+    header=(component 'rose/layout/page/header')
+    actions=(component 'rose/layout/page/actions')
+    navigation=(component 'rose/layout/page/navigation')
+    body=(component 'rose/layout/page/body')
+  )}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/actions.hbs b/addons/rose/addon/templates/components/rose/layout/page/actions.hbs
new file mode 100644
index 0000000000..8bfabd1857
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/actions.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-actions">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/body.hbs b/addons/rose/addon/templates/components/rose/layout/page/body.hbs
new file mode 100644
index 0000000000..1a2bc08314
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/body.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-body">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs b/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs
new file mode 100644
index 0000000000..585c9d6307
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-breadcrumbs">
+  {{yield}}
+</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
similarity index 100%
rename from addons/rose/addon/templates/components/rose/layout/page-header.hbs
rename to addons/rose/addon/templates/components/rose/layout/page/header.hbs
diff --git a/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
new file mode 100644
index 0000000000..3e47899514
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-navigation">
+  {{yield}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js b/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
new file mode 100644
index 0000000000..a047b3e7b8
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
@@ -0,0 +1,11 @@
+import EmberObject from '@ember/object';
+import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | component-auto-id', function () {
+  test('it generates an ID and assigns it to the object', function (assert) {
+    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
+    let subject = ComponentAutoIdObject.create();
+    assert.ok(subject.id);
+  });
+});
diff --git a/addons/rose/app/components/rose/layout/global.js b/addons/rose/app/components/rose/layout/global.js
index d55398ff9f..615c7de96c 100644
--- a/addons/rose/app/components/rose/layout/global.js
+++ b/addons/rose/app/components/rose/layout/global.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global';
diff --git a/addons/rose/app/components/rose/layout/global/body.js b/addons/rose/app/components/rose/layout/global/body.js
index 3f6780e177..37088d7d00 100644
--- a/addons/rose/app/components/rose/layout/global/body.js
+++ b/addons/rose/app/components/rose/layout/global/body.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global/body';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global/body';
diff --git a/addons/rose/app/components/rose/layout/global/header.js b/addons/rose/app/components/rose/layout/global/header.js
index 6d737401be..d529afa356 100644
--- a/addons/rose/app/components/rose/layout/global/header.js
+++ b/addons/rose/app/components/rose/layout/global/header.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global/header';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global/header';
diff --git a/addons/rose/app/components/rose/layout/global/navigation.js b/addons/rose/app/components/rose/layout/global/navigation.js
index fa056e99e8..e83c8266e9 100644
--- a/addons/rose/app/components/rose/layout/global/navigation.js
+++ b/addons/rose/app/components/rose/layout/global/navigation.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/layout/global/navigation';
\ No newline at end of file
+export { default } from 'rose/components/rose/layout/global/navigation';
diff --git a/addons/rose/app/components/rose/layout/page-header.js b/addons/rose/app/components/rose/layout/page-header.js
deleted file mode 100644
index 5235f3c7bd..0000000000
--- a/addons/rose/app/components/rose/layout/page-header.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page-header';
diff --git a/addons/rose/app/components/rose/layout/page.js b/addons/rose/app/components/rose/layout/page.js
new file mode 100644
index 0000000000..a88273d718
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page';
diff --git a/addons/rose/app/components/rose/layout/page/actions.js b/addons/rose/app/components/rose/layout/page/actions.js
new file mode 100644
index 0000000000..42d264833d
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/actions.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/actions';
diff --git a/addons/rose/app/components/rose/layout/page/body.js b/addons/rose/app/components/rose/layout/page/body.js
new file mode 100644
index 0000000000..2614417298
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/body.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/body';
diff --git a/addons/rose/app/components/rose/layout/page/breadcrumbs.js b/addons/rose/app/components/rose/layout/page/breadcrumbs.js
new file mode 100644
index 0000000000..0c31615848
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/breadcrumbs.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/breadcrumbs';
diff --git a/addons/rose/app/components/rose/layout/page/header.js b/addons/rose/app/components/rose/layout/page/header.js
new file mode 100644
index 0000000000..77437dd121
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/header';
diff --git a/addons/rose/app/components/rose/layout/page/navigation.js b/addons/rose/app/components/rose/layout/page/navigation.js
new file mode 100644
index 0000000000..0defdaa901
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page/navigation.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page/navigation';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 841d801224..576a37395c 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -40,6 +40,13 @@
   </global.navigation>
 
   <global.body>
+    <Rose::Layout::Page as |page|>
+      <page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
+      <page.header>Header</page.header>
+      <page.navigation>Navigation</page.navigation>
+      <page.actions>Actions</page.actions>
+      <page.body>Body</page.body>
+    </Rose::Layout::Page>
 
     Dummy app index template
 
diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js
index 7bff3a3b6f..2adf170775 100644
--- a/addons/rose/tests/integration/components/rose/layout/global-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global', function(hooks) {
+module('Integration | Component | rose/layout/global', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/global/body-test.js b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
index 9cdf1224de..45664a58b9 100644
--- a/addons/rose/tests/integration/components/rose/layout/global/body-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/body-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global/body', function(hooks) {
+module('Integration | Component | rose/layout/global/body', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/global/header-test.js b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
index 61dee13119..d532af4d22 100644
--- a/addons/rose/tests/integration/components/rose/layout/global/header-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/header-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global/header', function(hooks) {
+module('Integration | Component | rose/layout/global/header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
diff --git a/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
index 087a66392b..3865232093 100644
--- a/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
@@ -3,7 +3,9 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/layout/global/navigation', function(hooks) {
+module('Integration | Component | rose/layout/global/navigation', function (
+  hooks
+) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
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
deleted file mode 100644
index 723df72c11..0000000000
--- a/addons/rose/tests/integration/components/rose/layout/page-header-test.js
+++ /dev/null
@@ -1,28 +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/page-header', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::PageHeader />`);
-    assert.ok(find('.rose-layout-page-header'));
-  });
-
-  test('it renders with html attributes', async function (assert) {
-    await render(hbs`<Rose::Layout::PageHeader id="page-header"/>`);
-    assert.ok(find('#page-header'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(
-      hbs`<Rose::Layout::PageHeader>Page header content</Rose::Layout::PageHeader>`
-    );
-    assert.equal(
-      find('.rose-layout-page-header').textContent.trim(),
-      'Page header content'
-    );
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/layout/page-test.js b/addons/rose/tests/integration/components/rose/layout/page-test.js
new file mode 100644
index 0000000000..ea6e1e9720
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page-test.js
@@ -0,0 +1,26 @@
+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/page', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page id="page"/>`);
+    assert.ok(find('#page'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page>
+      <button id="content" />
+    </Rose::Layout::Page>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/actions-test.js b/addons/rose/tests/integration/components/rose/layout/page/actions-test.js
new file mode 100644
index 0000000000..7e922866b4
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/actions-test.js
@@ -0,0 +1,26 @@
+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/page/actions', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Actions />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-actions'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Actions id="actions"/>`);
+    assert.ok(find('#actions'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Actions>
+      <button id="content" />
+    </Rose::Layout::Page::Actions>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/body-test.js b/addons/rose/tests/integration/components/rose/layout/page/body-test.js
new file mode 100644
index 0000000000..7fc5d39efa
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/body-test.js
@@ -0,0 +1,26 @@
+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/page/body', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Body />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-body'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Body id="body"/>`);
+    assert.ok(find('#body'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Body>
+      <button id="content" />
+    </Rose::Layout::Page::Body>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js b/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js
new file mode 100644
index 0000000000..0d783fdf1b
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js
@@ -0,0 +1,28 @@
+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/page/breadcrumbs', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Breadcrumbs />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-breadcrumbs'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Breadcrumbs id="breadcrumbs"/>`);
+    assert.ok(find('#breadcrumbs'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Breadcrumbs>
+      <button id="content" />
+    </Rose::Layout::Page::Breadcrumbs>`);
+    assert.ok(find('#content'));
+  });
+});
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
new file mode 100644
index 0000000000..9a3610adb9
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/header-test.js
@@ -0,0 +1,26 @@
+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/page/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Header />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-header'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Header id="header"/>`);
+    assert.ok(find('#header'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Header>
+      <button id="content" />
+    </Rose::Layout::Page::Header>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/layout/page/navigation-test.js b/addons/rose/tests/integration/components/rose/layout/page/navigation-test.js
new file mode 100644
index 0000000000..44348230dc
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page/navigation-test.js
@@ -0,0 +1,28 @@
+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/page/navigation', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Navigation />`);
+    assert.ok(find('div'));
+    assert.ok(find('.rose-layout-page-navigation'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Navigation id="navigation"/>`);
+    assert.ok(find('#navigation'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Navigation>
+      <button id="content" />
+    </Rose::Layout::Page::Navigation>`);
+    assert.ok(find('#content'));
+  });
+});
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index ed49140497..71afa4e536 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,6 +1,9 @@
-<div class="projects-overview">
-  <Rose::Layout::PageHeader>
+<Rose::Layout::Page class="projects-overview" as |page|>
+  <page.header>
     <Rose::PageHeader::Title @text={{t "resources.projects"}} />
+  </page.header>
+
+  <page.actions>
     <Rose::PageHeader::Utilities as |utility|>
       <utility.action
         @style="primary"
@@ -10,18 +13,20 @@
         {{t 'titles.new'}}
       </utility.action>
     </Rose::PageHeader::Utilities>
-  </Rose::Layout::PageHeader>
+  </page.actions>
 
-  <ul class="projects">
-    {{#each @model as |project|}}
-      <li class="project">
-        <Rose::Card::Link @title={{project.name}}
-          @subtitle={{project.id}}
-          @description={{project.description}}
-          @route="orgs.org.projects.project"
-          @model={{project}}
-        />
-      </li>
-    {{/each}}
-  </ul>
-</div>
+  <page.body>
+    <ul class="projects">
+      {{#each @model as |project|}}
+        <li class="project">
+          <Rose::Card::Link @title={{project.name}}
+            @subtitle={{project.id}}
+            @description={{project.description}}
+            @route="orgs.org.projects.project"
+            @model={{project}}
+          />
+        </li>
+      {{/each}}
+    </ul>
+  </page.body>
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs
index 90011f7d04..d67735607f 100644
--- a/ui/core/app/templates/orgs/org/projects/new.hbs
+++ b/ui/core/app/templates/orgs/org/projects/new.hbs
@@ -1,20 +1,22 @@
-{{title (t "titles.new")}}
+<Rose::Layout::Page class="project-new" as |page|>
+  <page.breadcrumbs>
+    <div class="breadcrumbs">
+      <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+      >
+      <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
+    </div>
+  </page.breadcrumbs>
 
-<div class="project-new">
-  <div class="breadcrumbs">
-    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
-    >
-    <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
-  </div>
-
-  <Rose::Layout::PageHeader>
+  <page.header>
     <Rose::PageHeader::Title @text={{t "titles.new"}} />
-  </Rose::Layout::PageHeader>
+  </page.header>
 
-  <Form::Project
-    @model={{@model}}
-    @submit={{route-action "save" @model}}
-    @cancel={{route-action "cancel" @model}}
-    class="project-new-form"
-  />
-</div>
+  <page.body>
+    <Form::Project
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+      class="project-new-form"
+    />
+  </page.body>
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index 7cdf10d876..1bb6c363f7 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -1,37 +1,41 @@
-{{title @model.name}}
+<Rose::Layout::Page class="project-overview" as |page|>
+  <page.breadcrumbs>
+    <div class="breadcrumbs">
+      <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+      >
+      <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
+    </div>
+  </page.breadcrumbs>
 
-<div class="project-overview">
-  <div class="breadcrumbs">
-    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
-    >
-    <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
-  </div>
-
-  <Rose::Layout::PageHeader>
+  <page.header>
     <Rose::PageHeader::Title @text={{t "resources.project.settings"}} />
-  </Rose::Layout::PageHeader>
+  </page.header>
 
-  <Rose::Nav::Tabs as |nav|>
-    <nav.link @route='orgs.org.projects.project'>
-      {{t "nav.overview"}}
-    </nav.link>
-    <nav.link @route='index'>
-      {{t 'dev.item-name'}}
-    </nav.link>
-  </Rose::Nav::Tabs>
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='orgs.org.projects.project'>
+        {{t "nav.overview"}}
+      </nav.link>
+      <nav.link @route='index'>
+        {{t 'dev.item-name'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
 
-  <Form::Project
-    @model={{@model}}
-    @submit={{route-action "save" @model}}
-    @cancel={{route-action "cancel" @model}}
-    class="project-new-form"
-  />
+  <page.body>
+    <Form::Project
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+      class="project-new-form"
+    />
 
-  <Rose::Button
-    @style="warning"
-    @disabled={{@model.canSave}}
-    {{on "click" (route-action "delete" @model)}}
-  >
-    {{t 'actions.delete'}}
-  </Rose::Button>
-</div>
+    <Rose::Button
+      @style="warning"
+      @disabled={{@model.canSave}}
+      {{on "click" (route-action "delete" @model)}}
+    >
+      {{t 'actions.delete'}}
+    </Rose::Button>
+  </page.body>
+</Rose::Layout::Page>

From cc11caaa05daeaca0a4b773fec6f68371b2fa707 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Sun, 7 Jun 2020 21:32:55 -0400
Subject: [PATCH 7/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Update=20page=20act?=
 =?UTF-8?q?ions=20grid=20position=20in=20projects=20overview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/styles/app.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 7cf4f25cda..69a09d7d7f 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -34,6 +34,10 @@
       padding: 10px 10px 10px 0;
     }
   }
+
+  .rose-layout-page-actions {
+    align-self: center;
+  }
 }
 
 .project-overview,

From 812196e53742feb0469e25f9a04765cb93785934 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 8 Jun 2020 10:37:18 -0400
Subject: [PATCH 8/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20simplify=20layouts?=
 =?UTF-8?q?=20and=20pageheader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/page-header/title.js      |  7 ---
 .../rose/page-header/title.stories.mdx        | 58 -------------------
 .../components/rose/page-header/utilities.js  |  7 ---
 .../rose/page-header/utilities.stories.mdx    | 27 ---------
 .../layout/{page/_index.scss => _page.scss}   | 33 ++++++++---
 .../rose/components/layout/page/_actions.scss |  3 -
 .../rose/components/layout/page/_body.scss    |  3 -
 .../components/layout/page/_breadcrumbs.scss  |  3 -
 .../rose/components/layout/page/_header.scss  |  3 -
 .../components/layout/page/_navigation.scss   |  3 -
 .../unit/mixins/component-auto-id-test.js     | 11 ----
 .../components/rose/page-header/title.hbs     | 17 ------
 .../components/rose/page-header/utilities.hbs |  5 --
 .../app/components/rose/page-header/title.js  |  1 -
 .../components/rose/page-header/utilities.js  |  1 -
 .../components/rose/page-header/title-test.js | 55 ------------------
 .../rose/page-header/utilities-test.js        | 38 ------------
 ui/core/app/styles/app.scss                   |  4 --
 .../app/templates/orgs/org/projects/index.hbs | 18 +++---
 .../app/templates/orgs/org/projects/new.hbs   |  2 +-
 .../templates/orgs/org/projects/project.hbs   |  4 +-
 21 files changed, 37 insertions(+), 266 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/page-header/title.js
 delete mode 100644 addons/rose/addon/components/rose/page-header/title.stories.mdx
 delete mode 100644 addons/rose/addon/components/rose/page-header/utilities.js
 delete mode 100644 addons/rose/addon/components/rose/page-header/utilities.stories.mdx
 rename addons/rose/addon/styles/rose/components/layout/{page/_index.scss => _page.scss} (52%)
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/page/_actions.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/page/_body.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/page/_header.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
 delete mode 100644 addons/rose/addon/templates/components/rose/page-header/title.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/page-header/utilities.hbs
 delete mode 100644 addons/rose/app/components/rose/page-header/title.js
 delete mode 100644 addons/rose/app/components/rose/page-header/utilities.js
 delete mode 100644 addons/rose/tests/integration/components/rose/page-header/title-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/page-header/utilities-test.js

diff --git a/addons/rose/addon/components/rose/page-header/title.js b/addons/rose/addon/components/rose/page-header/title.js
deleted file mode 100644
index 9ac3c14317..0000000000
--- a/addons/rose/addon/components/rose/page-header/title.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/page-header/title';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/page-header/title.stories.mdx b/addons/rose/addon/components/rose/page-header/title.stories.mdx
deleted file mode 100644
index 4955afe261..0000000000
--- a/addons/rose/addon/components/rose/page-header/title.stories.mdx
+++ /dev/null
@@ -1,58 +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, select } from '@storybook/addon-knobs';
-
-<Meta title="Rose|PageHeader|Title" component="Title" />
-
-# Title
-
-A header title component with ability to configure dropdown using `Rose::Header::Dropdown`. To be used with `Rose::Layout::PageHeader`.
-
-```html
-<Rose::PageHeader::Title as |title| >
-  <title.dropdown
-    @text="Page Header Title"
-    @icon="user-square-fill" as |dropdown|
-  >
-    <dropdown.link @route="index">Menu item</dropdown.link>
-    <dropdown.button>Button menu item</dropdown.button>
-  </title.dropdown>
-</Rose::PageHeader::Title>
-```
-
-<Preview>
-  <Story name="Title">{{
-    template: hbs`
-    <Rose::PageHeader::Title as |title| >
-      <title.dropdown
-        @text={{pageTitle}}
-        @icon={{dropdownIcon}} as |dropdown|
-      >
-        <dropdown.link @route="index">Menu item</dropdown.link>
-        <dropdown.button>Button menu item</dropdown.button>
-      </title.dropdown>
-    </Rose::PageHeader::Title>
-    `,
-    context: {
-      pageTitle: text('pageTitle', 'Page Section Title'),
-      dropdownIcon: select(
-        'dropdownIcon',
-        {
-          'user-square-fill': 'user-square-fill',
-          'check-circle-outline': 'check-circle-outline',
-          'copy-action': 'copy-action',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
-        },
-        'user-square-fill'
-      ),
-    },
-  }}</Story>
-</Preview>
-
-Title can be configured to be a level 1 heading with optional icon.
-
-```html
-<Rose::PageHeader::Title @text="Page Header Title" @icon="alert-circle-fill" />
-```
diff --git a/addons/rose/addon/components/rose/page-header/utilities.js b/addons/rose/addon/components/rose/page-header/utilities.js
deleted file mode 100644
index 71b82bc1c9..0000000000
--- a/addons/rose/addon/components/rose/page-header/utilities.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/page-header/utilities';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx b/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
deleted file mode 100644
index c752ae8a87..0000000000
--- a/addons/rose/addon/components/rose/page-header/utilities.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-
-<Meta title="Rose|PageHeader" component="Utilities" />
-
-# Utilities
-
-An component comprised of `Rose::Button` as actions. To be used with `Rose::Layout::PageHeader`.
-
-```html
-<Rose::PageHeader::Utilities as |utilities|>
-  <utilities.action @style="secondary">Secondary</utilities.action>
-  <utilities.action @style="primary">Primary</utilities.action>
-</Rose::PageHeader::Utilities>
-```
-
-<Preview>
-  <Story name="Utilities">{{
-    template: hbs`
-    <Rose::PageHeader::Utilities as |utilities|>
-      <utilities.action @style="secondary">Secondary</utilities.action>
-      <utilities.action @style="primary">Primary</utilities.action>
-    </Rose::PageHeader::Utilities>
-    `,
-  }}</Story>
-</Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_index.scss b/addons/rose/addon/styles/rose/components/layout/_page.scss
similarity index 52%
rename from addons/rose/addon/styles/rose/components/layout/page/_index.scss
rename to addons/rose/addon/styles/rose/components/layout/_page.scss
index 31f47115c4..568e1b7766 100644
--- a/addons/rose/addon/styles/rose/components/layout/page/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_page.scss
@@ -1,11 +1,5 @@
-@use '../../../variables/sizing';
-@use '../../../variables/media';
-
-@import 'breadcrumbs';
-@import 'header';
-@import 'actions';
-@import 'navigation';
-@import 'body';
+@use '../../variables/sizing';
+@use '../../variables/media';
 
 .rose-layout-page {
   display: grid;
@@ -16,6 +10,29 @@
     'body body body';
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto 1fr;
+
+  .rose-layout-page-breadcrumbs {
+    grid-area: breadcrumbs;
+  }
+
+  .rose-layout-page-header {
+    grid-area: header;
+  }
+
+  .rose-layout-page-actions {
+    grid-area: actions;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .rose-layout-page-navigation {
+    grid-area: navigation;
+  }
+
+  .rose-layout-page-body {
+    grid-area: body;
+  }
 }
 
 @media (max-width: media.width(small)) {
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_actions.scss b/addons/rose/addon/styles/rose/components/layout/page/_actions.scss
deleted file mode 100644
index 68ec334a46..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/page/_actions.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-layout-page-actions {
-  grid-area: actions;
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_body.scss b/addons/rose/addon/styles/rose/components/layout/page/_body.scss
deleted file mode 100644
index cec7602762..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/page/_body.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-layout-page-body {
-  grid-area: body;
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
deleted file mode 100644
index 638549ff5d..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/page/_breadcrumbs.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-layout-page-breadcrumbs {
-  grid-area: breadcrumbs;
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_header.scss b/addons/rose/addon/styles/rose/components/layout/page/_header.scss
deleted file mode 100644
index d5d3af830e..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/page/_header.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-layout-page-header {
-  grid-area: header;
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
deleted file mode 100644
index 5d35caaa7d..0000000000
--- a/addons/rose/addon/styles/rose/components/layout/page/_navigation.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-layout-page-navigation {
-  grid-area: navigation;
-}
diff --git a/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js b/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
deleted file mode 100644
index a047b3e7b8..0000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/unit/mixins/component-auto-id-test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import EmberObject from '@ember/object';
-import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
-import { module, test } from 'qunit';
-
-module('Unit | Mixin | component-auto-id', function () {
-  test('it generates an ID and assigns it to the object', function (assert) {
-    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
-    let subject = ComponentAutoIdObject.create();
-    assert.ok(subject.id);
-  });
-});
diff --git a/addons/rose/addon/templates/components/rose/page-header/title.hbs b/addons/rose/addon/templates/components/rose/page-header/title.hbs
deleted file mode 100644
index 388e538127..0000000000
--- a/addons/rose/addon/templates/components/rose/page-header/title.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<div ...attributes class="rose-page-header-title">
-  {{#if (has-block)}}
-    {{yield (hash
-      dropdown=(component 'rose/header/dropdown' style='dark')
-    )}}
-  {{else}}
-    <section class="rose-page-header-title-section">
-      {{#if @icon}}
-        <span class="rose-page-header-title-icon">{{inline-svg @icon}}</span>
-      {{/if}}
-
-      {{#if @text}}
-        <h1 class="rose-page-header-title-text">{{@text}}</h1>
-      {{/if}}
-    </section>
-  {{/if}}
-</div>
diff --git a/addons/rose/addon/templates/components/rose/page-header/utilities.hbs b/addons/rose/addon/templates/components/rose/page-header/utilities.hbs
deleted file mode 100644
index 3203ea86e0..0000000000
--- a/addons/rose/addon/templates/components/rose/page-header/utilities.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<div ...attributes class="rose-page-header-utilities">
-  {{yield (hash
-    action=(component 'rose/button')
-  )}}
-</div>
diff --git a/addons/rose/app/components/rose/page-header/title.js b/addons/rose/app/components/rose/page-header/title.js
deleted file mode 100644
index 880f984d0c..0000000000
--- a/addons/rose/app/components/rose/page-header/title.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/page-header/title';
diff --git a/addons/rose/app/components/rose/page-header/utilities.js b/addons/rose/app/components/rose/page-header/utilities.js
deleted file mode 100644
index 69dd95a0ce..0000000000
--- a/addons/rose/app/components/rose/page-header/utilities.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/page-header/utilities';
diff --git a/addons/rose/tests/integration/components/rose/page-header/title-test.js b/addons/rose/tests/integration/components/rose/page-header/title-test.js
deleted file mode 100644
index b4e8d7e741..0000000000
--- a/addons/rose/tests/integration/components/rose/page-header/title-test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, click, find, findAll } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/page-header/title', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Title />`);
-    assert.ok(find('.rose-page-header-title'));
-  });
-
-  test('it renders with title', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Title @text="header title" />`);
-    assert.equal(
-      find('.rose-page-header-title-text').textContent.trim(),
-      'header title'
-    );
-  });
-
-  test('it renders with title as dropdown', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Title as |title|>
-      <title.dropdown @text="header title" as |dropdown|>
-        <dropdown.link @route="index">Menu item</dropdown.link>
-        <dropdown.link @route="index">Menu item</dropdown.link>
-        <dropdown.button>Button menu item</dropdown.button>
-        <dropdown.button>Button menu item</dropdown.button>
-        <dropdown.button>Button menu item</dropdown.button>
-      </title.dropdown>
-    </Rose::PageHeader::Title>`);
-    assert.equal(
-      find('.rose-header-dropdown-trigger').textContent.trim(),
-      'header title'
-    );
-    assert.equal(findAll('a').length, 2);
-    assert.equal(findAll('button').length, 3);
-  });
-
-  test('it opens title dropdown on click', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Title id="title" as |title|>
-      <title.dropdown id="dropdown" as |dropdown|>
-        <dropdown.link @route="index">Menu item</dropdown.link>
-        <dropdown.link @route="index">Menu item</dropdown.link>
-        <dropdown.button>Button menu item</dropdown.button>
-        <dropdown.button>Button menu item</dropdown.button>
-        <dropdown.button>Button menu item</dropdown.button>
-      </title.dropdown>
-    </Rose::PageHeader::Title>`);
-    await click('summary');
-    assert.ok(find('#dropdown').open);
-    await click('#title');
-    assert.notOk(find('#dropdown').open);
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/page-header/utilities-test.js b/addons/rose/tests/integration/components/rose/page-header/utilities-test.js
deleted file mode 100644
index 5685c96d42..0000000000
--- a/addons/rose/tests/integration/components/rose/page-header/utilities-test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find, findAll } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/page-header/utilities', function (
-  hooks
-) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Utilities />`);
-    assert.ok(find('.rose-page-header-utilities'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Utilities id="utilities"/>`);
-    assert.ok(find('#utilities'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(
-      hbs`<Rose::PageHeader::Utilities>Page header utilities</Rose::PageHeader::Utilities>`
-    );
-    assert.equal(
-      find('.rose-page-header-utilities').textContent.trim(),
-      'Page header utilities'
-    );
-  });
-
-  test('it renders utility action buttons', async function (assert) {
-    await render(hbs`<Rose::PageHeader::Utilities as |utility|>
-      <utility.action />
-      <utility.action />
-    </Rose::PageHeader::Utilities>`);
-    assert.equal(findAll('button').length, 2);
-  });
-});
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 69a09d7d7f..7cf4f25cda 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -34,10 +34,6 @@
       padding: 10px 10px 10px 0;
     }
   }
-
-  .rose-layout-page-actions {
-    align-self: center;
-  }
 }
 
 .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 71afa4e536..46f276cf10 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,18 +1,16 @@
 <Rose::Layout::Page class="projects-overview" as |page|>
   <page.header>
-    <Rose::PageHeader::Title @text={{t "resources.projects"}} />
+    <h1>{{t "resources.projects"}}</h1>
   </page.header>
 
   <page.actions>
-    <Rose::PageHeader::Utilities as |utility|>
-      <utility.action
-        @style="primary"
-        @iconLeft="plus-plain"
-        {{on "click" (route-action "new")}}
-      >
-        {{t 'titles.new'}}
-      </utility.action>
-    </Rose::PageHeader::Utilities>
+    <Rose::Button
+      @style="primary"
+      @iconLeft="plus-plain"
+      {{on "click" (route-action "new")}}
+    >
+      {{t 'titles.new'}}
+    </Rose::Button>
   </page.actions>
 
   <page.body>
diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs
index d67735607f..2b686d94d4 100644
--- a/ui/core/app/templates/orgs/org/projects/new.hbs
+++ b/ui/core/app/templates/orgs/org/projects/new.hbs
@@ -8,7 +8,7 @@
   </page.breadcrumbs>
 
   <page.header>
-    <Rose::PageHeader::Title @text={{t "titles.new"}} />
+    <h1>{{t "titles.new"}}</h1>
   </page.header>
 
   <page.body>
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index 1bb6c363f7..b58fd81732 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -1,3 +1,5 @@
+{{title @model.name}}
+
 <Rose::Layout::Page class="project-overview" as |page|>
   <page.breadcrumbs>
     <div class="breadcrumbs">
@@ -8,7 +10,7 @@
   </page.breadcrumbs>
 
   <page.header>
-    <Rose::PageHeader::Title @text={{t "resources.project.settings"}} />
+    <h1>{{t "resources.project.settings"}}</h1>
   </page.header>
 
   <page.navigation>

From 99986e0b364db58a6a1f6341ee81678a9c43c5ab Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 8 Jun 2020 10:43:04 -0400
Subject: [PATCH 9/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20heading=20?=
 =?UTF-8?q?structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/templates/orgs/org/projects/index.hbs   | 2 +-
 ui/core/app/templates/orgs/org/projects/new.hbs     | 2 +-
 ui/core/app/templates/orgs/org/projects/project.hbs | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index 46f276cf10..c81fd8324f 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,6 +1,6 @@
 <Rose::Layout::Page class="projects-overview" as |page|>
   <page.header>
-    <h1>{{t "resources.projects"}}</h1>
+    <h2>{{t "resources.projects"}}</h2>
   </page.header>
 
   <page.actions>
diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs
index 2b686d94d4..a4066d4f5d 100644
--- a/ui/core/app/templates/orgs/org/projects/new.hbs
+++ b/ui/core/app/templates/orgs/org/projects/new.hbs
@@ -8,7 +8,7 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h1>{{t "titles.new"}}</h1>
+    <h2>{{t "titles.new"}}</h2>
   </page.header>
 
   <page.body>
diff --git a/ui/core/app/templates/orgs/org/projects/project.hbs b/ui/core/app/templates/orgs/org/projects/project.hbs
index b58fd81732..1cc2f83d13 100644
--- a/ui/core/app/templates/orgs/org/projects/project.hbs
+++ b/ui/core/app/templates/orgs/org/projects/project.hbs
@@ -10,7 +10,7 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h1>{{t "resources.project.settings"}}</h1>
+    <h2>{{t "resources.project.settings"}}</h2>
   </page.header>
 
   <page.navigation>