From e04987787300b7334958d063f9d49368d66a3db0 Mon Sep 17 00:00:00 2001
From: Rupert <12001003216024@FEDIDCARD.GOV>
Date: Mon, 30 Sep 2019 11:06:51 -0500
Subject: [PATCH] Progress component on Kitchen Sink [amends #356]

---
 src/index.html                    | 275 +++++++++++++++++++++++++++++-
 src/js/components/fsa-progress.js |  23 ++-
 src/progress.html                 | 256 ++++++++++++++++++++++-----
 3 files changed, 509 insertions(+), 45 deletions(-)

diff --git a/src/index.html b/src/index.html
index c8425711..36c3d3ed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -80,6 +80,36 @@ <h2 class="fsa-growl__title">Something happened</h2>
         </p>
       </div>
     </div>
+    <div class="fsa-growl fsa-growl--warning" id="UNIQUE-ID-gentle-notification_981" aria-hidden="true" tabindex="0" role="dialog">
+      <div class="fsa-growl__hd">
+      </div>
+      <div class="fsa-growl__bd fsa-p-r--none">
+        <div class="fsa-m-t--xs">
+          <span class="fsa-progress">
+            <span class="fsa-progress__bar">
+              <span class="fsa-progress__primary" style="transform:scaleX(.21);"></span>
+              <span class="fsa-progress__secondary"></span>
+            </span>
+            <span class="fsa-progress__details fsa-m-b--none" aria-live="polite" aria-label="Progress">
+              <span class="fsa-progress__label">Finding all the PII...</span>
+              <span class="fsa-progress__value">21%</span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="fsa-growl fsa-growl--success" id="UNIQUE-ID-ttfrancbra" aria-hidden="true" tabindex="0" role="dialog">
+      <div class="fsa-growl__hd">
+        <button class="fsa-growl__close" data-behavior="growl-dismiss" type="button" title="Close Notification" aria-label="Close Notification"></button>
+        <h2 class="fsa-growl__title">LDP Upload Complete</h2>
+      </div>
+      <div class="fsa-growl__bd">
+        <p>LDP Rates for <strong>Soft Red Winter Wheat</strong> have been uploaded.</p>
+        <p>
+          <button data-behavior="growl-dismiss" class="fsa-btn fsa-btn--small fsa-btn--secondary" type="button">OK</button>
+        </p>
+      </div>
+    </div>
   </div>
   <div class="fsa-growl-container fsa-growl-container--centered">
     <div class="fsa-growl fsa-growl--error fsa-growl--centered" id="UNIQUE-ID-9469E21387FAF609" aria-hidden="true" tabindex="0" role="dialog">
@@ -96,6 +126,29 @@ <h2 class="fsa-growl__title">Growl Title</h2>
         </p>
       </div>
     </div>
+    <div class="fsa-growl fsa-growl--warning fsa-growl--centered" id="UNIQUE-ID-hsyys88UUUhn" aria-hidden="true" tabindex="0" role="dialog">
+      <div class="fsa-growl__hd">
+        <h2 class="fsa-growl__title">Go get a frappacino</h2>
+      </div>
+      <div class="fsa-growl__bd">
+        <p>This might take a while. Sorry not sorry.</p>
+        <p>
+          <span class="fsa-progress fsa-progress--indeterminate">
+            <span class="fsa-progress__bar">
+              <span class="fsa-progress__primary"></span>
+              <span class="fsa-progress__secondary"></span>
+            </span>
+            <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
+              <span class="fsa-progress__label">Encrpyting...</span>
+              <span class="fsa-progress__value">About 20 min</span>
+            </span>
+          </span>
+        </p>
+        <p>
+          <button data-behavior="growl-dismiss whiteout-dismiss" class="fsa-btn fsa-btn--small fsa-btn--secondary" type="button">Cancel Encryption</button>
+        </p>
+      </div>
+    </div>
   </div>
   <!--[if lt IE 10]><p class="fsa-browser-upgrade">You are using an <strong>outdated</strong> browser. Please <strong><a href="http://browsehappy.com/">upgrade your browser</a></strong> to obtain a secure and improved experience.</p><![endif]-->
   <header>
@@ -4723,7 +4776,207 @@ <h3 class="docs__figure"><a class="docs__anchor" aria-hidden="true" href="#compo
         </div>
       </div>
       <div class="docs__jump-target" id="component__progress">
-        <div class="fsa-box" style="height:200px;background-color:orangered"></div>
+        <div class="docs__bd docs__section-title">
+          <h3 class="docs__figure"><a class="docs__anchor" aria-hidden="true" href="#component__progress">#</a>Progress</h3>
+          <a class="fsa-btn fsa-btn--secondary fsa-btn--small docs__section-link" href="http://usda-fsa.github.io/fsa-design-system/components/progress">Docs <span class="sr-only">for Progress</span></a>
+        </div>
+        <div class="docs__bd">
+          <p class="docs__code-sample"><code>class="fsa-progress"</code></p>
+          <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" type="button" data-behavior="toggleProgressBars">Toggle all Progress Bars</button></p>
+          <div class="fsa-grid">
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Indeterminate</h4>
+              <span class="fsa-progress fsa-progress--indeterminate">
+                <span class="fsa-progress__bar">
+                  <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Page loading</span>
+                  <span class="fsa-progress__secondary"></span>
+                </span>
+              </span>
+            </div>
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Indeterminate, with label</h4>
+              <span class="fsa-progress fsa-progress--indeterminate">
+                <span class="fsa-progress__bar">
+                  <span class="fsa-progress__primary"></span>
+                  <span class="fsa-progress__secondary"></span>
+                </span>
+                <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
+                  <span class="fsa-progress__label">Processing Claims</span>
+                </span>
+              </span>
+            </div>
+          </div>
+          <div class="fsa-grid">
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Determinate <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeSystemTrackLoop" data-target="showProgress">Start Progress Bar</button></h4>
+              <span class="fsa-progress">
+                <span class="fsa-progress__bar">
+                  <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress" id="showProgress">0%</span>
+                  <span class="fsa-progress__secondary"></span>
+                </span>
+              </span>
+            </div>
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Determinate, with label/value <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeSystemTrackLoop" data-target="showProgressWithLabel">Start Progress Bar</button></h4>
+              <span class="fsa-progress">
+                <span class="fsa-progress__bar">
+                  <span class="fsa-progress__primary" id="showProgressWithLabel"></span>
+                  <span class="fsa-progress__secondary"></span>
+                </span>
+                <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
+                  <span class="fsa-progress__label">Soft Red Winter Wheat</span>
+                  <span class="fsa-progress__value">0%</span>
+                </span>
+              </span>
+            </div>
+          </div>
+          <div class="fsa-grid">
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Paired with Select, inline</h4>
+              <span class="fsa-progress-inline">
+                <span class="fsa-progress fsa-progress--indeterminate">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading tracts</span>
+                    <span class="fsa-progress__secondary"></span>
+                  </span>
+                </span>
+                <select name="" id="" class="fsa-select">
+                  <option>Farm 1234</option>
+                  <option>Farm 6789</option>
+                </select>
+              </span>
+            </div>
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Paired with Select, block</h4>
+              <span class="fsa-progress fsa-progress--indeterminate">
+                <span class="fsa-progress__bar">
+                  <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading counties</span>
+                  <span class="fsa-progress__secondary"></span>
+                </span>
+              </span>
+              <select name="" id="" class="fsa-select fsa-select--block">
+                <option>California</option>
+                <option>Kansas</option>
+              </select>
+            </div>
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Paired with Input, inline</h4>
+              <span class="fsa-progress-inline">
+                <span class="fsa-progress fsa-progress--indeterminate">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Calculating age</span>
+                    <span class="fsa-progress__secondary"></span>
+                  </span>
+                </span>
+                <input type="text" class="fsa-input" value="05/14/1975">
+              </span>
+            </div>
+            <div class="fsa-grid__1 fsa-grid__1/2@m">
+              <h4 class="docs__sub_style">Paired with Input, block</h4>
+              <span class="fsa-progress fsa-progress--indeterminate">
+                <span class="fsa-progress__bar">
+                  <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading counties</span>
+                  <span class="fsa-progress__secondary"></span>
+                </span>
+              </span>
+              <input class="fsa-input fsa-input--block" value="California">
+            </div>
+          </div>
+          <h4 class="docs__sub_style">Paired with Modal</h4>
+          <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" data-behavior="open-modal" aria-controls="UNIQUE-ID-yshtgj77" aria-expanded="false" type="button">Open a Modal</button></p>
+          <h4 class="docs__sub_style">Paired with Growl Notification, modal-based</h4>
+          <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" data-behavior="growl-show whiteout-show" aria-controls="UNIQUE-ID-hsyys88UUUhn" aria-expanded="false" type="button">Show a Notification (Modal-based)</button></p>
+          <h4 class="docs__sub_style">Paired with Growl Notification, </h4>
+          <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" data-behavior="growl-show FAKE-GROWL-PROGRESS" aria-controls="UNIQUE-ID-gentle-notification_981" aria-expanded="false" type="button">Show a Notification</button></p>
+          <h4 class="docs__sub_style">
+            Paired with Table
+            <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeTableDone">Finish progress</button>
+            <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small" data-behavior="fakeTableShow">Show progress</button>
+          </h4>
+          <span class="fsa-progress fsa-progress--indeterminate" id="tableProgress">
+            <span class="fsa-progress__bar">
+              <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading Commodities</span>
+              <span class="fsa-progress__secondary"></span>
+            </span>
+          </span>
+          <table class="fsa-table fsa-table--borderless fsa-m-t--none">
+            <thead>
+              <tr>
+                <th scope="col"><button class="fsa-table__sort" type="button">Commodity</button></th>
+                <th scope="col" class="fsa-text-align--right" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Loan Rate</button></th>
+                <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
+                <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Alternative PCP</button></th>
+                <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate</button></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Oats $/Bushel</td>
+                <td class="fsa-text-align--right">1.43</td>
+                <td class="fsa-text-align--right">2.97</td>
+                <td class="fsa-text-align--right">1.92</td>
+                <td class="fsa-text-align--right">0.00</td>
+              </tr>
+              <tr>
+                <td>Barley $/Bushel</td>
+                <td class="fsa-text-align--right">1.75</td>
+                <td class="fsa-text-align--right">3.30</td>
+                <td class="fsa-text-align--right">2.60</td>
+                <td class="fsa-text-align--right">0.00</td>
+              </tr>
+              <tr>
+                <td>Wheat - Soft Red Winter $/Bushel</td>
+                <td class="fsa-text-align--right">2.42</td>
+                <td class="fsa-text-align--right">4.49</td>
+                <td class="fsa-text-align--right">4.19</td>
+                <td class="fsa-text-align--right">0.00</td>
+              </tr>
+              <tr>
+                <td>Canola $/Cwt.</td>
+                <td class="fsa-text-align--right">8.94</td>
+                <td class="fsa-text-align--right">15.99</td>
+                <td class="fsa-text-align--right">15.89</td>
+                <td class="fsa-text-align--right">0.00</td>
+              </tr>
+              <tr>
+                <td>Flaxseed $/Cwt.</td>
+                <td class="fsa-text-align--right">10.13</td>
+                <td class="fsa-text-align--right">15.90</td>
+                <td class="fsa-text-align--right">14.62</td>
+                <td class="fsa-text-align--right">0.00</td>
+              </tr>
+            </tbody>
+          </table>
+          <h4 class="docs__sub_style">Paired with Box</h4>
+          <span class="fsa-progress fsa-progress--indeterminate">
+            <span class="fsa-progress__bar">
+              <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Processing claims</span>
+              <span class="fsa-progress__secondary"></span>
+            </span>
+          </span>
+          <div class="fsa-box">
+            Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga!
+          </div>
+          <h4 class="docs__bd fsa-show@l">Paired with header</h4>
+          <div class="docs__rwd-demo-block">
+            <div class="docs__bd">
+              <p>
+                <span class="fsa-btn-group fsa-btn-group--small" role="group" data-component>
+                  <button data-behavior="toggle-rwd-size" data-target="rwd-demo_progress" data-size="phone" class="fsa-btn-group__item" aria-selected="true" type="button" title="Portrait"><span class="sr-only">Portrait</span> Phone <span class="docs__rwd-demo-icon docs__rwd-demo-icon--portrait"></span></button>
+                  <button data-behavior="toggle-rwd-size" data-target="rwd-demo_progress" data-size="phone-big" class="fsa-btn-group__item" type="button" title="Landscape"><span class="sr-only">Landscape</span> Phone <span class="docs__rwd-demo-icon docs__rwd-demo-icon--landscape"></span></button>
+                  <button data-behavior="toggle-rwd-size" data-target="rwd-demo_progress" data-size="tablet" class="fsa-btn-group__item" type="button">Tablet</button>
+                  <button data-behavior="toggle-rwd-size" data-target="rwd-demo_progress" data-size="desktop" class="fsa-btn-group__item fsa-btn-group__item--active" type="button">Desktop</button>
+                </span>
+                <a class="fsa-m-l--xs fsa-text-size--1" href="demo/rwd__progress.html" target="_blank">View in new window</a>
+              </p>
+            </div>
+            <div class="docs__rwd-embed-container">
+              <div class="docs__rwd-embed docs__rwd-embed--desktop" id="rwd-demo_progress">
+                <iframe src="demo/rwd__progress.html" class="docs__rwd-iframe" allowtransparency="true" frameborder="0" scrolling="yes" allowfullscreen="true" > </iframe>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="docs__jump-target" id="component__tophat">
         <div class="docs__bd docs__section-title">
@@ -6399,6 +6652,26 @@ <h4 class="docs__bd docs__figure">Hide at specific screen size</h4>
     </div>
   </footer>
 
+  <div tabindex="0" id="UNIQUE-ID-yshtgj77" class="fsa-modal" role="dialog" aria-hidden="true">
+    <div class="fsa-modal__dialog">
+      <span class="fsa-progress fsa-progress--indeterminate">
+        <span class="fsa-progress__bar">
+          <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading stuff</span>
+          <span class="fsa-progress__secondary"></span>
+        </span>
+      </span>
+      <div class="fsa-modal__content">
+        <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
+        <h1 class="fsa-modal__title">[default title]</h1>
+        <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla?</p>
+        <ul>
+          <li><a href="">Fake Link</a></li>
+          <li><a href="">Fake Link</a></li>
+        </ul>
+        <p>Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis!</p>
+      </div>
+    </div>
+  </div>
   <div tabindex="0" id="UNIQUE-ID-GGFD36765SSSGH" class="fsa-modal" role="dialog" aria-hidden="true">
     <div class="fsa-modal__dialog">
       <div class="fsa-modal__content">
diff --git a/src/js/components/fsa-progress.js b/src/js/components/fsa-progress.js
index 6c7e3f40..434572d3 100644
--- a/src/js/components/fsa-progress.js
+++ b/src/js/components/fsa-progress.js
@@ -1,5 +1,17 @@
 const $ = window.jQuery = require('jquery');
 
+$('body').on('click', '[data-behavior~="toggleProgressBars"]', function(event) {
+
+  const $bars = $('.fsa-progress');
+
+  if ($bars.is('[style]')) {
+    $bars.removeAttr('style');
+  } else {
+    $bars.css('visibility', 'hidden');
+  }
+
+})
+
 $('body').on('click', '[data-behavior~="fakeSystemTrackLoop"]', function(event) {
 
   const $self = $(this);
@@ -30,16 +42,19 @@ $('body').on('click', '[data-behavior~="fakeSystemTrackLoop"]', function(event)
     $targetValue.html('100%');
     $target.css('transform','scaleX(1)');
     $self.removeAttr('style');
+
+    $('#UNIQUE-ID-ttfrancbra').attr('aria-hidden', 'false');
+
   }, 7000);
 
 })
 
-function fakeTableDone() {
+$('body').on('click', '[data-behavior~="fakeTableDone"]', function(event) {
   $('#tableProgress').hide();
-}
+})
 
-function fakeTableShow() {
+$('body').on('click', '[data-behavior~="fakeTableShow"]', function(event) {
   $('#tableProgress').removeAttr('style');
-}
+})
 
 console.log('ProgressComponent loaded, its JS is NOT to be used for Production, demo purposes only');1
diff --git a/src/progress.html b/src/progress.html
index dca2dad8..f2a0ff38 100644
--- a/src/progress.html
+++ b/src/progress.html
@@ -24,6 +24,7 @@
 <body class="docs__page">
   <a class="skipnav" href="#primary-navigation">Skip to primary navigation</a>
   <a class="skipnav" href="#main-content">Skip to main content</a>
+  <div class="fsa-whiteout" tabindex="-1" id="fsa-whiteout" aria-hidden="true" aria-expanded="false"></div>
   <!--[if lt IE 10]><p class="fsa-browser-upgrade">You are using an <strong>outdated</strong> browser. Please <strong><a href="http://browsehappy.com/">upgrade your browser</a></strong> to obtain a secure and improved experience.</p><![endif]-->
     <main class="docs__main" id="main-content" tabindex="-1">
       <section class="docs__section" id="components">
@@ -37,69 +38,177 @@ <h3 class="docs__figure"><a class="docs__anchor" aria-hidden="true" href="#compo
             <div class="fsa-grid">
               <div class="fsa-grid__1 fsa-grid__1/2@m">
                 <h4 class="docs__sub_style">Indeterminate</h4>
-                <p>
-                  <span class="fsa-progress fsa-progress--indeterminate">
-                    <span class="fsa-progress__bar">
-                      <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Page loading</span>
-                      <span class="fsa-progress__secondary"></span>
-                    </span>
+                <span class="fsa-progress fsa-progress--indeterminate">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Page loading</span>
+                    <span class="fsa-progress__secondary"></span>
                   </span>
-                </p>
+                </span>
               </div>
               <div class="fsa-grid__1 fsa-grid__1/2@m">
                 <h4 class="docs__sub_style">Indeterminate, with label</h4>
-                <p>
-                  <span class="fsa-progress fsa-progress--indeterminate">
-                    <span class="fsa-progress__bar">
-                      <span class="fsa-progress__primary"></span>
-                      <span class="fsa-progress__secondary"></span>
-                    </span>
-                    <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
-                      <span class="fsa-progress__label">Processing Claims</span>
-                    </span>
+                <span class="fsa-progress fsa-progress--indeterminate">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary"></span>
+                    <span class="fsa-progress__secondary"></span>
                   </span>
-                </p>
+                  <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
+                    <span class="fsa-progress__label">Processing Claims</span>
+                  </span>
+                </span>
               </div>
             </div>
             <div class="fsa-grid">
               <div class="fsa-grid__1 fsa-grid__1/2@m">
                 <h4 class="docs__sub_style">Determinate <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeSystemTrackLoop" data-target="showProgress">Start Progress Bar</button></h4>
-                <p>
-                  <span class="fsa-progress">
+                <span class="fsa-progress">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress" id="showProgress">0%</span>
+                    <span class="fsa-progress__secondary"></span>
+                  </span>
+                </span>
+              </div>
+              <div class="fsa-grid__1 fsa-grid__1/2@m">
+                <h4 class="docs__sub_style">Determinate, with label/value <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeSystemTrackLoop" data-target="showProgressWithLabel">Start Progress Bar</button></h4>
+                <span class="fsa-progress">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" id="showProgressWithLabel"></span>
+                    <span class="fsa-progress__secondary"></span>
+                  </span>
+                  <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
+                    <span class="fsa-progress__label">Soft Red Winter Wheat</span>
+                    <span class="fsa-progress__value">0%</span>
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div class="fsa-grid">
+              <div class="fsa-grid__1 fsa-grid__1/2@m">
+                <h4 class="docs__sub_style">Paired with Select, inline</h4>
+                <span class="fsa-progress-inline">
+                  <span class="fsa-progress fsa-progress--indeterminate">
                     <span class="fsa-progress__bar">
-                      <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress" id="showProgress">0%</span>
+                      <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading tracts</span>
                       <span class="fsa-progress__secondary"></span>
                     </span>
                   </span>
-                </p>
+                  <select name="" id="" class="fsa-select">
+                    <option>Farm 1234</option>
+                    <option>Farm 6789</option>
+                  </select>
+                </span>
               </div>
               <div class="fsa-grid__1 fsa-grid__1/2@m">
-                <h4 class="docs__sub_style">Determinate, with label/value <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeSystemTrackLoop" data-target="showProgressWithLabel">Start Progress Bar</button></h4>
-                <p>
-                  <span class="fsa-progress">
+                <h4 class="docs__sub_style">Paired with Select, block</h4>
+                <span class="fsa-progress fsa-progress--indeterminate">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading counties</span>
+                    <span class="fsa-progress__secondary"></span>
+                  </span>
+                </span>
+                <select name="" id="" class="fsa-select fsa-select--block">
+                  <option>California</option>
+                  <option>Kansas</option>
+                </select>
+              </div>
+              <div class="fsa-grid__1 fsa-grid__1/2@m">
+                <h4 class="docs__sub_style">Paired with Input, inline</h4>
+                <span class="fsa-progress-inline">
+                  <span class="fsa-progress fsa-progress--indeterminate">
                     <span class="fsa-progress__bar">
-                      <span class="fsa-progress__primary" id="showProgressWithLabel"></span>
+                      <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Calculating age</span>
                       <span class="fsa-progress__secondary"></span>
                     </span>
-                    <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
-                      <span class="fsa-progress__label">Soft Red Winter Wheat</span>
-                      <span class="fsa-progress__value">0%</span>
-                    </span>
                   </span>
-                </p>
+                  <input type="text" class="fsa-input" value="05/14/1975">
+                </span>
+              </div>
+              <div class="fsa-grid__1 fsa-grid__1/2@m">
+                <h4 class="docs__sub_style">Paired with Input, block</h4>
+                <span class="fsa-progress fsa-progress--indeterminate">
+                  <span class="fsa-progress__bar">
+                    <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading counties</span>
+                    <span class="fsa-progress__secondary"></span>
+                  </span>
+                </span>
+                <input class="fsa-input fsa-input--block" value="California">
               </div>
             </div>
-            <h4 class="docs__sub_style">Paired with Box</h4>
-            <h4 class="docs__sub_style">Paired with Select</h4>
-            <h4 class="docs__sub_style">Paired with Select, block</h4>
-            <h4 class="docs__sub_style">Paired with Input</h4>
-            <h4 class="docs__sub_style">Paired with Input, block</h4>
-            <h4 class="docs__sub_style">Paired with Text, inline</h4>
-            <h4 class="docs__sub_style">Paired with Text, block</h4>
-            <h4 class="docs__sub_style">Paired with Table</h4>
             <h4 class="docs__sub_style">Paired with Modal</h4>
-            <h4 class="docs__sub_style">Paired with Growl Notification, </h4>
+            <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" data-behavior="open-modal" aria-controls="UNIQUE-ID-yshtgj77" aria-expanded="false" type="button">Open a Modal</button></p>
             <h4 class="docs__sub_style">Paired with Growl Notification, modal-based</h4>
+            <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" data-behavior="growl-show whiteout-show" aria-controls="UNIQUE-ID-hsyys88UUUhn" aria-expanded="false" type="button">Show a Notification (Modal-based)</button></p>
+            <h4 class="docs__sub_style">Paired with Growl Notification, </h4>
+            <p><button class="fsa-btn fsa-btn--small fsa-btn--secondary" data-behavior="growl-show FAKE-GROWL-PROGRESS" aria-controls="UNIQUE-ID-gentle-notification_981" aria-expanded="false" type="button">Show a Notification</button></p>
+            <h4 class="docs__sub_style">
+              Paired with Table
+              <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small fsa-m-l--xs" data-behavior="fakeTableDone">Finish progress</button>
+              <button type="button" class="fsa-btn fsa-btn--secondary fsa-btn--small" data-behavior="fakeTableShow">Show progress</button>
+            </h4>
+            <span class="fsa-progress fsa-progress--indeterminate" id="tableProgress">
+              <span class="fsa-progress__bar">
+                <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading Commodities</span>
+                <span class="fsa-progress__secondary"></span>
+              </span>
+            </span>
+            <table class="fsa-table fsa-table--borderless fsa-m-t--none">
+              <thead>
+                <tr>
+                  <th scope="col"><button class="fsa-table__sort" type="button">Commodity</button></th>
+                  <th scope="col" class="fsa-text-align--right" aria-sort="ascending"><button class="fsa-table__sort fsa-table__sort--ascending" type="button">Loan Rate</button></th>
+                  <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">30-Day Period PCP</button></th>
+                  <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Alternative PCP</button></th>
+                  <th scope="col" class="fsa-text-align--right"><button class="fsa-table__sort" type="button">Effective LDP Rate</button></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Oats $/Bushel</td>
+                  <td class="fsa-text-align--right">1.43</td>
+                  <td class="fsa-text-align--right">2.97</td>
+                  <td class="fsa-text-align--right">1.92</td>
+                  <td class="fsa-text-align--right">0.00</td>
+                </tr>
+                <tr>
+                  <td>Barley $/Bushel</td>
+                  <td class="fsa-text-align--right">1.75</td>
+                  <td class="fsa-text-align--right">3.30</td>
+                  <td class="fsa-text-align--right">2.60</td>
+                  <td class="fsa-text-align--right">0.00</td>
+                </tr>
+                <tr>
+                  <td>Wheat - Soft Red Winter $/Bushel</td>
+                  <td class="fsa-text-align--right">2.42</td>
+                  <td class="fsa-text-align--right">4.49</td>
+                  <td class="fsa-text-align--right">4.19</td>
+                  <td class="fsa-text-align--right">0.00</td>
+                </tr>
+                <tr>
+                  <td>Canola $/Cwt.</td>
+                  <td class="fsa-text-align--right">8.94</td>
+                  <td class="fsa-text-align--right">15.99</td>
+                  <td class="fsa-text-align--right">15.89</td>
+                  <td class="fsa-text-align--right">0.00</td>
+                </tr>
+                <tr>
+                  <td>Flaxseed $/Cwt.</td>
+                  <td class="fsa-text-align--right">10.13</td>
+                  <td class="fsa-text-align--right">15.90</td>
+                  <td class="fsa-text-align--right">14.62</td>
+                  <td class="fsa-text-align--right">0.00</td>
+                </tr>
+              </tbody>
+            </table>
+            <h4 class="docs__sub_style">Paired with Box</h4>
+            <span class="fsa-progress fsa-progress--indeterminate">
+              <span class="fsa-progress__bar">
+                <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Processing claims</span>
+                <span class="fsa-progress__secondary"></span>
+              </span>
+            </span>
+            <div class="fsa-box">
+              Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga!
+            </div>
             <h4 class="docs__bd fsa-show@l">Paired with header</h4>
             <div class="docs__rwd-demo-block">
               <div class="docs__bd">
@@ -124,7 +233,74 @@ <h4 class="docs__bd fsa-show@l">Paired with header</h4>
       </section>
     </main>
 
-  <script src="js/fsa-style-docs.min.js"></script>
+  <div tabindex="0" id="UNIQUE-ID-yshtgj77" class="fsa-modal" role="dialog" aria-hidden="true">
+    <div class="fsa-modal__dialog">
+      <span class="fsa-progress fsa-progress--indeterminate">
+        <span class="fsa-progress__bar">
+          <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Loading stuff</span>
+          <span class="fsa-progress__secondary"></span>
+        </span>
+      </span>
+      <div class="fsa-modal__content">
+        <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
+        <h1 class="fsa-modal__title">[default title]</h1>
+        <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla?</p>
+        <ul>
+          <li><a href="">Fake Link</a></li>
+          <li><a href="">Fake Link</a></li>
+        </ul>
+        <p>Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis!</p>
+      </div>
+    </div>
+  </div>
+  <div class="fsa-growl-container fsa-growl-container--centered">
+    <div class="fsa-growl fsa-growl--warning fsa-growl--centered" id="UNIQUE-ID-hsyys88UUUhn" aria-hidden="true" tabindex="0" role="dialog">
+      <div class="fsa-growl__hd">
+        <h2 class="fsa-growl__title">Go get a frappacino</h2>
+      </div>
+      <div class="fsa-growl__bd">
+        <p>This might take a while. Sorry not sorry.</p>
+        <p>
+          <span class="fsa-progress fsa-progress--indeterminate">
+            <span class="fsa-progress__bar">
+              <span class="fsa-progress__primary"></span>
+              <span class="fsa-progress__secondary"></span>
+            </span>
+            <span class="fsa-progress__details" aria-live="polite" aria-label="Progress">
+              <span class="fsa-progress__label">Encrpyting...</span>
+              <span class="fsa-progress__value">About 20 min</span>
+            </span>
+          </span>
+        </p>
+        <p>
+          <button data-behavior="growl-dismiss whiteout-dismiss" class="fsa-btn fsa-btn--small fsa-btn--secondary" type="button">Cancel Encryption</button>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="fsa-growl-container">
+    <div class="fsa-growl fsa-growl--warning" id="UNIQUE-ID-gentle-notification_981" aria-hidden="true" tabindex="0" role="dialog">
+      <div class="fsa-growl__hd">
+      </div>
+      <div class="fsa-growl__bd fsa-p-r--none">
+        <div class="fsa-m-t--xs">
+          <span class="fsa-progress">
+            <span class="fsa-progress__bar">
+              <span class="fsa-progress__primary" style="transform:scaleX(.21);"></span>
+              <span class="fsa-progress__secondary"></span>
+            </span>
+            <span class="fsa-progress__details fsa-m-b--none" aria-live="polite" aria-label="Progress">
+              <span class="fsa-progress__label">Finding all the PII...</span>
+              <span class="fsa-progress__value">21%</span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+    <script src="js/fsa-style-docs.min.js"></script>
 
 </body>