zt-react-components - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

lib/Checkbox.js

@@ -62,6 +62,16 @@ "use strict";
 
-var CheckboxElement = _styledComponents2.default.span(_templateObject, function (_ref) {
-    var checked = _ref.checked;
-    return checked ? _designGuideline.colors.black : _designGuideline.colors.gray;
-}, _designGuideline.borderRadiuses.default, function (_ref2) {
+var getBorderColor = function getBorderColor(_ref) {
+    var checked = _ref.checked,
+        error = _ref.error;
+
+    if (error) {
+        return _designGuideline.colors.red;
+    } else if (checked) {
+        return _designGuideline.colors.black;
+    }
+
+    return _designGuideline.colors.gray;
+};
+
+var CheckboxElement = _styledComponents2.default.span(_templateObject, getBorderColor, _designGuideline.borderRadiuses.default, function (_ref2) {
     var disabled = _ref2.disabled;
@@ -134,3 +144,5 @@ return disabled && _designGuideline.colors.darkerWhite;
                 defaultChecked = _props.defaultChecked,
-                props = _objectWithoutProperties(_props, ["size", "disabled", "defaultChecked"]);
+                error = _props.error,
+                className = _props.className,
+                props = _objectWithoutProperties(_props, ["size", "disabled", "defaultChecked", "error", "className"]);
 
@@ -143,3 +155,5 @@ var isChecked = this.state.isChecked;
                 {
+                    className: className,
                     checked: isChecked,
+                    error: error,
                     size: size,
@@ -168,4 +182,6 @@ disabled: disabled
     disabled: _propTypes2.default.bool,
-    onChange: _propTypes2.default.func
+    error: _propTypes2.default.bool,
+    onChange: _propTypes2.default.func,
+    className: _propTypes2.default.string
 };
 exports.default = Checkbox;

lib/designGuideline.js

@@ -14,3 +14,4 @@ "use strict";
     gray: "#999",
-    black: "#000"
+    black: "#000",
+    red: "#cd4936"
 };
@@ -17,0 +18,0 @@

package.json

@@ -1,1 +0,56 @@
-{"name":"zt-react-components","version":"1.1.1","description":"Commonly used React components for ZeroTurnaround products","license":"Apache-2.0","main":"lib/index.js","files":["dist","lib","src"],"scripts":{"build":"yarn build:commonjs && yarn build:umd","build:commonjs":"babel src -d lib","build:commonjs:watch":"yarn build -- --watch","build:umd":"webpack src/index.js dist/zt-react-components.js","build:umd:watch":"yarn build:umd -- --watch","test":"jest","test:watch":"jest --watch","test:update":"jest --u","lint":"eslint .","prepublish":"yarn build"},"repository":{"type":"git","url":"https://github.com/zeroturnaround/zt-react-components.git"},"peerDependencies":{"react":">=15.0.0"},"dependencies":{"prop-types":"^15.5.10","styled-components":"^2.0.1"},"devDependencies":{"babel-cli":"^6.24.1","babel-eslint":"^7.2.3","babel-loader":"^7.0.0","babel-plugin-inline-react-svg":"^0.4.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.5.2","babel-preset-react":"^6.24.1","eslint":"^3.19.0","eslint-config-zt":"^1.4.0","eslint-plugin-react":"^7.0.1","jest":"^20.0.4","jest-styled-components":"next","react":"^15.6.1","react-test-renderer":"^15.5.4","webpack":"^2.6.1"},"jest":{"testEnvironment":"node"}}
+{
+    "name": "zt-react-components",
+    "version": "1.2.0",
+    "description": "Commonly used React components for ZeroTurnaround products",
+    "license": "Apache-2.0",
+    "main": "lib/index.js",
+    "files": [
+        "dist",
+        "lib",
+        "src"
+    ],
+    "scripts": {
+        "build": "yarn build:commonjs && yarn build:umd",
+        "build:commonjs": "babel src -d lib",
+        "build:commonjs:watch": "yarn build -- --watch",
+        "build:umd": "webpack src/index.js dist/zt-react-components.js",
+        "build:umd:watch": "yarn build:umd -- --watch",
+        "test": "jest",
+        "test:watch": "jest --watch",
+        "test:update": "jest --u",
+        "lint": "eslint .",
+        "prepublish": "yarn build"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/zeroturnaround/zt-react-components.git"
+    },
+    "peerDependencies": {
+        "react": ">=15.0.0"
+    },
+    "dependencies": {
+        "prop-types": "^15.5.10",
+        "styled-components": "^2.0.1"
+    },
+    "devDependencies": {
+        "babel-cli": "^6.24.1",
+        "babel-eslint": "^7.2.3",
+        "babel-loader": "^7.0.0",
+        "babel-plugin-inline-react-svg": "^0.4.0",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-object-rest-spread": "^6.23.0",
+        "babel-preset-env": "^1.5.2",
+        "babel-preset-react": "^6.24.1",
+        "eslint": "^3.19.0",
+        "eslint-config-zt": "^1.4.0",
+        "eslint-plugin-react": "^7.0.1",
+        "jest": "^20.0.4",
+        "jest-styled-components": "next",
+        "react": "^15.6.1",
+        "react-test-renderer": "^15.5.4",
+        "webpack": "^2.6.1"
+    },
+    "jest": {
+        "testEnvironment": "node"
+    }
+}

src/Checkbox.js

@@ -7,2 +7,13 @@ import React, {PureComponent} from "react";
 
+const getBorderColor = ({checked, error}) => {
+    if (error) {
+        return colors.red;
+    }
+    else if (checked) {
+        return colors.black;
+    }
+
+    return colors.gray;
+};
+
 const CheckboxElement = styled.span`
@@ -16,3 +27,3 @@ display: inline-flex;
 
-    border: 1px solid ${({checked}) => checked ? colors.black : colors.gray};
+    border: 1px solid ${getBorderColor};
     border-radius: ${borderRadiuses.default};
@@ -56,3 +67,5 @@
         disabled: PropTypes.bool,
-        onChange: PropTypes.func
+        error: PropTypes.bool,
+        onChange: PropTypes.func,
+        className: PropTypes.string,
     };
@@ -87,3 +100,3 @@
         // eslint-disable-next-line no-unused-vars
-        const { size, disabled, defaultChecked, ...props } = this.props;
+        const { size, disabled, defaultChecked, error, className, ...props } = this.props;
         const { isChecked } = this.state;
@@ -93,3 +106,5 @@
             <CheckboxElement
+                className={className}
                 checked={isChecked}
+                error={error}
                 size={size}
@@ -96,0 +111,0 @@ disabled={disabled}

src/designGuideline.js

@@ -10,2 +10,3 @@ const borderRadiuses = {
     black: "#000",
+    red: "#cd4936",
 };
@@ -12,0 +13,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317432

increased by0.54%

Lines of code

8372

increased by0.5%

No dependency changes