Merge branch 'dev'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcp-design",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -34,6 +34,6 @@
   },
   "dependencies": {
     "jquery": "^2.2.2",
-    "fsa-style": "^2.1.0"
+    "fsa-style": "^2.1.1"
   }
 }

src/component_stepped-tabs.html

@@ -26,8 +26,8 @@ <h1>Component: Stepped Tabs</h1>
           <div class="fsa-grid__1/1 fsa-grid__1/2@m">
             <h2 class="pcp-prototype-title">As seen on</h2>
             <ul>
-              <li><a href="workflow_discovery.html">Daily Process > Price Discovery</a></li>
-              <li><a href="workflow_discovery__complete.html">Daily Process > Price Discovery</a> (currently on Adjustments)</li>
+              <li><a href="workflow_discovery.html">Daily Process > Discovery</a></li>
+              <li><a href="workflow_discovery__complete.html">Daily Process > Discovery</a> (currently on Adjustments)</li>
               <li><a href="workflow_closing.html">Daily Process > Closing</a></li>
               <li><a href="workflow_mapping.html">Daily Process > Adjustments</a></li>
               <li><a href="workflow_review.html">Daily Process > Review</a></li>
@@ -74,7 +74,7 @@ <h3 class="fsa-font--sans">Adjustments (on step 4 of 6)</h3>
 
         {% include: 'includes/pcp-stepped-tabs__mapping.html' %}
 
-        <h3 class="fsa-font--sans">Adjustments <em>in progress</em>, but currently viewing <em>completed</em> Price Discovery</h3>
+        <h3 class="fsa-font--sans">Adjustments <em>in progress</em>, but currently viewing <em>completed</em> Discovery</h3>
 
         {% include: 'includes/pcp-stepped-tabs__discovery--at-adjustments.html' %}
 

src/component_table.html

@@ -58,10 +58,17 @@ <h3 class="fsa-font--sans">Review Adjustment Changes</h3>
 
         {% include: 'includes/pcp-adjust__state-review.html' %}
 
-        <h3 class="fsa-font--sans">Entry</h3>
+        <h2 class="pcp-prototype-title">Scrollable overflow</h2>
+
+        {% include: 'includes/table_overflow-example.html' %}
+
+        <h3 class="fsa-font--sans">Example</h3>
+
+        {% include: 'includes/program-entry__pnw-proteins.html' %}
+
+        <h3 class="fsa-font--sans">Example</h3>
 
         {% include: 'includes/program-entry__pnw.html' %}
-        {% include: 'includes/program-entry__glf.html' %}
 
         <h2 class="pcp-prototype-title">Controlling column widths</h2>
 
@@ -93,7 +100,7 @@ <h3 class="fsa-font--sans">Taming data tables' columns</h3>
         <pre class="pcp-code-block"><code> ...<br> &lt;tr&gt;<br> &nbsp;&nbsp;&lt;th <strong style="color: black;">colspan="8"</strong>&gt;Column one&lt;/th&gt;<br> &nbsp;&nbsp;&lt;th <strong style="color: black;">colspan="8"</strong>&gt;Column two&lt;/th&gt;<br> &nbsp;&nbsp;&lt;th <strong style="color: black;">colspan="8"</strong>&gt;Column three&lt;/th&gt;<br> &lt;/tr&gt;<br> &lt;tr&gt;<br> &nbsp;&nbsp;&lt;td <strong style="color: black;">colspan="8"</strong>&gt;A&lt;/td&gt;<br> &nbsp;&nbsp;&lt;td <strong style="color: black;">colspan="8"</strong>&gt;B&lt;/td&gt;<br> &nbsp;&nbsp;&lt;td <strong style="color: black;">colspan="8"</strong>&gt;C&lt;/td&gt;<br> &lt;/tr&gt;<br> ... </code></pre>
 
         <div style="max-width: 68ch;">
-          <p>Which within <code>fsa-table</code> renders <strong>3 perfectly distributed columns</strong>...</p>
+          <p>Which with <code>class="fsa-table pcp-table--fixed"</code> renders <strong>3 perfectly distributed columns</strong>...</p>
         </div>
 
         <table class="fsa-table fsa-table--borderless pcp-table pcp-table--fixed">
@@ -106,9 +113,9 @@ <h3 class="fsa-font--sans">Taming data tables' columns</h3>
           </thead>
           <tbody>
             <tr class="pcp-table__row">
-              <td class="pcp-table__cell" scope="col" colspan="8" colspan="8">Allorem ipsum dolor sit amet</td>
-              <td class="pcp-table__cell" scope="col" colspan="8" colspan="8">Bexx numquam aspernatur eligendi consectetur esse eius ab eum laudantium eaque dolorum, natus</td>
-              <td class="pcp-table__cell" scope="col" colspan="8" colspan="8">Cvoluptatibus.</td>
+              <td class="pcp-table__cell" colspan="8">Allorem ipsum dolor sit amet</td>
+              <td class="pcp-table__cell" colspan="8">Bexx numquam aspernatur eligendi consectetur esse eius ab eum laudantium eaque dolorum, natus</td>
+              <td class="pcp-table__cell" colspan="8">Cvoluptatibus.</td>
             </tr>
           </tbody>
         </table>

src/includes/growl_reopen-confirmed.html

@@ -4,6 +4,6 @@
     <h2 class="fsa-growl__title">Re-opened</h2>
   </div>
   <div class="fsa-growl__bd">
-    <p><strong>Price Discovery</strong> re-opened.</p>
+    <p><strong>Discovery</strong> re-opened.</p>
   </div>
 </div>

src/includes/growl_reopen-discovery.html

@@ -4,7 +4,7 @@
     <h2 class="fsa-growl__title">Are you sure?</h2>
   </div>
   <div class="fsa-growl__bd">
-    <p>Re-opening Price Discovery will <strong>reset any work</strong> completed in future steps.</p>
+    <p>Re-opening Discovery will <strong>reset any work</strong> completed in future steps.</p>
     <p>
       <input class="fsa-checkbox" id="yes-reopen" type="checkbox" name="yes-reopen" value="yes" data-behavior="confirm-reopen" data-target="unique-id-loremipemino">
       <label for="yes-reopen">I understand</label>

src/includes/pcp-info-bar.html

@@ -1,16 +1,16 @@
 <div class="pcp-info-bar">
   <div class="pcp-info-bar__bd">
     <div class="pcp-info-bar__item">
-      <strong>EFFECTIVE DATE</strong>
-      <time datetime="2017-08-28">Monday, August 28, 2017</time>
+      <strong id="info-bar__effective-date">EFFECTIVE DATE</strong>
+      <time datetime="2017-08-28" aria-labelledby="info-bar__effective-date">Monday, August 28, 2017</time>
     </div>
     <div class="pcp-info-bar__item">
-      <strong>ORGANIZER</strong>
-      Carol Brady
+      <strong id="info-bar__organizer">ORGANIZER</strong>
+      <span aria-labelledby="info-bar__organizer">Carol Brady</span>
     </div>
     <div class="pcp-info-bar__item">
-      <strong>APPROVER</strong>
-      Mike Brady
+      <strong id="info-bar__approver">APPROVER</strong>
+      <span aria-labelledby="info-bar__approver">Mike Brady</span>
     </div>
     <div class="pcp-info-bar__item pcp-info-bar__item--truncate">
       <strong>NOTES</strong>

src/includes/pcp-modal__entry-glf.html

@@ -1,4 +1,4 @@
-<div data-component="modified-form-target" tabindex="0" id="UNIQUE-ID-jjdfgj456788w37" class="fsa-modal fsa-modal--top fsa-modal--large" role="dialog" aria-hidden="true" data-component="modified-form-target">
+<div data-component="modified-form-target" tabindex="0" id="UNIQUE-ID-jjdfgj456788w37" class="fsa-modal fsa-modal--fullscreen" role="dialog" aria-hidden="true" data-component="modified-form-target">
   <div class="fsa-modal__dialog">
     <div class="fsa-modal__content">
       <button class="fsa-modal__close" data-behavior="close-modal"><img class="fsa-modal__close-icon" src="img/close.svg" alt="close"></button>

src/includes/pcp-modal__entry-pnw.html

@@ -1,4 +1,4 @@
-<div data-component="modified-form-target" tabindex="0" id="UNIQUE-ID-415s5s4g5s4gf" class="fsa-modal fsa-modal--top fsa-modal--large" role="dialog" aria-hidden="true" data-component="modified-form-target">
+<div data-component="modified-form-target" tabindex="0" id="UNIQUE-ID-415s5s4g5s4gf" class="fsa-modal fsa-modal--fullscreen" role="dialog" aria-hidden="true" data-component="modified-form-target">
   <div class="fsa-modal__dialog">
     <div class="fsa-modal__content">
       <button class="fsa-modal__close" data-behavior="close-modal"><img class="fsa-modal__close-icon" src="img/close.svg" alt="close"></button>

src/includes/pcp-modal__entry-rice.html

@@ -1,4 +1,4 @@
-<div data-component="modified-form-target" tabindex="0" id="UNIQUE-ID-ss551s5s4gf" class="fsa-modal fsa-modal--top fsa-modal--large" role="dialog" aria-hidden="true" data-component="modified-form-target">
+<div data-component="modified-form-target" tabindex="0" id="UNIQUE-ID-ss551s5s4gf" class="fsa-modal fsa-modal--fullscreen" role="dialog" aria-hidden="true" data-component="modified-form-target">
   <div class="fsa-modal__dialog">
     <div class="fsa-modal__content">
       <button class="fsa-modal__close" data-behavior="close-modal"><img class="fsa-modal__close-icon" src="img/close.svg" alt="close"></button>

src/includes/pcp-stepped-tabs__closing.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--complete HINT" href="workflow_discovery.html" title="Complete">
           {% include: 'includes/icon.html' @NAME:'checkmark' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </a>
       </li>
       <li class="pcp-stepped-tabs__item">

src/includes/pcp-stepped-tabs__discovery--at-adjustments.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--complete pcp-stepped-tabs__label--active HINT" href="workflow_discovery__complete.html" title="Complete">
           {% include: 'includes/icon.html' @NAME:'checkmark' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </a>
       </li>
       <li class="pcp-stepped-tabs__item">

src/includes/pcp-stepped-tabs__discovery.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--active" href="workflow_discovery.html" title="In Progress">
           {% include: 'includes/icon.html' @NAME:'contrast' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </a>
       </li>
       <li class="pcp-stepped-tabs__item">

src/includes/pcp-stepped-tabs__init.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <span class="pcp-stepped-tabs__label pcp-stepped-tabs__label--incomplete" title="Not Started" title="Not Started">
           {% include: 'includes/icon.html' @NAME:'radio-unchecked' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </span>
       </li>
       <li class="pcp-stepped-tabs__item">

src/includes/pcp-stepped-tabs__mapping.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--complete HINT" href="workflow_discovery__complete.html" title="Complete">
           {% include: 'includes/icon.html' @NAME:'checkmark' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </a>
       </li>
       <li class="pcp-stepped-tabs__item">

src/includes/pcp-stepped-tabs__publish.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--complete HINT" href="workflow_discovery.html" title="Complete">
           {% include: 'includes/icon.html' @NAME:'checkmark' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </a>
       </li>
       <li class="pcp-stepped-tabs__item">

src/includes/pcp-stepped-tabs__review.html

@@ -10,7 +10,7 @@
       <li class="pcp-stepped-tabs__item">
         <a class="pcp-stepped-tabs__label pcp-stepped-tabs__label--complete HINT" href="workflow_discovery.html" title="Complete">
           {% include: 'includes/icon.html' @NAME:'checkmark' @SIZE:' ' @CLASS:'pcp-stepped-tabs__icon' %}
-          <span class="pcp-stepped-tabs__text">Price Discovery</span>
+          <span class="pcp-stepped-tabs__text">Discovery</span>
         </a>
       </li>
       <li class="pcp-stepped-tabs__item">