feat(hint-block): Add hint-block css, test page, and regression test. (#1156)

Author: jeff-phillips-18

backstop/config/scenarios/hint-block.js

@@ -0,0 +1,6 @@
+module.exports = [{
+  removeSelectors: ['.page-header + .alert'],
+  label: 'hint-block',
+  url: 'dist/tests/hint-block.html',
+  disabled: false
+}]

backstop_data/bitmaps_reference/backstop_default_hint-block_0_document_0_large-device.png

@@ -0,0 +1,19 @@
+.hint-block-pf {
+  background-color: @color-pf-blue-50;
+  color: @color-pf-blue-600;
+  padding: 10px 15px 15px;
+  .hint-block-pf-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 10px;
+  }
+  .hint-block-pf-body {
+    font-size: 13px;
+    font-weight: 300;
+    line-height: 1.4;
+  }
+  > .btn {
+    margin-top: 30px;
+  }
+}

src/less/hint-block.less

@@ -49,6 +49,7 @@
 @import "experimental-features.less";
 @import "filter.less";
 @import "footer.less";
+@import "hint-block.less";
 @import "icons.less";
 @import "infotip.less";
 @import "layouts.less";

src/less/patternfly-additions.less

@@ -0,0 +1,19 @@
+.hint-block-pf {
+  background-color: $color-pf-blue-50;
+  color: $color-pf-blue-600;
+  padding: 10px 15px 15px;
+  .hint-block-pf-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 10px;
+  }
+  .hint-block-pf-body {
+    font-size: 13px;
+    font-weight: 300;
+    line-height: 1.4;
+  }
+  > .btn {
+    margin-top: 30px;
+  }
+}

src/sass/converted/patternfly/_hint-block.scss

@@ -0,0 +1,19 @@
+.hint-block-pf {
+  background-color: $color-pf-blue-50;
+  color: $color-pf-blue-600;
+  padding: 10px 15px 15px;
+  .hint-block-pf-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 10px;
+  }
+  .hint-block-pf-body {
+    font-size: 13px;
+    font-weight: 300;
+    line-height: 1.4;
+  }
+  > .btn {
+    margin-top: 30px;
+  }
+}

src/sass/converted/rcue/_hint-block.scss

@@ -49,6 +49,7 @@
 @import 'experimental-features';
 @import 'filter';
 @import 'footer';
+@import 'hint-block';
 @import 'icons';
 @import 'infotip';
 @import 'layouts';

src/sass/converted/rcue/_patternfly-additions.scss

@@ -122,6 +122,7 @@
 @import 'patternfly/filter';
 @import 'patternfly/footer';
 @import 'patternfly/icons';
+@import 'patternfly/hint-block';
 @import 'patternfly/infotip';
 @import 'patternfly/layouts';
 @import 'patternfly/links';

src/sass/static/_patternfly.scss

@@ -0,0 +1,18 @@
+---
+categories: [Widgets]
+layout: page
+title: Hint Block
+resource: true
+---
+<div class="hint-block-pf">
+  <button type="button" class="close" aria-hidden="true" aria-label="Close">
+    <span class="pficon pficon-close"></span>
+  </button>
+  <div class="hint-block-pf-title">Some Title</div>
+  <div class="hint-block-pf-body">
+    Something introductory. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature.
+  </div>
+  <button class="btn btn-primary" type="button">
+    Optional Action
+  </button>
+</div>