fix(pf4): show dropdown when on mobile

Author: rvsia

packages/pf4-component-mapper/src/files/wizard.js

@@ -11,6 +11,7 @@ import './wizard/wizard-styles.scss';
 
 import WizardNavigation from './wizard/wizard-nav';
 import reducer from './wizard/reducer';
+import WizardToggle from './wizard/wizard-toggle';
 
 const Modal = ({ children, container, inModal }) =>
   inModal
@@ -55,7 +56,7 @@ const WizardInternal = ({
     maxStepIndex,
     isDynamic
   } = useContext(WizardContext);
-  const [state, dispatch] = useReducer(reducer, { loading: true, container });
+  const [state, dispatch] = useReducer(reducer, { loading: true, container, openNav: false });
 
   useEffect(() => {
     if (inModal) {
@@ -102,17 +103,27 @@ const WizardInternal = ({
             closeButtonAriaLabel={closeButtonAriaLabel}
           />
         )}
+        <WizardToggle
+          activeStepIndex={activeStepIndex + 1}
+          activeStepName={currentStep.title}
+          activeStepSubName={navSchema.find((step) => step.name === currentStep.name)?.substepOfTitle}
+          isOpen={state.openNav}
+          dispatch={dispatch}
+        />
         <div className="pf-c-wizard__outer-wrap">
           <div className="pf-c-wizard__inner-wrap">
-            <WizardNav aria-label={navAriaLabel}>
+            <WizardNav aria-label={navAriaLabel} isOpen={state.openNav}>
               <FormSpy subscription={{ values: true, valid: true, validating: true }}>
                 {({ values, valid, validating }) => (
                   <WizardNavigation
                     navSchema={navSchema}
                     activeStepIndex={activeStepIndex}
                     valid={valid}
                     maxStepIndex={maxStepIndex}
-                    jumpToStep={jumpToStep}
+                    jumpToStep={(...args) => {
+                      state.openNav && dispatch({ type: 'closeNav' });
+                      return jumpToStep(...args);
+                    }}
                     crossroads={crossroads}
                     isDynamic={isDynamic}
                     values={values}

packages/pf4-component-mapper/src/files/wizard/reducer.js

@@ -1,5 +1,15 @@
 const reducer = (state, { type }) => {
   switch (type) {
+    case 'openNav':
+      return {
+        ...state,
+        openNav: true
+      };
+    case 'closeNav':
+      return {
+        ...state,
+        openNav: false
+      };
     case 'finishLoading':
       return {
         ...state,

packages/pf4-component-mapper/src/files/wizard/wizard-toggle.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AngleRightIcon, CaretDownIcon } from '@patternfly/react-icons';
+
+const WizardToggle = ({ activeStepIndex, activeStepName, activeStepSubName, isOpen, dispatch }) => (
+  <button
+    onClick={() => dispatch({ type: isOpen ? 'closeNav' : 'openNav' })}
+    className={`pf-c-wizard__toggle ${isOpen ? 'pf-m-expanded' : ''}`}
+    aria-label="Wizard Toggle"
+    aria-expanded={isOpen}
+    type="button"
+  >
+    <ol className="pf-c-wizard__toggle-list">
+      <li className="pf-c-wizard__toggle-list-item">
+        <span className="pf-c-wizard__toggle-num">{activeStepIndex}</span> {activeStepName}
+        {activeStepSubName && <AngleRightIcon className="pf-c-wizard__toggle-separator" aria-hidden="true" />}
+      </li>
+      {activeStepSubName && <li className="pf-c-wizard__toggle-list-item">{activeStepSubName}</li>}
+    </ol>
+    <span className="pf-c-wizard__toggle-icon">
+      <CaretDownIcon aria-hidden="true" />
+    </span>
+  </button>
+);
+
+WizardToggle.propTypes = {
+  activeStepIndex: PropTypes.number,
+  activeStepName: PropTypes.node,
+  activeStepSubName: PropTypes.node,
+  isOpen: PropTypes.bool,
+  dispatch: PropTypes.func
+};
+
+export default WizardToggle;