fix(micro-journeys): don't render inactive pathway; fix render issues…

… on pathway and step

packages/components/bolt-animate/utils.js

@@ -1,12 +1,18 @@
 /**
  * @param {Object} opt
- * @param {BoltAnimate[]} opt.animEls
- * @param {string} [opt.stage='IN']
- * @param {boolean} [opt.debug=false]
+ * @param {BoltAnimate[]} opt.animEls an array of `bolt-animate`s on which to trigger animations
+ * @param {string} [opt.stage='IN'] which stage to trigger
+ * @param {boolean} [opt.debug=false] print debug info to console
+ * @param {number|null} [opt.durationOverride] override the duration for all els
  *
  * @return {Promise<{ success: boolean, animEl: BoltAnimate }[]>}
  */
-async function triggerAnimOnEls({ animEls, stage, debug = false }) {
+async function triggerAnimOnEls({
+  animEls,
+  stage,
+  debug = false,
+  durationOverride = null,
+}) {
   let eventName = '';
   switch (stage) {
     case 'IN':
@@ -42,11 +48,17 @@ async function triggerAnimOnEls({ animEls, stage, debug = false }) {
           switch (stage) {
             case 'IN':
               triggered = animEl.triggerAnimIn();
-              duration = animEl.inDuration;
+              duration =
+                durationOverride === null
+                  ? animEl.inDuration
+                  : durationOverride;
               break;
             case 'OUT':
               triggered = animEl.triggerAnimOut();
-              duration = animEl.outDuration;
+              duration =
+                durationOverride === null
+                  ? animEl.outDuration
+                  : durationOverride;
               break;
           }
 
@@ -92,11 +104,12 @@ async function triggerAnimOnEls({ animEls, stage, debug = false }) {
 
 /**
  * @param {Object} opt
- * @param {BoltAnimate[] | NodeListOf<BoltAnimate>} opt.animEls
- * @param {string} [opt.stage='IN']
- * @param {boolean=} [opt.debug=false]
+ * @param {BoltAnimate[] | NodeListOf<BoltAnimate>} opt.animEls `bolt-animate`s on which to trigger animations
+ * @param {string} [opt.stage='IN'] which stage to trigger
+ * @param {boolean} [opt.debug=false] print debug info to console
+ * @param {number|null} [opt.durationOverride] override the duration for all els
  */
-export async function triggerAnims({ animEls, stage = 'IN', debug = false }) {
+export async function triggerAnims({ animEls, stage = 'IN', debug = false, durationOverride = null }) {
   let orderProp;
   let eventName;
   switch (stage) {
@@ -143,6 +156,7 @@ export async function triggerAnims({ animEls, stage = 'IN', debug = false }) {
       animEls: animElsToTrigger,
       stage,
       debug,
+      durationOverride,
     });
   }
 

packages/micro-journeys/src/interactive-pathway.js

@@ -148,8 +148,12 @@ class BoltInteractivePathway extends withLitContext() {
 
   setActive(isActive = true) {
     this.isActivePathway = isActive;
-    this.setActiveStep(0);
     this.triggerUpdate();
+    setTimeout(() => {
+      this.setActiveStep(0);
+      this.triggerUpdate();
+      this.isBecomingActive = false;
+    }, 0);
   }
 
   /**
@@ -183,6 +187,7 @@ class BoltInteractivePathway extends withLitContext() {
       );
       return;
     }
+    await newActiveStep.el.setIsBecomingActive();
     if (currentActiveStep) {
       await currentActiveStep.el.triggerAnimOuts();
       steps.forEach(step => step.el.setActive(false));
@@ -196,9 +201,11 @@ class BoltInteractivePathway extends withLitContext() {
   };
 
   render() {
+    if (!this.isActivePathway && !this.isBecomingActive) {
+      return '';
+    }
     // Inherit theme from `interactive-pathways`
     const theme = this.context.theme || this.theme || '';
-
     const classes = cx('c-bolt-interactive-pathway', {
       [`c-bolt-interactive-pathway--disabled`]: !this.isActivePathway,
       [`c-bolt-interactive-pathway--active`]: this.isActivePathway,
@@ -208,12 +215,13 @@ class BoltInteractivePathway extends withLitContext() {
     const navClasses = cx('c-bolt-interactive-pathway__nav');
     const itemClasses = cx('c-bolt-interactive-pathway__items');
 
+    const activeStep = this.activeStep < 0 ? 0 : this.activeStep;
     return html`
       ${this.addStyles([styles])}
       <section class="${classes}">
         <nav class="${navClasses}">
           ${this.steps.map((step, stepIndex) => {
-            const isActiveItem = this.activeStep === stepIndex;
+            const isActiveItem = activeStep === stepIndex;
             const navItemClasses = cx('c-bolt-interactive-pathway__nav-item', {
               'c-bolt-interactive-pathway__nav-item--active': isActiveItem,
             });

packages/micro-journeys/src/interactive-step.js

@@ -1,4 +1,4 @@
-import { props, define, hasNativeShadowDomSupport } from '@bolt/core/utils';
+import { props, define } from '@bolt/core/utils';
 import { withLitContext, html, convertSchemaToProps } from '@bolt/core';
 import { triggerAnims } from '@bolt/components-animate/utils';
 import classNames from 'classnames/bind';
@@ -23,19 +23,37 @@ class BoltInteractiveStep extends withLitContext() {
     this.triggerUpdate();
   }
 
-  // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
   constructor(self) {
     self = super(self);
-    self.useShadow = hasNativeShadowDomSupport;
     self._isActiveStep = false;
+    self._isBecomingActive = false;
     return self;
   }
 
+  /**
+   * Set this step to be the active step, trigger re-render.
+   *
+   * @param {Boolean} isActive
+   */
   setActive(isActive = true) {
     this._isActiveStep = isActive;
+    this._isBecomingActive = false;
     this.triggerUpdate();
   }
 
+  /**
+   * Prepare the step by rendering the content to the DOM so that `bolt-animate`s
+   * can animate themselves out swiftly in preparation to be animated in.
+   *
+   * @param {Boolean} isBecomingActive
+   * @return {Promise}
+   */
+  setIsBecomingActive = async (isBecomingActive = true) => {
+    this._isBecomingActive = isBecomingActive;
+    this.triggerUpdate();
+    return this.triggerAnimOuts(1);
+  };
+
   /**
    * @param {Event} event
    */
@@ -75,9 +93,9 @@ class BoltInteractiveStep extends withLitContext() {
     }, 0);
   }
 
-  async triggerAnimOuts() {
+  async triggerAnimOuts(durationOverride = null) {
     const anims = this.querySelectorAll('bolt-animate');
-    return triggerAnims({ animEls: anims, stage: 'OUT' });
+    return triggerAnims({ animEls: anims, stage: 'OUT', durationOverride });
   }
 
   async triggerAnimIns() {
@@ -156,14 +174,14 @@ class BoltInteractiveStep extends withLitContext() {
         <div class="c-bolt-interactive-step__body">
           <div class="c-bolt-interactive-step__body-inner">
             <div class="c-bolt-interactive-step__top-slot">
-              ${this._isActiveStep
+              ${this._isActiveStep || this._isBecomingActive
                 ? html`
                     ${this.slot('top')}
                   `
                 : ''}
             </div>
             <div class="c-bolt-interactive-step__bottom-slot">
-              ${this._isActiveStep
+              ${this._isActiveStep || this._isBecomingActive
                 ? html`
                     ${this.slot('bottom')}
                   `