From 1f95a4ee214b33116b20cd4ad1045acdc8e0538c Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Thu, 3 Feb 2022 15:30:38 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B03541=20Add=20loading=20state=20design=20?=
 =?UTF-8?q?to=20buttons=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/backoffice/components/_button.scss           | 16 ++++++++++++++++
 .../base/components/button/buttonjs.html.twig    |  1 +
 .../base/components/button/buttonurl.html.twig   |  1 +
 .../base/components/button/layout.html.twig      |  1 +
 4 files changed, 19 insertions(+)

diff --git a/css/backoffice/components/_button.scss b/css/backoffice/components/_button.scss
index e27365cfc..5cba61c9a 100644
--- a/css/backoffice/components/_button.scss
+++ b/css/backoffice/components/_button.scss
@@ -479,6 +479,22 @@ $ibo-button-colors: (
   &.ibo-action-button {
     float: right;
   }
+
+  .ibo-button--loading-icon {
+    display: none;
+  }
+  
+  &.ibo-is-loading {
+    .ibo-button--icon{
+      display: none;
+    }
+    .ibo-button--loading-icon {
+      display: inline-block;
+       &+ .ibo-button--label{
+        margin-left: $ibo-button--label--margin-left;
+      }
+    }
+  }
 }
 
 .ibo-button--label {
diff --git a/templates/base/components/button/buttonjs.html.twig b/templates/base/components/button/buttonjs.html.twig
index 9c609d8ac..14523a63e 100644
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -22,6 +22,7 @@
             aria-label="{{ sAriaLabel }}"
         {% endif %}
 >
+    <span class="ibo-button--loading-icon fas fa-spinner fa-pulse"></span>
     {% if oUIBlock.GetIconClass() is not empty %}
         <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
     {% endif %}
diff --git a/templates/base/components/button/buttonurl.html.twig b/templates/base/components/button/buttonurl.html.twig
index 0af72e56f..6575c3980 100644
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -20,6 +20,7 @@
             aria-label="{{ sAriaLabel }}"
         {% endif %}
 >
+    <span class="ibo-button--loading-icon fas fa-spinner fa-pulse"></span>
     {% if oUIBlock.GetIconClass() is not empty %}
         <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
     {% endif %}
diff --git a/templates/base/components/button/layout.html.twig b/templates/base/components/button/layout.html.twig
index cf742ec31..b047d21a1 100644
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -20,6 +20,7 @@
         {% endif %}
 
 >
+    <span class="ibo-button--loading-icon fas fa-spinner fa-pulse"></span>
     {% if oUIBlock.GetIconClass() is not empty %}
         <span class="ibo-button--icon {{ oUIBlock.GetIconClass() }}"></span>
     {% endif %}