From 2c295afdfdde9cdec1028e43986afa24b60ab5f3 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 10 Jun 2020 14:21:26 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20replace=20layout=20r?=
 =?UTF-8?q?egions=20with=20anonymous=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/anonymous.js   | 10 +++++++
 .../components/rose/anonymous.stories.mdx     | 25 +++++++++++++++++
 .../components/rose/layout/global.stories.mdx | 16 +++++------
 .../components/rose/layout/global/body.js     |  7 -----
 .../components/rose/layout/global/header.js   |  7 -----
 .../rose/layout/global/navigation.js          |  7 -----
 .../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 -----
 .../{global/_index.scss => _global.scss}      | 22 +++++++++++----
 .../rose/components/layout/global/_body.scss  |  3 --
 .../components/layout/global/_header.scss     |  3 --
 .../components/layout/global/_navigation.scss |  6 ----
 .../templates/components/rose/anonymous.hbs   |  1 +
 .../components/rose/layout/global.hbs         |  6 ++--
 .../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 | 10 +++----
 .../components/rose/layout/page/actions.hbs   |  3 --
 .../components/rose/layout/page/body.hbs      |  3 --
 .../rose/layout/page/breadcrumbs.hbs          |  3 --
 .../components/rose/layout/page/header.hbs    |  3 --
 .../rose/layout/page/navigation.hbs           |  3 --
 addons/rose/app/components/rose/anonymous.js  |  1 +
 .../app/components/rose/layout/global/body.js |  1 -
 .../components/rose/layout/global/header.js   |  1 -
 .../rose/layout/global/navigation.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 -
 .../tests/dummy/app/templates/playground.hbs  | 14 +++++-----
 .../components/rose/anonymous-test.js         | 18 ++++++++++++
 .../components/rose/layout/global-test.js     | 16 +++++------
 .../rose/layout/global/body-test.js           | 26 -----------------
 .../rose/layout/global/header-test.js         | 26 -----------------
 .../rose/layout/global/navigation-test.js     | 28 -------------------
 .../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 -------------------
 ui/core/app/templates/application.hbs         | 17 ++++-------
 47 files changed, 108 insertions(+), 362 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/anonymous.js
 create mode 100644 addons/rose/addon/components/rose/anonymous.stories.mdx
 delete mode 100644 addons/rose/addon/components/rose/layout/global/body.js
 delete mode 100644 addons/rose/addon/components/rose/layout/global/header.js
 delete mode 100644 addons/rose/addon/components/rose/layout/global/navigation.js
 delete mode 100644 addons/rose/addon/components/rose/layout/page/actions.js
 delete mode 100644 addons/rose/addon/components/rose/layout/page/body.js
 delete mode 100644 addons/rose/addon/components/rose/layout/page/breadcrumbs.js
 delete mode 100644 addons/rose/addon/components/rose/layout/page/header.js
 delete mode 100644 addons/rose/addon/components/rose/layout/page/navigation.js
 rename addons/rose/addon/styles/rose/components/layout/{global/_index.scss => _global.scss} (63%)
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/global/_body.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/global/_header.scss
 delete mode 100644 addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
 create mode 100644 addons/rose/addon/templates/components/rose/anonymous.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/global/body.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/global/header.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/actions.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/body.hbs
 delete mode 100644 addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.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/navigation.hbs
 create mode 100644 addons/rose/app/components/rose/anonymous.js
 delete mode 100644 addons/rose/app/components/rose/layout/global/body.js
 delete mode 100644 addons/rose/app/components/rose/layout/global/header.js
 delete mode 100644 addons/rose/app/components/rose/layout/global/navigation.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/actions.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/body.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/breadcrumbs.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/header.js
 delete mode 100644 addons/rose/app/components/rose/layout/page/navigation.js
 create mode 100644 addons/rose/tests/integration/components/rose/anonymous-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/global/body-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/global/header-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/global/navigation-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page/actions-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page/body-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page/header-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/layout/page/navigation-test.js

diff --git a/addons/rose/addon/components/rose/anonymous.js b/addons/rose/addon/components/rose/anonymous.js
new file mode 100644
index 000000000..74592a562
--- /dev/null
+++ b/addons/rose/addon/components/rose/anonymous.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/anonymous';
+
+/**
+ * An otherwise empty component that renders a block.  Used only by components
+ * that yield simple contextual components, such as layouts yielding regions.
+ */
+export default Component.extend({
+  layout
+});
diff --git a/addons/rose/addon/components/rose/anonymous.stories.mdx b/addons/rose/addon/components/rose/anonymous.stories.mdx
new file mode 100644
index 000000000..a80d4c233
--- /dev/null
+++ b/addons/rose/addon/components/rose/anonymous.stories.mdx
@@ -0,0 +1,25 @@
+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|Anonymous" component="Anonymous" />
+
+# Anonymous
+
+The anonymous component is a simple `<div>` with no attributes of its own.
+It is used by other components that need to yield contextual components.
+This component should not be instantiated directly.
+
+For example, layout components may yield an anonymous component to configure
+various layout regions:
+
+```htmlbars
+<div ...attributes class="rose-layout-global">
+  {{yield (hash
+    header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header")
+    sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-global-sidebar")
+    body=(component "rose/anonymous" tagName="main" class="rose-layout-global-body")
+  )}}
+</div>
+```
diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global.stories.mdx
index 2adb2f277..a56e928b9 100644
--- a/addons/rose/addon/components/rose/layout/global.stories.mdx
+++ b/addons/rose/addon/components/rose/layout/global.stories.mdx
@@ -10,20 +10,20 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 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 as |layout|>
+  <layout.header />
+  <layout.sidebar />
+  <layout.body />
 </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 as |layout|>
+      <layout.header style="background: var(--brand-gray-5);">Header</layout.header>
+      <layout.sidebar style="background: var(--brand-gray-6);">Sidebar</layout.sidebar>
+      <layout.body style="background: var(--brand-gray-7);">Body</layout.body>
     </Rose::Layout::Global>
     `,
   }}</Story>
diff --git a/addons/rose/addon/components/rose/layout/global/body.js b/addons/rose/addon/components/rose/layout/global/body.js
deleted file mode 100644
index a7de3a0e1..000000000
--- a/addons/rose/addon/components/rose/layout/global/body.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/global/body';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/layout/global/header.js b/addons/rose/addon/components/rose/layout/global/header.js
deleted file mode 100644
index 274e81584..000000000
--- a/addons/rose/addon/components/rose/layout/global/header.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/global/header';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/layout/global/navigation.js b/addons/rose/addon/components/rose/layout/global/navigation.js
deleted file mode 100644
index 8759a341f..000000000
--- a/addons/rose/addon/components/rose/layout/global/navigation.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/layout/global/navigation';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/components/rose/layout/page/actions.js b/addons/rose/addon/components/rose/layout/page/actions.js
deleted file mode 100644
index e5bd07bb7..000000000
--- a/addons/rose/addon/components/rose/layout/page/actions.js
+++ /dev/null
@@ -1,7 +0,0 @@
-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
deleted file mode 100644
index 82c9b9b76..000000000
--- a/addons/rose/addon/components/rose/layout/page/body.js
+++ /dev/null
@@ -1,7 +0,0 @@
-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
deleted file mode 100644
index 21cb71c9f..000000000
--- a/addons/rose/addon/components/rose/layout/page/breadcrumbs.js
+++ /dev/null
@@ -1,7 +0,0 @@
-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
deleted file mode 100644
index 45f4c6861..000000000
--- a/addons/rose/addon/components/rose/layout/page/header.js
+++ /dev/null
@@ -1,7 +0,0 @@
-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
deleted file mode 100644
index 7356be5e0..000000000
--- a/addons/rose/addon/components/rose/layout/page/navigation.js
+++ /dev/null
@@ -1,7 +0,0 @@
-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/styles/rose/components/layout/global/_index.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss
similarity index 63%
rename from addons/rose/addon/styles/rose/components/layout/global/_index.scss
rename to addons/rose/addon/styles/rose/components/layout/_global.scss
index 6f6af52c5..e6676017e 100644
--- a/addons/rose/addon/styles/rose/components/layout/global/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_global.scss
@@ -1,9 +1,5 @@
-@use '../../../variables/sizing';
-@use '../../../variables/media';
-
-@import 'header';
-@import 'body';
-@import 'navigation';
+@use '../../variables/sizing';
+@use '../../variables/media';
 
 .rose-layout-global {
   display: grid;
@@ -14,6 +10,20 @@
   grid-template-columns: (sizing.rems(m) * 16) auto 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;
+
+  .rose-layout-global-body {
+    grid-area: body;
+  }
+
+  .rose-layout-global-header {
+    grid-area: header;
+  }
+
+  .rose-layout-global-sidebar {
+    grid-area: navigation;
+    border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+  }
+
 }
 
 @media (max-width: media.width(small)) {
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_body.scss b/addons/rose/addon/styles/rose/components/layout/global/_body.scss
deleted file mode 100644
index 926856f49..000000000
--- a/addons/rose/addon/styles/rose/components/layout/global/_body.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.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
deleted file mode 100644
index 0c784bc7e..000000000
--- a/addons/rose/addon/styles/rose/components/layout/global/_header.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-layout-global-header {
-  grid-area: header;
-}
diff --git a/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
deleted file mode 100644
index 9482c0223..000000000
--- a/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@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/anonymous.hbs b/addons/rose/addon/templates/components/rose/anonymous.hbs
new file mode 100644
index 000000000..fb5c4b157
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/anonymous.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs
index 4ed9a9033..5f516ec80 100644
--- a/addons/rose/addon/templates/components/rose/layout/global.hbs
+++ b/addons/rose/addon/templates/components/rose/layout/global.hbs
@@ -1,7 +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')
+    header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header")
+    sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-global-sidebar")
+    body=(component "rose/anonymous" tagName="main" class="rose-layout-global-body")
   )}}
 </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
deleted file mode 100644
index b89c802f7..000000000
--- a/addons/rose/addon/templates/components/rose/layout/global/body.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
deleted file mode 100644
index b2e966d0d..000000000
--- a/addons/rose/addon/templates/components/rose/layout/global/header.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
deleted file mode 100644
index b23782e92..000000000
--- a/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
index 9afad989b..b1b32de3e 100644
--- a/addons/rose/addon/templates/components/rose/layout/page.hbs
+++ b/addons/rose/addon/templates/components/rose/layout/page.hbs
@@ -1,9 +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')
+    breadcrumbs=(component "rose/anonymous" class="rose-layout-page-breadcrumbs")
+    header=(component "rose/anonymous" class="rose-layout-page-header")
+    actions=(component "rose/anonymous" class="rose-layout-page-actions")
+    navigation=(component "rose/anonymous" class="rose-layout-page-navigation")
+    body=(component "rose/anonymous" class="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
deleted file mode 100644
index 8bfabd185..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/actions.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
deleted file mode 100644
index 1a2bc0831..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/body.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
deleted file mode 100644
index 585c9d630..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<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
deleted file mode 100644
index 090d7b83d..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/header.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div ...attributes class="rose-layout-page-header">
-  {{yield}}
-</div>
diff --git a/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
deleted file mode 100644
index 3e4789951..000000000
--- a/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div ...attributes class="rose-layout-page-navigation">
-  {{yield}}
-</div>
diff --git a/addons/rose/app/components/rose/anonymous.js b/addons/rose/app/components/rose/anonymous.js
new file mode 100644
index 000000000..56df9e7f7
--- /dev/null
+++ b/addons/rose/app/components/rose/anonymous.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/anonymous';
\ 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
deleted file mode 100644
index 37088d7d0..000000000
--- a/addons/rose/app/components/rose/layout/global/body.js
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index d529afa35..000000000
--- a/addons/rose/app/components/rose/layout/global/header.js
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index e83c8266e..000000000
--- a/addons/rose/app/components/rose/layout/global/navigation.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/global/navigation';
diff --git a/addons/rose/app/components/rose/layout/page/actions.js b/addons/rose/app/components/rose/layout/page/actions.js
deleted file mode 100644
index 42d264833..000000000
--- a/addons/rose/app/components/rose/layout/page/actions.js
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 261441729..000000000
--- a/addons/rose/app/components/rose/layout/page/body.js
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 0c3161584..000000000
--- a/addons/rose/app/components/rose/layout/page/breadcrumbs.js
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 77437dd12..000000000
--- 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/navigation.js b/addons/rose/app/components/rose/layout/page/navigation.js
deleted file mode 100644
index 0defdaa90..000000000
--- a/addons/rose/app/components/rose/layout/page/navigation.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/navigation';
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
index d12d03f09..634ea800c 100644
--- a/addons/rose/tests/dummy/app/templates/playground.hbs
+++ b/addons/rose/tests/dummy/app/templates/playground.hbs
@@ -1,5 +1,5 @@
-<Rose::Layout::Global as |global|>
-  <global.header>
+<Rose::Layout::Global as |layout|>
+  <layout.header>
     <Rose::Header as |header|>
 
       <header.brand @logo="logo" @text="Product Name" />
@@ -28,18 +28,18 @@
       </header.utilities>
 
     </Rose::Header>
-  </global.header>
+  </layout.header>
 
-  <global.navigation>
+  <layout.sidebar>
     <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>
-  </global.navigation>
+  </layout.sidebar>
 
-  <global.body>
+  <layout.body>
     <Rose::Layout::Page as |page|>
       <page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
       <page.header>Header</page.header>
@@ -229,5 +229,5 @@
         </footer.row>
       </table.footer>
     </Rose::Table>
-  </global.body>
+  </layout.body>
 </Rose::Layout::Global>
diff --git a/addons/rose/tests/integration/components/rose/anonymous-test.js b/addons/rose/tests/integration/components/rose/anonymous-test.js
new file mode 100644
index 000000000..01e171a52
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/anonymous-test.js
@@ -0,0 +1,18 @@
+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/anonymous', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`
+      {{#rose/anonymous tagName='main'}}
+        template block text
+      {{/rose/anonymous}}
+    `);
+    assert.ok(find('main'));
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});
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 2adf17077..0b262991e 100644
--- a/addons/rose/tests/integration/components/rose/layout/global-test.js
+++ b/addons/rose/tests/integration/components/rose/layout/global-test.js
@@ -18,30 +18,30 @@ module('Integration | Component | rose/layout/global', function (hooks) {
   });
 
   test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Layout::Global as |global|>
+    await render(hbs`<Rose::Layout::Global as |layout|>
       <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 />
+    await render(hbs`<Rose::Layout::Global as |layout|>
+      <layout.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 />
+    await render(hbs`<Rose::Layout::Global as |layout|>
+      <layout.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 />
+    await render(hbs`<Rose::Layout::Global as |layout|>
+      <layout.sidebar />
     </Rose::Layout::Global>`);
-    assert.ok(find('.rose-layout-global-navigation'));
+    assert.ok(find('.rose-layout-global-sidebar'));
   });
 });
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
deleted file mode 100644
index 45664a58b..000000000
--- a/addons/rose/tests/integration/components/rose/layout/global/body-test.js
+++ /dev/null
@@ -1,26 +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/global/body', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Global::Body />`);
-    assert.ok(find('main'));
-    assert.ok(find('.rose-layout-global-body'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    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::Global::Body>
-      <button id="content" />
-    </Rose::Layout::Global::Body>`);
-    assert.ok(find('#content'));
-  });
-});
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
deleted file mode 100644
index d532af4d2..000000000
--- a/addons/rose/tests/integration/components/rose/layout/global/header-test.js
+++ /dev/null
@@ -1,26 +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/global/header', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Global::Header />`);
-    assert.ok(find('header'));
-    assert.ok(find('.rose-layout-global-header'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    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::Global::Header>
-      <button id="content" />
-    </Rose::Layout::Global::Header>`);
-    assert.ok(find('#content'));
-  });
-});
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
deleted file mode 100644
index 386523209..000000000
--- a/addons/rose/tests/integration/components/rose/layout/global/navigation-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/global/navigation', function (
-  hooks
-) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Layout::Global::Navigation />`);
-    assert.ok(find('aside'));
-    assert.ok(find('.rose-layout-global-navigation'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    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::Global::Navigation>
-      <button id="content" />
-    </Rose::Layout::Global::Navigation>`);
-    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
deleted file mode 100644
index 7e922866b..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page/actions-test.js
+++ /dev/null
@@ -1,26 +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/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
deleted file mode 100644
index 7fc5d39ef..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page/body-test.js
+++ /dev/null
@@ -1,26 +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/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
deleted file mode 100644
index 0d783fdf1..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page/breadcrumbs-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/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
deleted file mode 100644
index 9a3610adb..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page/header-test.js
+++ /dev/null
@@ -1,26 +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::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
deleted file mode 100644
index 44348230d..000000000
--- a/addons/rose/tests/integration/components/rose/layout/page/navigation-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/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/application.hbs b/ui/core/app/templates/application.hbs
index 031b35e69..7181b7f54 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -1,5 +1,6 @@
-<Rose::Layout::Global as |global|>
-  <global.header>
+<Rose::Layout::Global as |layout|>
+
+  <layout.header>
     <Rose::Header as |header|>
       <header.brand @logo="logo-hashi" @text={{app-name}} />
       <header.nav as |nav|>
@@ -22,17 +23,11 @@
         </utilities.dropdown>
       </header.utilities>
     </Rose::Header>
-  </global.header>
+  </layout.header>
 
-  <global.body>
-    {{outlet}}
-  </global.body>
+  <layout.sidebar>{{outlet "sidebar"}}</layout.sidebar>
 
-  <global.navigation>
-
-    {{outlet "sidebar"}}
-
-  </global.navigation>
+  <layout.body>{{outlet}}</layout.body>
 
 </Rose::Layout::Global>