Skip to content

Commit

Permalink
Progress component on Kitchen Sink [amends #356]
Browse files Browse the repository at this point in the history
  • Loading branch information
Rupert authored and Rupert committed Sep 30, 2019
1 parent b174a22 commit e049877
Show file tree
Hide file tree
Showing 3 changed files with 509 additions and 45 deletions.
275 changes: 274 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
23 changes: 19 additions & 4 deletions src/js/components/fsa-progress.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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
Loading

0 comments on commit e049877

Please sign in to comment.