react-stepper-horizontal - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

lib/Step.js

@@ -59,2 +59,10 @@ 'use strict';
       var barStyle = _props.barStyle;
+      var defaultBarColor = _props.defaultBarColor;
+      var completeBarColor = _props.completeBarColor;
+      var defaultBorderColor = _props.defaultBorderColor;
+      var completeBorderColor = _props.completeBorderColor;
+      var activeBorderColor = _props.activeBorderColor;
+      var defaultBorderStyle = _props.defaultBorderStyle;
+      var completeBorderStyle = _props.completeBorderStyle;
+      var activeBorderStyle = _props.activeBorderStyle;
 
@@ -80,11 +88,20 @@
           display: 'block',
-          opacity: defaultOpcaity
+          opacity: defaultOpcaity,
+          borderWidth: defaultBorderColor ? 3 : 0,
+          borderColor: defaultBorderColor,
+          borderStyle: defaultBorderStyle
         },
         activeCircle: {
           backgroundColor: activeColor,
-          opacity: activeOpacity
+          opacity: activeOpacity,
+          borderWidth: activeBorderColor ? 3 : 0,
+          borderColor: activeBorderColor,
+          borderStyle: activeBorderStyle
         },
         completedCircle: {
           backgroundColor: completeColor,
-          opacity: completeOpacity
+          opacity: completeOpacity,
+          borderWidth: completeBorderColor ? 3 : 0,
+          borderColor: completeBorderColor,
+          borderStyle: completeBorderStyle
         },
@@ -116,8 +133,8 @@ index: {
           height: 1,
-          borderTopStyle: barStyle || 'solid',
+          borderTopStyle: barStyle,
           borderTopWidth: 1,
-          borderTopColor: defaultColor,
+          borderTopColor: defaultBarColor,
           left: 0,
           right: '50%',
-          marginRight: size / 2 + 1,
+          marginRight: size / 2 + 4,
           opacity: defaultOpcaity
@@ -129,14 +146,14 @@ },
           height: 1,
-          borderTopStyle: barStyle || 'solid',
+          borderTopStyle: barStyle,
           borderTopWidth: 1,
-          borderTopColor: defaultColor,
+          borderTopColor: defaultBarColor,
           right: 0,
           left: '50%',
-          marginLeft: size / 2 + 1,
+          marginLeft: size / 2 + 4,
           opacity: defaultOpcaity
         },
         completedBar: {
-          borderTopStyle: barStyle || 'solid',
+          borderTopStyle: barStyle,
           borderTopWidth: 1,
-          borderTopColor: completeColor,
+          borderTopColor: completeBarColor,
           opacity: completeOpacity
@@ -215,3 +232,6 @@ }
   circleTop: 24,
-  titleTop: 8
+  titleTop: 8,
+  defaultBarColor: '#E0E0E0',
+  barStyle: 'solid',
+  borderStyle: 'solid'
 };
@@ -245,3 +265,11 @@
   defaultTitleOpacity: _propTypes.PropTypes.string,
-  barStyle: _propTypes.PropTypes.string
+  barStyle: _propTypes.PropTypes.string,
+  defaultBarColor: _propTypes.PropTypes.string,
+  completeBarColor: _propTypes.PropTypes.string,
+  defaultBorderColor: _propTypes.PropTypes.string,
+  completeBorderColor: _propTypes.PropTypes.string,
+  activeBorderColor: _propTypes.PropTypes.string,
+  defaultBorderStyle: _propTypes.PropTypes.string,
+  completeBorderStyle: _propTypes.PropTypes.string,
+  activeBorderStyle: _propTypes.PropTypes.string
 };

lib/Stepper.js

@@ -54,2 +54,10 @@ 'use strict';
   var barStyle = _ref.barStyle;
+  var defaultBorderColor = _ref.defaultBorderColor;
+  var completeBorderColor = _ref.completeBorderColor;
+  var activeBorderColor = _ref.activeBorderColor;
+  var defaultBorderStyle = _ref.defaultBorderStyle;
+  var completeBorderStyle = _ref.completeBorderStyle;
+  var activeBorderStyle = _ref.activeBorderStyle;
+  var defaultBarColor = _ref.defaultBarColor;
+  var completeBarColor = _ref.completeBarColor;
 
@@ -92,3 +100,11 @@ return _react2.default.createElement(
           activeTitleOpacity: activeTitleOpacity,
-          barStyle: barStyle
+          barStyle: barStyle,
+          defaultBorderColor: defaultBorderColor,
+          completeBorderColor: completeBorderColor,
+          activeBorderColor: activeBorderColor,
+          defaultBorderStyle: defaultBorderStyle,
+          completeBorderStyle: completeBorderStyle,
+          activeBorderStyle: activeBorderStyle,
+          defaultBarColor: defaultBarColor,
+          completeBarColor: completeBarColor
         });
@@ -125,5 +141,13 @@ })
   activeTitleOpacity: _propTypes.PropTypes.string,
-  barStyle: _propTypes.PropTypes.string
+  barStyle: _propTypes.PropTypes.string,
+  defaultBarColor: _propTypes.PropTypes.string,
+  completeBarColor: _propTypes.PropTypes.string,
+  defaultBorderColor: _propTypes.PropTypes.string,
+  completeBorderColor: _propTypes.PropTypes.string,
+  activeBorderColor: _propTypes.PropTypes.string,
+  defaultBorderStyle: _propTypes.PropTypes.string,
+  completeBorderStyle: _propTypes.PropTypes.string,
+  activeBorderStyle: _propTypes.PropTypes.string
 };
 
 exports.default = Stepper;

package.json

 {
   "name": "react-stepper-horizontal",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Well-designed stepper component for react",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -7,3 +7,3 @@ # react-stepper
 npm install react-stepper-horizontal --save
-``` 
+```
 Then just add `import Stepper from 'react-stepper-horizontal';` into your file.
@@ -43,9 +43,17 @@
 |titleTop|Space between circle and title|8|number|
-|defaultOpacity|Default cirlce opacity|1|string|
-|completeOpacity|Completed cirlce opacity|1|string|
-|activeOpacity|Active cirlce opacity|1|string|
+|defaultOpacity|Default circle opacity|1|string|
+|completeOpacity|Completed circle opacity|1|string|
+|activeOpacity|Active circle opacity|1|string|
 |defaultTitleOpacity|Default title opacity|1|string|
 |completeTitleOpacity|Completed title opacity|1|string|
 |activeTitleOpacity|Active title opacity|1|string|
-|barStyle|Style of bar seperating steps|solid|string|
+|barStyle|Style of bar separating steps|solid|string|
+|defaultBorderColor|Default color of border surrounding circle||string|
+|completeBorderColor|Color of border surrounding completed circle||string|
+|activeBorderColor|Color of border surrounding active circle||string|
+|defaultBorderStyle|Default style of border surrounding circle|solid|string|
+|completeBorderStyle|Style of border surrounding completed circle|solid|string|
+|activeBorderStyle|Style of border surrounding active circle|solid|string|
+|defaultBarColor|Default color of bar separating circles|#E0E0E0|string|
+|completeBarColor|Color of bar connected to a completed step|#E0E0E0|string|
 
@@ -52,0 +60,0 @@

No alert changes

Improved metrics

Total package byte prevSize

97201

increased by3.31%

Lines of code

389

increased by15.43%

Number of lines in readme file

66

increased by13.79%

No dependency changes