@ulu/frontend 0.1.0-beta.104 → 0.1.0-beta.106

package/docs-dev/demos/{badge.1 → progress-bar}/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
-    Badge
+    Progress Bar
   </title>
   <meta name="description" content="Modular Sass Theming Library">
   <meta name="generator" content="Eleventy v3.0.0">
@@ -181,13 +181,13 @@
         </li>
       
 
-        <li class="nav-tree__item is-active is-active-trail ">
+        <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/badge.1/" aria-current="page">
+        <a class="nav-tree__link  " href="/frontend/demos/badge-stack/">
           
     
     <span class="nav-tree__text">
-      Badge
+      Badge Stack
     </span>
   
         </a>
@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -631,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item is-active is-active-trail ">
+          
+        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/progress-bar/" aria-current="page">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -706,6 +736,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -1380,6 +1425,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -1950,6 +2010,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -2907,13 +2982,13 @@
         </li>
       
 
-        <li class="nav-tree__item is-active is-active-trail ">
+        <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/badge.1/" aria-current="page">
+        <a class="nav-tree__link  " href="/frontend/demos/badge-stack/">
           
     
     <span class="nav-tree__text">
-      Badge
+      Badge Stack
     </span>
   
         </a>
@@ -2937,6 +3012,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -3357,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item is-active is-active-trail ">
+          
+        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/progress-bar/" aria-current="page">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3537,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/slider/">
@@ -4106,6 +4226,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -4676,6 +4811,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/skeleton/">
+          
+    
+    <span class="nav-tree__text">
+      Skeleton
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/skip-link/">
@@ -5522,20 +5672,7 @@
 </header>
 		
 			<div class="page__toc page-toc">
-				<h2>Jump To:</h2>
-<div class="toc">
-                <ol>
-                    
-                    <li><a href="#default-example">Default Example</a>
-            		</li>
-
-                    <li><a href="#sizes-test">Sizes Test</a>
-            		</li>
-
-                    <li><a href="#clickable">Clickable</a>
-            		</li>
-                </ol>
-            </div>
+				
 			</div>
 		
 		<main id="main" class="page__body">
@@ -5544,45 +5681,187 @@
 			
 			
   <div class="page__body-top container ">
-    <h1 class="page__title h1">Badge</h1>
+    <h1 class="page__title h1">Progress Bar</h1>
 
 
   <hr class="rule rule--light rule--margin-large">
 
-    <div class="wysiwyg">
-      <h2 id="default-example" tabindex="-1">Default Example</h2>
-<div class="badge">
-  <div class="badge__inner">
-    <span>ULU</span>
+    
+<h2 class="h2">Basic Example</h2>
+<p>The default progress bar has no modifiers.</p>
+<div class="progress-bar">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Label that is long test</strong>
+  </div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 40%;"></div>
+  </div>
+  <div class="progress-bar__values">
+    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
+      200</div>
+    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
+    </div>
   </div>
 </div>
-<h2 id="sizes-test" tabindex="-1">Sizes Test</h2>
-<div class="badge badge--small">
-  <div class="badge__inner">
-    <span>ULU</span>
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Indeterminate Modifier</h2>
+<p>Uses the <code>.progress-bar--indeterminate</code> modifier for an animated loading state when the progress is unknown.</p>
+<div class="progress-bar progress-bar--loader progress-bar--indeterminate">
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar"></div>
+  </div>
+</div>
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Loader Style</h2>
+<p>Uses the <code>.progress-bar--loader</code> modifier for a thin loading bar.</p>
+<div class="progress-bar progress-bar--loader">
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 65%;"></div>
+  </div>
+</div>
+
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Completed Example</h2>
+<p>An example of a completed progress bar with an icon.</p>
+<div class="progress-bar">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
+    <div class="progress-bar__icon">
+      <span class="fas fa-check" aria-hidden="true"></span>
+      <span class="hidden-visually">Item Completed</span>
+    </div>
+  </div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 100%;"></div>
+  </div>
+  <div class="progress-bar__values">
+    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
+      500</div>
+    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
+    </div>
+  </div>
+</div>
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Deficit Example</h2>
+<p>An example of a progress bar with a deficit.</p>
+<div class="progress-bar">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Progress</strong>
+    <div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
+  </div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 60%;"></div>
+    <div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
+  </div>
+  <div class="progress-bar__values">
+    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
+      300</div>
+    <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong class="hidden-visually">Deficit: </strong> -100</div>
+    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
+    </div>
+  </div>
+</div>
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Positive Style</h2>
+<p>Uses the <code>.progress-bar--positive</code> modifier.</p>
+<div class="progress-bar progress-bar--positive">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Positive</strong></div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 75%;"></div>
   </div>
 </div>
-<div class="badge">
-  <div class="badge__inner">
-    <span>ULU</span>
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Negative Style</h2>
+<p>Uses the <code>.progress-bar--negative</code> modifier.</p>
+<div class="progress-bar progress-bar--negative">
+  <div class="progress-bar__header"><strong class="progress-bar__label">Negative</strong></div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 30%;"></div>
   </div>
 </div>
-<div class="badge badge--large">
-  <div class="badge__inner">
-    <span>ULU</span>
+
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Small Modifier</h2>
+<p>Uses the <code>.progress-bar--small</code> modifier. Font sizing is controlled by the parent element.</p>
+<div class="progress-bar progress-bar--small progress-bar--positive type-small">
+  <div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
+    <div class="progress-bar__icon">
+      <span class="fas fa-check" aria-hidden="true"></span>
+      <span class="hidden-visually">Item Completed</span>
+    </div>
+  </div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 100%;"></div>
+  </div>
+  <div class="progress-bar__values">
+    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
+      500</div>
+    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
+    </div>
   </div>
 </div>
-<h2 id="clickable" tabindex="-1">Clickable</h2>
-<a href="#" class="badge badge--clickable">
-  <div class="badge__inner">
-    <img src="https://picsum.photos/id/64/300/300" alt="Jane Doe">
+
+<div class="progress-bar progress-bar--small progress-bar--deficit type-small">
+  <div class="progress-bar__header"><strong class="progress-bar__label type-normal">Progress</strong>
+    <div class="progress-bar__icon"><span class="fas fa-triangle-exclamation" aria-hidden="true"></span><span class="hidden-visually">Item Has Deficit</span></div>
+  </div>
+  <div class="progress-bar__track">
+    <div class="progress-bar__bar" style="width: 60%;"></div>
+    <div class="progress-bar__bar progress-bar__bar--deficit" style="width: 20%;"></div>
   </div>
-</a>
+  <div class="progress-bar__values">
+    <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
+      300</div>
+    <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong class="hidden-visually">Deficit: </strong> -100</div>
+    <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
+    </div>
+  </div>
+</div>
 
+<div class="rule rule--light"></div>
+
+<h2 class="h2">Icon left with rail</h2>
+<p>Combining with rail component for icon on left</p>
+
+<div class="progress-bar progress-bar--positive">
+  <div class="rail">
+    <div class="rail__item">
+      <div class="progress-bar__icon type-large">
+        <span class="fas fa-check" aria-hidden="true"></span>
+      </div>
+    </div>
+    <div class="rail__item flex-grow">
+      <div class="progress-bar__header">
+        <strong class="progress-bar__label">Progress</strong>
+      </div>
+      <div class="progress-bar__track">
+        <div class="progress-bar__bar" style="width: 100%;"></div>
+      </div>
+      <div class="progress-bar__values">
+        <div class="progress-bar__value progress-bar__value--amount"><strong class="hidden-visually">Amount:</strong>
+          300</div>
+        <div class="progress-bar__value progress-bar__value--deficit color-status is-danger"><strong class="hidden-visually">Deficit: </strong> -100</div>
+        <div class="progress-bar__value progress-bar__value--total"><strong class="hidden-visually">Total:</strong> 500
+      </div>
     </div>
+  </div>
+</div>
+
+
+
   </div>
 
-		</main>
+		</div></main>
 		<footer></footer>
 		
 

package/docs-dev/demos/pull-quote/index.html

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item is-active is-active-trail ">
           
         <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/pull-quote/" aria-current="page">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item is-active is-active-trail ">
           
         <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/pull-quote/" aria-current="page">

package/docs-dev/demos/rail/index.html

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">

package/docs-dev/demos/rule/index.html

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">

package/docs-dev/demos/scrollpoints/index.html

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">