Merge pull request #2 from josephmaxim/add-degree-prop

josephmaxim · web-flow · commit 4dc3d95d90bc · 2017-12-24T20:59:17.000-05:00
Added skew prop
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ export default class extends React.Component{
                 <SkewedContainer
                 top="left || right"  
                 bottom="left || right"
-                bgColor="blue"  
+                bgColor="skyblue"  
                 >
                     {/* YOUR CODE HERE */}
                 </SkewedContainer>
@@ -46,5 +46,6 @@ SkewedContainer.propTypes = {
     bottom: PropTypes.string,
     noMargin : PropTypes.bool,
     bgColor: PropTypes.string
+    skew: PropTypes.Number
 }
 ```
diff --git a/dist/index.js b/dist/index.js
@@ -498,7 +498,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _templateObject = _taggedTemplateLiteral(['\n            ', '\n            width: 100%;\n            position: relative;\n            background-color: ', ';\n            z-index: 2;\n            min-height: 100px;\n\n            &:before{\n                ', '\n                ', '\n            }\n            &:after {\n                ', '\n                ', '\n            }\n        '], ['\n            ', '\n            width: 100%;\n            position: relative;\n            background-color: ', ';\n            z-index: 2;\n            min-height: 100px;\n\n            &:before{\n                ', '\n                ', '\n            }\n            &:after {\n                ', '\n                ', '\n            }\n        ']),
+var _templateObject = _taggedTemplateLiteral(['\n            ', '\n            width: 100%;\n            position: relative;\n            background-color: ', ';\n            z-index: 2;\n            min-height: 200px;\n\n            &:before{\n                ', '\n                ', '\n            }\n            &:after {\n                ', '\n                ', '\n            }\n        '], ['\n            ', '\n            width: 100%;\n            position: relative;\n            background-color: ', ';\n            z-index: 2;\n            min-height: 200px;\n\n            &:before{\n                ', '\n                ', '\n            }\n            &:after {\n                ', '\n                ', '\n            }\n        ']),
     _templateObject2 = _taggedTemplateLiteral(['\n            width: 100%;\n        '], ['\n            width: 100%;\n        ']);
 
 var _react = __webpack_require__(4);
@@ -540,22 +540,23 @@ var SkewedContainer = function (_React$Component) {
             var skew = function skew(propValue, position) {
                 var val = "",
                     skewYDeg = "",
-                    skewPosition = "";
+                    skewPosition = "",
+                    skewProp = _this2.props.skew;
                 switch (propValue) {
                     case "left":
-                        position === 'top' ? skewYDeg = "-3deg" : skewYDeg = "3deg";
+                        position === 'top' ? skewYDeg = -skewProp : skewYDeg = skewProp;
                         skewPosition = "left";
                         break;
                     case "right":
-                        position === 'top' ? skewYDeg = "3deg" : skewYDeg = "-3deg";
+                        position === 'top' ? skewYDeg = skewProp : skewYDeg = -skewProp;
                         skewPosition = "right";
                         break;
                     default:
                         skewYDeg = "";
                         skewPosition = "";
                         break;
                 }
-                val = position + ':0; transform-origin: ' + skewPosition + ' ' + position + '; transform: skewY(' + skewYDeg + ');';
+                val = position + ':0; transform-origin: ' + skewPosition + ' ' + position + '; transform: skewY(' + skewYDeg + 'Deg);';
                 console.log(val);
                 return val;
             };
@@ -605,7 +606,8 @@ SkewedContainer.propTypes = {
     top: _propTypes2.default.string,
     bottom: _propTypes2.default.string,
     noMargin: _propTypes2.default.bool,
-    bgColor: _propTypes2.default.string
+    bgColor: _propTypes2.default.string,
+    skew: _propTypes2.default.number
 };
 
 SkewedContainer.defaultProps = {
@@ -614,7 +616,8 @@ SkewedContainer.defaultProps = {
     top: '',
     bottom: '',
     noMargin: false,
-    bgColor: 'grey'
+    bgColor: 'grey',
+    skew: 3
 };
 
 /***/ }),
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sc-react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A react library for creating non-rectangular/slanted container divs.",
   "keywords": [
     "react",
diff --git a/src/index.js b/src/index.js
@@ -5,22 +5,22 @@ import styled from 'styled-components';
 export default class SkewedContainer extends React.Component{
     render(){
         var skew = (propValue, position) => {
-            var val = "", skewYDeg = "", skewPosition = "";
+            var val = "", skewYDeg = "", skewPosition = "", skewProp = this.props.skew;
             switch(propValue){
                 case "left":
-                    position === 'top' ? skewYDeg = "-3deg" : skewYDeg = "3deg";
+                    position === 'top' ? skewYDeg = -skewProp : skewYDeg = skewProp;
                     skewPosition = "left";
                     break;
                 case "right":
-                    position === 'top' ? skewYDeg = "3deg" : skewYDeg = "-3deg";
+                    position === 'top' ? skewYDeg = skewProp : skewYDeg = -skewProp;
                     skewPosition = "right";
                     break;
                 default:
                     skewYDeg = "";
                     skewPosition = "";
                     break;
             }
-            val = `${position}:0; transform-origin: ${skewPosition} ${position}; transform: skewY(${skewYDeg});`;
+            val = `${position}:0; transform-origin: ${skewPosition} ${position}; transform: skewY(${skewYDeg}Deg);`;
             console.log(val);
             return val;
         }
@@ -51,7 +51,7 @@ export default class SkewedContainer extends React.Component{
             position: relative;
             background-color: ${this.props.bgColor};
             z-index: 2;
-            min-height: 100px;
+            min-height: 200px;
 
             &:before{
                 ${commonStyling}
@@ -83,7 +83,8 @@ SkewedContainer.propTypes = {
     top: PropTypes.string,
     bottom: PropTypes.string,
     noMargin : PropTypes.bool,
-    bgColor: PropTypes.string
+    bgColor: PropTypes.string,
+    skew: PropTypes.number
 }
 
 SkewedContainer.defaultProps = {
@@ -92,5 +93,6 @@ SkewedContainer.defaultProps = {
     top: '',
     bottom: '',
     noMargin : false,
-    bgColor: 'grey'
+    bgColor: 'grey',
+    skew: 3
 }
diff --git a/test/test.js b/test/test.js
@@ -10,7 +10,8 @@ describe('Component: SkewedContainer', () => {
             className:"",
             noMargin:false,
             style:{},
-            top:""
+            top:"",
+            skew: 3
     }
     it('render without errors', () => {
         expect(

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sc-react",`
`3`		`- "version": "0.1.2",`
	`3`	`+ "version": "0.1.4",`
`4`	`4`	`"description": "A react library for creating non-rectangular/slanted container divs.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"react",`