@vtex/styleguide - npm Package Compare versions

Comparing version 2.0.0-rc.11 to 2.0.0-rc.12

lib/Alert/index.js

@@ -17,18 +17,10 @@ 'use strict';
 
-var _Close = require('../Icons/Close');
+var _Icon = require('../Icon');
 
-var _Close2 = _interopRequireDefault(_Close);
+var _Icon2 = _interopRequireDefault(_Icon);
 
-var _Success = require('../Icons/Success');
+var _config = require('vtex-tachyons/config.json');
 
-var _Success2 = _interopRequireDefault(_Success);
+var _config2 = _interopRequireDefault(_config);
 
-var _Error = require('../Icons/Error');
-
-var _Error2 = _interopRequireDefault(_Error);
-
-var _Warning = require('../Icons/Warning');
-
-var _Warning2 = _interopRequireDefault(_Warning);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,3 +65,6 @@
       var showIcon = false;
-      var Icon = _react2.default.createElement('div', null);
+      var icon = '';
+      var width = void 0;
+      var height = void 0;
+      var color = _config2.default.colors['serious-black'];
 
@@ -81,3 +76,6 @@ switch (type) {
             classes += 'bg-washed-green ';
-            Icon = _Success2.default;
+            icon = 'success';
+            color = _config2.default.colors['green'];
+            width = 14;
+            height = 14;
             break;
@@ -89,3 +87,6 @@ }
             classes += 'bg-washed-red ';
-            Icon = _Error2.default;
+            icon = 'failure';
+            color = _config2.default.colors['red'];
+            width = 14;
+            height = 14;
             break;
@@ -97,3 +98,6 @@ }
             classes += 'bg-washed-yellow ';
-            Icon = _Warning2.default;
+            icon = 'warning';
+            color = _config2.default.colors['yellow'];
+            width = 14;
+            height = 14;
             break;
@@ -104,2 +108,5 @@ }
             classes += 'bg-serious-black light-silver ';
+            color = _config2.default.colors['white'];
+            width = 8;
+            height = 8;
             break;
@@ -121,7 +128,3 @@ }
           { className: 'flex items-center' },
-          showIcon && _react2.default.createElement(
-            'div',
-            { className: 'flex' },
-            _react2.default.createElement(Icon, null)
-          ),
+          showIcon && _react2.default.createElement(_Icon2.default, { type: icon, fill: color, height: height, width: width }),
           _react2.default.createElement(
@@ -136,3 +139,3 @@ 'div',
           { className: 'pointer ' + closeClass, onClick: onClose },
-          _react2.default.createElement(_Close2.default, null)
+          _react2.default.createElement(_Icon2.default, { type: 'close', height: height, width: width, fill: color })
         )
@@ -139,0 +142,0 @@ );

lib/Button/index.js

@@ -17,2 +17,10 @@ 'use strict';
 
+var _Icon = require('../Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _Spinner = require('../Spinner');
+
+var _Spinner2 = _interopRequireDefault(_Spinner);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,5 +38,15 @@
   function Button() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Button);
 
-    return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
+      !_this.props.disabled && _this.props.onClick && _this.props.onClick();
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -42,4 +60,8 @@
           secondary = _props.secondary,
-          disabled = _props.disabled;
+          disabled = _props.disabled,
+          isLoading = _props.isLoading,
+          children = _props.children;
 
+      var isIconButton = children.type === _Icon2.default;
+      var CustomTag = isIconButton ? 'div' : 'button';
 
@@ -50,4 +72,6 @@ if (secondary && primary) {
 
-      var classes = 'fw5 ph5 pv3 ttu br2 fw4 f7 ';
+      var classes = 'fw5 ttu br2 fw4 f7 ';
 
+      classes += isIconButton ? 'icon-button pa3 ' : 'pv3 ph5 ';
+
       if (!secondary && !primary && !disabled) {
@@ -58,4 +82,7 @@ classes += 'bw1 ba b--white blue hover-bg-light-silver hover-b--light-silver ';
       if (secondary && !disabled) {
-        classes += 'bw1 ba b--blue blue hover-bg-blue hover-white ';
+        classes += 'bw1 ba b--blue blue hover-white ';
       }
+      if (secondary && !isLoading) {
+        classes += 'hover-bg-blue ';
+      }
 
@@ -73,5 +100,10 @@ if (primary && !disabled) {
       return _react2.default.createElement(
-        'button',
-        Object.assign({ type: 'button', className: '' + classes }, this.props.htmlProps, { disabled: disabled }),
-        this.props.children
+        CustomTag,
+        Object.assign({
+          className: '' + classes
+        }, this.props.htmlProps, {
+          onClick: this.handleClick,
+          disabled: !isIconButton && disabled
+        }),
+        isLoading ? _react2.default.createElement(_Spinner2.default, { width: 11, height: 11, secondary: primary }) : this.props.children
       );
@@ -88,2 +120,3 @@ }
   disabled: false,
+  isLoading: false,
   htmlProps: {}
@@ -97,5 +130,7 @@ };
   htmlProps: _propTypes2.default.object,
-  children: _propTypes2.default.node.isRequired
+  children: _propTypes2.default.node.isRequired,
+  isLoading: _propTypes2.default.bool,
+  onClick: _propTypes2.default.func
 };
 
 exports.default = Button;

lib/Spinner/index.js

@@ -20,6 +20,10 @@ 'use strict';
 var Spinner = function Spinner(_ref) {
-  var secondary = _ref.secondary;
+  var secondary = _ref.secondary,
+      width = _ref.width,
+      height = _ref.height;
   return _react2.default.createElement(
     'svg',
     {
+      width: width,
+      height: height,
       className: 'spinner',
@@ -43,3 +47,5 @@ viewBox: '0 0 66 66',
 Spinner.propTypes = {
-  secondary: _propTypes2.default.bool
+  secondary: _propTypes2.default.bool,
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number
 };
@@ -46,0 +52,0 @@

lib/Toggle/index.js

@@ -17,10 +17,14 @@ 'use strict';
 
-var _Deny = require('../Icons/Deny');
+var _Deny = require('../Icon/Deny');
 
 var _Deny2 = _interopRequireDefault(_Deny);
 
-var _Check = require('../Icons/Check');
+var _Check = require('../Icon/Check');
 
 var _Check2 = _interopRequireDefault(_Check);
 
+var _config = require('vtex-tachyons/config.json');
+
+var _config2 = _interopRequireDefault(_config);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -135,3 +139,3 @@
             },
-            _react2.default.createElement(_Deny2.default, { fill: '#ff8080' })
+            _react2.default.createElement(_Deny2.default, { fill: _config2.default.colors.red })
           ),
@@ -146,3 +150,3 @@ _react2.default.createElement(
             },
-            _react2.default.createElement(_Check2.default, { fill: '#8bc34a' })
+            _react2.default.createElement(_Check2.default, { fill: _config2.default.colors.green })
           )
@@ -149,0 +153,0 @@ ),

package.json

 {
   "name": "@vtex/styleguide",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.12",
   "scripts": {
@@ -5,0 +5,0 @@ "test": "react-scripts test --env=jsdom",

No alert changes

Improved metrics

Total package byte prevSize

49975

increased by12.76%

Number of package files

16

increased by14.29%

Lines of code

989

increased by8.8%

No dependency changes