react-stepzilla - npm Package Compare versions

Comparing version 4.6.2 to 4.6.3

dist/main.js

@@ -387,2 +387,4 @@ 'use strict';
 
+      var props = this.props;
+
       var compToRender = void 0;
@@ -423,7 +425,10 @@
             'button',
-            { style: this.state.showPreviousBtn ? {} : this.hidden,
-              className: 'btn btn-prev btn-primary btn-lg pull-left',
+            {
+              style: this.state.showPreviousBtn ? {} : this.hidden,
+              className: props.backButtonCls,
               onClick: function onClick() {
                 _this6.previous();
-              } },
+              },
+              id: 'prev-button'
+            },
             this.props.backButtonText
@@ -433,7 +438,10 @@ ),
             'button',
-            { style: this.state.showNextBtn ? {} : this.hidden,
-              className: 'btn btn-next btn-primary btn-lg pull-right',
+            {
+              style: this.state.showNextBtn ? {} : this.hidden,
+              className: props.nextButtonCls,
               onClick: function onClick() {
                 _this6.next();
-              } },
+              },
+              id: 'next-button'
+            },
             this.state.nextStepText
@@ -461,3 +469,5 @@ )
   nextButtonText: "Next",
+  nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right",
   backButtonText: "Previous",
+  backButtonCls: "btn btn-next btn-primary btn-lg pull-left",
   hocValidationAppliedTo: []
@@ -479,4 +489,6 @@ };
   nextButtonText: _propTypes2.default.string,
+  nextButtonCls: _propTypes2.default.string,
+  backButtonCls: _propTypes2.default.string,
   backButtonText: _propTypes2.default.string,
   hocValidationAppliedTo: _propTypes2.default.array
 };

package.json

 {
   "name": "react-stepzilla",
-  "version": "4.6.2",
+  "version": "4.6.3",
   "description": "A react multi-step, wizard component for managing data collection via forms and sub components",
@@ -5,0 +5,0 @@ "main": "./dist/main.js",

README.md

@@ -83,2 +83,8 @@ # react stepzilla [![npm version](https://badge.fury.io/js/react-stepzilla.svg)](https://badge.fury.io/js/react-stepzilla)
 
+// specify the next button class (if not given it defaults to "btn btn-prev btn-primary btn-lg" which depends on bootstrap)
+nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right"
+
+// specify the back button text (if not given it default to "btn btn-next btn-primary btn-lg")
+backButtonCls: "btn btn-next btn-primary btn-lg pull-left"
+
 // specify what the next button text should be in the step before the last (This is usually the last "Actionable" step. You can use this option to change the Next button to say Save - if you save the form data collected in previous steps)
@@ -85,0 +91,0 @@ nextTextOnFinalActionStep: "Save"

src/examples/Step1.js

@@ -47,2 +47,4 @@ 'use strict';
                       backButtonText='Previous'<br />
+                      nextButtonCls='btn btn-prev btn-primary btn-lg pull-right'<br />
+                      backButtonCls='btn btn-next btn-primary btn-lg pull-left'<br />
                       nextTextOnFinalActionStep='[default value of nextButtonText]'<br />
@@ -49,0 +51,0 @@ hocValidationAppliedTo: []

src/main.js

@@ -290,2 +290,3 @@ import React, { Component } from 'react';
   render() {
+    const { props } = this;
     let compToRender;
@@ -321,12 +322,20 @@
           {compToRender}
-
-          <div style={this.props.showNavigation ? {} : this.hidden} className="footer-buttons">
-              <button style={this.state.showPreviousBtn ? {} : this.hidden}
-                  className="btn btn-prev btn-primary btn-lg pull-left"
-                  onClick={() => {this.previous()}}>{this.props.backButtonText}</button>
-
-              <button style={this.state.showNextBtn ? {} : this.hidden}
-                  className="btn btn-next btn-primary btn-lg pull-right"
-                  onClick={() => {this.next()}}>{this.state.nextStepText}</button>
-          </div>
+        <div style={this.props.showNavigation ? {} : this.hidden} className="footer-buttons">
+          <button
+            style={this.state.showPreviousBtn ? {} : this.hidden}
+            className={props.backButtonCls}
+            onClick={() => {this.previous()}}
+            id="prev-button"
+          >
+            {this.props.backButtonText}
+          </button>
+          <button
+            style={this.state.showNextBtn ? {} : this.hidden}
+            className={props.nextButtonCls}
+            onClick={() => {this.next()}}
+            id="next-button"
+          >
+            {this.state.nextStepText}
+          </button>
+        </div>
       </div>
@@ -346,3 +355,5 @@ );
   nextButtonText: "Next",
+  nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right",
   backButtonText: "Previous",
+  backButtonCls: "btn btn-next btn-primary btn-lg pull-left",
   hocValidationAppliedTo: []
@@ -364,4 +375,6 @@ };
   nextButtonText: PropTypes.string,
+  nextButtonCls: PropTypes.string,
+  backButtonCls: PropTypes.string,
   backButtonText: PropTypes.string,
   hocValidationAppliedTo: PropTypes.array
 }

tests/main.spec.js

@@ -133,20 +133,20 @@ import React from 'react';
       it('should render the Prev and Next button markup', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-prev')).to.have.length(1);
-        expect(enzymeWrapper.find('.footer-buttons .btn-next')).to.have.length(1);
+        expect(enzymeWrapper.find('.footer-buttons #prev-button')).to.have.length(1);
+        expect(enzymeWrapper.find('.footer-buttons #next-button')).to.have.length(1);
       });
 
       it('should show the Next button on first view', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-next').prop('style')).to.deep.equal({});
+        expect(enzymeWrapper.find('.footer-buttons #next-button').prop('style')).to.deep.equal({});
       });
 
       it('should render the forward button with the default "Next" text', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Next');
+        expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Next');
       });
 
       it('should render the back button with the default "Previous" text', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-prev').text()).to.be.equal('Previous');
+        expect(enzymeWrapper.find('.footer-buttons #prev-button').text()).to.be.equal('Previous');
       });
 
       it('should NOT show render the Prev button on first view', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({
+        expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({
           display: 'none'
@@ -157,8 +157,8 @@ });
       it('should render the Next and Prev button on 2nd step (and test if step classes also updated correctly)', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-next').prop('style')).to.deep.equal({});
-          expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({});
+          expect(enzymeWrapper.find('.footer-buttons #next-button').prop('style')).to.deep.equal({});
+          expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({});
           expect(enzymeWrapper.find('.progtrckr').childAt(0).hasClass('progtrckr-done')).to.be.true;
@@ -174,10 +174,10 @@ expect(enzymeWrapper.find('.progtrckr').childAt(1).hasClass('progtrckr-doing')).to.be.true;
       it('should NOT show render the Next button on last step (and test if step classes also updated correctly)', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-next').prop('style')).to.deep.equal({
+          expect(enzymeWrapper.find('.footer-buttons #next-button').prop('style')).to.deep.equal({
             display: 'none'
           });
-          expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({});
+          expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({});
           expect(enzymeWrapper.find('.progtrckr').childAt(0).hasClass('progtrckr-done')).to.be.true;
@@ -196,10 +196,10 @@ expect(enzymeWrapper.find('.progtrckr').childAt(1).hasClass('progtrckr-done')).to.be.true;
       it('should render Prev button on last (2nd) step', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+          enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
           setTimeout(() => {
-            expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({});
+            expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({});
 
@@ -216,3 +216,3 @@ done();
       it('should render "Next" as text for the forwards movement button', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Next');
+        expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Next');
       });
@@ -225,7 +225,7 @@ });
       it('should render "Previous" as text for the backwards movement button', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-prev').text()).to.be.equal('Previous');
+          expect(enzymeWrapper.find('.footer-buttons #prev-button').text()).to.be.equal('Previous');
 
@@ -241,7 +241,7 @@ done();
       it('should render "Next" when we jump to the final action step (2nd step in this case)', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Next');
+          expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Next');
 
@@ -259,7 +259,7 @@ done();
       it('should render "MoveForward" when we jump to the final action step as thats the default', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('MoveForward');
+          expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('MoveForward');
 
@@ -338,10 +338,10 @@ done();
       it('should NOT render Prev button on last (2nd) step', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+          enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
           setTimeout(() => {
-            expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({
+            expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({
               display: 'none'
@@ -362,3 +362,3 @@ });
       it('should render "MoveForward" as text for the forwards movement button', () => {
-        expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('MoveForward');
+        expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('MoveForward');
       });
@@ -373,7 +373,7 @@ });
       it('should render "MoveBack" as text for the backwards movement button', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-prev').text()).to.be.equal('MoveBack');
+          expect(enzymeWrapper.find('.footer-buttons #prev-button').text()).to.be.equal('MoveBack');
 
@@ -391,7 +391,7 @@ done();
       it('should render "Save" when we jump to the final action step (2nd step in this case)', (done) => {
-        enzymeWrapper.find('.footer-buttons .btn-next').simulate('click');
+        enzymeWrapper.find('.footer-buttons #next-button').simulate('click');
 
         // click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now
         setTimeout(() => {
-          expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Save');
+          expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Save');
 
@@ -398,0 +398,0 @@ done();

No alert changes

Improved metrics

Total package byte prevSize

1798194

0.18%

Number of package files

27

3.85%

Lines of code

43733

0.06%

Number of lines in readme file

174

3.57%

No dependency changes