@ulu/frontend 0.1.0-beta.105 → 0.1.0-beta.107

package/docs-dev/demos/{badge.1 → donut-chart}/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
-    Badge
+    Donut Chart
   </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/">
@@ -406,6 +421,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/donut-chart/" aria-current="page">
+          
+    
+    <span class="nav-tree__text">
+      Donut Chart
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/file-save/">
@@ -631,6 +661,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/">
@@ -706,6 +751,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 +1440,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/">
@@ -1875,6 +1950,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -1950,6 +2040,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 +3012,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 +3042,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/">
@@ -3132,6 +3252,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/donut-chart/" aria-current="page">
+          
+    
+    <span class="nav-tree__text">
+      Donut Chart
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/file-save/">
@@ -3357,6 +3492,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 +3582,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 +4271,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/">
@@ -4601,6 +4781,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -4676,6 +4871,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 +5732,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,42 +5741,124 @@
 			
 			
   <div class="page__body-top container ">
-    <h1 class="page__title h1">Badge</h1>
+    <h1 class="page__title h1">Donut Chart</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>
-  </div>
-</div>
-<h2 id="sizes-test" tabindex="-1">Sizes Test</h2>
-<div class="badge badge--small">
-  <div class="badge__inner">
-    <span>ULU</span>
-  </div>
-</div>
-<div class="badge">
-  <div class="badge__inner">
-    <span>ULU</span>
-  </div>
-</div>
-<div class="badge badge--large">
-  <div class="badge__inner">
-    <span>ULU</span>
-  </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>
-</a>
+    
+<h2 class="h2">Basic Example</h2>
+<p>The default appearance of the donut chart.</p>
+
+    <div class="progress-donut progress-donut--status-incomplete">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 65 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="11" cx="16" cy="16"></circle>
+        </svg>
+        <strong class="progress-donut__chart-value">65%</strong>
+      </div>
+      
+    </div>
+  
+
+<h2 class="h2">Small</h2>
+<p>A smaller version of the chart where the value is displayed to the side.</p>
 
+    <div class="progress-donut progress-donut--small progress-donut--status-incomplete">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 65 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="7" cx="16" cy="16"></circle>
+        </svg>
+        
+      </div>
+      <strong class="progress-donut__value type-small-x">65%</strong>
+    </div>
+  
+
+<h2 class="h2">Small Below</h2>
+<p>A smaller version of the chart where the value is displayed below the chart.</p>
+
+    <div class="progress-donut progress-donut--small progress-donut--small-below progress-donut--status-incomplete">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 65 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="7" cx="16" cy="16"></circle>
+        </svg>
+        
+      </div>
+      <strong class="progress-donut__value type-small-x">65%</strong>
     </div>
+  
+
+<h2 class="h2">Neutral Color</h2>
+<p>The chart can be displayed in a neutral color scheme.</p>
+
+    <div class="progress-donut">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 65 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="11" cx="16" cy="16"></circle>
+        </svg>
+        <strong class="progress-donut__chart-value">65%</strong>
+      </div>
+      
+    </div>
+  
+
+<h2 class="h2">Status Colors</h2>
+<p>The chart color will change based on the percentage value to indicate status (low, incomplete, complete).</p>
+
+<h3>Low (less than 30%)</h3>
+
+    <div class="progress-donut progress-donut--status-low">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 25 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="11" cx="16" cy="16"></circle>
+        </svg>
+        <strong class="progress-donut__chart-value">25%</strong>
+      </div>
+      
+    </div>
+  
+
+<h3>Incomplete (between 30% and 99%)</h3>
+
+    <div class="progress-donut progress-donut--status-incomplete">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 75 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="11" cx="16" cy="16"></circle>
+        </svg>
+        <strong class="progress-donut__chart-value">75%</strong>
+      </div>
+      
+    </div>
+  
+
+<h3>Complete (100%)</h3>
+
+    <div class="progress-donut progress-donut--status-complete">
+      <strong class="hidden-visually">Course Progress</strong>
+      <div class="progress-donut__chart">
+        <svg class="progress-donut__chart-svg" viewBox="0 0 32 32">
+          <circle class="progress-donut__chart-pie" r="16" cx="16" cy="16" style="stroke-dasharray: 101 100;"></circle>
+          <circle class="progress-donut__chart-mask" r="11" cx="16" cy="16"></circle>
+        </svg>
+        <strong class="progress-donut__chart-value">100%</strong>
+      </div>
+      
+    </div>
+  
+
   </div>
 
 		</main>

package/docs-dev/demos/file-save/index.html

@@ -646,6 +646,36 @@
         </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/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -1920,6 +1950,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">
@@ -3432,6 +3477,36 @@
         </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/progress-circle/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Circle
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -4706,6 +4781,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress-bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/pull-quote/">