Merge pull request #177 from adobecom/mwpw-156739-patch

[MWPW-156739] CTA bar icons issue hot patch
adobecom · Aug 15, 2024 · 67ada33 · 67ada33
2 parents dd3d497 + ee0fca3
commit 67ada33
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 34 deletions.
diff --git a/ecc/blocks/form-handler/form-handler.css b/ecc/blocks/form-handler/form-handler.css
@@ -173,6 +173,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  transition: background-color 0.2s, filter 0.2s;
 }
 
 .form-handler .side-menu ul li a {
@@ -374,13 +375,7 @@
   margin-right: 104px;
 }
 
-.form-handler .form-handler-ctas-panel .form-handler-forward-wrapper .action-area:first-child {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-}
-
-.form-handler .form-handler-ctas-panel .form-handler-forward-wrapper .action-area:last-child {
+.form-handler .form-handler-ctas-panel .form-handler-forward-wrapper .action-area {
   display: flex;
   align-items: center;
   gap: 16px;
@@ -399,7 +394,7 @@
 }
 
 .form-handler .form-handler-ctas-panel a.next-button:hover {
-  filter: invert();
+  background-color: var(--color-black)
 } 
 
 .form-handler .form-handler-ctas-panel a.fill {

diff --git a/ecc/blocks/form-handler/form-handler.js b/ecc/blocks/form-handler/form-handler.js
@@ -438,10 +438,16 @@ function renderFormNavigation(props, prevStep, currentStep) {
   frags[prevStep].classList.add('hidden');
   frags[currentStep].classList.remove('hidden');
 
-  if (currentStep === props.maxStep) {
-    nextBtn.textContent = nextBtn.dataset.finalStateText;
+  if (props.currentStep === props.maxStep) {
+    if (props.eventDataResp.published) {
+      nextBtn.textContent = nextBtn.dataset.republishStateText;
+    } else {
+      nextBtn.textContent = nextBtn.dataset.finalStateText;
+    }
+    nextBtn.prepend(getIcon('golden-rocket'));
   } else {
     nextBtn.textContent = nextBtn.dataset.nextStateText;
+    nextBtn.append(getIcon('chev-right-white'));
   }
 
   backBtn.classList.toggle('disabled', currentStep === 0);
@@ -520,18 +526,6 @@ function initFormCtas(props) {
           cta.dataset.finalStateText = finalStateText;
           cta.dataset.doneStateText = doneStateText;
           cta.dataset.republishStateText = republishStateText;
-
-          if (props.currentStep === props.maxStep) {
-            if (props.eventDataResp.published) {
-              cta.textContent = republishStateText;
-            } else {
-              cta.textContent = finalStateText;
-            }
-            cta.prepend(getIcon('golden-rocket'));
-          } else {
-            cta.textContent = nextStateText;
-            cta.append(getIcon('chev-right-white'));
-          }
         }
 
         cta.addEventListener('click', async (e) => {
@@ -611,18 +605,6 @@ function updateCtas(props) {
         a.classList.remove('preview-not-ready');
       }
     }
-
-    if (a.classList.contains('next-button')) {
-      if (props.currentStep === props.maxStep) {
-        if (eventDataResp.published) {
-          a.textContent = a.dataset.republishStateText;
-        } else {
-          a.textContent = a.dataset.finalStateText;
-        }
-      } else {
-        a.textContent = a.dataset.nextStateText;
-      }
-    }
   });
 }