feat(viewport-panes): add viewport-pane component

This gives us the ability to add a class to the top pane of the layout
and have it scale based on the size of the viewport's height.

[Finishes: #113681439]

BREAKING CHANGE: Adds variables that will affect the header as well

src/pivotal-ui/components/header/header.scss

@@ -95,13 +95,22 @@ header {
   font-size: 16px;
   padding: 0.875em 20px 0.0625em;
   border-bottom: 1px solid #d3d3d3;
+  max-height: $header-height-max-sm;
   background: $header-color;
   color: $header-text-color;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
 }
+header.hero-transparent {
+  background: transparent;
+  border-bottom: 0;
+}
+header.hero-transparent + .pane {
+  margin-top: $header-height-max-sm;
+  padding-top: -($header-height-max-sm);
+}
 header > .header-item {
   flex: 1 auto;
 }
@@ -271,6 +280,7 @@ header a:hover {
 
 @media (min-width: $desktopMinWidth) {
   header {
+    max-height: $header-height-max-lg;
     flex-direction: row;
     flex-wrap: wrap-reverse;
     padding: 0 20px;
@@ -316,10 +326,6 @@ header a:hover {
   header > .header-nav-menu-container .nav-menu-container {
     max-width: 550px;
   }
-  header.hero-transparent {
-    background: transparent;
-    border-bottom: 0;
-  }
   header.hero-transparent + .pane {
     margin-top: -6em;
     padding-top: 6em;

src/pivotal-ui/components/header/package.json

@@ -4,5 +4,5 @@
       "@npmcorp/pui-css-drop-down-menu": "^1.3.0",
       "pui-css-typography": "^2.0.0"
     },
-  "version": "1.7.0"
+  "version": "2.0.0"
 }

src/pivotal-ui/components/pui-variables.scss

@@ -1326,4 +1326,7 @@ $header-subtle-text-color: rgba(255,255,255,0.8);
 $header-nav-highlight-bg: #a42b2b;
 $desktopMinWidth: $screen-sm;
 $greigh: rgba(195,195,195,1); // median greigh
-$greigh3: rgba(black, 0.6);
+$greigh3: rgba(black, 0.6);
+
+$header-height-max-sm: 7.478125em;
+$header-height-max-lg: 8.315625em;

src/pivotal-ui/components/viewport-panes/README.md

@@ -0,0 +1,8 @@
+```html
+<div class="pane bg-dark-2 viewport-pane">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a viewport pane</h1>
+  </div>
+</div>
+
+```

src/pivotal-ui/components/viewport-panes/package.json

@@ -0,0 +1,9 @@
+{
+  "homepage": "http://styleguide.pivotal.io/layout.html#pane",
+  "dependencies": {
+    "@npmcorp/pui-css-bootstrap": "2.0.0",
+    "@npmcorp/pui-css-panes": "2.0.0",
+    "@npmcorp/pui-css-header": "2.0.0"
+  },
+  "version": "1.0.0"
+}

src/pivotal-ui/components/viewport-panes/viewport-panes.scss

@@ -0,0 +1,63 @@
+@import "../pui-variables";
+
+/*doc
+---
+title: Viewport Pane
+name: viewport_pane
+categories:
+ - css_utilities_panes
+ - css_all
+---
+
+<code class="pam">
+<i class="fa fa-download" alt="Install the Component">
+npm install @npmcorp/pui-css-viewport-panes --save
+</i>
+</code>
+
+Viewport panes are type of [pane](/pane.html) that have a height that is based upon
+the height of your viewport.
+
+You can add the `.viewport-pane` class to the top pane of a layout.
+
+```html_example
+<header>
+  <h1>This is the header</h1>
+</header>
+<div class="pane bg-dark-2 viewport-pane">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+  </div>
+</div>
+
+```
+
+When following a transparent header, the viewport-pane class will allow the pane's color
+to come through
+
+```
+<header class="hero-transparent">
+  <h1>This is the header, you can see the pane below me, through this</h1>
+</header>
+<div class="pane bg-dark-2 viewport-pane">
+  <div class="container bg-glow">
+    <h1 class="type-neutral-11">This is a pane</h1>
+  </div>
+</div>
+```
+
+*/
+
+.viewport-pane {
+  height: calc(100vh - $header-height-max-sm);
+}
+
+.hero-transparent + .viewport-pane {
+  box-sizing: content-box;
+}
+
+@media (min-width: $screen-sm-min) {
+  .viewport-pane {
+    height: calc(80vh - $header-height-max-lg);
+  }
+}