New main content header component

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

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

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>

addons/rose/addon/components/rose/layout/page/sidebar.js → 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/sidebar';
+import layout from '../../../../templates/components/rose/layout/global/body';
 
 export default Component.extend({
   layout,

addons/rose/addon/components/rose/layout/global/header.js

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

addons/rose/addon/components/rose/layout/global/navigation.js

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

addons/rose/addon/components/rose/layout/page.stories.mdx

@@ -1,30 +1,32 @@
 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.
+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.sidebar />
-  <page.main />
+  <page.actions />
+  <page.navigation />
+  <page.body />
 </Rose::Layout::Page>
 ```
 
 <Preview>
-  <Story name="Basic">{{
+  <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.main style="background: var(--brand-gray-7);">Main</page.main>
-      <page.sidebar style="background: var(--brand-gray-6);">Sidebar</page.sidebar>
+      <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>

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

addons/rose/addon/components/rose/layout/page/main.js → addons/rose/addon/components/rose/layout/page/body.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/page/body';
 
 export default Component.extend({
   layout,

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

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

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

@@ -4,4 +4,5 @@
 @import 'layout';
 @import 'notification';
 @import 'card';
+@import 'page-header';
 @import 'nav';

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 {

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

@@ -1,38 +1,2 @@
-@use '../../variables/sizing';
-@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: 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;
-  }
-}
+@import 'global';
+@import 'page';

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

@@ -0,0 +1,48 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+
+.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;
+
+  .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)) {
+  .rose-layout-page {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'breadcrumbs'
+      'header'
+      'actions'
+      'navigation'
+      'body';
+  }
+}

addons/rose/addon/styles/rose/components/layout/global/_body.scss

@@ -0,0 +1,3 @@
+.rose-layout-global-body {
+  grid-area: body;
+}

addons/rose/addon/styles/rose/components/layout/global/_header.scss

@@ -0,0 +1,3 @@
+.rose-layout-global-header {
+  grid-area: header;
+}

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;
+  }
+}

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

addons/rose/addon/styles/rose/components/page-header/_index.scss

@@ -0,0 +1,2 @@
+@import 'title';
+@import 'utilities';

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

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;
+  }
+}

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;
+    }
+  }
+}

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}}
 >