Revenues/Process tab table

_includes/location/revenue-type-table.html

@@ -1,14 +1,14 @@
 {% assign revenue_types = site.data.state_revenues_by_type[include.location_id] %}
 {% assign revenue_type_names = 'Bonus;Rents;Royalties;Other Revenues' | split: ';' %}
 
-<table is="bar-chart-table" class="revenue"
+<table is="bar-chart-table" class="revenue table-basic"
   {% if include.id %}id="{{ include.id }}"{% endif %}>
   <thead>
     <tr>
-      <th>Commodity</th>
-      <th>Securing a lease</th>
-      <th>Before production</th>
-      <th>During production</th>
+      <th class="arrow_box">Phase:</th>
+      <th class="arrow_box">Securing a lease</th>
+      <th class="arrow_box">Before production</th>
+      <th class="arrow_box-last">During production</th>
       <th>Other revenues</th>
     </tr>
   </thead>

_includes/location/section-process.html

@@ -3,3 +3,24 @@ <h2>Process</h2>
   <p>When companies extract natural resources on federal land, they follow laws or policies that govern how rights are awarded and what fees they pay to the government. The specifics of the process depend on the kind of resource, and often affect how much revenue the federal government ultimately collects.</p>
   <p>For details, read more about the different processes for awarding rights and extracting resources: <a href="{{ site.baseurl }}/how-it-works/coal/">coal</a>, <a href="{{ site.baseurl }}/how-it-works/onshore-oil-gas/">oil and gas</a>, <a href="{{ site.baseurl }}/how-it-works/onshore-renewables/">renewable resources</a>, and <a href="{{ site.baseurl }}/how-it-works/minerals/">hardrock minerals</a>.</p>
 </section>
+
+<div class="tab-interface">
+    <ul class="eiti-tabs info-tabs" role="tablist">
+      <li role="presentation"><a href="#revenues" tabindex="0" role="tab" aria-controls="revenues" aria-selected="true">Commodity Revenues</a></li>
+      <li role="presentation"><a href="#story" tabindex="-1" role="tab" aria-controls="story" class="link-charlie">The story behind the numbers</a></li>
+    </ul>
+
+    <article class="eiti-tab-panel" id="revenues" role="tabpanel">
+      {%
+        include location/revenue-type-table.html
+        id='revenue-types'
+        location_id=state_id
+        location_name=state_name
+        year=year
+      %}
+    </article>
+
+    <article class="eiti-tab-panel" id="story" role="tabpanel" aria-hidden="true">
+      <img src="{{site.baseurl}}/img/revenue-streams-chart.png" alt="Select federal revenue streams and statutory and regulatory rates" class="article_img-100">
+    </article>
+</div>

_layouts/state-page.html

@@ -80,6 +80,5 @@ <h1 id="title">{{ state_name }}</h1>
 
 </main>
 
-<script src="{{ site.baseurl }}/js/components/bar-chart-table.js"></script>
-<script src="{{ site.baseurl }}/js/components/data-map.js"></script>
-<script type="text/javascript" src="{{ site.baseurl }}/js/lib/narrative.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/js/lib/state-pages.min.js" charset="utf-8"></script>
+

_sass/_variables.scss

@@ -61,6 +61,9 @@ $light-black: #303030;
 
 // State pages
 $green-land: #d5e5cb;
+$green-mint: #d2e2cc;
+$green-sea: #b1d39c;
+$green-dark: #657c60;
 
 // v2 - deprecate
 $putty: #f4f4f4;

_sass/blocks/_all.scss

@@ -29,6 +29,15 @@
 @import 'landing';
 @import 'explore/all';
 
+
+// State pages
+//
+// Styles for the page at /states/
+//
+// Styleguide blocks.state-pages
+@import 'state-pages/info-tabs';
+@import 'state-pages/arrow-box';
+
 // About
 //
 // Styles for the page at /about/

_sass/blocks/_home-explore.scss

@@ -1,15 +1,6 @@
 // Explore data callout on homepage
 //
 // Styleguide blocks.explore-home
-
-@mixin active-tab() {
-  background-color: $white;
-  border: 1px solid $neutral-gray;
-  border-bottom: 1px solid $white;
-  font-weight: $weight-bold;
-  text-decoration: none;
-}
-
 .explore_home-heading {
   margin-bottom: $base-padding;
 
@@ -35,8 +26,6 @@
 }
 
 .explore_home-tabs {
-  @include heading(para-sm);
-  margin-bottom: 3px;
   text-align: right;
 
   @include respond-to(tiny-down) {
@@ -50,20 +39,11 @@
     border: 1px solid transparent;
     color: $black;
     margin-right: $base-padding-lite;
-    padding: $base-padding-lite;
-
-    &[aria-selected="true"] {
-      @include active-tab();
-    }
-
-    &:hover,
-    &:focus {
-      @include active-tab();
-    }
   }
 
   li {
     display: inline-block;
+    padding-bottom: 3px;
   }
 }
 
@@ -101,7 +81,6 @@
 }
 
 .explore_home-main {
-  border-top: 1px solid $neutral-gray;
   padding-top: $base-padding-large;
 }
 

_sass/blocks/state-pages/_arrow-box.scss

@@ -0,0 +1,97 @@
+$ab-height: 70px;
+$ab-height-half: $ab-height / 2;
+$ab-gutter: 2px;
+$ab-wrap: $ab-height-half + (2 * $ab-gutter);
+$ab-h-indent: ($ab-height-half / 2);
+$ab-w-indent: ($ab-height-half / 2) + $ab-gutter;
+$ab-padding: 30px;
+$ab-padding-half: $ab-padding / 2;
+
+#revenue-types {
+  width: 100%;
+
+  thead {
+    th {
+      @include heading('para-md');
+
+      background-color: $green-mint;
+      height: $ab-height;
+      padding-left: $ab-padding;
+      padding-right: $ab-padding-half;
+      text-align: left;
+      vertical-align: middle;
+      z-index: 100;
+    }
+
+    th::nth-child(1) {
+      padding-left: $ab-padding-half;
+    }
+
+    th::nth-child(2) {
+      z-index: 50;
+    }
+
+    th::nth-child(3) {
+      z-index: 40;
+    }
+
+    th::nth-child(4) {
+      z-index: 30;
+    }
+
+    th::nth-child(5) {
+      z-index: 20;
+    }
+
+    th::last-child {
+      padding-left: $ab-padding-half;
+      z-index: 0;
+    }
+  }
+
+  .arrow_box,
+  .arrow_box-last {
+    background: $green-mint;
+    position: relative;
+  }
+
+  .arrow_box-last {
+    border-right: $ab-gutter solid $white;
+  }
+
+  .arrow_box::first-of-type {
+    background: $green-sea;
+    color: $white;
+    font-weight: $weight-bold;
+
+    &::after {
+      border-left-color: $green-sea;
+    }
+  }
+
+  .arrow_box::before,
+  .arrow_box::after {
+    border: solid transparent;
+    content: '';
+    height: 0;
+    left: 100%;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    width: 0;
+  }
+
+  .arrow_box::before {
+    border-color: transparent;
+    border-left-color: $white;
+    border-width: $ab-wrap 0 $ab-wrap $ab-w-indent;
+    margin-top: -$ab-wrap;
+  }
+
+  .arrow_box::after {
+    border-color: transparent;
+    border-left-color: $green-mint;
+    border-width: $ab-height-half 0 $ab-height-half $ab-h-indent;
+    margin-top: -$ab-height-half;
+  }
+}

_sass/blocks/state-pages/_info-tabs.scss

@@ -0,0 +1,29 @@
+.info-tabs {
+  border-bottom: 5px solid $green-dark;
+  margin-bottom: $base-padding-lite;
+  padding: 0;
+
+  li {
+    padding-bottom: $base-padding-lite;
+    padding-top: $base-padding-lite;
+  }
+
+  a {
+    background-color: $mid-gray;
+    border: 0;
+    border-bottom: 2px solid $mid-gray;
+    color: $base-font-color;
+    padding: $base-padding-lite $base-padding;
+
+
+    &[aria-selected="true"] {
+      @include active-tab('info');
+    }
+
+    &:hover,
+    &:focus {
+      @include active-tab('info');
+    }
+  }
+
+}

_sass/components/_all.scss

@@ -19,3 +19,4 @@
 @import 'breadcrumbs';
 @import 'flowchart';
 @import 'panel';
+@import 'tabs';

_sass/components/_tabs.scss

@@ -0,0 +1,35 @@
+.eiti-tabs {
+  @include heading(para-sm);
+
+  border-bottom: 1px solid $neutral-gray;
+  margin: 0;
+  padding: $base-padding-lite;
+  padding-bottom: 0;
+  text-align: left;
+
+
+
+  li {
+    display: inline-block;
+    padding-bottom: 3px;
+  }
+
+  a {
+    padding: $base-padding-lite;
+    text-decoration: none;
+
+    &[aria-selected="true"] {
+      @include active-tab();
+    }
+
+    &:hover,
+    &:focus {
+      @include active-tab();
+    }
+  }
+
+}
+
+.eiti-tab-panel {
+  padding: 0;
+}

_sass/elements/_tables.scss

@@ -33,3 +33,25 @@ th:first-child {
 td {
   border: 1px solid $mid-gray;
 }
+
+
+.table-basic {
+  border: 0;
+
+  thead {
+    border: 0;
+
+    tr {
+      border: 0;
+    }
+  }
+
+  tr {
+    border: 0;
+    border-bottom: 2px solid $mid-gray;
+  }
+
+  td {
+    border: 0;
+  }
+}

_sass/mixins/_all.scss

@@ -1,3 +1,4 @@
 @import 'type-mixins';
 @import 'rotate';
 @import 'padded-in-mobile';
+@import 'tabs';

_sass/mixins/_tabs.scss

@@ -0,0 +1,16 @@
+@mixin active-tab($color:'') {
+  font-weight: $weight-bold;
+  text-decoration: none;
+
+  @if $color == 'info' {
+    background-color: $green-dark;
+    border-bottom: 2px solid $green-dark;
+    color: $white;
+    padding-bottom: 6px;
+  } @else {
+    background-color: $white;
+    border: 1px solid $neutral-gray;
+    border-bottom: 1px solid $white;
+    color: $base-font-color;
+  }
+}

index.html

@@ -22,13 +22,13 @@ <h3>USEITI is part of an international effort to promote open and accountable ma
     <p class="h5 explore_home-subhead">Explore data</p>
     <h2 class="h3 explore_home-heading explore_home-explore_heading">Learn about extractive industries throughout the country</h2>
 
-    <ul class="explore_home-tabs" role="tablist">
+    <ul class="eiti-tabs explore_home-tabs" role="tablist">
       <li role="presentation"><a href="#revenue" tabindex="0" role="tab" aria-controls="revenue" aria-selected="true" class="link-charlie">Revenue</a></li>
       <li role="presentation"><a href="#production" tabindex="-1" role="tab" aria-controls="production" class="link-charlie">Production</a></li>
       <li role="presentation"><a href="#impact" tabindex="-1" role="tab" aria-controls="impact" class="link-charlie"><span class="explore_home-tab_mobile">Impact</span><span class="explore_home-tab_desktop">Economic Impact</span></a></li>
     </ul>
 
-    <section class="explore_home-main" id="revenue" role="tabpanel">
+    <section class="eiti-tab-panel explore_home-main" id="revenue" role="tabpanel">
       <div class="container-left-3">
         <p>Revenue data shows where federal revenue from extractive industries is coming from, who pays it, and where it goes.</p>
         <a href="{{ site.baseurl }}/explore/#revenue" class="button-primary explore_home-button">Explore data</a>
@@ -47,7 +47,7 @@ <h2 class="h3 explore_home-heading explore_home-explore_heading">Learn about ext
       </aside>
     </section>
 
-    <section class="explore_home-main" id="production" role="tabpanel" aria-hidden="true">
+    <section class="eiti-tab-panel explore_home-main" id="production" role="tabpanel" aria-hidden="true">
       <div class="container-left-3">
         <p>For the first time, data on all production on federal lands is available publicly. See how much energy was produced nationally, or explore all resources extracted on federal lands.</p>
         <a href="{{ site.baseurl }}/explore/#production" class="button-primary explore_home-button">Explore data</a>

js/lib/narrative.min.js

@@ -49,7 +49,7 @@
 	  'use strict';
 
 	  __webpack_require__(1);
-	  exports.OpenListNav = __webpack_require__(23);
+	  var OpenListNav = __webpack_require__(23);
 
 	  // exporting instance of OpenListNav because openListNav is
 	  // referenced in the markup: