feat(with-without): isolated background visual test for with/without for ie11 debugging

Author: glassdimly

docs-site/src/index.js

@@ -7,6 +7,7 @@ import './pages/pattern-lab/_patterns/02-components/card/__tests__';
 // import './pages/pattern-lab/_patterns/01-styleguide/100-rendering-performance/lazy-lit-test';
 import './pages/pattern-lab/_patterns/04-pages/99999-bolt-dev-sandbox/editor-integration';
 import { enableAnimDemos } from './pages/pattern-lab/_patterns/06-experiments/animate/animate-demo-helpers.js';
+import './pages/pattern-lab/_patterns/06-experiments/with-without/overlay-demo.js';
 
 enableAnimDemos();
 

docs-site/src/pages/pattern-lab/_patterns/06-experiments/with-without/06-with-without-overlay-animation-test.twig

@@ -0,0 +1,17 @@
+<bolt-button onclick="triggerOverlayFade()" class="u-bolt-margin-bottom-large" style="z-index: 9999999999; position: relative;">Trigger Overlay Fade-Out with triggerAnimationOut</bolt-button>
+
+<bolt-button onclick="window.triggerOverlayDemoFadeOut()" class="u-bolt-margin-bottom-large" style="z-index: 9999999999; position: relative;">Trigger Overlay Fade-Out with triggerAnims</bolt-button>
+
+<bolt-animate class="c-pega-wwo__modal-bg--animator" show-meta group="initial" out="fade-out" out-duration="1500">
+  <div class="c-pega-wwo__modal-bg"></div>
+</bolt-animate>
+
+<script>
+  function triggerOverlayFade() {
+    const overlay = document.querySelector('.c-pega-wwo__modal-bg--animator');
+
+    if (overlay) {
+      overlay.triggerAnimOut();
+    }
+  }
+</script>

docs-site/src/pages/pattern-lab/_patterns/06-experiments/with-without/overlay-demo.js

@@ -0,0 +1,19 @@
+import { triggerAnims } from '@bolt/components-animate/utils';
+
+window.triggerOverlayDemoFadeOut = () => {
+  const overlay = document.querySelector('.c-pega-wwo__modal-bg--animator');
+  console.log('called triggerOverlayDemoFadeOut');
+  try {
+    if (overlay) {
+      triggerAnims({
+        animEls: Array.from([overlay]),
+        stage: 'OUT',
+        debug: true,
+      });
+    } else {
+      throw new Error('with/without overlay not found');
+    }
+  } catch ($e) {
+    console.error($e);
+  }
+};