@vtex/styleguide - npm Package Compare versions

Comparing version 2.0.0-rc.29 to 2.0.0-rc.30

lib/Alert/index.js

@@ -108,3 +108,3 @@ 'use strict';
         'div',
-        { className: 'flex justify-between ' + classes },
+        { className: 'flex justify-between f6 near-black ' + classes },
         _react2.default.createElement(
@@ -133,5 +133,9 @@ 'div',
 Alert.propTypes = {
+  /** Style of the alert */
   type: _propTypes2.default.oneOf(['success', 'error', 'warning', 'info', 'info-dark']),
+  /** Content of the alert */
   children: _propTypes2.default.node.isRequired,
+  /** If this function is defined, a close icon will appear and this function will be called when alert is closed. */
   onClose: _propTypes2.default.func,
+  /** Time in ms to auto close the alert */
   autoClose: _propTypes2.default.number
@@ -138,0 +142,0 @@ };

lib/Button/index.js

@@ -122,2 +122,8 @@ 'use strict';
           onClick: this.handleClick,
+          onMouseEnter: this.props.onMouseEnter,
+          onMouseLeave: this.props.onMouseLeave,
+          onMouseOver: this.props.onMouseOver,
+          onMouseOut: this.props.onMouseOut,
+          onMouseUp: this.props.onMouseUp,
+          onMouseDown: this.props.onMouseDown,
           ref: this.props.ref
@@ -179,2 +185,14 @@ },
   onClick: _propTypes2.default.func,
+  /** onMouseEnter event */
+  onMouseEnter: _propTypes2.default.func,
+  /** onMouseLeave event */
+  onMouseLeave: _propTypes2.default.func,
+  /** onMouseOver event */
+  onMouseOver: _propTypes2.default.func,
+  /** onMouseOut event */
+  onMouseOut: _propTypes2.default.func,
+  /** onMouseUp event */
+  onMouseUp: _propTypes2.default.func,
+  /** onMouseDown event */
+  onMouseDown: _propTypes2.default.func,
   /** ref function */
@@ -181,0 +199,0 @@ ref: _propTypes2.default.func

lib/Card/index.js

@@ -25,4 +25,4 @@ 'use strict';
 
-var Card = function (_React$Component) {
-  _inherits(Card, _React$Component);
+var Card = function (_PureComponent) {
+  _inherits(Card, _PureComponent);
 
@@ -56,7 +56,8 @@ function Card() {
   return Card;
-}(_react2.default.Component);
+}(_react.PureComponent);
 
 Card.propTypes = {
+  /** Content of the card */
   children: _propTypes2.default.node.isRequired,
-  /** Use the full width of the card. Respect the default padding (pl6 pr6) for elements that do not fill the full width. */
+  /** Use the full width of the card. Respect the default padding (`pl6 pr6`) for elements that do not fill the full width. */
   fullWidth: _propTypes2.default.bool
@@ -63,0 +64,0 @@ };

lib/Dropdown/index.js

@@ -17,2 +17,10 @@ 'use strict';
 
+var _ArrowDownIcon = require('./ArrowDownIcon');
+
+var _ArrowDownIcon2 = _interopRequireDefault(_ArrowDownIcon);
+
+var _config = require('vtex-tachyons/config');
+
+var _config2 = _interopRequireDefault(_config);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,3 +83,4 @@
     _this.state = {
-      open: false
+      open: false,
+      optionsWidth: 0
     };
@@ -85,2 +94,3 @@ return _this;
       document.addEventListener('mousedown', this.handleClickOutside);
+      this.setState({ optionsWidth: this.wrapperRef.clientWidth });
     }
@@ -93,9 +103,26 @@ }, {
   }, {
+    key: 'getValueLabel',
+    value: function getValueLabel() {
+      var _this2 = this;
+
+      var option = this.props.options.find(function (option) {
+        return option.value === _this2.props.value;
+      });
+      if (!option) return '\xa0';
+      return option.label;
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _props = this.props,
+          label = _props.label,
+          id = _props.id,
+          short = _props.short,
+          long = _props.long,
+          large = _props.large,
+          xLarge = _props.xLarge,
+          block = _props.block,
           value = _props.value,
-          placeholder = _props.placeholder,
           disabled = _props.disabled,
@@ -105,5 +132,94 @@ options = _props.options;
 
-      var optionsStyle = { overflowY: 'scroll', height: '120px' };
+
+      if (label && !id) {
+        throw new Error('Dropdown component with Label must have an Id');
+      }
+
+      if (short && long) {
+        throw new Error('Dropdown component cannot be short AND long at the same time');
+      }
+
+      if (large && xLarge) {
+        throw new Error('Dropdown component cannot be large AND extra large at the same time');
+      }
+
+      var width = void 0;
+      var maxHeight = void 0;
+      var iconSize = void 0;
+
+      var classes = 'bg-transparent bn w-100 ';
+      var containerClasses = 'br2 bw1 ';
+      var optionsClasses = 'absolute bl br bb bw1 br2 br--bottom bg-white flex-column z-max overflow-y-auto ';
+      var optionClasses = 'w-100 pointer flex bg-white hover-bg-near-white near-black tl bb-0 bl-0 br-0 bt b--near-white ';
+
+      if (block) width = '100%';
+
+      classes += disabled ? 'bg-light-gray ' : 'pointer ';
+      classes += !disabled && value ? 'near-black ' : 'gray ';
+
+      if (large) {
+        classes += 'f5 pv4 pl6 pr5 ';
+        optionClasses += 'f5 pv4 ph6 ';
+        maxHeight = '200px';
+        iconSize = 18;
+        if (!block) {
+          if (short) {
+            width = '100px';
+          } else if (long) {
+            width = '420px';
+          } else {
+            width = '250px';
+          }
+        }
+      } else if (xLarge) {
+        classes += 'f4 pv5 pl7 pr6 ';
+        optionClasses += 'f4 pv5 ph7 ';
+        maxHeight = '260px';
+        iconSize = 22;
+        if (!block) {
+          if (short) {
+            width = '150px';
+          } else if (long) {
+            width = '520px';
+          } else {
+            width = '320px';
+          }
+        }
+      } else {
+        classes += 'f6 pv3 pl5 pr4 ';
+        optionClasses += 'f6 pv3 ph5 ';
+        maxHeight = '150px';
+        iconSize = 16;
+        if (!block) {
+          if (short) {
+            width = '70px';
+          } else if (long) {
+            width = '350px';
+          } else {
+            width = '200px';
+          }
+        }
+      }
+
+      var containerStyle = { width: width };
+      var optionsStyle = {
+        maxHeight: maxHeight,
+        width: this.state.optionsWidth
+      };
+
+      if (disabled) {
+        containerClasses += 'bg-light-gray ';
+      } else {
+        containerClasses += 'bg-white ';
+      }
+
       if (open) {
-        optionsStyle['boxShadow'] = '0px 0px 4px 0px rgba( 0, 0, 0, .15)';
+        containerClasses += 'bl br bt pb1 b--silver br--top ';
+        optionsClasses += 'b--silver ';
+      } else {
+        containerClasses += 'ba b--light-gray ';
+        optionsClasses += 'pointer b--light-gray';
+        if (!disabled) {
+          containerClasses += 'hover-b--silver ';
+        }
       }
@@ -113,31 +229,35 @@
         'div',
-        { ref: this.setWrapperRef },
+        { ref: this.setWrapperRef, className: block ? 'db' : 'dib' },
+        label && _react2.default.createElement(
+          'label',
+          { htmlFor: id, className: 'dib mb3 ' + (block ? 'w-100' : '') },
+          label
+        ),
         _react2.default.createElement(
-          'button',
-          {
-            disabled: disabled,
-            ref: this.setSelectRef,
-            onClick: this.handleClick,
-            className: this.props.disabled ? 'pa4 bn br2 bg-light-silver gray' : 'pa4 ba bw1 br2 bg-white b--light-gray hover-bg-near-white hover-blue hover-b--near-white ' + (value ? 'near-black' : 'gray')
-          },
+          'div',
+          { className: containerClasses, style: containerStyle },
           _react2.default.createElement(
-            'div',
-            { className: 'flex justify-between' },
-            value || placeholder,
+            'button',
+            {
+              id: id,
+              disabled: disabled,
+              ref: this.setSelectRef,
+              onClick: this.handleClick,
+              className: classes
+            },
             _react2.default.createElement(
               'div',
-              { className: 'flex items-center pl6' },
+              { className: 'flex' },
               _react2.default.createElement(
-                'svg',
-                {
-                  xmlns: 'http://www.w3.org/2000/svg',
-                  width: '16',
-                  height: '16',
-                  viewBox: '0 0 24 24'
-                },
-                _react2.default.createElement(
-                  'g',
-                  { fill: disabled ? '#969799' : '#368DF7' },
-                  _react2.default.createElement('path', { d: 'M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z' })
-                )
+                'div',
+                { className: 'flex-auto tl' },
+                this.getValueLabel()
+              ),
+              _react2.default.createElement(
+                'div',
+                { className: 'flex-none flex items-center pl6' },
+                _react2.default.createElement(_ArrowDownIcon2.default, {
+                  size: iconSize,
+                  fill: disabled ? _config2.default.colors['gray'] : _config2.default.colors.blue
+                })
               )
@@ -149,6 +269,3 @@ )
           'div',
-          {
-            className: 'absolute w-auto mw6 ba br2 b--near-white bg-white flex-column z-max',
-            style: optionsStyle
-          },
+          { className: optionsClasses, style: optionsStyle },
           options.map(function (option) {
@@ -158,9 +275,9 @@ return _react2.default.createElement(
               {
-                key: option,
-                className: 'flex w-100 pa4 bg-white hover-bg-near-white near-black tl bt-0 bl-0 br-0 bb b--near-white',
+                key: option.value,
+                className: optionClasses,
                 onClick: function onClick(e) {
-                  return _this2.handleOptionClick(e, option);
+                  return _this3.handleOptionClick(e, option);
                 }
               },
-              option
+              option.label
             );
@@ -177,8 +294,30 @@ })
 Dropdown.propTypes = {
+  /** Dropdown Id */
+  id: _propTypes2.default.string,
+  /** Dropdown Label */
+  label: _propTypes2.default.string,
+  /** Size: Large style */
+  large: _propTypes2.default.bool,
+  /** Size: xLarge style */
+  xLarge: _propTypes2.default.bool,
+  /** Width: Short style */
+  short: _propTypes2.default.bool,
+  /** Width: Long style */
+  long: _propTypes2.default.bool,
+  /** Block style */
+  block: _propTypes2.default.bool,
+  /** Dropdown value */
   value: _propTypes2.default.string,
-  placeholder: _propTypes2.default.string.isRequired,
+  /** onChange event */
   onChange: _propTypes2.default.func,
+  /** onOpen event */
   onOpen: _propTypes2.default.func,
+  /** onClose event */
   onClose: _propTypes2.default.func,
-  options: _propTypes2.default.array.isRequired,
+  /** Dropdown options list */
+  options: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    value: _propTypes2.default.string.isRequired,
+    label: _propTypes2.default.string.isRequired
+  })),
+  /** Dropdown disabled */
   disabled: _propTypes2.default.bool
@@ -185,0 +324,0 @@ };

lib/Input/index.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _Alert = require('../Alert');
+
+var _Alert2 = _interopRequireDefault(_Alert);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -69,19 +73,17 @@
 
-      var eBox = 'pa2 ';
-      var eBorder = 'bw3 br2 b--solid b--washed-red ';
-      var eTypography = 'f7 dark-gray ';
-      var eBackground = 'bg-washed-red ';
-
       if (active) {
-        classes += 'b--dark-gray ';
+        classes += 'b--gray ';
       } else {
         classes += 'b--light-gray ';
+        if (!this.props.disabled) {
+          classes += 'hover-b--silver ';
+        }
       }
 
       if (error || errorMessage) {
-        classes += 'b--red mb3 ';
+        classes += 'b--red hover-b--red mb3 ';
       }
 
       if (this.props.disabled) {
-        classes += 'bg-light-gray bg-silver silver ';
+        classes += 'bg-light-gray bg-light-silver b--light-silver silver ';
       } else {
@@ -127,4 +129,4 @@ classes += 'bg-white ';
         errorMessage && _react2.default.createElement(
-          'div',
-          { className: eBox + ' ' + eBorder + ' ' + eTypography + ' ' + eBackground },
+          _Alert2.default,
+          { type: 'error' },
           errorMessage
@@ -206,3 +208,3 @@ )
   onBlur: _propTypes2.default.func,
-  /** If the input has an error, you can hightlight it */
+  /** If the input has an error, you can highlight it */
   error: _propTypes2.default.bool,
@@ -209,0 +211,0 @@ /** If the input has an error, you can pass an error message */

lib/Toggle/index.js

@@ -37,4 +37,2 @@ 'use strict';
 
-var noop = function noop() {};
-
 var Toggle = function (_Component) {
@@ -106,7 +104,2 @@ _inherits(Toggle, _Component);
 
-      var eventHandlers = {
-        onClick: this.props.onClick ? this.props.onClick : noop,
-        onChange: this.props.onChange ? this.props.onChange : noop
-      };
-
       return _react2.default.createElement(
@@ -153,3 +146,3 @@ 'label',
         ),
-        _react2.default.createElement('input', Object.assign({
+        _react2.default.createElement('input', {
           id: '' + id,
@@ -159,4 +152,6 @@ type: 'checkbox',
           disabled: disabled,
-          checked: checked
-        }, eventHandlers))
+          checked: checked,
+          onClick: this.props.onClick,
+          onChange: this.props.onChange
+        })
       );
@@ -163,0 +158,0 @@ }

package.json

 {
   "name": "@vtex/styleguide",
-  "version": "2.0.0-rc.29",
+  "version": "2.0.0-rc.30",
   "scripts": {
@@ -15,2 +15,4 @@ "test": "react-scripts test --env=jsdom",
     "prepublishOnly": "npm run compile && npm run deploy",
+    "snap:test": "styleguidist-visual test --url \"http:localhost:6060\"",
+    "snap:approve": "styleguidist-visual approve",
     "develop": "npm link && watch 'npm run compile' src"
@@ -24,8 +26,14 @@ },
     "babel-cli": "^6.26.0",
+    "babel-eslint": "7",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "copyfiles": "^1.2.0",
+    "eslint": "4",
     "eslint-config-vtex": "^7.0.0",
     "eslint-config-vtex-react": "^3.0.3",
     "eslint-config-vtex-react-app": "^3.1.1",
+    "eslint-plugin-flowtype": "2",
+    "eslint-plugin-import": "2",
+    "eslint-plugin-jsx-a11y": "5",
+    "eslint-plugin-react": "^7.7.0",
     "gh-pages": "^1.1.0",
@@ -36,2 +44,3 @@ "react": "^16.2.0",
     "react-styleguidist": "^6.2.5",
+    "react-styleguidist-visual": "^0.3.1",
     "watch": "^1.0.2"
@@ -38,0 +47,0 @@ },

README.md

 ### Styleguide
 
-https://vtex.github.io/styleguide
+> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))
 
+- [Usage](#usage)
+- [Developing](#developing)
+  -  [Setup](#setup)
+  -  [Running](#running)
+  -  [Snapshots](#snapshots)
+- [Developing using npm link](#developing-using-npm-link)
+- [Publishing](#publishing)
+- [Docs](#docs)
+
+## Usage
+
+```sh
+yarn add @vtex/styleguide --exact
+# or
+npm install @vtex/styleguide --save-exact
+```
+
+```js
+import Button from '@vtex/styleguide/lib/Button'
+```
+
+## Developing
+
 ### Setup
@@ -11,3 +34,3 @@
 
-### Developing using Styleguidist
+### Running
 
@@ -18,4 +41,24 @@ ```sh
 
-### Developing using another project
+### Snapshots
 
+To save the components snapshots use:
+
+```sh
+yarn snap:test
+```
+
+Check the snapshots and to approve the changes use:
+
+```sh
+yarn snap:approve
+```
+
+You can use the option `--filter` to just test or approve a specific component. Example:
+
+```sh
+yarn snap:approve --filter "Button"
+```
+
+## Developing using `npm link`
+
 Run this in this repo:
@@ -39,3 +82,3 @@
 
-### Creating a new release and publishing on NPM
+### Publishing
 
@@ -47,4 +90,6 @@ ```sh
 
-### Publishing Styleguide page
+### Docs
 
+To update the docs:
+
 ```sh
@@ -51,0 +96,0 @@ yarn deploy

No alert changes

Improved metrics

Total package byte prevSize

72025

increased by13.52%

Number of package files

19

increased by5.56%

Lines of code

1496

increased by15.08%

Number of lines in readme file

98

increased by84.91%

Worsened metrics

Dev dependency count

20

increased by53.85%

No dependency changes