feat(with-without): fixing modal opacity fade out

Author: glassdimly

packages/components/bolt-with-without/js/with-without.js

@@ -4,27 +4,35 @@ import handleBlockTitleMobileAccordionClick from './accordion';
 import handleResize from './handleResize';
 import handleActiveRegionChange from './handleActiveRegionChange';
 
+// Initialize the with/without slide-toggle.
 const toggleInputClass = '#c-pega-wwo__toggle-input';
 SimpleSwitch.init();
 
+// Initialize the swiper for sliding between with and without.
 const wwoSwiper = new Swiper('.c-pega-wwo__swiper-container', {
   speed: 500,
   spaceBetween: 0,
 });
 
+// Initialize the page.
 handleActiveRegionChange(
   document.querySelector(toggleInputClass).checked,
   wwoSwiper,
   true,
 );
+
+// Wire up the toggler to the event region switcher.
 document
   .querySelector('#c-pega-wwo__toggle-input')
   .addEventListener('change', e => {
     handleActiveRegionChange(e.target.checked, wwoSwiper);
   });
 
+// Initialize the accordion.
 document.querySelectorAll('.c-pega-wwo__region-blocks').forEach(el => {
   el.addEventListener('click', handleBlockTitleMobileAccordionClick);
 });
+
+// Set up the resize listener which helps with some of the abs. pos. stuff.
 handleResize();
 window.addEventListener('resize', handleResize);

packages/components/bolt-with-without/with-without.scss

@@ -36,13 +36,21 @@ $pega-wwo--sm-circle-top-margin--mobile: $bolt-medium-icon-half-size - ($pega-ww
   }
 
 
-  &__modal-bg {
+  &__modal-bg--wrapper {
     position: absolute;
+    height: 3000px;
+    width: 100%;
     top: 0;
     left: 0;
     z-index: 33;
-    width: 100vw;
+  }
+
+  &__modal-bg {
+    width: 100%;
     height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
     pointer-events: none;
     background-color: bolt-color(black);
   }

packages/components/bolt-with-without/with-without.twig

@@ -1,9 +1,6 @@
 {# wwo stands for "with-without" #}
 <div class="c-pega-wwo t-bolt-xdark">
   <div class="c-pega-wwo__wrapper">
-    <bolt-animate group="initial" out="fade-out"  out-duration="6000">
-      <div class="c-pega-wwo__modal-bg"></div>
-    </bolt-animate>
     <div class="c-pega-wwo__inner">
       <div class="c-pega-wwo__title-and-toggle--wrapper">
         <h2 class="c-pega-wwo__title">
@@ -410,5 +407,8 @@
       </div>
       </div>
     </div>
+    <bolt-animate class="c-pega-wwo__modal-bg--wrapper" group="initial" out="fade-out"  out-duration="2000">
+      <div class="c-pega-wwo__modal-bg"></div>
+    </bolt-animate>
   </div>
 </div>