fix: removing hide class when no-delay is present

adobecom · Dec 2, 2024 · 00feea1 · 00feea1
1 parent da054ac
commit 00feea1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/libs/blocks/section-metadata/sticky-section.js b/libs/blocks/section-metadata/sticky-section.js
@@ -33,6 +33,7 @@ function handleStickyPromobar(section, delay) {
   if ((section.querySelector(':is(.promobar, .notification)').classList.contains('no-delay'))
     || (delay && section.classList.contains('popup'))) {
     hasScrollControl = true;
+    section.classList.remove('hide-sticky-section');
   }
   if (!hasScrollControl && main.children[0] !== section) {
     stickySectionEl = createTag('div', { class: 'section show-sticky-section' });

diff --git a/test/blocks/section-metadata/mocks/body.html b/test/blocks/section-metadata/mocks/body.html
@@ -130,6 +130,30 @@
       </div>
     </div>
   </div>
+  <div class="section sticky-bottom-no-delay">
+    <div class="aside notification small center promobar no-delay">
+      <div>
+        <div data-valign="middle"></div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <p>
+            <picture>
+              <img loading="lazy" alt="" src="" width="750" height="738">
+            </picture>
+          </p>
+          <p><strong>Body M 18/27 Lorem ipsum dolor sit amet, consectetur adipiscing elit. no-delay</strong></p>
+          <p><strong><a href="">Call to action</a></strong></p>
+        </div>
+      </div>
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>sticky bottom, dark</div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="section-metadata">
       <div>

diff --git a/test/blocks/section-metadata/section-meta.test.js b/test/blocks/section-metadata/section-meta.test.js
@@ -94,6 +94,14 @@ describe('Section Metdata', () => {
     expect(sec.classList.contains('hide-sticky-section')).not.to.be.true;
   });
 
+  it('add promobar behaviour to be visible when no-delay', async () => {
+    const main = document.querySelector('main');
+    const sec = document.querySelector('.section.sticky-bottom-no-delay .promobar').closest('.section');
+    const sm = sec.querySelector('.section-metadata');
+    await init(sm);
+    expect(main.lastElementChild.classList.contains('hide-sticky-section')).to.be.false;
+  });
+
   it('should calculate the top position based on header height', async () => {
     const sec = document.querySelector('.section.sticky-top');
     const header = document.createElement('header');