Add inactive and info Icons.

ui_framework/components/icon/_icon.scss

@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale; /* 1 */
 }
 
+.kuiIcon--info {
+  color: $infoColor;
+}
+
 .kuiIcon--success {
   color: $successColor;
 }
@@ -22,3 +26,7 @@
 .kuiIcon--error {
   color: $errorColor;
 }
+
+.kuiIcon--inactive {
+  color: $inactiveColor;
+}

ui_framework/components/index.scss

@@ -31,6 +31,7 @@ $buttonBorderRadius: 4px;
 
 // Colors
 $infoColor: #3fa8c7;
+$inactiveColor: #c3c3c3;
 $successColor: #417505;
 $warningColor: #ec9800;
 $errorColor: #D86051;

ui_framework/doc_site/src/views/icon/icon_example.jsx

@@ -11,25 +11,39 @@ export default createExample([{
   ),
   html: require('./icon.html'),
   hasDarkTheme: false,
+}, {
+  title: 'Info',
+  description: (
+    <p>Use this Icon to denote useful information.</p>
+  ),
+  html: require('./icon_info.html'),
+  hasDarkTheme: false,
 }, {
   title: 'Success',
   description: (
-    <p>Use this Icon to convey the successful completion of an action, e.g. filling out a form field correctly or a successful API request.</p>
+    <p>Use this Icon to denote the successful completion of an action, e.g. filling out a form field correctly or a successful API request.</p>
   ),
   html: require('./icon_success.html'),
   hasDarkTheme: false,
 }, {
   title: 'Warning',
   description: (
-    <p>Use this Icon to convey an irregularity or potential problems.</p>
+    <p>Use this Icon to denote an irregularity or potential problems.</p>
   ),
   html: require('./icon_warning.html'),
   hasDarkTheme: false,
 }, {
   title: 'Error',
   description: (
-    <p>Use this Icon to convey a failed attempt at an action, e.g. an invalid form field or an API error.</p>
+    <p>Use this Icon to denote a failed attempt at an action, e.g. an invalid form field or an API error.</p>
   ),
   html: require('./icon_error.html'),
   hasDarkTheme: false,
-}]);
+}, {
+  title: 'Inactive',
+  description: (
+    <p>Use this Icon to denote a disabled, inactive, off, offline, or asleep status.</p>
+  ),
+  html: require('./icon_inactive.html'),
+  hasDarkTheme: false,
+}, ]);

ui_framework/doc_site/src/views/icon/icon_inactive.html

@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--inactive fa-circle-o"></div>

ui_framework/doc_site/src/views/icon/icon_info.html

@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--info fa-info"></div>

ui_framework/doc_site/src/views/typography/typography_example.jsx

@@ -7,14 +7,14 @@ import {
 export default createExample([{
   title: 'Title',
   description: (
-    <p>Works well with an H1.</p>
+    <p>Works well with an <code className="guideCode">h1</code>.</p>
   ),
   html: require('./title.html'),
   hasDarkTheme: false,
 }, {
   title: 'SubTitle',
   description: (
-    <p>Works well with an H2.</p>
+    <p>Works well with an <code className="guideCode">h2</code>.</p>
   ),
   html: require('./sub_title.html'),
   hasDarkTheme: false,