PatternFly Angular wizard implementation

bower.json

@@ -42,17 +42,9 @@
     "angular-sanitize": "1.3.0 - 1.5.*",
     "angular-bootstrap": "0.13.x",
     "lodash": "3.x",
-    "patternfly": "a014002ebcfad2c6ff2fbeda52dfcd425e016f2a"
+    "patternfly": "[email protected]:patternfly/patternfly.git#master-dist"
   },
   "devDependencies": {
     "angular-mocks": "1.3.0 - 1.5.*"
-  },
-  "resolutions": {
-    "bootstrap-datepicker": "~1.6.4",
-    "bootstrap-select": "~1.10.0",
-    "bootstrap-touchspin": "~3.1.1",
-    "datatables-colreorder": "~1.3.2",
-    "font-awesome": "~4.6.3",
-    "moment": "~2.14.1"
   }
 }

src/wizard/wizard-directive.js

@@ -3,22 +3,36 @@
   * @name patternfly.wizard.directive:pfWizard
   *
   * @description
-  * Directive for rendering a Wizard modal.
+  * Directive for rendering a Wizard modal.  Each wizard dynamically creates the step navigation both in the header and the left-hand side based on nested steps.
+  * Use the pf-wizardstep to define individual steps within a wizard and pf-wizardsubstep to define portions of pf-wizardsteps if so desired.  For instance, Step one can have two substeps - 1A and 1B when it is logical to group those together.
+  * <br /><br />
+  * The basic structure should be:
+  * <pre>
+  * <div pf-wizard>
+  *   <div pf-wizardstep>
+  *     <div pf-wizardsubstep><!-- content here --></div>
+  *     <div pf-wizardsubstep><!-- content here --></div>
+  *   </div>
+  *   <div pf-wizardstep><!-- additional configuration can be added here with substeps if desired --></div>
+  *   <div pf-wizardstep><!-- review steps and final command here --></div>
+  * </div>
+  * </pre>
   *
   * @param {string} title The wizard title displayed in the header
-  * @param {boolean} hideIndicators  Hides the step indicators in the header of the wizard
-  * @param {string} currentStep The current step can be changed externally - this is the title of the step to switch the wizard to
-  * @param {string} cancelTitle The text to display on the cancel button
-  * @param {string} backTitle The text to display on the back button
-  * @param {string} nextTitle The text to display on the next button
-  * @param {function (step) } backCallback Called to notify when the back button is clicked
-  * @param {function (step) } nextCallback Called to notify when the next button is clicked
-  * @param {function ()} onFinish Called to notify when when the wizard is complete.  Returns a boolean value to indicate if the finish operation is complete
-  * @param {function ()} onCancel Called when the wizard is canceled, returns a boolean value to indicate if cancel is successful
+  * @param {boolean=} hideIndicators  Hides the step indicators in the header of the wizard
+  * @param {string=} currentStep The current step can be changed externally - this is the title of the step to switch the wizard to
+  * @param {string=} cancelTitle The text to display on the cancel button
+  * @param {string=} backTitle The text to display on the back button
+  * @param {string=} nextTitle The text to display on the next button
+  * @param {function (step)=} backCallback Called to notify when the back button is clicked
+  * @param {function (step)=} nextCallback Called to notify when the next button is clicked
+  * @param {function ()=} onFinish Called to notify when when the wizard is complete.  Returns a boolean value to indicate if the finish operation is complete
+  * @param {function ()=} onCancel Called when the wizard is canceled, returns a boolean value to indicate if cancel is successful
   * @param {boolean} wizardReady Value that is set when the wizard is ready
-  * @param {boolean} wizardDone  Value that is set when the wizard is done
+  * @param {boolean=} wizardDone  Value that is set when the wizard is done
   * @param {string} loadingWizardTitle The text displayed when the wizard is loading
-  * @param {string} loadingSecondaryInformation Secondary descriptive information to display when the wizard is loading
+  * @param {string=} loadingSecondaryInformation Secondary descriptive information to display when the wizard is loading
+  * @param {number=} minHeight The minimum height the wizard should adjust to if the window height is decreased.  The wizard height is adjusted with the window resize event and this sets the minimum.
   *
   * @example
   <example module="patternfly.wizard" deps="patternfly.form">
@@ -300,7 +314,8 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       wizardReady: '=?',
       wizardDone: '=?',
       loadingWizardTitle: '=?',
-      loadingSecondaryInformation: '=?'
+      loadingSecondaryInformation: '=?',
+      minHeight: '=?'
     },
     templateUrl: 'wizard/wizard.html',
     controller: function ($scope, $timeout) {
@@ -654,10 +669,14 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
         }
       });
 
-      if ($window.innerHeight > 400) {
+      if (!$scope.minHeight) {
+        $scope.minHeight = 400;
+      }
+
+      if ($window.innerHeight > $scope.minHeight) {
         $element.height($window.innerHeight - 70);
       } else {
-        $element.height(400);
+        $element.height($scope.minHeight);
       }
       $scope.$on('$destroy', isOpenListener);
 
@@ -668,7 +687,7 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       });
 
       angular.element($window).bind('resize', function () {
-        if ($window.innerHeight > 400) {
+        if ($window.innerHeight > $scope.minHeight) {
           $element.height($window.innerHeight - 70);
         }
       });

src/wizard/wizard-step-directive.js

@@ -3,25 +3,25 @@
  * @name patternfly.wizard.directive:pfWizardStep
  *
  * @description
- * Directive for rendering a Wizard step.  Each step can stand alone or have substeps.
+ * Directive for rendering a Wizard step.  Each step can stand alone or have substeps.  This directive can only be used as a child of pf-wizard.
  *
  * @param {string} stepTitle The step title displayed in the header and used for the review screen when displayed
  * @param {string} stepId  Sets the text identifier of the step
  * @param {number} stepPriority  This sets the priority of this wizard step relative to other wizard steps.  They should be numbered sequentially in the order they should be viewed.
  * @param {boolean} substeps Sets whether this step has substeps
- * @param {boolean} nextEnabled Sets whether the next button should be enabled when this step is first displayed
- * @param {boolean} prevEnabled Sets whether the back button should be enabled when this step is first displayed
- * @param {string} nextTooltip The text to display as a tooltip on the next button
- * @param {string} prevTooltip The text to display as a tooltip on the back button
- * @param {boolean} wzDisabled Disables the wizard when this page is shown
+ * @param {boolean=} nextEnabled Sets whether the next button should be enabled when this step is first displayed
+ * @param {boolean=} prevEnabled Sets whether the back button should be enabled when this step is first displayed
+ * @param {string=} nextTooltip The text to display as a tooltip on the next button
+ * @param {string=} prevTooltip The text to display as a tooltip on the back button
+ * @param {boolean=} wzDisabled Disables the wizard when this page is shown
  * @param {boolean} okToNavAway Sets whether or not it's ok for the user to leave this page
  * @param {boolean} allowClickNav Sets whether the user can click on the numeric step indicators to navigate directly to this step
- * @param {string} description The step description (optional)
+ * @param {string=} description The step description (optional)
  * @param {object} wizardData Data passed to the step that is shared by the entire wizard
- * @param {function()} onShow The function called when the wizard shows this step
- * @param {boolean} showReview Indicates whether review information should be displayed for this step when the review step is reached
- * @param {boolean} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
- * @param {string} reviewTemplate The template that should be used for the review details screen
+ * @param {function()=} onShow The function called when the wizard shows this step
+ * @param {boolean=} showReview Indicates whether review information should be displayed for this step when the review step is reached
+ * @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
+ * @param {string=} reviewTemplate The template that should be used for the review details screen
  */
 angular.module('patternfly.wizard').directive('pfWizardStep', function () {
   'use strict';

src/wizard/wizard-substep-directive.js

@@ -2,21 +2,21 @@
 * @name patternfly.wizard.directive:pfWizardSubstep
 *
 * @description
-* Directive for rendering a Wizard substep.  Each substep must be a child of a step in a wizard.
+* Directive for rendering a Wizard substep.  Each substep must be a child of a pf-wizardstep in a pf-wizard directive.
 *
 * @param {string} stepTitle The step title displayed in the header and used for the review screen when displayed
 * @param {string} stepId  Sets the text identifier of the step
 * @param {number} stepPriority  This sets the priority of this wizard step relative to other wizard steps.  They should be numbered sequentially in the order they should be viewed.
-* @param {boolean} nextEnabled Sets whether the next button should be enabled when this step is first displayed
-* @param {boolean} prevEnabled Sets whether the back button should be enabled when this step is first displayed
-* @param {boolean} wzDisabled Disables the wizard when this page is shown
+* @param {boolean=} nextEnabled Sets whether the next button should be enabled when this step is first displayed
+* @param {boolean=} prevEnabled Sets whether the back button should be enabled when this step is first displayed
+* @param {boolean=} wzDisabled Disables the wizard when this page is shown
 * @param {boolean} okToNavAway Sets whether or not it's ok for the user to leave this page
-* @param {boolean} allowClickNav Sets whether the user can click on the numeric step indicators to navigate directly to this step
-* @param {string} description The step description (optional)
+* @param {boolean=} allowClickNav Sets whether the user can click on the numeric step indicators to navigate directly to this step
+* @param {string=} description The step description
 * @param {object} wizardData Data passed to the step that is shared by the entire wizard
-* @param {function()} onShow The function called when the wizard shows this step
-* @param {boolean} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
-* @param {string} reviewTemplate The template that should be used for the review details screen
+* @param {function()=} onShow The function called when the wizard shows this step
+* @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
+* @param {string=} reviewTemplate The template that should be used for the review details screen
 */
 angular.module('patternfly.wizard').directive('pfWizardSubstep', function () {
   'use strict';

test/wizard/wizard.spec.js

@@ -105,14 +105,10 @@ describe('Directive:  pfWizard', function () {
 
   it('should dispatch the cancel event on the close button click', function () {
     var closeButton = element.find('.close');
-    $rootScope.$on('wizard.done', function (event, data) {
-      expect(data).toBe('cancel');
-    });
     spyOn($rootScope, '$emit');
     eventFire(closeButton[0], 'click');
     $scope.$digest();
-
-    expect($rootScope.$emit).toHaveBeenCalled();
+    expect($rootScope.$emit).toHaveBeenCalledWith('wizard.done', 'cancel');
   });
 
   it('should have three step indicators in the header', function () {