Merge pull request #29 from hashicorp/ICU-177-master-layout

New Page Layout Component

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

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

addons/rose/addon/components/rose/layout/page.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';
+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>

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: '',
+});

addons/rose/addon/components/rose/layout/page/main.js

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

addons/rose/addon/components/rose/layout/page/sidebar.js

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

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

@@ -1,4 +1,5 @@
 @import 'button';
 @import 'form';
 @import 'header';
+@import 'layout';
 @import 'notification';

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

@@ -0,0 +1,36 @@
+@use '../../variables/media';
+
+.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: 12rem 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;
+}
+
+@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;
+  }
+}

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

@@ -1,4 +1,4 @@
-<header
+<div
   ...attributes
   class="rose-header"
 >
@@ -7,4 +7,4 @@
     utilities=(component 'rose/header/utilities')
     nav=(component 'rose/header/nav')
   )}}
-</header>
+</div>

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

@@ -0,0 +1,7 @@
+<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>

addons/rose/addon/templates/components/rose/layout/page/header.hbs

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

addons/rose/addon/templates/components/rose/layout/page/main.hbs

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

addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs

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

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

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

addons/rose/app/components/rose/layout/page/header.js

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

addons/rose/app/components/rose/layout/page/main.js

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

addons/rose/app/components/rose/layout/page/sidebar.js

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

addons/rose/tests/integration/components/rose/layout/page-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/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'));
+  });
+});

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('header'));
+    assert.ok(find('.rose-layout-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'));
+  });
+});

addons/rose/tests/integration/components/rose/layout/page/main-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/main', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Main />`);
+    assert.ok(find('main'));
+    assert.ok(find('.rose-layout-main'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Main id="main"/>`);
+    assert.ok(find('#main'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Main>
+      <button id="content" />
+    </Rose::Layout::Page::Main>`);
+    assert.ok(find('#content'));
+  });
+});

addons/rose/tests/integration/components/rose/layout/page/sidebar-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/sidebar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Sidebar />`);
+    assert.ok(find('aside'));
+    assert.ok(find('.rose-layout-sidebar'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Sidebar id="sidebar"/>`);
+    assert.ok(find('#sidebar'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Page::Sidebar>
+      <button id="content" />
+    </Rose::Layout::Page::Sidebar>`);
+    assert.ok(find('#content'));
+  });
+});

ui/core/app/routes/orgs/org/projects/index.js

@@ -1,3 +1,9 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
-export default class OrgsOrgProjectsIndexRoute extends Route {}
+export default class OrgsOrgProjectsIndexRoute extends Route {
+  @action
+  new() {
+    this.transitionTo('orgs.org.projects.new');
+  }
+}

ui/core/app/styles/app.scss

@@ -38,10 +38,9 @@
   box-sizing: border-box;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 2px;
-  position: absolute;
-  right: 10px;
-  top: 70px;
-  display: inline-block;
+  position: relative;
+  float: right;
+  top: -50px;
 }
 
 .project-overview,

ui/core/app/templates/application.hbs

@@ -1,8 +1,14 @@
-<HeadLayout />
-{{title (app-name)}}
+<Rose::Layout::Page as |page|>
+  <page.header>
+    <Rose::Header as |header|>
+      <header.brand @logo="logo" @text={{app-name}} />
+    </Rose::Header>
+  </page.header>
 
-<Rose::Header as |header|>
-  <header.brand @logo="logo" @text={{app-name}} />
-</Rose::Header>
+  <page.main>
+    {{title (app-name)}}
+    {{outlet}}
+  </page.main>
 
-{{outlet}}
+  <page.sidebar />
+</Rose::Layout::Page>

ui/core/app/templates/orgs/org/projects/index.hbs

@@ -1,7 +1,13 @@
 <div class="projects-overview">
   <h2>{{t "resources.projects"}}</h2>
-
-  <LinkTo @route="orgs.org.projects.new" class="project-new-link">{{t "titles.new"}}</LinkTo>
+  <Rose::Button
+    class="project-new-link"
+    @style="primary"
+    @iconLeft="plus-plain"
+    {{on "click" (route-action "new")}}
+  >
+    {{t 'titles.new'}}
+  </Rose::Button>
 
   <ul class="projects">
     {{#each @model as |project|}}