refactor: 💡 Rename layout/page to layout/global in rose addon

2020-06-05 15:44:02 -04:00
1 parent 9ef514e63b
commit 6b15aeda1d
@@ -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,
@@ -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>
@@ -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,
@@ -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,
@@ -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,
@@ -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>
@@ -5,3 +5,4 @@
@import 'notification';
@import 'card';
@import 'page-header';
+@import 'nav';
@@ -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;
-  }
-}
@@ -0,0 +1,3 @@
+.rose-layout-global-body {
+  grid-area: body;
+}
@@ -0,0 +1,3 @@
+.rose-layout-global-header {
+  grid-area: header;
+}
@@ -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;
+  }
+}
@@ -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);
+}
@@ -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>
@@ -0,0 +1,3 @@
+<main ...attributes class="rose-layout-global-body">
+  {{yield}}
+</main>
@@ -0,0 +1,3 @@
+<header ...attributes class="rose-layout-global-header" >
+  {{yield}}
+</header>
@@ -0,0 +1,3 @@
+<aside ...attributes class="rose-layout-global-navigation">
+  {{yield}}
+</aside>
@@ -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>
@@ -1,3 +0,0 @@
-<header ...attributes class="rose-layout-header" >
-  {{yield}}
-</header>
@@ -1,3 +0,0 @@
-<main ...attributes class="rose-layout-main">
-  {{yield}}
-</main>
@@ -1,3 +0,0 @@
-<aside ...attributes class="rose-layout-sidebar">
-  {{yield}}
-</aside>
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/body';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/header';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/global/navigation';
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page';
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/header';
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/main';
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/layout/page/sidebar';
@@ -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>
@@ -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'));
+  });
+});
@@ -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'));
  });
 });
@@ -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'));
  });
 });
@@ -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'));
  });
 });
@@ -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'));
-  });
-});
@@ -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');
+  }
+}
@@ -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
@@ -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}}
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/layout/global';`
				`@@ -1 +0,0 @@`
				`export { default } from 'rose/components/rose/layout/page';`