@trendmicro/react-buttons - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-buttons v1.0.4 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-buttons */
+/*! react-buttons v1.1.0 | (c) 2017 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-buttons */
 module.exports =
@@ -76,3 +76,3 @@ /******/ (function(modules) { // webpackBootstrap
 // removed by extract-text-webpack-plugin
-module.exports = {"btn":"buttons---btn---2jZHN","active":"buttons---active---2-a32","focus":"buttons---focus---1kVJZ","hover":"buttons---hover---42FF2","disabled":"buttons---disabled---eCY9b","btn-icon-only":"buttons---btn-icon-only---NYhkW","btnIconOnly":"buttons---btn-icon-only---NYhkW","btn-default":"buttons---btn-default---1wWXD","btnDefault":"buttons---btn-default---1wWXD","btn-primary":"buttons---btn-primary---Wp1wb","btnPrimary":"buttons---btn-primary---Wp1wb","btn-danger":"buttons---btn-danger---1UUqU","btnDanger":"buttons---btn-danger---1UUqU","btn-border":"buttons---btn-border---1O58b","btnBorder":"buttons---btn-border---1O58b","open":"buttons---open---1ju75","dropdown-toggle":"buttons---dropdown-toggle---vMtjL","dropdownToggle":"buttons---dropdown-toggle---vMtjL","btn-link":"buttons---btn-link---1xwS4","btnLink":"buttons---btn-link---1xwS4","btn-lg":"buttons---btn-lg---2xtUV","btnLg":"buttons---btn-lg---2xtUV","btn-group-lg":"buttons---btn-group-lg---3C8An","btnGroupLg":"buttons---btn-group-lg---3C8An","btn-md":"buttons---btn-md---HRR_F","btnMd":"buttons---btn-md---HRR_F","btn-group-md":"buttons---btn-group-md---3FQVP","btnGroupMd":"buttons---btn-group-md---3FQVP","btn-sm":"buttons---btn-sm---3cNnY","btnSm":"buttons---btn-sm---3cNnY","btn-group-sm":"buttons---btn-group-sm---3_QLf","btnGroupSm":"buttons---btn-group-sm---3_QLf","btn-xs":"buttons---btn-xs---2eEDQ","btnXs":"buttons---btn-xs---2eEDQ","btn-group-xs":"buttons---btn-group-xs---1c4pb","btnGroupXs":"buttons---btn-group-xs---1c4pb","btn-block":"buttons---btn-block---1nSNV","btnBlock":"buttons---btn-block---1nSNV","btn-group":"buttons---btn-group---1jaDo","btnGroup":"buttons---btn-group---1jaDo","btn-group-vertical":"buttons---btn-group-vertical---3Lm1e","btnGroupVertical":"buttons---btn-group-vertical---3Lm1e","btn-toolbar":"buttons---btn-toolbar---2-GfJ","btnToolbar":"buttons---btn-toolbar---2-GfJ","input-group":"buttons---input-group---1T18I","inputGroup":"buttons---input-group---1T18I","btn-group-justified":"buttons---btn-group-justified---3qB9u","btnGroupJustified":"buttons---btn-group-justified---3qB9u","dropdown-menu":"buttons---dropdown-menu---1fkH0","dropdownMenu":"buttons---dropdown-menu---1fkH0"};
+module.exports = {"btn":"buttons---btn---2jZHN","active":"buttons---active---2-a32","focus":"buttons---focus---1kVJZ","hover":"buttons---hover---42FF2","disabled":"buttons---disabled---eCY9b","btn-compact":"buttons---btn-compact---mXDAU","btnCompact":"buttons---btn-compact---mXDAU","btn-default":"buttons---btn-default---1wWXD","btnDefault":"buttons---btn-default---1wWXD","btn-primary":"buttons---btn-primary---Wp1wb","btnPrimary":"buttons---btn-primary---Wp1wb","btn-danger":"buttons---btn-danger---1UUqU","btnDanger":"buttons---btn-danger---1UUqU","btn-border":"buttons---btn-border---1O58b","btnBorder":"buttons---btn-border---1O58b","open":"buttons---open---1ju75","dropdown-toggle":"buttons---dropdown-toggle---vMtjL","dropdownToggle":"buttons---dropdown-toggle---vMtjL","btn-link":"buttons---btn-link---1xwS4","btnLink":"buttons---btn-link---1xwS4","btn-lg":"buttons---btn-lg---2xtUV","btnLg":"buttons---btn-lg---2xtUV","btn-group-lg":"buttons---btn-group-lg---3C8An","btnGroupLg":"buttons---btn-group-lg---3C8An","btn-md":"buttons---btn-md---HRR_F","btnMd":"buttons---btn-md---HRR_F","btn-group-md":"buttons---btn-group-md---3FQVP","btnGroupMd":"buttons---btn-group-md---3FQVP","btn-sm":"buttons---btn-sm---3cNnY","btnSm":"buttons---btn-sm---3cNnY","btn-group-sm":"buttons---btn-group-sm---3_QLf","btnGroupSm":"buttons---btn-group-sm---3_QLf","btn-xs":"buttons---btn-xs---2eEDQ","btnXs":"buttons---btn-xs---2eEDQ","btn-group-xs":"buttons---btn-group-xs---1c4pb","btnGroupXs":"buttons---btn-group-xs---1c4pb","btn-block":"buttons---btn-block---1nSNV","btnBlock":"buttons---btn-block---1nSNV","btn-group":"buttons---btn-group---1jaDo","btnGroup":"buttons---btn-group---1jaDo","btn-group-vertical":"buttons---btn-group-vertical---3Lm1e","btnGroupVertical":"buttons---btn-group-vertical---3Lm1e","btn-toolbar":"buttons---btn-toolbar---2-GfJ","btnToolbar":"buttons---btn-toolbar---2-GfJ","input-group":"buttons---input-group---1T18I","inputGroup":"buttons---input-group---1T18I","btn-group-justified":"buttons---btn-group-justified---3qB9u","btnGroupJustified":"buttons---btn-group-justified---3qB9u","dropdown-menu":"buttons---dropdown-menu---1fkH0","dropdownMenu":"buttons---dropdown-menu---1fkH0"};
 
@@ -167,7 +167,8 @@ /***/ }),
                 block = _props.block,
+                compact = _props.compact,
                 iconOnly = _props.iconOnly,
                 dropdownToggle = _props.dropdownToggle,
-                props = _objectWithoutProperties(_props, ['className', 'componentClass', 'type', 'btnSize', 'btnStyle', 'active', 'hover', 'focus', 'disabled', 'block', 'iconOnly', 'dropdownToggle']);
+                props = _objectWithoutProperties(_props, ['className', 'componentClass', 'type', 'btnSize', 'btnStyle', 'active', 'hover', 'focus', 'disabled', 'block', 'compact', 'iconOnly', 'dropdownToggle']);
 
-            var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btn, true), _defineProperty(_classes, _index2.default.btnLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnDefault, btnStyle === 'default'), _defineProperty(_classes, _index2.default.btnPrimary, btnStyle === 'primary'), _defineProperty(_classes, _index2.default.btnDanger, btnStyle === 'danger' || btnStyle === 'emphasis'), _defineProperty(_classes, _index2.default.btnBorder, btnStyle === 'border' || btnStyle === 'flat'), _defineProperty(_classes, _index2.default.btnLink, btnStyle === 'link'), _defineProperty(_classes, _index2.default.btnBlock, block), _defineProperty(_classes, _index2.default.btnIconOnly, iconOnly), _defineProperty(_classes, _index2.default.hover, hover), _defineProperty(_classes, _index2.default.active, active), _defineProperty(_classes, _index2.default.focus, focus), _defineProperty(_classes, _index2.default.dropdownToggle, dropdownToggle), _classes);
+            var classes = (_classes = {}, _defineProperty(_classes, _index2.default.btn, true), _defineProperty(_classes, _index2.default.btnLg, btnSize === 'large' || btnSize === 'lg'), _defineProperty(_classes, _index2.default.btnMd, btnSize === 'medium' || btnSize === 'md'), _defineProperty(_classes, _index2.default.btnSm, btnSize === 'small' || btnSize === 'sm'), _defineProperty(_classes, _index2.default.btnXs, btnSize === 'extra-small' || btnSize === 'xs'), _defineProperty(_classes, _index2.default.btnDefault, btnStyle === 'default'), _defineProperty(_classes, _index2.default.btnPrimary, btnStyle === 'primary'), _defineProperty(_classes, _index2.default.btnDanger, btnStyle === 'danger' || btnStyle === 'emphasis'), _defineProperty(_classes, _index2.default.btnBorder, btnStyle === 'border' || btnStyle === 'flat'), _defineProperty(_classes, _index2.default.btnLink, btnStyle === 'link'), _defineProperty(_classes, _index2.default.btnBlock, block), _defineProperty(_classes, _index2.default.btnCompact, compact || iconOnly), _defineProperty(_classes, _index2.default.hover, hover), _defineProperty(_classes, _index2.default.active, active), _defineProperty(_classes, _index2.default.focus, focus), _defineProperty(_classes, _index2.default.dropdownToggle, dropdownToggle), _classes);
 
@@ -195,3 +196,4 @@ return _react2.default.createElement(Component, _extends({}, props, {
     block: _propTypes2.default.bool,
-    iconOnly: _propTypes2.default.bool,
+    compact: _propTypes2.default.bool,
+    iconOnly: _propTypes2.default.bool, // alias of compact
 
@@ -211,3 +213,4 @@ // Apply styles for use in a Dropdown.
     block: false,
-    iconOnly: false,
+    compact: false,
+    iconOnly: false, // alias of compact
     dropdownToggle: false
@@ -214,0 +217,0 @@ }, _temp);

package.json

 {
   "name": "@trendmicro/react-buttons",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Trend Micro Components: React Buttons",
@@ -20,4 +20,4 @@ "main": "lib/index.js",
     "lint:fix": "eslint --fix ./src",
-    "test": "./babel-tap --coverage test/*.js",
-    "coveralls": "./babel-tap --coverage --coverage-report=text-lcov test/*.js | node_modules/.bin/coveralls",
+    "test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
+    "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls",
     "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
@@ -24,0 +24,0 @@ },

README.md

@@ -26,2 +26,23 @@ # react-buttons [![build status](https://travis-ci.org/trendmicro-frontend/react-buttons.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-buttons) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-buttons/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-buttons?branch=master)
 
+## Recommended Setup
+
+Create a `Buttons` component inside your common components directory:
+```
+components/
+  Buttons/
+    index.js
+```
+
+**components/Buttons/index.js**
+```js
+import '@trendmicro/react-buttons/dist/react-buttons.css';
+
+export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';
+```
+
+Then, import `Button` component in your code:
+```js
+import { Button } from './components/Buttons';
+```
+
 ## Usage
@@ -81,4 +102,4 @@
 <ButtonGroup>
-    <Button iconOnly><i className="fa fa-pencil" /></Button>
-    <Button iconOnly><i className="fa fa-mail-reply" /></Button>
+    <Button compact><i className="fa fa-pencil" /></Button>
+    <Button compact><i className="fa fa-mail-reply" /></Button>
 </ButtonGroup>
@@ -96,5 +117,5 @@ ```
 <ButtonGroup>
-    <Button btnStyle="flat" iconOnly><i className="fa fa-pie-chart" /></Button>
-    <Button btnStyle="flat" iconOnly><i className="fa fa-line-chart" /></Button>
-    <Button btnStyle="flat" iconOnly><i className="fa fa-table" /></Button>
+    <Button btnStyle="flat" compact><i className="fa fa-pie-chart" /></Button>
+    <Button btnStyle="flat" compact><i className="fa fa-line-chart" /></Button>
+    <Button btnStyle="flat" compact><i className="fa fa-table" /></Button>
 </ButtonGroup>
@@ -173,15 +194,15 @@ ```
 
-#### Icon only
+#### Compact
 
 ```js
-<Button iconOnly>
+<Button compact>
     <i className="fa fa-comment" />
 </Button>
-<Button btnStyle="primary" iconOnly>
+<Button btnStyle="primary" compact>
     <i className="fa fa-plus" />
 </Button>
-<Button btnStyle="emphasis" iconOnly>
+<Button btnStyle="emphasis" compact>
     <i className="fa fa-search" />
 </Button>
-<Button btnStyle="flat" iconOnly>
+<Button btnStyle="flat" compact>
     <i className="fa fa-cog" />
@@ -188,0 +209,0 @@ </Button>

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

94260

increased by0.98%

Lines of code

965

increased by0.31%

Number of lines in readme file

211

increased by11.05%

No dependency changes