AppView

<AppView /> is our current top level wrapping component (one level in from the app chrome), every 'top level main section/template' should have one of these.

This component will potentially be renamed to Page or View or similar now that we don't need two words.

Other than that it provides the basic layout/slots for our main title, search bar, top right hand actions and main content.

The large top margin that is visible when no breadcrumbs are visible is there to ensure that the page doesn't 'jump around' when you navigate to a page with breadcrumbs and back again.

hbs

<figure>

  <AppView>

    <BlockSlot @name="header">
      <h1>
        Main title <em>{{format-number "100000"}} total {{pluralize 100000 "thing" without-count=true}} in this page</em>
      </h1>
    </BlockSlot>
    <BlockSlot @name="content">

      <EmptyState>
        <BlockSlot @name="body">
          <p>
            Nothing to see here
          </p>
        </BlockSlot>
      </EmptyState>

    </BlockSlot>
  </AppView>

  <figcaption>Basic list-like view</figcaption>
</figure>

hbs

<figure>

  <AppView>
    <BlockSlot @name="breadcrumbs">
      <ol>
        <li><a href="">Hansel</a></li>
        <li><a href="">Gretel</a></li>
      </ol>
    </BlockSlot>

    <BlockSlot @name="header">
      <h1>
        Scary witch's gingerbread house <em>(run away quick!)</em>
      </h1>
    </BlockSlot>

    <BlockSlot @name="actions">
      <Action
        {{on "click" (noop)}}
      >
        Run away!
      </Action>
    </BlockSlot>

    <BlockSlot @name="content">
      <EmptyState>
        <BlockSlot @name="body">
          <p>
            Double, double toil and trouble
          </p>
        </BlockSlot>
      </EmptyState>
    </BlockSlot>
  </AppView>

  <figcaption>Basic detail-like view</figcaption>
</figure>

Slots

Name	Description
`header`	The main title of the page, you probably want to put a `<h1>` in here
`content`	The main content of the page, and potentially an `<Outlet />` somewhere
`breadcrumbs`	Any breadcrumbs, you probably want an `ol/li/a` in here
`actions`	Any actions relevant for the entire page, probably using `<Action />`
`nav`	Secondary navigation goes in here, also see `<TabNav />`
`toolbar`	Rendered underneath the header and actions for various 'toolbar' type things, such as our SearchBars

Portals

Name	Description
`app-view-actions`	Provides a portal to render additional page actions from any views. This is rendered before the contents of the `actions` slot