Update Wizard component with backComponent, finishComponent, and hide…

…FinishButton [#153856072]

Signed-off-by: Ming Xiao <mxiao@pivotal.io>

spec/pivotal-ui-react/wizard/wizard_spec.js

@@ -119,6 +119,39 @@ describe('Wizard', () => {
         expect(subject.state.currentPage).toBe(0);
       });
     });
+
+    describe('when "backComponent" is provided', () => {
+      let onClickBack;
+
+      beforeEach(() => {
+        onClickBack = jasmine.createSpy('onClickBack');
+        pages.push({
+          render: jasmine.createSpy('pageThreeRender'),
+          onClickBack,
+          backComponent: <button className="some-back-button"/>
+        });
+        subject::setProps({pages});
+        subject.setState({currentPage: 2});
+      });
+
+      it('renders the back component', () => {
+        expect('.wizard .wizard-footer .col:eq(0) .some-back-button').toExist();
+      });
+
+      it('does not render the back button', () => {
+        expect('.wizard-back-btn').not.toExist();
+      });
+
+      describe('when clicking the back component', () => {
+        beforeEach(() => {
+          $('.wizard .wizard-footer .col:eq(0) .some-back-button').simulate('click');
+        });
+
+        it('does not call the back callback', () => {
+          expect(onClickBack).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 
   describe('#onClickNext', () => {
@@ -287,6 +320,30 @@ describe('Wizard', () => {
       expect('.wizard-finish-btn.btn-primary').toHaveText('Finish');
     });
 
+    describe('when "hideFinishButton" is true', () => {
+      beforeEach(() => {
+        const lastPage = pages[pages.length - 1];
+        pages[pages.length - 1] = {...lastPage, hideFinishButton: true};
+        subject.forceUpdate();
+      });
+
+      it('does not render a "finish" Button', () => {
+        expect('.wizard-finish-btn').not.toExist();
+      });
+    });
+
+    describe('when "hideBackButton" is true', () => {
+      beforeEach(() => {
+        const lastPage = pages[pages.length - 1];
+        pages[pages.length - 1] = {...lastPage, hideBackButton: true};
+        subject.forceUpdate();
+      });
+
+      it('does not render a "back" Button', () => {
+        expect('.wizard-back-btn').not.toExist();
+      });
+    });
+
     it('does not render a "next" PrimaryButton', () => {
       expect('.wizard-next-btn.btn-primary').not.toExist();
     });
@@ -374,5 +431,30 @@ describe('Wizard', () => {
         expect('.wizard-back-btn').not.toHaveAttr('disabled');
       });
     });
+
+    describe('when "finishComponent" is provided', () => {
+      beforeEach(() => {
+        pages[pages.length - 1].finishComponent = <button className="some-custom-button"/>;
+        subject.forceUpdate();
+      });
+
+      it('renders the finish component', () => {
+        expect('.wizard .wizard-footer .col:eq(1) .some-custom-button').toExist();
+      });
+
+      it('does not render the finish button', () => {
+        expect('.wizard-finish-btn').not.toExist();
+      });
+
+      describe('when clicking the finish component', () => {
+        beforeEach(() => {
+          $('.wizard .wizard-footer .col:eq(1) .some-custom-button').simulate('click');
+        });
+
+        it('does not call the finish callback', () => {
+          expect(finish).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 });

src/react/wizard/wizard.js

@@ -5,7 +5,7 @@ import {PrimaryButton} from '../buttons';
 import {Icon} from '../iconography';
 import classnames from 'classnames';
 
-function doNothing() {
+function noop() {
 }
 
 export class Wizard extends React.Component {
@@ -22,7 +22,7 @@ export class Wizard extends React.Component {
   static defaultProps = {
     pages: [],
     cancelText: 'Cancel',
-    finish: doNothing,
+    finish: noop,
     finishText: 'Finish',
     saving: false,
     savingText: 'Saving'
@@ -83,7 +83,9 @@ export class Wizard extends React.Component {
     const {currentPage} = this.state;
 
     const page = pages[currentPage];
-    const {hideNextButton, nextText = () => 'Next'} = page;
+    const {
+      hideBackButton, hideNextButton, hideFinishButton, nextText = () => 'Next', backComponent, finishComponent
+    } = page;
 
     const lastPage = currentPage >= pages.length - 1;
     const firstPage = currentPage === 0;
@@ -98,19 +100,19 @@ export class Wizard extends React.Component {
                      onClick={this.onClickCancel}>{cancelText}</PrimaryButton>
     );
 
-    const backButton = (
-      <PrimaryButton alt className="wizard-back-btn" disabled={saving}
-                     onClick={this.onClickBack}>Back</PrimaryButton>
-    );
+    const backButton = backComponent || (
+        <PrimaryButton alt className="wizard-back-btn" disabled={saving}
+                       onClick={this.onClickBack}>Back</PrimaryButton>
+      );
 
     const icon = saving && <Icon src="spinner-sm"/>;
-    const finishButton = (
-      <PrimaryButton {...{
-        className: "wizard-finish-btn",
-        icon,
-        onClick: this.onClickFinish
-      }}>{saving ? savingText : finishText}</PrimaryButton>
-    );
+    const finishButton = finishComponent || (
+        <PrimaryButton {...{
+          className: 'wizard-finish-btn',
+          icon,
+          onClick: this.onClickFinish
+        }}>{saving ? savingText : finishText}</PrimaryButton>
+      );
 
     const nextButton = (
       <PrimaryButton className="wizard-next-btn" disabled={nextDisabled}
@@ -125,11 +127,11 @@ export class Wizard extends React.Component {
         <div className="wizard-footer grid ptxl">
           <div className="col">
             {cancel && cancelButton}
-            {!firstPage && backButton}
+            {!firstPage && !hideBackButton && backButton}
           </div>
           <div className="col col-fixed">
             {!lastPage && !hideNextButton && nextButton}
-            {lastPage && finishButton}
+            {lastPage && !hideFinishButton && finishButton}
           </div>
         </div>
       </div>