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

patternfly · Nov 14, 2018 · ef286df · ef286df
1 parent be57e8f
commit ef286df
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 0 deletions.
diff --git a/backstop/config/scenarios/hint-block.js b/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
+}]
diff --git a/...ata/bitmaps_reference/backstop_default_hint-block_0_document_0_large-device.png b/...ata/bitmaps_reference/backstop_default_hint-block_0_document_0_large-device.png
diff --git a/src/less/hint-block.less b/src/less/hint-block.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;
+  }
+}
diff --git a/src/less/patternfly-additions.less b/src/less/patternfly-additions.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";

diff --git a/src/sass/converted/patternfly/_hint-block.scss b/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;
+  }
+}
diff --git a/src/sass/converted/rcue/_hint-block.scss b/src/sass/converted/rcue/_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;
+  }
+}
diff --git a/src/sass/converted/rcue/_patternfly-additions.scss b/src/sass/converted/rcue/_patternfly-additions.scss
@@ -49,6 +49,7 @@
 @import 'experimental-features';
 @import 'filter';
 @import 'footer';
+@import 'hint-block';
 @import 'icons';
 @import 'infotip';
 @import 'layouts';

diff --git a/src/sass/static/_patternfly.scss b/src/sass/static/_patternfly.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';

diff --git a/tests/pages/hint-block.html b/tests/pages/hint-block.html
@@ -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>