From 3b740cb57eee262f1835146c1cd16fedf00237a1 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Wed, 7 Nov 2018 09:56:26 -0500
Subject: [PATCH] feat(loading-state): Add the loading-state component

---
 backstop/config/scenarios/loading-state.js    |   6 ++++
 ...oading-state_0_document_0_large-device.png | Bin 0 -> 18852 bytes
 src/less/loading-state.less                   |  25 ++++++++++++++
 src/less/patternfly-additions.less            |   1 +
 src/less/spinner.less                         |  16 ++++-----
 src/less/variables.less                       |   4 +++
 .../converted/patternfly/_loading-state.scss  |  25 ++++++++++++++
 src/sass/converted/patternfly/_spinner.scss   |  16 ++++-----
 src/sass/converted/patternfly/_variables.scss |   4 +++
 src/sass/converted/rcue/_loading-state.scss   |  25 ++++++++++++++
 .../converted/rcue/_patternfly-additions.scss |   1 +
 src/sass/converted/rcue/_spinner.scss         |  16 ++++-----
 src/sass/converted/rcue/_variables.scss       |   4 +++
 tests/pages/loading-state.html                |  32 ++++++++++++++++++
 14 files changed, 151 insertions(+), 24 deletions(-)
 create mode 100644 backstop/config/scenarios/loading-state.js
 create mode 100644 backstop_data/bitmaps_reference/backstop_default_loading-state_0_document_0_large-device.png
 create mode 100644 src/less/loading-state.less
 create mode 100644 src/sass/converted/patternfly/_loading-state.scss
 create mode 100644 src/sass/converted/rcue/_loading-state.scss
 create mode 100644 tests/pages/loading-state.html

diff --git a/backstop/config/scenarios/loading-state.js b/backstop/config/scenarios/loading-state.js
new file mode 100644
index 0000000000..0936fc906c
--- /dev/null
+++ b/backstop/config/scenarios/loading-state.js
@@ -0,0 +1,6 @@
+module.exports = [{
+  removeSelectors: ['.page-header + .alert'],
+  label: 'loading-state',
+  url: 'dist/tests/loading-state.html',
+  disabled: false
+}]
diff --git a/backstop_data/bitmaps_reference/backstop_default_loading-state_0_document_0_large-device.png b/backstop_data/bitmaps_reference/backstop_default_loading-state_0_document_0_large-device.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9850b12e1c8d83cc1b5868f29c80d081271d115
GIT binary patch
literal 18852
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
b5^VAA(U(@^f3!e(1a-pw=hC12fBWA6Qe2|=

literal 0
HcmV?d00001

diff --git a/src/less/loading-state.less b/src/less/loading-state.less
new file mode 100644
index 0000000000..a1a4eef5f5
--- /dev/null
+++ b/src/less/loading-state.less
@@ -0,0 +1,25 @@
+.loading-state-pf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: (@spinner-size * .5);
+  height: 100%;
+
+  &:before {
+    content: "";
+    height: 25%;
+    display: block;
+  }
+
+  &.loading-state-pf-lg {
+    font-size: (@spinner-size-lg * .5);
+  }
+
+  &.loading-state-pf-sm {
+    font-size: (@spinner-size-sm * .5);
+  }
+
+  &.loading-state-pf-xs {
+    font-size: (@spinner-size-xs * .5);
+  }
+}
diff --git a/src/less/patternfly-additions.less b/src/less/patternfly-additions.less
index 6913971336..68179220ac 100644
--- a/src/less/patternfly-additions.less
+++ b/src/less/patternfly-additions.less
@@ -52,6 +52,7 @@
 @import "icons.less";
 @import "infotip.less";
 @import "layouts.less";
+@import "loading-state.less";
 @import "links.less";
 @import "list-pf.less";
 @import "list-view.less";
diff --git a/src/less/spinner.less b/src/less/spinner.less
index cb3b182ad0..64a7069f83 100644
--- a/src/less/spinner.less
+++ b/src/less/spinner.less
@@ -14,28 +14,28 @@
   border-right: 4px solid fade(@color-pf-black, 25%);
   border-radius: 100%;
   border-top: 4px solid fade(@color-pf-black, 75%);
-  height: (@font-size-base * 2);
+  height: @spinner-size;
   margin: 0 auto;
   position: relative;
-  width: (@font-size-base * 2);
+  width: @spinner-size;
   &.spinner-inline {
     display: inline-block;
     margin-right: 3px;
   }
   &.spinner-lg {
     border-width: 5px;
-    height: (@font-size-base * 2.5);
-    width: (@font-size-base * 2.5);
+    height: @spinner-size-lg;
+    width: @spinner-size-lg;
   }
   &.spinner-sm {
     border-width: 3px;
-    height: (@font-size-base * 1.5);
-    width: (@font-size-base * 1.5);
+    height: @spinner-size-sm;
+    width: @spinner-size-sm;
   }
   &.spinner-xs {
     border-width: 2px;
-    height: @font-size-base;
-    width: @font-size-base;
+    height: @spinner-size-xs;
+    width: @spinner-size-xs;
   }
   &.spinner-inverse {
     border-bottom-color: fade(@color-pf-white, 25%);
diff --git a/src/less/variables.less b/src/less/variables.less
index 0166e2d0d5..f136f64739 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -567,6 +567,10 @@
 @panel-success-heading-bg:                                          @brand-success;
 @panel-warning-border:                                              @brand-warning;
 @panel-warning-heading-bg:                                          @brand-warning;
+@spinner-size:                                                      (@font-size-base * 2);
+@spinner-size-lg:                                                   (@font-size-base * 2.5);
+@spinner-size-sm:                                                   (@font-size-base * 1.5);
+@spinner-size-xs:                                                   @font-size-base;
 @state-warning-text:                                                @brand-warning;
 @state-danger-text:                                                 @brand-danger;
 // Reference variable declared in block above
diff --git a/src/sass/converted/patternfly/_loading-state.scss b/src/sass/converted/patternfly/_loading-state.scss
new file mode 100644
index 0000000000..e0580cd811
--- /dev/null
+++ b/src/sass/converted/patternfly/_loading-state.scss
@@ -0,0 +1,25 @@
+.loading-state-pf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: ($spinner-size * .5);
+  height: 100%;
+
+  &:before {
+    content: "";
+    height: 25%;
+    display: block;
+  }
+
+  &.loading-state-pf-lg {
+    font-size: ($spinner-size-lg * .5);
+  }
+
+  &.loading-state-pf-sm {
+    font-size: ($spinner-size-sm * .5);
+  }
+
+  &.loading-state-pf-xs {
+    font-size: ($spinner-size-xs * .5);
+  }
+}
diff --git a/src/sass/converted/patternfly/_spinner.scss b/src/sass/converted/patternfly/_spinner.scss
index 7c3115f847..ebe44426d1 100644
--- a/src/sass/converted/patternfly/_spinner.scss
+++ b/src/sass/converted/patternfly/_spinner.scss
@@ -14,28 +14,28 @@
   border-right: 4px solid rgba($color-pf-black, (25/100));
   border-radius: 100%;
   border-top: 4px solid rgba($color-pf-black, (75/100));
-  height: ($font-size-base * 2);
+  height: $spinner-size;
   margin: 0 auto;
   position: relative;
-  width: ($font-size-base * 2);
+  width: $spinner-size;
   &.spinner-inline {
     display: inline-block;
     margin-right: 3px;
   }
   &.spinner-lg {
     border-width: 5px;
-    height: ($font-size-base * 2.5);
-    width: ($font-size-base * 2.5);
+    height: $spinner-size-lg;
+    width: $spinner-size-lg;
   }
   &.spinner-sm {
     border-width: 3px;
-    height: ($font-size-base * 1.5);
-    width: ($font-size-base * 1.5);
+    height: $spinner-size-sm;
+    width: $spinner-size-sm;
   }
   &.spinner-xs {
     border-width: 2px;
-    height: $font-size-base;
-    width: $font-size-base;
+    height: $spinner-size-xs;
+    width: $spinner-size-xs;
   }
   &.spinner-inverse {
     border-bottom-color: rgba($color-pf-white, (25/100));
diff --git a/src/sass/converted/patternfly/_variables.scss b/src/sass/converted/patternfly/_variables.scss
index abb2479125..5d326864e8 100644
--- a/src/sass/converted/patternfly/_variables.scss
+++ b/src/sass/converted/patternfly/_variables.scss
@@ -567,6 +567,10 @@ $panel-success-border:                                              $brand-succe
 $panel-success-heading-bg:                                          $brand-success !default;
 $panel-warning-border:                                              $brand-warning !default;
 $panel-warning-heading-bg:                                          $brand-warning !default;
+$spinner-size:                                                      ($font-size-base * 2) !default;
+$spinner-size-lg:                                                   ($font-size-base * 2.5) !default;
+$spinner-size-sm:                                                   ($font-size-base * 1.5) !default;
+$spinner-size-xs:                                                   $font-size-base !default;
 $state-warning-text:                                                $brand-warning !default;
 $state-danger-text:                                                 $brand-danger !default;
 // Reference variable declared in block above
diff --git a/src/sass/converted/rcue/_loading-state.scss b/src/sass/converted/rcue/_loading-state.scss
new file mode 100644
index 0000000000..e0580cd811
--- /dev/null
+++ b/src/sass/converted/rcue/_loading-state.scss
@@ -0,0 +1,25 @@
+.loading-state-pf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: ($spinner-size * .5);
+  height: 100%;
+
+  &:before {
+    content: "";
+    height: 25%;
+    display: block;
+  }
+
+  &.loading-state-pf-lg {
+    font-size: ($spinner-size-lg * .5);
+  }
+
+  &.loading-state-pf-sm {
+    font-size: ($spinner-size-sm * .5);
+  }
+
+  &.loading-state-pf-xs {
+    font-size: ($spinner-size-xs * .5);
+  }
+}
diff --git a/src/sass/converted/rcue/_patternfly-additions.scss b/src/sass/converted/rcue/_patternfly-additions.scss
index 86afa616f9..ef71431e5c 100644
--- a/src/sass/converted/rcue/_patternfly-additions.scss
+++ b/src/sass/converted/rcue/_patternfly-additions.scss
@@ -52,6 +52,7 @@
 @import 'icons';
 @import 'infotip';
 @import 'layouts';
+@import 'loading-state';
 @import 'links';
 @import 'list-pf';
 @import 'list-view';
diff --git a/src/sass/converted/rcue/_spinner.scss b/src/sass/converted/rcue/_spinner.scss
index 7c3115f847..ebe44426d1 100644
--- a/src/sass/converted/rcue/_spinner.scss
+++ b/src/sass/converted/rcue/_spinner.scss
@@ -14,28 +14,28 @@
   border-right: 4px solid rgba($color-pf-black, (25/100));
   border-radius: 100%;
   border-top: 4px solid rgba($color-pf-black, (75/100));
-  height: ($font-size-base * 2);
+  height: $spinner-size;
   margin: 0 auto;
   position: relative;
-  width: ($font-size-base * 2);
+  width: $spinner-size;
   &.spinner-inline {
     display: inline-block;
     margin-right: 3px;
   }
   &.spinner-lg {
     border-width: 5px;
-    height: ($font-size-base * 2.5);
-    width: ($font-size-base * 2.5);
+    height: $spinner-size-lg;
+    width: $spinner-size-lg;
   }
   &.spinner-sm {
     border-width: 3px;
-    height: ($font-size-base * 1.5);
-    width: ($font-size-base * 1.5);
+    height: $spinner-size-sm;
+    width: $spinner-size-sm;
   }
   &.spinner-xs {
     border-width: 2px;
-    height: $font-size-base;
-    width: $font-size-base;
+    height: $spinner-size-xs;
+    width: $spinner-size-xs;
   }
   &.spinner-inverse {
     border-bottom-color: rgba($color-pf-white, (25/100));
diff --git a/src/sass/converted/rcue/_variables.scss b/src/sass/converted/rcue/_variables.scss
index abb2479125..5d326864e8 100644
--- a/src/sass/converted/rcue/_variables.scss
+++ b/src/sass/converted/rcue/_variables.scss
@@ -567,6 +567,10 @@ $panel-success-border:                                              $brand-succe
 $panel-success-heading-bg:                                          $brand-success !default;
 $panel-warning-border:                                              $brand-warning !default;
 $panel-warning-heading-bg:                                          $brand-warning !default;
+$spinner-size:                                                      ($font-size-base * 2) !default;
+$spinner-size-lg:                                                   ($font-size-base * 2.5) !default;
+$spinner-size-sm:                                                   ($font-size-base * 1.5) !default;
+$spinner-size-xs:                                                   $font-size-base !default;
 $state-warning-text:                                                $brand-warning !default;
 $state-danger-text:                                                 $brand-danger !default;
 // Reference variable declared in block above
diff --git a/tests/pages/loading-state.html b/tests/pages/loading-state.html
new file mode 100644
index 0000000000..95c0f54b13
--- /dev/null
+++ b/tests/pages/loading-state.html
@@ -0,0 +1,32 @@
+---
+categories: [Widgets]
+layout: page
+title: Loading State
+resource: true
+---
+<div style="width: 350px;">
+  <div style="height: 150px;">
+    <div class="loading-state-pf">
+      <span class="spinner" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+  <div style="height: 150px;">
+    <div class="loading-state-pf loading-state-pf-lg">
+      <span class="spinner spinner-lg" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+  <div style="height: 150px;">
+    <div class="loading-state-pf">
+      <span class="spinner spinner-sm" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+  <div style="height: 150px;">
+    <div class="loading-state-pf">
+      <span class="spinner spinner-xs" aria-hidden="true"></span>
+      Loading
+    </div>
+  </div>
+</div>