Add info, success, and warning InfoPanels. Change background-color to white and use a colored border instead.

ui_framework/components/info_panel/_info_panel.scss

@@ -1,8 +1,56 @@
 .kuiInfoPanel {
-  padding: 20px;
+  padding: 14px 20px 18px;
   line-height: $lineHeight;
+  border: 2px solid;
+}
+
+.kuiInfoPanel--info {
+  border-color: rgba($infoColor, 0.25);
+}
+
+.kuiInfoPanel--success {
+  border-color: rgba($successColor, 0.25);
 }
 
 .kuiInfoPanel--warning {
-  background-color: #FFF6E4;
+  border-color: rgba($warningColor, 0.25);
 }
+
+.kuiInfoPanel--error {
+  border-color: rgba($errorColor, 0.25);
+}
+
+/**
+ * 1. Align with first line of title text if it wraps.
+ */
+.kuiInfoPanelHeader {
+  display: flex;
+  align-items: baseline; /* 1 */
+}
+
+  .kuiInfoPanelHeader__icon {
+    margin-right: 10px;
+    font-size: $fontSize;
+    line-height: $lineHeight;
+  }
+
+  .kuiInfoPanelHeader__title {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+    font-weight: 700;
+  }
+
+.kuiInfoPanelBody {
+  $infoPanelVerticalRhythm: 8px;
+
+  margin-top: $infoPanelVerticalRhythm;
+
+  > * + * {
+    margin-top: $infoPanelVerticalRhythm;
+  }
+}
+
+  .kuiInfoPanelBody__message {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+  }

ui_framework/dist/ui_framework.css

@@ -513,6 +513,9 @@ body {
   -moz-osx-font-smoothing: grayscale;
   /* 1 */ }
 
+.kuiIcon--info {
+  color: #3fa8c7; }
+
 .kuiIcon--success {
   color: #417505; }
 
@@ -522,12 +525,58 @@ body {
 .kuiIcon--error {
   color: #D86051; }
 
+.kuiIcon--inactive {
+  color: #c3c3c3; }
+
 .kuiInfoPanel {
-  padding: 20px;
-  line-height: 1.5; }
+  padding: 14px 20px 18px;
+  line-height: 1.5;
+  border: 2px solid; }
+
+.kuiInfoPanel--info {
+  border-color: rgba(63, 168, 199, 0.25); }
+
+.kuiInfoPanel--success {
+  border-color: rgba(65, 117, 5, 0.25); }
 
 .kuiInfoPanel--warning {
-  background-color: #FFF6E4; }
+  border-color: rgba(255, 172, 21, 0.25); }
+
+.kuiInfoPanel--error {
+  border-color: rgba(216, 96, 81, 0.25); }
+
+/**
+ * 1. Align with first line of title text if it wraps.
+ */
+.kuiInfoPanelHeader {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  /* 1 */ }
+
+.kuiInfoPanelHeader__icon {
+  margin-right: 10px;
+  font-size: 14px;
+  line-height: 1.5; }
+
+.kuiInfoPanelHeader__title {
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 700; }
+
+.kuiInfoPanelBody {
+  margin-top: 8px; }
+  .kuiInfoPanelBody > * + * {
+    margin-top: 8px; }
+
+.kuiInfoPanelBody__message {
+  font-size: 14px;
+  line-height: 1.5; }
 
 .kuiLink {
   color: #3CAED2;

ui_framework/doc_site/src/views/info_panel/info_panel.html

@@ -1,10 +0,0 @@
-<div class="kuiInfoPanel kuiInfoPanel--warning">
-  <p>
-    <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
-    <strong>Proceed with caution!</strong>
-  </p>
-
-  <p>
-    Here be dragons. Don&rsquo;t wanna mess with no dragons.
-  </p>
-</div>

ui_framework/doc_site/src/views/info_panel/info_panel_error.html

@@ -0,0 +1,14 @@
+<div class="kuiInfoPanel kuiInfoPanel--error">
+  <div class="kuiInfoPanelHeader">
+    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
+    <span class="kuiInfoPanelHeader__title">
+      Sorry, there was an error.
+    </span>
+  </div>
+
+  <div class="kuiInfoPanelBody">
+    <div class="kuiInfoPanelBody__message">
+      Now you have to fix it, but maybe <a href="#" class="kuiLink">this link can help</a>.
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx

@@ -5,10 +5,31 @@ import {
 } from '../../services';
 
 export default createExample([{
+  title: 'Info',
+  description: (
+    <p>Use this InfoPanel to generally inform the user.</p>
+  ),
+  html: require('./info_panel_info.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Success',
+  description: (
+    <p>Use this InfoPanel to notify the user of an action successfully completing.</p>
+  ),
+  html: require('./info_panel_success.html'),
+  hasDarkTheme: false,
+}, {
   title: 'Warning',
   description: (
     <p>Use this InfoPanel to warn the user against decisions they might regret.</p>
   ),
-  html: require('./info_panel.html'),
+  html: require('./info_panel_warning.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Error',
+  description: (
+    <p>Use this InfoPanel to let the user know something went wrong.</p>
+  ),
+  html: require('./info_panel_error.html'),
   hasDarkTheme: false,
 }]);

ui_framework/doc_site/src/views/info_panel/info_panel_info.html

@@ -0,0 +1,18 @@
+<div class="kuiInfoPanel kuiInfoPanel--info">
+  <div class="kuiInfoPanelHeader">
+    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--info fa-info"></span>
+    <span class="kuiInfoPanelHeader__title">
+      Check it out.
+    </span>
+  </div>
+
+  <div class="kuiInfoPanelBody">
+    <div class="kuiInfoPanelBody__message">
+      Here&rsquo;s some stuff that you need to know.
+    </div>
+
+    <div class="kuiInfoPanelBody__message">
+      And some other stuff on another line, just for kicks.
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/info_panel/info_panel_success.html

@@ -0,0 +1,14 @@
+<div class="kuiInfoPanel kuiInfoPanel--success">
+  <div class="kuiInfoPanelHeader">
+    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--success fa-check"></span>
+    <span class="kuiInfoPanelHeader__title">
+      Good news, everyone!
+    </span>
+  </div>
+
+  <div class="kuiInfoPanelBody">
+    <div class="kuiInfoPanelBody__message">
+      I have no news. Which is good!
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/info_panel/info_panel_warning.html

@@ -0,0 +1,14 @@
+<div class="kuiInfoPanel kuiInfoPanel--warning">
+  <div class="kuiInfoPanelHeader">
+    <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
+    <span class="kuiInfoPanelHeader__title">
+      Proceed with caution!
+    </span>
+  </div>
+
+  <div class="kuiInfoPanelBody">
+    <div class="kuiInfoPanelBody__message">
+      Here be dragons. Don&rsquo;t wanna mess with no dragons.
+    </div>
+  </div>
+</div>