From 8bc46327c36ae806d1a8fb49c35618299c3eaaa6 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 20 Dec 2016 13:03:15 +0200
Subject: [PATCH] Progress module quick reference

---
 docs/progress.html        |  4 ++--
 docs/quick_reference.html | 17 +++++++++++++----
 docs/v2/DEVLOG.md         |  1 +
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/progress.html b/docs/progress.html
index abec952..9cd76e1 100644
--- a/docs/progress.html
+++ b/docs/progress.html
@@ -131,7 +131,7 @@
                 <progress value="1000" max="1000"></progress>
               </div>
               <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
-                <p>To create a progress bar, use the <code>&lt;progress&gt;</code> HTML element, specify the preset maximum of <code>max="1000"</code> and set a <code>value</code> between <code>0</code> and <code>1000</code>. Update your <code>&lt;progress&gt;</code> element using some Javascript code, by changing its <code>value</code> to any integer in the same range.</p>
+                <p>To create a progress bar, use the <code>&lt;progress&gt;</code> HTML element, specify the preset maximum of <code><span class="fore-secondary">max</span>=<span class="fore-primary">&quot;1000&quot;</span></code> and set a <code>value</code> between <code>0</code> and <code>1000</code>. Update your <code>&lt;progress&gt;</code> element using some Javascript code, by changing its <code>value</code> to any integer in the same range.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;progress value=&quot;0&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 &lt;progress value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
@@ -195,7 +195,7 @@
                   <pre>&lt;progress class=&quot;nano secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
 <span class="fore-tertiary">&lt;!-- or --&gt;</span>
 &lt;progress class=&quot;inline tertiary&quot; value=&quot;650&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</pre>
-                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can mix size and color classes for <codde>&lt;progress&gt;</codde> elements as needed.</p>
+                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can mix size and color classes for <code>&lt;progress&gt;</code> elements as needed.</p>
                 </div>
                 <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
                   <pre>&lt;progress class=&quot;secondary teriary&quot; value=&quot;450&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index 7e1bffa..564d52a 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -1002,7 +1002,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use the <code>&lt;progress&gt;</code> element to create progress bars</li>
+                  <li>Set <code><span class="fore-secondary">max</span>=<span class="fore-primary">&quot;1000&quot;</span></code> and a <code>value</code> between <code>0</code> and <code>1000</code></li>
+                  <li>Do not use floating point values for the progress bar</li>
                 </ul>
               </div>
             </div>
@@ -1017,7 +1019,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
+                  <li>Size variants available using the <code>.nano</code> and <code>.inline</code> classes</li>
+                  <li>Mix color and size variants, but not multiple of the same type</li>
                 </ul>
               </div>
             </div>
@@ -1029,7 +1033,10 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use the <code>.spinner-donut</code> class to create donut spinners</li>
+                  <li>Apply class to a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element</li>
+                  <li>Do not insert text inside the <code>.spinner-donut</code> element</li>
+                  <li>Donut spinners can display inline</li>
                 </ul>
               </div>
             </div>
@@ -1043,7 +1050,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
+                  <li>Alternate size available using the <code>.large</code> class</li>
+                  <li>You can mix color variants with the <code>.large</code> class, but not with each other</li>
                 </ul>
               </div>
             </div>
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 22cd05d..ea10791 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -687,3 +687,4 @@
 - Documented `card` in `quick reference`.
 - Documented `tab` in `quick reference`.
 - Documented `contextual` in `quick reference`.
+- Documented `progress` in `quick reference`.