react-interface - npm Package Compare versions

Comparing version 0.9.4-alpha.23 to 0.9.4-alpha.24

es/components/Box/index.js

@@ -1,2 +0,2 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
 
@@ -7,5 +7,5 @@ function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 import { Box } from 'grid-styled';
-import { borderRadius, borderColor, borderWidth, space, color, width, justifyContent, alignItems, flexDirection } from 'styled-system';
+import { borderRadius, borderColor, borderWidth, borders, space, color, width, justifyContent, alignItems, flexDirection } from 'styled-system';
 import { flex } from '../../utils/styled-system-enhancers';
 
-export default Box.extend(_templateObject, borderRadius, borderColor, borderWidth, color, space, width, flex, flexDirection, alignItems, justifyContent);
+export default Box.extend(_templateObject, borderRadius, borderColor, borderWidth, borders, color, space, width, flex, flexDirection, alignItems, justifyContent);

es/components/Button/Button.js

@@ -1,2 +0,2 @@
-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  box-shadow: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\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  box-shadow: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\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-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\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-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\n  }\n']),
     _templateObject2 = _taggedTemplateLiteralLoose(['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  '], ['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  ']);
@@ -9,3 +9,3 @@
 import styled, { css } from 'styled-components';
-import { space, width, color } from 'styled-system';
+import { space, width, color, borderRadius } from 'styled-system';
 
@@ -29,2 +29,6 @@ var Button = styled.button(_templateObject, function (props) {
 }, function (props) {
+  return props.theme["button.border.width"];
+}, function (props) {
+  return props.theme["button.border.width"];
+}, function (props) {
   return props.theme["button.color"];
@@ -34,2 +38,4 @@ }, function (props) {
 }, function (props) {
+  return props.theme["button.border.radius"];
+}, function (props) {
   return props.palette && css(_templateObject2, function (props) {
@@ -42,3 +48,3 @@ return props.theme.colors[props.palette];
   });
-}, color, space, width, function (props) {
+}, color, space, width, borderRadius, function (props) {
   return props.theme["button.disabled.background"];
@@ -45,0 +51,0 @@ }, function (props) {

es/components/Checkbox/Checkbox.js

@@ -26,3 +26,3 @@ 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; };
 }, function (props) {
-  return props.theme.sizes.paddings[props.size] / 10;
+  return props.theme.sizes.paddings[props.size] / 2;
 }, function (props) {
@@ -29,0 +29,0 @@ return props.theme['checkbox.label.color'];

es/components/Notification/index.js

@@ -1,2 +0,2 @@
-var _templateObject = _taggedTemplateLiteralLoose(['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']),
+var _templateObject = _taggedTemplateLiteralLoose(['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  line-height: 1rem;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  line-height: 1rem;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\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  ']);
@@ -3,0 +3,0 @@

es/components/Popper/Popper.js

@@ -99,2 +99,3 @@ 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; };
 
+      // TODO: check for existence of element sbefore setting listener
       _this.outsideTap = outy(elements, ['click', 'touchstart'], _this._handleOutsideTap);
@@ -101,0 +102,0 @@ };

es/Theme.js

@@ -16,2 +16,3 @@ 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; };
 
+// Check out https://github.com/jxnblk/styled-system/tree/master/system-components
 var Wrapper = styled.div(_templateObject, function (props) {
@@ -18,0 +19,0 @@ return props.theme.fonts.primary;

es/themes/base/colors.js

@@ -9,2 +9,5 @@ export default {
   background: '#FFF'
+
+  // check https://tailwindcss.com/docs/colors
+
 };

es/themes/base/sizes.js

@@ -0,1 +1,2 @@
+// https://tailwindcss.com/docs/spacing
 var sizes = {
@@ -2,0 +3,0 @@ screen: {

lib/components/Box/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
 
@@ -22,3 +22,3 @@ var _styledComponents = require('styled-components');
 
-exports.default = _gridStyled.Box.extend(_templateObject, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.borderWidth, _styledSystem.color, _styledSystem.space, _styledSystem.width, _styledSystemEnhancers.flex, _styledSystem.flexDirection, _styledSystem.alignItems, _styledSystem.justifyContent);
+exports.default = _gridStyled.Box.extend(_templateObject, _styledSystem.borderRadius, _styledSystem.borderColor, _styledSystem.borderWidth, _styledSystem.borders, _styledSystem.color, _styledSystem.space, _styledSystem.width, _styledSystemEnhancers.flex, _styledSystem.flexDirection, _styledSystem.alignItems, _styledSystem.justifyContent);
 module.exports = exports['default'];

lib/components/Button/Button.js

@@ -5,3 +5,3 @@ 'use strict';
 
-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  box-shadow: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\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  box-shadow: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\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-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\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-color: ', ';\n  border-width: ', ';\n  border-style: ', ';\n  color: ', ';\n  box-shadow: ', ';\n  border-radius: ', ';\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:disabled {\n    background: ', ';\n    color: ', ';\n  }\n']),
     _templateObject2 = _taggedTemplateLiteralLoose(['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  '], ['\n    background: ', ';\n    border: 1px solid ', ';\n    color: ', ';\n  ']);
@@ -44,2 +44,6 @@
 }, function (props) {
+  return props.theme["button.border.width"];
+}, function (props) {
+  return props.theme["button.border.width"];
+}, function (props) {
   return props.theme["button.color"];
@@ -49,2 +53,4 @@ }, function (props) {
 }, function (props) {
+  return props.theme["button.border.radius"];
+}, function (props) {
   return props.palette && (0, _styledComponents.css)(_templateObject2, function (props) {
@@ -57,3 +63,3 @@ return props.theme.colors[props.palette];
   });
-}, _styledSystem.color, _styledSystem.space, _styledSystem.width, function (props) {
+}, _styledSystem.color, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, function (props) {
   return props.theme["button.disabled.background"];
@@ -60,0 +66,0 @@ }, function (props) {

lib/components/Checkbox/Checkbox.js

@@ -44,3 +44,3 @@ "use strict";
 }, function (props) {
-  return props.theme.sizes.paddings[props.size] / 10;
+  return props.theme.sizes.paddings[props.size] / 2;
 }, function (props) {
@@ -47,0 +47,0 @@ return props.theme['checkbox.label.color'];

lib/components/Notification/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteralLoose(['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']),
+var _templateObject = _taggedTemplateLiteralLoose(['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  line-height: 1rem;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  padding: ', 'rem;\n  font-size: ', ';\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  line-height: 1rem;\n\n  ', '\n\n  background: ', ';\n  border: 1px solid ', ';\n  color: ', ';\n\n  ', '\n\n  ', '\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  ']);
@@ -8,0 +8,0 @@

lib/components/Popper/Popper.js

@@ -131,2 +131,3 @@ 'use strict';
 
+      // TODO: check for existence of element sbefore setting listener
       _this.outsideTap = (0, _outy2.default)(elements, ['click', 'touchstart'], _this._handleOutsideTap);
@@ -133,0 +134,0 @@ };

lib/Theme.js

@@ -37,2 +37,3 @@ 'use strict';
 
+// Check out https://github.com/jxnblk/styled-system/tree/master/system-components
 var Wrapper = _styledComponents2.default.div(_templateObject, function (props) {
@@ -39,0 +40,0 @@ return props.theme.fonts.primary;

lib/themes/base/colors.js

@@ -12,3 +12,6 @@ 'use strict';
   background: '#FFF'
+
+  // check https://tailwindcss.com/docs/colors
+
 };
 module.exports = exports['default'];

lib/themes/base/sizes.js

 "use strict";
 
 exports.__esModule = true;
+// https://tailwindcss.com/docs/spacing
 var sizes = {
@@ -5,0 +6,0 @@ screen: {

package.json

 {
   "name": "react-interface",
-  "version": "0.9.4-alpha.23",
+  "version": "0.9.4-alpha.24",
   "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

250418

increased by0.56%

Lines of code

5300

increased by0.38%

No dependency changes