Merge pull request #321 from dgutride/wizard-lefthand-buttons

Add support for embedding a wizard in a page instead of using a modal.

Author: dtaylor113

src/wizard/wizard-directive.js

@@ -33,6 +33,7 @@
   * @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=} contentHeight The height the wizard content should be set to.  This defaults to 300px if the property is not supplied.
+  * @param {boolean=} embedInPage Value that indicates wizard is embedded in a page (not a modal).  This moves the navigation buttons to the left hand side of the footer and removes the close button.
   *
   * @example
   <example module="patternfly.wizard" deps="patternfly.form">
@@ -316,7 +317,8 @@ angular.module('patternfly.wizard').directive('pfWizard', function ($window) {
       wizardDone: '=?',
       loadingWizardTitle: '=?',
       loadingSecondaryInformation: '=?',
-      contentHeight: '=?'
+      contentHeight: '=?',
+      embedInPage: '=?'
     },
     templateUrl: 'wizard/wizard.html',
     controller: function ($scope, $timeout) {

src/wizard/wizard.html

@@ -1,13 +1,13 @@
 <div>
   <div class="modal-header">
-    <button type="button" class="close wizard-pf-dismiss" aria-label="Close" ng-click="onCancel()" >
+    <button type="button" class="close wizard-pf-dismiss" aria-label="Close" ng-click="onCancel()" ng-if="!embedInPage">
       <span aria-hidden="true">&times;</span>
     </button>
     <dt class="modal-title">{{title}}</dt>
   </div>
   <div class="modal-body wizard-pf-body clearfix">
     <!-- step area -->
-    <div class="wizard-pf-steps" ng-class="{'invisible': !wizardReady}"> <!-- todo - replace hidden with angular boolean -->
+    <div class="wizard-pf-steps" ng-class="{'invisible': !wizardReady}">
       <ul class="wizard-pf-steps-indicator" ng-if="!hideIndicators" ng-class="{'invisible': !wizardReady}">
         <li class="wizard-pf-step" ng-class="{active: step.selected}" ng-repeat="step in getEnabledSteps()" data-tabgroup="{{$index }}">
           <a ng-click="stepClick(step)"><span class="wizard-pf-step-number">{{$index + 1}}</span><span class="wizard-pf-step-title">{{step.title}}</span></a>
@@ -25,8 +25,8 @@ <h3 class="blank-slate-pf-main-action">{{loadingWizardTitle}}</h3>
     </div>
     <div class="wizard-pf-position-override" ng-transclude ></div>
   </div>
-  <div class="modal-footer wizard-pf-footer wizard-pf-position-override">
-    <button pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel" ng-disabled="wizardDone" ng-click="onCancel()">{{cancelTitle}}</button>
+  <div class="modal-footer wizard-pf-footer wizard-pf-position-override" ng-class="{'wizard-pf-footer-inline': embedInPage}">
+    <button pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel" ng-disabled="wizardDone" ng-click="onCancel()" ng-if="!embedInPage">{{cancelTitle}}</button>
     <div class="tooltip-wrapper" tooltip="{{prevTooltip}}" tooltip-placement="left">
       <button id="backButton" pf-wiz-previous class="btn btn-default" ng-disabled="!wizardReady || wizardDone || !prevEnabled || firstStep"
               callback="backCallback">
@@ -41,5 +41,6 @@ <h3 class="blank-slate-pf-main-action">{{loadingWizardTitle}}</h3>
         <span class="i fa fa-angular-right"></span>
       </button>
     </div>
+    <button pf-wiz-cancel class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-cancel-inline" ng-disabled="wizardDone" ng-click="onCancel()" ng-if="embedInPage">{{cancelTitle}}</button>
   </div>
 </div>

styles/angular-patternfly.css

@@ -447,3 +447,11 @@ accordion > .panel-group .panel-open .panel-title > a:before {
 .wizard-pf-position-override {
   position: relative;
 }
+
+.wizard-pf-footer-inline {
+  text-align: left;
+}
+
+.wizard-pf-cancel-inline {
+  margin-left: 25px;
+}