react-stepper-horizontal - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

lib/Step.js

@@ -66,3 +66,5 @@ 'use strict';
           completeBorderStyle = _props.completeBorderStyle,
-          activeBorderStyle = _props.activeBorderStyle;
+          activeBorderStyle = _props.activeBorderStyle,
+          lineMarginOffset = _props.lineMarginOffset,
+          defaultBorderWidth = _props.defaultBorderWidth;
 
@@ -89,3 +91,3 @@
           opacity: defaultOpacity,
-          borderWidth: defaultBorderColor ? 3 : 0,
+          borderWidth: defaultBorderColor ? defaultBorderWidth : 0,
           borderColor: defaultBorderColor,
@@ -97,3 +99,3 @@ borderStyle: defaultBorderStyle
           opacity: activeOpacity,
-          borderWidth: activeBorderColor ? 3 : 0,
+          borderWidth: activeBorderColor ? defaultBorderWidth : 0,
           borderColor: activeBorderColor,
@@ -105,3 +107,3 @@ borderStyle: activeBorderStyle
           opacity: completeOpacity,
-          borderWidth: completeBorderColor ? 3 : 0,
+          borderWidth: completeBorderColor ? defaultBorderWidth : 0,
           borderColor: completeBorderColor,
@@ -140,3 +142,3 @@ borderStyle: completeBorderStyle
           right: '50%',
-          marginRight: size / 2 + 4,
+          marginRight: size / 2 + lineMarginOffset,
           opacity: defaultOpacity
@@ -153,3 +155,3 @@ },
           left: '50%',
-          marginLeft: size / 2 + 4,
+          marginLeft: size / 2 + lineMarginOffset,
           opacity: defaultOpacity
@@ -170,2 +172,3 @@ },
           title = _props2.title,
+          icon = _props2.icon,
           index = _props2.index,
@@ -186,2 +189,4 @@ active = _props2.active,
 
+      var stepContent = icon ? _react2.default.createElement('img', { src: icon, alt: index + 1 }) : index + 1;
+
       return _react2.default.createElement(
@@ -196,7 +201,7 @@ 'div',
             { href: href, onClick: onClick, style: styles.index },
-            index + 1
+            stepContent
           ) : _react2.default.createElement(
             'span',
             { style: styles.index },
-            index + 1
+            stepContent
           )
@@ -240,3 +245,5 @@ ),
   barStyle: 'solid',
-  borderStyle: 'solid'
+  borderStyle: 'solid',
+  lineMarginOffset: 4,
+  defaultBorderWidth: 3
 };
@@ -278,3 +285,5 @@
   completeBorderStyle: _propTypes.PropTypes.string,
-  activeBorderStyle: _propTypes.PropTypes.string
+  activeBorderStyle: _propTypes.PropTypes.string,
+  lineMarginOffset: _propTypes.PropTypes.number,
+  defaultBorderWidth: _propTypes.PropTypes.number
 };

lib/Stepper.js

@@ -62,3 +62,5 @@ 'use strict';
       defaultBarColor = _ref.defaultBarColor,
-      completeBarColor = _ref.completeBarColor;
+      completeBarColor = _ref.completeBarColor,
+      lineMarginOffset = _ref.lineMarginOffset,
+      defaultBorderWidth = _ref.defaultBorderWidth;
 
@@ -76,2 +78,3 @@ return _react2.default.createElement(
           title: step.title,
+          icon: step.icon,
           href: step.href,
@@ -107,6 +110,8 @@ onClick: step.onClick,
           defaultBorderStyle: defaultBorderStyle,
+          defaultBorderWidth: defaultBorderWidth,
           completeBorderStyle: completeBorderStyle,
           activeBorderStyle: activeBorderStyle,
           defaultBarColor: defaultBarColor,
-          completeBarColor: completeBarColor
+          completeBarColor: completeBarColor,
+          lineMarginOffset: lineMarginOffset
         });
@@ -151,5 +156,7 @@ })
   completeBorderStyle: _propTypes.PropTypes.string,
-  activeBorderStyle: _propTypes.PropTypes.string
+  activeBorderStyle: _propTypes.PropTypes.string,
+  lineMarginOffset: _propTypes.PropTypes.number,
+  defaultBorderWidth: _propTypes.PropTypes.number
 };
 
 exports.default = Stepper;

package.json

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

README.md

@@ -26,6 +26,9 @@ # react-stepper
 ## API
+
+### Main Component
+
 | name     | description    | default    | type     |
 |----------|----------------|--------------|--------|
 |activeStep|Active step index, starts at 0|0|number|
-|steps|List of steps, must be string array||array|
+|steps|List of step objects (see below)||array|
 |activeColor|Active circle color|#5096FF|string|
@@ -58,4 +61,14 @@ |completeColor|Completed circle color|#5096FF|string|
 |completeBarColor|Color of bar connected to a completed step|#E0E0E0|string|
+|lineMarginOffset|Offset for line margin|4|number|
+|defaultBorderWidth|Default Border Width|3|number|
 
+### Step Objects
+| name     | description    | default    | type   |
+|----------|----------------|------------|--------|
+|title|Displayed text of the step below the number|undefined|string|
+|icon|Displayed icon of the step|undefined|image/object|
+|href|Link to send them to on click|undefined|string|
+|onClick|Event handler for when the step is clicked|undefined|function|
 
+
 ## Author
@@ -62,0 +75,0 @@

No alert changes

Improved metrics

Total package byte prevSize

99247

increased by1.97%

Lines of code

405

increased by3.85%

Number of lines in readme file

79

increased by19.7%

Worsened metrics

Number of package files

8

decreased by-11.11%

No dependency changes