New main content header component

[gsusmi]

Main content header component contains a title(basic & dropdown) with
actions. Title dropdown is styled Rose::Header::Dropdown component whereas header actions are simple Rose::Button components.

<Rose::Layout::Main::Header as |header|>
  <header.title as |title|>
    <title.dropdown @text="Page title" @icon="user-square-fill" 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="primary">Primary</header.action>
  <header.action @style="primary">Secondary</header.action>
</Rose::Layout::Main::Header>

[gsusmi]

Wrapper div as providing a new class name through attributes isn't merged into button classname correctly.
Ref: emberjs/ember.js#17533

[gsusmi]

Updates:
Discussions in slack led to evolving layout component pattern.
Introduced new Rose::Layout::PageHeader component who's sole purpose is to define grid for content to be placed into.
Introduced new Rose::PageHeader::Title and Rose::PageHeader::Utilities components to contain content for page header.

I was able to refactor previous use of dropdown title component, so I'd like to leave it as it is if non-detrimental.

[ghost]

Let's ditch the dedicated page header layout stuff and build a page/content layout with four regions:

• header
• actions/utilities
• navigation
• main/body

<Rose::Layout::Page as |page|>
  <page.header>
    <h2>Title</h2>
  </page.header>
  <page.actions>
    <button>stuff</button>
  </page.actions>
  <page.navigation>
    <tabs />
  </page.navigation>
  <page.body>
    <p>content</p>
  </page.body>
</Rose::Layout::Page>

The more I think about it, we can probably get away with using simple heading tags for the title <h2> for now, until we have more design detail.

And rename the existing "page" layout to Global to align with Structure: Rose::Layout::Global.

[ghost]

For now, don't worry about the link button styles. We can come back to that soon. Let's get the layouts settled.

[gsusmi]

Updates:
Split out layouts into Global and Page.

<Rose::Layout::Global as |global|>
  <global.header />
  <global.navigation />
  <global.body />
</Rose::Layout::Global>

Page layout is to be placed into <Rose::Layout::Global::Body>

<Rose::Layout::Page as |page|>
  <page.breadcrumbs />
  <page.header />
  <page.actions />
  <page.navigation />
  <page.body />
</Rose::Layout::Page>

Rose::Layout::PageHeader has been removed, however, it's content components are still available under Rose::PageHeader::Title and Rose::PageHeader::Utilities.

[gsusmi]

@randallmorey , regarding minimizing layout sass files, in one of our previous discussions/PRs, you voiced interest in expanding sass files to replicate associated style used in templates. Should I not be following this pattern anymore? I'm always happy with less files to search through.

[ghost]

The layout regions are all essentially identical. I created a ticket to consolidate these. Going forward it doesn't seem worthwhile to split them into their own files.