#411 implement busy indicator (#412)

SAP · Nov 8, 2019 · bfa68b0 · bfa68b0
1 parent 79c4f4a
commit bfa68b0
Show file tree

Hide file tree

Showing 15 changed files with 251 additions and 9 deletions.
diff --git a/docs/_data/components.yml b/docs/_data/components.yml
@@ -6,6 +6,9 @@
     - title: Alert
       meta: alert
 
+    - title: Busy Indicator
+      meta: busy-indicator
+
     - title: Button
       meta: button
 

diff --git a/docs/_data/sidebars/left-navigation-sidebar.yml b/docs/_data/sidebars/left-navigation-sidebar.yml
@@ -100,6 +100,10 @@ entries:
       url: /components/asset-upload.html
       output: web
 
+    - title: Busy Indicator
+      url: /components/busy-indicator.html
+      output: web
+
     - title: Button
       url: /components/button.html
       output: web

diff --git a/docs/images/component-visual/busy-indicator.png b/docs/images/component-visual/busy-indicator.png
diff --git a/docs/pages/components/busy-indicator.md b/docs/pages/components/busy-indicator.md
@@ -0,0 +1,49 @@
+---
+title: Busy Indicator
+id: busy-indicator
+keywords: busy indicator, busy, spinner, loader
+sidebar: left-navigation-sidebar
+toc: false
+permalink: components/busy-indicator.html
+folder: components
+summary:
+---
+
+A busy indicator informs the user of an ongoing operation. Only one busy indicator should be shown at a time.
+{: .docs-intro}
+Busy indicators are not visible all the time, only when needed.
+
+<br>
+## Busy indicator usage and size options
+{% capture busy-indicator %}
+<div style="display:flex;justify-content:center;flex-direction:column;align-items:center">
+    <div class="fd-busy-indicator--l" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div><br /><br />
+    <div class="fd-busy-indicator--m" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div><br /><br />
+    <div class="fd-busy-indicator" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div>
+</div>
+{% endcapture %}
+{% include display-component.html component=busy-indicator %}
+
+## Busy indicator usage in contrast mode
+{% capture contrast-busy-indicator %}
+<div style="display:flex;justify-content:center;flex-direction:column;align-items:center;background-color:cadetblue;height:250px">
+    <div class="fd-busy-indicator--l contrast" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div>
+</div>
+{% endcapture %}
+{% include display-component.html component=contrast-busy-indicator %}
diff --git a/docs/pages/patterns/index.md b/docs/pages/patterns/index.md
@@ -13,6 +13,7 @@ Patterns in Fundamental Styles are completely composed from other components CSS
 
 <div class="docs-component-grid">
     {% for component in site.data.patterns.items %}
+    <div>{{component.meta}}</div>
         <a href="{{component.meta}}.html" class="docs-component-grid--item">
             <img src="{{site.baseurl}}/images/component-visual/{{component.meta}}.png" alt="{{component.title}}" width="60%" class="docs-component-grid--img__{{component.meta}}">
             <br>

diff --git a/src/busy-indicator.scss b/src/busy-indicator.scss
@@ -0,0 +1,105 @@
+
+@import "./settings";
+@import "./mixins";
+@import "./functions";
+
+$block: #{$fd-namespace}-busy-indicator;
+$fd-dots-color: var(--sapContent_IconColor);
+$fd-dots-color-contrast: var(--sapContent_ContrastIconColor);
+// default sizes
+$fd-dots-size: 0.125rem;
+$fd-dots-margin: 0 0.2rem;
+
+// medium sizes
+$fd-dots-size-m: 0.5rem;
+$fd-dots-margin-m: 0 0.4rem;
+
+// large sizes
+$fd-dots-size-l: 1rem;
+$fd-dots-margin-l: 0 0.75rem;
+
+.#{$block},
+.#{$block}--m,
+.#{$block}--l {
+  @include fd-reset();
+
+  position: relative;
+  display: block;
+  font-size: 0;
+  color: $fd-dots-color;
+}
+
+.#{$block}.contrast,
+.#{$block}--m.contrast,
+.#{$block}--l.contrast {
+  color: $fd-dots-color-contrast;
+
+  .#{$block}--circle-0,
+  .#{$block}--circle-1,
+  .#{$block}--circle-2 {
+    color: $fd-dots-color-contrast;
+  }
+}
+
+.#{$block}--circle-0,
+.#{$block}--circle-1,
+.#{$block}--circle-2 {
+  @include fd-reset();
+
+  color: $fd-dots-color;
+  position: relative;
+  width: $fd-dots-size;
+  height: $fd-dots-size;
+  margin: $fd-dots-margin;
+  display: inline-block;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.#{$block}--circle-0 {
+  animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.#{$block}--circle-1 {
+  animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+  animation-delay: 200ms;
+}
+
+.#{$block}--circle-2 {
+  animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+  animation-delay: 400ms;
+}
+
+.#{$block}--m .#{$block}--circle-0,
+.#{$block}--m .#{$block}--circle-1,
+.#{$block}--m .#{$block}--circle-2 {
+  width: $fd-dots-size-m;
+  height: $fd-dots-size-m;
+  margin: $fd-dots-margin-m;
+}
+
+.#{$block}--l .#{$block}--circle-0,
+.#{$block}--l .#{$block}--circle-1,
+.#{$block}--l .#{$block}--circle-2 {
+  width: $fd-dots-size-l;
+  height: $fd-dots-size-l;
+  margin: $fd-dots-margin-l;
+}
+
+@keyframes grow {
+  0%,
+  50%,
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(2.5);
+    -moz-transform: scale(2.5);
+    -ms-transform: scale(2.5);
+    transform: scale(2.5);
+  }
+}
diff --git a/src/fundamental-styles.scss b/src/fundamental-styles.scss
@@ -9,6 +9,7 @@
 @import "./asset-upload";
 @import "./badge";
 @import "./popover";
+@import "./busy-indicator";
 @import "./button";
 @import "./button-group";
 @import "./button-split";

diff --git a/test/resources/animation.css b/test/resources/animation.css
@@ -0,0 +1,3 @@
+.fd-busy-indicator--circle-0, .fd-busy-indicator--circle-1, .fd-busy-indicator--circle-2 {
+    animation: none;
+}
diff --git a/test/resources/controls.js b/test/resources/controls.js
@@ -97,17 +97,17 @@
     const uglyThemeCss = "static/theme-ugly.css";
     const toggleTheme = document.getElementById("toggleTheme");
     const toggleThemeState = localStorage.getItem('toggleThemeState');
-    if (toggleThemeState == "true") {
-        toggleTheme.checked = true;
-        toggleStylesheet(uglyThemeCss, true);
+    if (toggleThemeState == "false") {
+        toggleTheme.checked = false;
+        toggleStylesheet(uglyThemeCss, false);
     }
     toggleTheme.addEventListener('change', function () {
         if (this.checked) {
-            toggleStylesheet(uglyThemeCss, true);
-            localStorage.setItem("toggleThemeState", true);
-        } else {
             toggleStylesheet(uglyThemeCss, false);
             localStorage.setItem("toggleThemeState", false);
+        } else {
+            toggleStylesheet(uglyThemeCss, true);
+            localStorage.setItem("toggleThemeState", true);
         }
     });
 
@@ -145,6 +145,23 @@
         }
     });
 
+    const toggleAnimationCss = "static/animation.css";
+    const toggleAnimation = document.getElementById("toggleAnimation");
+    const toggleAnimationState = localStorage.getItem('toggleAnimationState');
+    if (toggleAnimationState == "true") {
+        toggleAnimation.checked = true;
+        toggleStylesheet(toggleAnimationCss, true);
+    }
+    toggleAnimation.addEventListener('change', function () {
+        if (this.checked) {
+            toggleStylesheet(toggleAnimationCss, true);
+            localStorage.setItem("toggleAnimationState", true);
+        } else {
+            toggleStylesheet(toggleAnimationCss, false);
+            localStorage.setItem("toggleAnimationState", false);
+        }
+    });
+
     const toggleDir = document.getElementById("toggleDir");
     const toggleDirState = localStorage.getItem('toggleDir');
     if (toggleDirState == "true") {
@@ -196,7 +213,7 @@
     //indeterminate
     const indeterminates = document.querySelectorAll("[indeterminate]");
     for (let i = 0; i < indeterminates.length; i++) {
-      indeterminates[i].indeterminate = true;
+        indeterminates[i].indeterminate = true;
     }
 
 

diff --git a/test/resources/theme-ugly.css b/test/resources/theme-ugly.css
@@ -55,7 +55,6 @@
   --fd-counter-background-color: Chocolate;
   --fd-padding-ui: 100px;
   --fd-color-shell-1: orange;
-
   /* SAP-THEMING UGLY */
   --sapSuccessBackground: rgb(205, 102, 119);
   --sapErrorBackground: #e3ba20;
@@ -79,6 +78,7 @@
   --sapList_SelectionBorderColor: orange;
   --sapList_SelectionBackgroundColor: #32c71c;
   --sapList_Hover_SelectionBackground: rgb(93%, 2%, 45%);
-  --sapContent_IconColor: purple;
+  --sapContent_IconColor: FloralWhite;
   --sapList_TextColor: #00D1B2;
+  --sapContent_ContrastIconColor: DarkRed;
 }
diff --git a/test/templates/busy-indicator/index.njk b/test/templates/busy-indicator/index.njk
@@ -0,0 +1,56 @@
+
+{% extends "layout.njk" %}
+{% from "./../format.njk" import format %}
+
+{% block content %}
+<div style="background: #f3f4f5; margin:-20px; padding:20px;">
+
+    <!-- output the component example and the code snippet -->
+    {% set example %}
+
+    <div class="fd-busy-indicator" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div>
+    <br />
+    <div class="fd-busy-indicator--m" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div>
+    <br />
+    <div class="fd-busy-indicator--l" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
+    </div>
+    {% endset %}
+    {{ format(example) }}
+
+        <!-- output the component example and the code snippet -->
+    {% set example1 %}
+    <div style="background: cadetblue; padding: 20px 0 20px 20px">
+        <div class="fd-busy-indicator contrast" aria-hidden="false" aria-label="Loading">
+            <div class="fd-busy-indicator--circle-0"></div>
+            <div class="fd-busy-indicator--circle-1"></div>
+            <div class="fd-busy-indicator--circle-2"></div>
+        </div>
+        <br />
+        <div class="fd-busy-indicator--m contrast" aria-hidden="false" aria-label="Loading">
+            <div class="fd-busy-indicator--circle-0"></div>
+            <div class="fd-busy-indicator--circle-1"></div>
+            <div class="fd-busy-indicator--circle-2"></div>
+        </div>
+        <br />
+        <div class="fd-busy-indicator--l contrast" aria-hidden="false" aria-label="Loading">
+            <div class="fd-busy-indicator--circle-0"></div>
+            <div class="fd-busy-indicator--circle-1"></div>
+            <div class="fd-busy-indicator--circle-2"></div>
+        </div>
+    </div>
+    {% endset %}
+    {{ format(example1) }}
+
+</div>
+{% endblock %}
diff --git a/test/templates/index.njk b/test/templates/index.njk
@@ -19,6 +19,7 @@ li {
           <li><a href="alert">.fd-alert</a></li>
           <li><a href="asset-upload">.fd-asset-upload</a></li>
           <li><a href="badge">.fd-badge</a> | <a href="label">.fd-label</a> | <a href="status-label">.fd-status-label</a></li>
+          <li><a href="busy-indicator">.fd-busy-indicator</a></li>
           <li><a href="button">.fd-button</a></li>
           <li><a href="button-group">.fd-button-group</a></li>
           <li><a href="button-split">.fd-button-split</a></li>

diff --git a/test/templates/layout.njk b/test/templates/layout.njk
@@ -14,6 +14,7 @@
         {% set sass = id + '.scss'  %}
         {{ sass | component_css }}
     </style>
+    <link rel="stylesheet" href="static/animation.css">
     <script>
         function toggleStylesheet( href, onoff ){
             var existingNode=0; //get existing stylesheet node if it already exists:
@@ -53,6 +54,7 @@
                 <label class="test-label"><input type="checkbox" value="" id="toggleTheme"> Theme</label>
                 <label class="test-label"><input type="checkbox" value="" id="toggleNormalize"> Normalize</label>
                 <label class="test-label"><input type="checkbox" value="" id="toggleUnNormalize"> Un-Normalize</label>
+                <label class="test-label"><input type="checkbox" value="" checked id="toggleAnimation"> Animation</label>
             </fieldset>
         </form>
     </header>

diff --git a/test/visual-regression-tests/reference_images/FS_busy-indicator_0_backstop_0_.png b/test/visual-regression-tests/reference_images/FS_busy-indicator_0_backstop_0_.png
diff --git a/...isual-regression-tests/reference_images/FS_busy-indicator_1_backstop__n1_0_.png b/...isual-regression-tests/reference_images/FS_busy-indicator_1_backstop__n1_0_.png