@vtex/styleguide - npm Package Compare versions

Comparing version 2.0.0-rc.27 to 2.0.0-rc.28

lib/Alert/index.js

@@ -101,3 +101,3 @@ 'use strict';
           {
-            classes += 'bg-near-white ';
+            classes += 'bg-washed-blue ';
             break;
@@ -104,0 +104,0 @@ }

lib/Button/index.js

@@ -17,6 +17,2 @@ 'use strict';
 
-var _Icon = require('../Icon');
-
-var _Icon2 = _interopRequireDefault(_Icon);
-
 var _Spinner = require('../Spinner');
@@ -57,3 +53,5 @@
       var _props = this.props,
-          submit = _props.submit,
+          large = _props.large,
+          xLarge = _props.xLarge,
+          block = _props.block,
           primary = _props.primary,
@@ -63,6 +61,5 @@ secondary = _props.secondary,
           isLoading = _props.isLoading,
-          children = _props.children;
+          icon = _props.icon;
 
-      var isIconButton = children.type === _Icon2.default;
-      var CustomTag = isIconButton ? 'div' : 'button';
+      var Tag = icon ? 'div' : 'button';
 
@@ -73,12 +70,27 @@ if (secondary && primary) {
 
-      var classes = 'fw5 ttu br2 fw4 f6 ';
+      if (large && xLarge) {
+        throw new Error('Button component cannot have two sizes at the same time');
+      }
 
-      classes += isIconButton ? 'icon-button pa3 dib ' : 'pv3 ph5 ';
+      var classes = 'bw1 ba fw5 ttu br2 fw4 ';
 
+      classes += icon ? 'icon-button dib ' : '';
+
+      if (large) {
+        classes += icon ? 'pa4 ' : 'pv4 ph6 ';
+        classes += 'f5 ';
+      } else if (xLarge) {
+        classes += icon ? 'pa5 ' : 'pv5 ph7 ';
+        classes += 'f4 ';
+      } else {
+        classes += icon ? 'pa3 ' : 'pv3 ph5 ';
+        classes += 'f6 ';
+      }
+
       if (!secondary && !primary && !disabled) {
-        classes += 'bn blue bg-transparent hover-heavy-blue ';
+        classes += 'b--transparent blue bg-transparent hover-heavy-blue hover-b--transparent ';
       }
 
       if (secondary && !disabled) {
-        classes += 'bw1 ba b--blue blue hover-white ';
+        classes += 'b--blue blue hover-white ';
       }
@@ -90,7 +102,7 @@ if (secondary && !isLoading) {
       if (primary && !disabled) {
-        classes += 'bw1 ba b--blue bg-blue white hover-bg-heavy-blue hover-b--heavy-blue ';
+        classes += 'b--blue bg-blue white hover-bg-heavy-blue hover-b--heavy-blue ';
       }
 
       if (disabled) {
-        classes += 'bw1 ba b--light-gray bg-light-gray gray ';
+        classes += 'b--light-gray bg-light-gray gray ';
       } else {
@@ -100,10 +112,19 @@ classes += 'pointer ';
 
+      if (block) {
+        classes += 'w-100 ';
+      }
+
       return _react2.default.createElement(
-        CustomTag,
-        Object.assign({}, this.props.htmlProps, {
-          className: '' + classes,
+        Tag,
+        {
+          id: this.props.id,
+          autoFocus: icon ? undefined : this.props.autoFocus,
+          disabled: icon ? undefined : this.props.disabled,
+          name: icon ? undefined : this.props.name,
+          type: icon ? undefined : this.props.type,
+          value: icon ? undefined : this.props.value,
+          className: classes,
           onClick: this.handleClick,
-          disabled: !isIconButton && disabled,
-          type: submit ? 'submit' : 'button'
-        }),
+          ref: this.props.ref
+        },
         isLoading ? _react2.default.createElement(_Spinner2.default, { width: 11, height: 11, secondary: primary }) : this.props.children
@@ -118,2 +139,5 @@ );
 Button.defaultProps = {
+  large: false,
+  xLarge: false,
+  block: false,
   primary: false,
@@ -123,17 +147,44 @@ secondary: false,
   isLoading: false,
-  htmlProps: {},
-  submit: false
+  autoFocus: false,
+  icon: false,
+  type: 'button'
 };
 
 Button.propTypes = {
+  /** Large style */
+  large: _propTypes2.default.bool,
+  /** xLarge style */
+  xLarge: _propTypes2.default.bool,
+  /** Block style */
+  block: _propTypes2.default.bool,
+  /** Primary style */
   primary: _propTypes2.default.bool,
+  /** Secondary style */
   secondary: _propTypes2.default.bool,
+  /** Add loading spinner */
+  isLoading: _propTypes2.default.bool,
+  /** If you are using just an Icon component inside, use this as true */
+  icon: _propTypes2.default.bool,
+  /** (Button spec attribute) */
+  id: _propTypes2.default.string,
+  /** (Button spec attribute) */
+  autoFocus: _propTypes2.default.bool,
+  /** (Button spec attribute) */
+  autoComplete: _propTypes2.default.string,
+  /** (Button spec attribute) */
   disabled: _propTypes2.default.bool,
-  htmlProps: _propTypes2.default.object,
+  /** (Button spec attribute) */
+  name: _propTypes2.default.string,
+  /** (Button spec attribute) */
+  type: _propTypes2.default.string,
+  /** (Button spec attribute) */
+  value: _propTypes2.default.string,
+  /** Label of the Button */
   children: _propTypes2.default.node.isRequired,
-  isLoading: _propTypes2.default.bool,
+  /** onClick event */
   onClick: _propTypes2.default.func,
-  submit: false
+  /** ref function */
+  ref: _propTypes2.default.func
 };
 
 exports.default = Button;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

60882

increased by2.52%

Lines of code

1267

increased by4.11%

No dependency changes