react-interface - npm Package Compare versions

Comparing version 0.8.32 to 0.8.33

es/components/Button/index.js

@@ -1,2 +0,3 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  background: ', ';\n  color: ', ';\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ', ';\n  ', ';\n  ', ';\n'], ['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  background: ', ';\n  color: ', ';\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ', ';\n  ', ';\n  ', ';\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n'], ['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteralLoose(['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  '], ['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  ']);
 
@@ -7,14 +8,32 @@ function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { space, width, color } from 'styled-system';
 
 var Btn = styled.button(_templateObject, function (props) {
-  return props.theme.colors[props.color];
+  return props.theme.sizes.paddings[props.size];
 }, function (props) {
-  return props.theme.colors[props.color + '1'];
+  return props.theme.sizes.fonts[props.size];
 }, function (props) {
-  return props.theme.sizes.paddings[props.size];
+  return !props.type && css(_templateObject2, 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.sizes.fonts[props.size];
-}, space, width, color);
+  return props.theme["button.background"];
+}, function (props) {
+  return props.theme["button.border.color"];
+}, function (props) {
+  return props.theme["button.color"];
+}, function (props) {
+  return props.type && css(_templateObject2, 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'];
+  });
+}, color, space, width);
 
@@ -29,3 +48,3 @@ var Button = function Button(props) {
    */
-  color: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'danger']),
+  type: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'danger', PropTypes.string]),
   /**
@@ -45,3 +64,2 @@ * How big is it?
 Button.defaultProps = {
-  color: 'primary',
   size: 'md'
@@ -48,0 +66,0 @@ };

lib/components/Button/index.js

@@ -5,3 +5,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  background: ', ';\n  color: ', ';\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ', ';\n  ', ';\n  ', ';\n'], ['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  background: ', ';\n  color: ', ';\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ', ';\n  ', ';\n  ', ';\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n'], ['\n  cursor: pointer;\n  padding: 1rem;\n  outline: none;\n  padding: ', 'rem;\n  font-size: ', ';\n  border-radius: 3px;\n  border: none;\n  transition: all .2s ease-in-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteralLoose(['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  '], ['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  ']);
 
@@ -27,10 +28,28 @@ var _react = require('react');
 var Btn = _styledComponents2.default.button(_templateObject, function (props) {
-  return props.theme.colors[props.color];
+  return props.theme.sizes.paddings[props.size];
 }, function (props) {
-  return props.theme.colors[props.color + '1'];
+  return props.theme.sizes.fonts[props.size];
 }, function (props) {
-  return props.theme.sizes.paddings[props.size];
+  return !props.type && (0, _styledComponents.css)(_templateObject2, 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.sizes.fonts[props.size];
-}, _styledSystem.space, _styledSystem.width, _styledSystem.color);
+  return props.theme["button.background"];
+}, function (props) {
+  return props.theme["button.border.color"];
+}, function (props) {
+  return props.theme["button.color"];
+}, function (props) {
+  return props.type && (0, _styledComponents.css)(_templateObject2, 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'];
+  });
+}, _styledSystem.color, _styledSystem.space, _styledSystem.width);
 
@@ -45,3 +64,3 @@ var Button = function Button(props) {
    */
-  color: _propTypes2.default.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'danger']),
+  type: _propTypes2.default.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'danger', _propTypes2.default.string]),
   /**
@@ -61,3 +80,2 @@ * How big is it?
 Button.defaultProps = {
-  color: 'primary',
   size: 'md'
@@ -64,0 +82,0 @@ };

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

133488

increased by1.42%

Lines of code

2684

increased by1.36%

No dependency changes