react-interface - npm Package Compare versions

Comparing version 0.8.9 to 0.8.10

es/components/Checkbox/index.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ", ";\n  cursor: pointer;\n\n  > span {\n    padding-left: ", "rem;\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ", ";\n  cursor: pointer;\n\n  > span {\n    padding-left: ", "rem;\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n"]),
-    _templateObject2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  height: ", ";\n  width: ", ";\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  height: ", ";\n  width: ", ";\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"]);
+    _templateObject2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  ", "\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  ", "\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"]),
+    _templateObject3 = _taggedTemplateLiteralLoose(["\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n  "], ["\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n  "]);
 
@@ -16,3 +17,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { space, size, borderColor, borderRadius, color } from "styled-system";
@@ -30,11 +31,31 @@ import Icon from "../Icon";
 var Box = styled.div(_templateObject2, borderRadius, borderColor, color, function (props) {
-  return props.theme.colors[props.color] || props.theme["checkbox.background"] || props.theme.colors.primary;
+  return props.theme.sizes.dimensions[props.size];
 }, function (props) {
-  return props.theme.colors[props.color] || props.theme["checkbox.border.color"] || props.theme.colors.primary5;
+  return props.theme.sizes.dimensions[props.size];
 }, function (props) {
-  return props.theme.colors[props.color + "1"] || props.theme["checkbox.icon.color"] || props.theme.colors.primary1;
+  return props.theme["checkbox.background"];
 }, function (props) {
-  return props.theme.sizes.dimensions[props.size];
+  return props.theme["checkbox.border.color"];
 }, function (props) {
-  return props.theme.sizes.dimensions[props.size];
+  return props.theme["checkbox.icon.color"];
+}, function (props) {
+  return !props.type && css(_templateObject3, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors['primary1'];
+  });
+}, function (props) {
+  return props.theme["checkbox.hover.border.color"];
+}, function (props) {
+  return props.theme["checkbox.hover.background"];
+}, function (props) {
+  return props.type && css(_templateObject3, function (props) {
+    return props.theme.colors[props.type];
+  }, function (props) {
+    return props.theme.colors[props.type];
+  }, function (props) {
+    return props.theme.colors[props.type + "1"];
+  });
 });
@@ -85,6 +106,6 @@
       Wrapper,
-      _extends({}, this.props, { onClick: this.onClick }),
+      _extends({}, this.props, { onClick: this.onClick, className: "checkbox-wrapper" }),
       React.createElement(
         Box,
-        this.props,
+        _extends({}, this.props, { className: "checkbox-wrapper" }),
         checked && React.createElement(Icon, { type: "check" })
@@ -94,3 +115,3 @@ ),
         "span",
-        { onClick: this.onLabelClick },
+        { onClick: this.onLabelClick, className: "checkbox-label" },
         label
@@ -97,0 +118,0 @@ )

lib/components/Checkbox/index.js

@@ -8,3 +8,4 @@ "use strict";
 var _templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ", ";\n  cursor: pointer;\n\n  > span {\n    padding-left: ", "rem;\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ", ";\n  cursor: pointer;\n\n  > span {\n    padding-left: ", "rem;\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n"]),
-    _templateObject2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  height: ", ";\n  width: ", ";\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  height: ", ";\n  width: ", ";\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"]);
+    _templateObject2 = _taggedTemplateLiteralLoose(["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  ", "\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  ", "\n\n  svg,\n  div {\n    display: inherit;\n    height: 100%;\n    width: 100%;\n  }\n"]),
+    _templateObject3 = _taggedTemplateLiteralLoose(["\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n  "], ["\n    background: ", ";\n    border: 1px solid ", ";\n    color: ", ";\n  "]);
 
@@ -48,11 +49,31 @@ var _react = require("react");
 var Box = _styledComponents2.default.div(_templateObject2, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.color, function (props) {
-  return props.theme.colors[props.color] || props.theme["checkbox.background"] || props.theme.colors.primary;
+  return props.theme.sizes.dimensions[props.size];
 }, function (props) {
-  return props.theme.colors[props.color] || props.theme["checkbox.border.color"] || props.theme.colors.primary5;
+  return props.theme.sizes.dimensions[props.size];
 }, function (props) {
-  return props.theme.colors[props.color + "1"] || props.theme["checkbox.icon.color"] || props.theme.colors.primary1;
+  return props.theme["checkbox.background"];
 }, function (props) {
-  return props.theme.sizes.dimensions[props.size];
+  return props.theme["checkbox.border.color"];
 }, function (props) {
-  return props.theme.sizes.dimensions[props.size];
+  return props.theme["checkbox.icon.color"];
+}, function (props) {
+  return !props.type && (0, _styledComponents.css)(_templateObject3, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors['primary1'];
+  });
+}, function (props) {
+  return props.theme["checkbox.hover.border.color"];
+}, function (props) {
+  return props.theme["checkbox.hover.background"];
+}, function (props) {
+  return props.type && (0, _styledComponents.css)(_templateObject3, function (props) {
+    return props.theme.colors[props.type];
+  }, function (props) {
+    return props.theme.colors[props.type];
+  }, function (props) {
+    return props.theme.colors[props.type + "1"];
+  });
 });
@@ -103,6 +124,6 @@
       Wrapper,
-      _extends({}, this.props, { onClick: this.onClick }),
+      _extends({}, this.props, { onClick: this.onClick, className: "checkbox-wrapper" }),
       _react2.default.createElement(
         Box,
-        this.props,
+        _extends({}, this.props, { className: "checkbox-wrapper" }),
         checked && _react2.default.createElement(_Icon2.default, { type: "check" })
@@ -112,3 +133,3 @@ ),
         "span",
-        { onClick: this.onLabelClick },
+        { onClick: this.onLabelClick, className: "checkbox-label" },
         label
@@ -115,0 +136,0 @@ )

package.json

 {
   "name": "react-interface",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "react-interface React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

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

85856

increased by2.41%

Lines of code

1754

increased by2.57%

No dependency changes