showing the pattern state for the selected pattern

Author: dmolsen

core/styleguide/css/states.css

@@ -1,3 +1,4 @@
+/* basic styling */
 .sg-pattern-state:before {
 	margin-right: 4px;
 	content: "\2022";
@@ -7,6 +8,7 @@
 	vertical-align: bottom;
 }
 
+/* nav styling */
 .sg-nav .sg-pattern-state:before {
 	margin-top: -4px;
 	margin-bottom: 0;
@@ -21,6 +23,17 @@
 	margin-right: 4px;
 }
 
+/* call out for pattern's pattern state */
+span.sg-pattern-state {
+	color: #999;
+}
+
+span.sg-pattern-state:before {
+	margin-bottom: -3px;
+	margin-left: 4px;
+}
+
+/* pattern states */
 .inprogress:before {
 	color: #FF4136 !important;
 }

core/templates/index.mustache

@@ -52,6 +52,11 @@
 			<div class="spinner"></div>
 			Loading pattern...
 		</div>
+		<div id="sg-code-patternstate" style="display: none;">
+			<p>
+				The state of the <span id="sg-code-patternstate-patternname" class="sg-code-patternname"></span> pattern is: <span id="sg-code-patternstate-fill"></span>
+			</p>
+		</div>
 		<div id="sg-code-lineage" style="display: none;">
 			<p>
 				The <span id="sg-code-lineager-patternname" class="sg-code-patternname"></span> pattern contains the following patterns: <span id="sg-code-lineage-fill"></span>

core/templates/pattern-header-footer/footer-pattern.html

@@ -3,7 +3,8 @@
 		// handle injection of items from PHP
 		var patternPartial = "{% patternPartial %}";
 		var lineage        = {% lineage %};
-		var lineageR       = {% lineager %};
+		var lineageR       = {% lineageR %};
+		var patternState   = "{% patternState %}";
 		var cssEnabled     = {% cssEnabled %};
 	</script>