feat(wizard): Support for wizard at mobile resolutions (#615)

Show only the selected step and substep titles at mobile resolution
Add the activeStepTitleOnly option to show only the active step title
in the steps indicator (header) when set to true.

Author: jeff-phillips-18

bower.json

@@ -41,13 +41,13 @@
     "angular-animate": "1.5.*",
     "angular-bootstrap": "2.2.x",
     "angular-dragdrop": "1.0.13",
-    "angularjs-datatables": "^0.5.8",
+    "angularjs-datatables": "^0.5.9",
     "angular-drag-and-drop-lists": "2.0.0",
     "angular-sanitize": "1.5.*",
     "datatables.net": "^1.10.12",
     "datatables.net-select": "~1.2.0",
     "lodash": "4.x",
-    "patternfly": ">=3.26.0"
+    "patternfly": ">=3.27.2"
   },
   "devDependencies": {
     "angular-mocks": "1.5.*",

package.json

@@ -17,7 +17,7 @@
     "angular-ui-bootstrap": "2.3.x",
     "angular-svg-base-fix": "2.0.0",
     "lodash": "4.x",
-    "patternfly": ">=3.26.0"
+    "patternfly": ">=3.27.2"
   },
   "devDependencies": {
     "angular-dragdrop": "1.0.13",
@@ -58,7 +58,7 @@
     "semantic-release": "^6.3.6"
   },
   "optionalDependencies": {
-    "angularjs-datatables": "^0.5.8",
+    "angularjs-datatables": "^0.5.9",
     "angular-drag-and-drop-lists": "2.0.0",
     "bootstrap-select": "~1.10.0",
     "c3": "~0.4.11",

src/wizard/wizard-step.html

@@ -1,4 +1,4 @@
-<section ng-show="$ctrl.selected" ng-class="{current: $ctrl.selected, done: $ctrl.completed}">
+<section ng-show="$ctrl.selected" class="wizard-pf-row" ng-class="{current: $ctrl.selected, done: $ctrl.completed}" style="height: inherit;">
   <div ng-if="!$ctrl.wizard.hideSidebar" class="wizard-pf-sidebar" ng-style="$ctrl.contentStyle"  ng-class="$ctrl.wizard.sidebarClass" ng-if="$ctrl.substeps === true">
     <ul class="list-group">
       <li class="list-group-item" ng-class="{active: step.selected}" ng-repeat="step in $ctrl.getEnabledSteps()">

src/wizard/wizard.component.js

@@ -21,6 +21,7 @@
   *
   * @param {string} title The wizard title displayed in the header
   * @param {boolean=} hideIndicators  Hides the step indicators in the header of the wizard
+  * @param {boolean=} activeStepTitleOnly  Shows the title only for the active step in the step indicators, optional, default is false.
   * @param {boolean=} hideSidebar  Hides page navigation sidebar on the wizard pages
   * @param {boolean=} hideHeader Optional value to hide the title bar. Default is false.
   * @param {boolean=} hideBackButton Optional value to hide the back button, useful in 2 step wizards. Default is false.
@@ -68,10 +69,10 @@
         </div>
         <pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="review-second-template.html">
           <form class="form-horizontal">
-            <pf-form-group pf-label="Lorem" required>
+            <pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
               <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
             </pf-form-group>
-            <pf-form-group pf-label="Ipsum">
+            <pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
               <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
             </pf-form-group>
           </form>
@@ -80,10 +81,10 @@
       <pf-wizard-step step-title="Second Step" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
         <form class="form-horizontal">
           <h3>Wizards should make use of substeps consistently throughout (either using them or not using them).  This is an example only.</h3>
-          <pf-form-group pf-label="Lorem">
+          <pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
             <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
           </pf-form-group>
-          <pf-form-group pf-label="Ipsum">
+          <pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
             <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
           </pf-form-group>
         </form>
@@ -98,10 +99,10 @@
     <div ng-controller="DetailsGeneralController">
        <pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
          <form class="form-horizontal">
-           <pf-form-group pf-label="Name" required>
+           <pf-form-group pf-label="Name" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
               <input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
            </pf-form-group>
-           <pf-form-group pf-label="Description">
+           <pf-form-group pf-label="Description" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
              <input id="new-description" name="description" ng-model="data.description" type="text" />
            </pf-form-group>
          </form>
@@ -312,6 +313,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
   bindings: {
     title: '@',
     hideIndicators: '=?',
+    activeStepTitleOnly: '<?',
     hideSidebar: '@',
     hideHeader: '@',
     hideBackButton: '@',
@@ -377,6 +379,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
       ctrl.hideHeader = ctrl.hideHeader === 'true';
       ctrl.hideSidebar = ctrl.hideSidebar === 'true';
       ctrl.hideBackButton = ctrl.hideBackButton === 'true';
+      ctrl.activeStepTitleOnly = ctrl.activeStepTitleOnly === true;
 
       // If a step class is given use it for all steps
       if (angular.isDefined(ctrl.stepClass)) {
@@ -386,7 +389,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
           ctrl.sidebarClass = ctrl.stepClass;
         }
       } else {
-        // No step claass give, setup the content style to allow scrolling and a fixed height
+        // No step class give, setup the content style to allow scrolling and a fixed height
         if (angular.isUndefined(ctrl.contentHeight)) {
           ctrl.contentHeight = '300px';
         }
@@ -595,7 +598,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
       // Check if callback is a function
       if (angular.isFunction(callback)) {
         if (callback(ctrl.selectedStep)) {
-          if (index <= enabledSteps.length - 1) {
+          if (index < enabledSteps.length - 1) {
             // Go to the next step
             if (enabledSteps[index + 1].substeps) {
               enabledSteps[index + 1].resetNav();

src/wizard/wizard.html

@@ -12,7 +12,8 @@
         <li class="wizard-pf-step" ng-class="{active: step.selected}" ng-repeat="step in $ctrl.getEnabledSteps()" data-tabgroup="{{$index }}">
           <a ng-click="$ctrl.stepClick(step)" ng-class="{'disabled': !$ctrl.allowStepIndicatorClick(step)}">
             <span class="wizard-pf-step-number">{{$index + 1}}</span>
-            <span class="wizard-pf-step-title">{{step.title}}</span>
+            <span ng-if="!$ctrl.activeStepTitleOnly || step.selected" class="wizard-pf-step-title">{{step.title}}</span>
+            <span class="wizard-pf-step-title-substep" ng-repeat="substep in step.steps track by $index" ng-class="{'active': substep.selected}">{{substep.title}}</span>
           </a>
         </li>
       </ul>

test/wizard/wizard-container.html

@@ -1,5 +1,6 @@
 <pf-wizard title="Wizard Title"
   wizard-ready="deployReady"
+  active-step-title-only="activeStepTitleOnly"
   on-finish="finishedWizard()"
   on-cancel="cancelDeploymentWizard()"
   next-title="nextButtonTitle"
@@ -10,4 +11,4 @@
   wizard-done="deployComplete || deployInProgress"
   loading-secondary-information="secondaryLoadInformation">
   <div ng-include="'test/wizard/wizard-test-steps.html'"></div>
- </div>
+</pf-wizard>

test/wizard/wizard.spec.js

@@ -302,4 +302,16 @@ describe('Component:  pfWizard', function () {
     var backButton = element.find('.wizard-pf-footer #backButton');
     expect(backButton.length).toBe(1);
   });
+
+  it('should not show inactive step titles when activeStepTitleOnly is specified', function () {
+    setupWizard('test/wizard/wizard-container.html');
+    var stepTitles = element.find('.wizard-pf-step-title');
+    expect(stepTitles.length).toBe(3);
+
+    $scope.activeStepTitleOnly = true;
+    $scope.$digest();
+
+    stepTitles = element.find('.wizard-pf-step-title');
+    expect(stepTitles.length).toBe(1);
+  });
 });