From e6c78f6d8b1cd22cfcf05e018b3909a3a8a47efe Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 22 Aug 2017 10:09:01 -0700
Subject: [PATCH] [Frontend] Style Guide updates for status classes

Fixes #1677
WIP, needs regression unit testing
---
 example/styleguide/res/templates/status.html | 31 +++++++++++++-------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/example/styleguide/res/templates/status.html b/example/styleguide/res/templates/status.html
index e70dbb97a9..d692c11b70 100644
--- a/example/styleguide/res/templates/status.html
+++ b/example/styleguide/res/templates/status.html
@@ -80,18 +80,29 @@
             <div class="col">
                 <p>Classes here can be applied to elements as needed.</p>
                 <ul>
-                    <li><code>s-status-warning-hi</code>: Nuke the entire site from orbit - it's the only way to be sure.</li>
-                    <li><code>s-status-warning-lo</code>: Pay attention to this.</li>
-                    <li><code>s-status-diagnostic</code>: Something in the code wants to talk to you.</li>
-                    <li><code>s-status-info</code>: What?! What?! Oh, ok.</li>
-                    <li><code>s-status-ok</code>: Whew! Hand me a beer would'ya?</li>
+                    <li><code>s-status-warning-hi</code></li>
+                    <li><code>s-status-warning-lo</code></li>
+                    <li><code>s-status-diagnostic</code></li>
+                    <li><code>s-status-info</code></li>
+                    <li><code>s-status-ok</code></li>
+                    <li><code>s-status-warning-hi-icon</code></li>
+                    <li><code>s-status-warning-lo-icon</code></li>
+                    <li><code>s-status-diagnostic-icon</code></li>
+                    <li><code>s-status-info-icon</code></li>
+                    <li><code>s-status-ok-icon</code></li>
                 </ul>
             </div>
-<mct-example><div class="s-status-warning-hi-icon">WARNING HI</div>
-<div class="s-status-warning-lo-icon">WARNING LOW</div>
-<div class="s-status-diagnostic-icon">DIAGNOSTIC</div>
-<div class="s-status-info-icon">INFO</div>
-<div class="s-status-ok-icon">OK</div>
+<mct-example><div class="s-status-warning-hi">WARNING HI</div>
+<div class="s-status-warning-lo">WARNING LOW</div>
+<div class="s-status-diagnostic">DIAGNOSTIC</div>
+<div class="s-status-info">INFO</div>
+<div class="s-status-ok">OK</div>
+<div class="s-status-warning-hi-icon">WARNING HI with icon</div>
+<div class="s-status-warning-lo-icon">WARNING LOW with icon</div>
+<div class="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
+<div class="s-status-info-icon">INFO with icon</div>
+<div class="s-status-ok-icon">OK with icon</div>
+    <div class="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
 </mct-example>
         </div>
     </div>