react-awesome-button - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],e):"object"==typeof exports?exports["react-awesome-button"]=e(require("prop-types"),require("react")):t["react-awesome-button"]=e(t.PropTypes,t.React)}(this,function(t,e){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=3)}([function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e,n){var o=e.charAt(0).toUpperCase()+e.slice(1);void 0!==t.style["Webkit"+o]?t.addEventListener("webkit"+o+"End",n):void 0!==t.style.OTransition&&t.addEventListener("o"+e+"End",n),t.addEventListener(e+"End",n)}Object.defineProperty(e,"__esModule",{value:!0});var l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},u=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),p=n(2),c=o(p),d=n(1),f=o(d),h="aws-btn",b=function(t){return c.default.createElement("a",t)},m=function(t){return c.default.createElement("button",t)},g=function(t){function e(t){r(this,e);var n=s(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.rootElement=t.rootElement||h,n.animationStage=0,n.extraProps={},n.state={disabled:t.disabled,loading:!1,loadingEnd:!1,loadingStart:!1,blocked:!1,clicked:!1},n.checkProps(t),n}return i(e,t),u(e,[{key:"componentDidMount",value:function(){a(this.wrapper,"transition",this.clearStagedWrapperAnimation.bind(this))}},{key:"componentWillReceiveProps",value:function(t){this.checkProps(t)}},{key:"getClassName",value:function(){var t=[this.rootElement,this.props.type&&this.rootElement+"--"+this.props.type,this.props.size&&this.rootElement+"--"+this.props.size,this.props.visible&&this.rootElement+"--visible",this.state.loadingStart&&this.rootElement+"--start"||null,this.state.loadingEnd&&this.rootElement+"--end"||null,this.props.progress&&this.rootElement+"--progress"||null];return!0===this.state.disabled&&t.push(this.rootElement+"--disabled"),this.state.pressPosition&&t.push(this.state.pressPosition),t.join(" ").trim()}},{key:"checkProps",value:function(t){this.extraProps.to=t.to||null,this.extraProps.href=t.href||null,this.extraProps.target=t.target||null,this.renderComponent=t.element||(this.props.href?b:m)}},{key:"endLoading",value:function(){this.setState({loadingEnd:!0}),this.animationStage=1}},{key:"startLoading",value:function(){this.setState({loading:!0,loadingStart:!0,blocked:!0})}},{key:"clearPress",value:function(){var t=this.state.loading?this.state.pressPosition:null;this.setState({pressPosition:t})}},{key:"clearLoading",value:function(){this.setState({loading:!1,loadingStart:!1,loadingEnd:!1})}},{key:"clearStagedWrapperAnimation",value:function(){var t=this;if(0!==this.animationStage){if(5===this.animationStage)return this.animationStage=0,void setTimeout(function(){window.requestAnimationFrame(function(){t.clearLoading(),t.clearPress(),setTimeout(function(){t.setState({blocked:!1})},500)})},350);this.animationStage+=1}}},{key:"action",value:function(){this.props.progress&&this.startLoading(),this.props.action&&this.props.action(this.button.parentNode,this.props.progress?this.endLoading.bind(this):null)}},{key:"createBubble",value:function(t){var e=this,n=this.button,o=n.getBoundingClientRect(),r=window.pageYOffset||document.documentElement.scrolltop||0,s=document.createElement("span"),i=o.width<50?3*o.width:2*o.width;s.className=this.rootElement+"__bubble",s.style.top="-"+(i/2-(t.pageY-o.top-r))+"px",s.style.left="-"+(i/2-(t.pageX-o.left))+"px",s.style.width=i+"px",s.style.height=i+"px",a(s,"animation",function(){e.content.removeChild(s)}),window.requestAnimationFrame(function(){e.content.appendChild(s)})}},{key:"moveEvents",value:function(){var t=this,e={onClick:function(){if(!0!==t.state.disabled&&!0!==t.state.blocked&&(!t.props.progress||t.state.loading)){var e=new Event("action");t.button.dispatchEvent(e),t.action()}},onMouseLeave:function(){t.clearPress()},onMouseDown:function(e){!0!==t.state.disabled&&!0!==t.state.loading&&!0!==t.state.blocked&&(!1===t.props.progress&&!0===t.props.bubbles&&t.createBubble(e),t.setState({loading:t.props.progress,pressPosition:t.rootElement+"--active"}))},onMouseUp:function(e){if(!0===t.state.disabled||!0===t.state.loading||!0===t.state.blocked)return e.preventDefault(),void e.stopPropagation();t.clearPress()}};return!0===this.props.moveEvents?e.onMouseMove=function(e){if(!0!==t.state.disabled&&!0!==t.state.loading&&!0!==t.state.blocked){var n=t.button,o=n.getBoundingClientRect().left,r=n.offsetWidth;t.setState({pressPosition:e.pageX<o+.3*r?t.rootElement+"--left":e.pageX>o+.65*r?t.rootElement+"--right":t.rootElement+"--middle"})}}:e.onMouseEnter=function(){t.setState({pressPosition:t.rootElement+"--middle"})},e}},{key:"render",value:function(){var t=this,e=this.renderComponent;return c.default.createElement(e,l({style:this.props.style,className:this.getClassName()},this.extraProps,this.moveEvents()),c.default.createElement("span",{ref:function(e){t.button=e},className:this.rootElement+"__container"},c.default.createElement("span",{ref:function(e){t.wrapper=e},className:this.rootElement+"__wrapper"},c.default.createElement("span",{ref:function(e){t.content=e},"data-loading":this.props.progress&&this.props.loadingLabel||null,"data-status":this.props.progress&&this.props.resultLabel||null,className:this.rootElement+"__content"},c.default.createElement("span",null,this.props.children)))))}}]),e}(c.default.Component);g.propTypes={action:f.default.func,bubbles:f.default.bool,children:f.default.node.isRequired,disabled:f.default.bool,element:f.default.func,href:f.default.string,loadingLabel:f.default.string,progress:f.default.bool,resultLabel:f.default.string,rootElement:f.default.string,moveEvents:f.default.bool,size:f.default.string,style:f.default.object,target:f.default.string,to:f.default.string,type:f.default.string,visible:f.default.bool},g.defaultProps={action:null,bubbles:!1,disabled:!1,element:null,href:null,loadingLabel:"Wait ..",moveEvents:!0,progress:!1,resultLabel:"Success!",rootElement:h,rounded:!0,size:null,style:{},target:null,to:null,type:"primary",visible:!0},e.default=g},function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e,n){t.exports=n(0)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],e):"object"==typeof exports?exports["react-awesome-button"]=e(require("prop-types"),require("react")):t["react-awesome-button"]=e(t.PropTypes,t.React)}(this,function(t,e){return function(t){function e(o){if(n[o])return n[o].exports;var s=n[o]={i:o,l:!1,exports:{}};return t[o].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e,n){"use strict";(function(t){function o(t){return t&&t.__esModule?t:{default:t}}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),u=n(4),c=o(u),p=n(3),d=o(p),f=n(1),h=window||t,b="aws-btn",m=function(t){return c.default.createElement("a",t)},g=function(t){return c.default.createElement("button",t)},v=function(t){function e(t){s(this,e);var n=r(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.rootElement=t.rootElement||b,n.animationStage=0,n.extraProps={},n.state={disabled:t.disabled,loading:!1,loadingEnd:!1,loadingStart:!1,blocked:!1,clicked:!1},n.checkProps(t),n}return i(e,t),l(e,[{key:"componentDidMount",value:function(){(0,f.setCssEndEvent)(this.wrapper,"transition",this.clearStagedWrapperAnimation.bind(this))}},{key:"componentWillReceiveProps",value:function(t){this.checkProps(t)}},{key:"getRootClassName",value:function(){var t=[this.rootElement,this.props.type&&this.rootElement+"--"+this.props.type,this.props.size&&this.rootElement+"--"+this.props.size,this.props.visible&&this.rootElement+"--visible",this.state.loadingStart&&this.rootElement+"--start"||null,this.state.loadingEnd&&this.rootElement+"--end"||null,this.props.progress&&this.rootElement+"--progress"||null];return!0===this.state.disabled&&t.push(this.rootElement+"--disabled"),this.state.pressPosition&&t.push(this.state.pressPosition),this.props.cssModule&&this.props.cssModule["aws-btn"]?(0,f.classToModules)(t,this.props.cssModule):t.join(" ").trim().replace(/[\s]+/gi," ")}},{key:"checkProps",value:function(t){this.extraProps.to=t.to||null,this.extraProps.href=t.href||null,this.extraProps.target=t.target||null,this.renderComponent=t.element||(this.props.href?m:g)}},{key:"endLoading",value:function(){this.setState({loadingEnd:!0}),this.animationStage=1}},{key:"startLoading",value:function(){this.setState({loading:!0,loadingStart:!0,blocked:!0})}},{key:"clearPress",value:function(){var t=this.state.loading?this.state.pressPosition:null;this.setState({pressPosition:t})}},{key:"clearLoading",value:function(){this.setState({loading:!1,loadingStart:!1,loadingEnd:!1})}},{key:"clearStagedWrapperAnimation",value:function(){var t=this;if(0!==this.animationStage){if(5===this.animationStage)return this.animationStage=0,void setTimeout(function(){h.requestAnimationFrame(function(){t.clearLoading(),t.clearPress(),setTimeout(function(){t.setState({blocked:!1})},500)})},350);this.animationStage+=1}}},{key:"action",value:function(){this.props.progress&&this.startLoading(),this.props.action&&this.props.action(this.button.parentNode,this.props.progress?this.endLoading.bind(this):null)}},{key:"createBubble",value:function(t){(0,f.createBubbleEffect)({event:t,button:this.button,content:this.content,className:(0,f.getClassName)(this.rootElement+"__bubble",this.props.cssModule)})}},{key:"moveEvents",value:function(){var t=this,e={onMouseLeave:function(){t.clearPress()},onMouseDown:function(e){!0===t.state.disabled||!0===t.state.loading||!0===t.state.blocked||e&&1!==e.nativeEvent.which||(!1===t.props.progress&&!0===t.props.bubbles&&t.createBubble(e),t.setState({loading:t.props.progress,pressPosition:t.rootElement+"--active"}),h.requestAnimationFrame(function(){var e=new Event("action");t.button.dispatchEvent(e),t.action()}))},onMouseUp:function(e){if(!0===t.state.disabled||!0===t.state.loading||!0===t.state.blocked)return e.preventDefault(),void e.stopPropagation();t.clearPress()}};return!0===this.props.moveEvents?e.onMouseMove=function(e){if(!0!==t.state.disabled&&!0!==t.state.loading&&!0!==t.state.blocked){var n=t.button,o=n.getBoundingClientRect().left,s=n.offsetWidth;t.setState({pressPosition:e.pageX<o+.3*s?t.rootElement+"--left":e.pageX>o+.65*s?t.rootElement+"--right":t.rootElement+"--middle"})}}:e.onMouseEnter=function(){t.setState({pressPosition:t.rootElement+"--middle"})},e}},{key:"render",value:function(){var t=this,e=this.renderComponent;return c.default.createElement(e,a({style:this.props.style,className:this.getRootClassName(),role:"button"},this.extraProps,this.moveEvents()),c.default.createElement("span",{ref:function(e){t.button=e},className:(0,f.getClassName)(this.rootElement+"__container",this.props.cssModule)},c.default.createElement("span",{ref:function(e){t.wrapper=e},className:(0,f.getClassName)(this.rootElement+"__wrapper",this.props.cssModule)},c.default.createElement("span",{ref:function(e){t.content=e},"data-loading":this.props.progress&&this.props.loadingLabel||null,"data-status":this.props.progress&&this.props.resultLabel||null,className:(0,f.getClassName)(this.rootElement+"__content",this.props.cssModule)},c.default.createElement("span",null,this.props.children)))))}}]),e}(c.default.Component);v.propTypes={action:d.default.func,bubbles:d.default.bool,children:d.default.node.isRequired,disabled:d.default.bool,element:d.default.func,href:d.default.string,loadingLabel:d.default.string,progress:d.default.bool,resultLabel:d.default.string,rootElement:d.default.string,moveEvents:d.default.bool,size:d.default.string,style:d.default.object,cssModule:d.default.object,target:d.default.string,to:d.default.string,type:d.default.string,visible:d.default.bool},v.defaultProps={action:null,bubbles:!1,disabled:!1,element:null,href:null,loadingLabel:"Wait ..",moveEvents:!0,progress:!1,resultLabel:"Success!",rootElement:b,rounded:!0,size:null,style:{},target:null,to:null,type:"primary",visible:!0},e.default=v}).call(e,n(2))},function(t,e,n){"use strict";function o(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments[1],n=[],o=t.length;o--;)e[t[o]]&&n.push(e[t[o]]);return n.join(" ").trim()}function s(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments[1];return e?e[t]||t:t}function r(t,e,n){if(!t)return!1;var o=e.charAt(0).toUpperCase()+e.slice(1);return void 0!==t.style["Webkit"+o]?t.addEventListener("webkit"+o+"End",n):void 0!==t.style.OTransition?t.addEventListener("o"+e+"End",n):t.addEventListener(e+"End",n)}function i(t){var e=t.event,n=t.button,o=t.content,s=t.className,i=n.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrolltop||0,l=document.createElement("span"),u=i.width<50?3*i.width:2*i.width;l.className=s,l.style.top="-"+(u/2-(e.pageY-i.top-a))+"px",l.style.left="-"+(u/2-(e.pageX-i.left))+"px",l.style.width=u+"px",l.style.height=u+"px",r(l,"animation",function(){o.removeChild(l)}),window.requestAnimationFrame(function(){o.appendChild(l)})}Object.defineProperty(e,"__esModule",{value:!0}),e.classToModules=o,e.getClassName=s,e.setCssEndEvent=r,e.createBubbleEffect=i},function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e,n){t.exports=n(0)}])});

package.json

 {
   "name": "react-awesome-button",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons",
@@ -19,2 +19,3 @@ "main": "dist/index.js",
     "build": "NODE_ENV=production webpack",
+    "build:scss": "NODE_ENV=production webpack --config webpack.scss.config.js && rm ./dist/styles.js",
     "test": "BABEL_JEST_STAGE=0 jest",
@@ -35,3 +36,3 @@ "lint": "eslint src/**",
     "babel-jest": "^20.0.0",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
@@ -58,3 +59,3 @@ "babel-preset-react": "^6.24.1",
     "style-loader": "^0.17.0",
-    "webpack": "^2.4.1",
+    "webpack": "^2.7.0",
     "webpack-dev-server": "^2.4.3"
@@ -61,0 +62,0 @@ },

README.md

@@ -1,4 +0,67 @@
-# react-awesome-button
-This is a work in progress branch, a functional demo can be seen on the following link. https://caferati.me/demo/react-awesome-button
+# <ReactAwesomeButton />
 
-I'll publish a production ready version in the upcoming days.
+[![Travis](https://img.shields.io/travis/rcaferati/react-awesome-button/master.svg)](https://travis-ci.org/rcaferati/react-awesome-button) ![NPM](https://img.shields.io/npm/v/react-awesome-button.svg)
+
+`ReactAwesomeButton` is a performant, extendable, highly customisable, production ready React Component that renders an animated set of UI buttons.
+
+## Key Features
++ Look and feel customisable and extendable via SASS variables and lists ([scss config file](https://github.com/rcaferati/react-awesome-button/blob/master/src/styles/default.scss))
++ Use it with CSSModules or Plain CSS (NO inline-styles)
++ Render any tag as the component\'s child (text, icon, img, svg)
++ Animated progress button
++ OnClick bubble animation
+
+### Live demo and examples
++ <a href="https://caferati.me/demo/react-awesome-button" target="_blank">On my portfolio</a>
++ <a href="https://www.webpackbin.com/bins/-Kod7WV_1sLWnwxPdZJ-" target="_blank">Live code at Webpackbin</a>
+
+## Examples
+
+### With plain CSS
+```jsx
+  import AwesomeButton from 'react-awesome-button';
+  import 'react-awesome-button/dist/styles.css';
+  
+  function Button() {
+    return (
+      <AwesomeButton>Primary Button</AwesomeButton>
+    );
+  }
+  
+```
+
+### With CSS Modules
+```jsx
+  import AwesomeButton from 'react-awesome-button';
+  import AwesomeButtonStyles from 'react-awesome-button/src/styles.scss'
+  
+  function Button() {
+    return (
+      <AwesomeButton
+        cssModule={AwesomeButtonStyles}
+      >Primary Button</AwesomeButton>
+    );
+  }
+  
+```
+
+
+| Attributes            | Type          | Default     | Description |
+| :---------            | :--:          | :-----:     | :----------- |
+| action                | `function`    | `null`      | Default click function |
+| bubbles               | `bool`        | `false`     | Should render the bubbles onClick animation |
+| disabled              | `bool`        | `false`     | Should render a disabled button |
+| type                  | `string`      | `"primary"` | Render a specific button type, styled by the .scss type list |
+| size                  | `string`      | `"auto"`    | Render a specific button size, styled by the .scss size list |
+| element               | `node`        | `null`      | Overwrites the default container element renderer, useful for using it with react-router Link container. |
+| href                  | `string`      | `null`      | Forces the button to be rendered on an `anchor` container and sets the href to the specified value |
+| target                | `string`      | `null`      | Render an anchor with a specific target attribute |
+| progress              | `bool`        | `false`     | Should render a progress button |
+| loadingLabel          | `string`      | `"Wait .."` | Progress button loading label text |
+| errorLabel            | `string`      | `"Error"`   | Progress button error label text |
+| successLabel          | `string`      | `"Success"` | Progress button success label text |
+| visible               | `bool`        | `true`      | Should the button be visible |
+
+## License
+
+MIT. Copyright (c) 2017 Rafael Caferati.

src/demo/data.js

 import React from 'react';
-import AwesomeButton from '../react-awesome-button';
+import AwesomeButton from '../component';
+import AwsBtnStyles from '../styles/default.scss';
+import AwsBtnStylesThemeTwo from '../styles/themes/theme-two.scss';
 
+const Div = props => (<div {... props} />);
+
 const features = [
-  'Styles customisable and extendable via sass variables',
+  'Look and feel customisable and extendable via SASS variables and lists',
+  'Use it with CSSModules or Plain CSS (NO inline-styles)',
   'Render any tag as the component\'s child (text, icon, img, svg)',
-  'No inline-styles',
   'Animated progress button',
-  'Button types/colors can be extended via sass list variables',
+  'OnClick bubble animation',
 ];
@@ -14,60 +18,14 @@
   {
-    title: 'Primary button',
+    title: 'Primary, Secondary and Disabled buttons',
     text: `
-<AwesomeButton>Primary Button</AwesomeButton>`,
-    button: (<AwesomeButton>Primary Button</AwesomeButton>),
-  },
-  {
-    title: 'Secondary button',
-    text: `
-<AwesomeButton type="secondary">Secondary Button</AwesomeButton>`,
-    button: (<AwesomeButton type="secondary">Secondary Button</AwesomeButton>),
-  },
-  {
-    title: 'Animated progress button',
-    text: `
-<AwesomeButton
-progress
-action={(next) => {
-  ... doSomething
-  next();
-}}
->Progress Button</AwesomeButton>`,
+<AwesomeButton>Primary Button</AwesomeButton>
+<AwesomeButton type="secondary">Secondary Button</AwesomeButton>
+<AwesomeButton disabled>Disabled Button</AwesomeButton>`,
     button: (
       <div>
-        <AwesomeButton
-          progress
-          action={(element, next) => {
-            setTimeout(() => {
-              next();
-            }, 600);
-          }}
-        >Progress Button</AwesomeButton>
-        <AwesomeButton
-          progress
-          type="secondary"
-          action={(element, next) => {
-            setTimeout(() => {
-              next();
-            }, 500);
-          }}
-        >Progress Button</AwesomeButton>
-      </div>),
-  },
-  {
-    title: 'Hover and Bubble Animations',
-    text: `
-  <AwesomeButton>Primary Button</AwesomeButton>`,
-    button: (
-      <div>
-        <AwesomeButton>With Move Events</AwesomeButton>
-        <AwesomeButton
-          moveEvents={false}
-        >Without Move Events</AwesomeButton>
-        <AwesomeButton
-          bubbles
-          moveEvents={false}
-        >Bubble Animation</AwesomeButton>
+        <AwesomeButton cssModule={AwsBtnStyles}>Primary Button</AwesomeButton>
+        <AwesomeButton cssModule={AwsBtnStyles} type="secondary">Secondary Button</AwesomeButton>
+        <AwesomeButton cssModule={AwsBtnStyles} disabled>Disabled Button</AwesomeButton>
       </div>
-    ),
+      ),
   },
@@ -80,5 +38,8 @@ {
 <AwesomeButton
-type="facebook"
-size="icon"
-><i className="fa fa-facebook" /></AwesomeButton>
+  type="facebook"
+  size="icon"
+  bubbles
+>
+  <i className="fa fa-facebook" aria-hidden />
+</AwesomeButton>
 ...`,
@@ -88,2 +49,3 @@ button: (
         <AwesomeButton
+          cssModule={AwsBtnStyles}
           type="facebook"
@@ -94,5 +56,6 @@ size="icon"
         >
-          <i className="fa fa-facebook" />
+          <i className="fa fa-facebook" aria-hidden />
         </AwesomeButton>
         <AwesomeButton
+          cssModule={AwsBtnStyles}
           type="twitter"
@@ -103,5 +66,6 @@ size="icon"
         >
-          <i className="fa fa-twitter" />
+          <i className="fa fa-twitter" aria-hidden />
         </AwesomeButton>
         <AwesomeButton
+          cssModule={AwsBtnStyles}
           type="github"
@@ -112,5 +76,6 @@ size="icon"
         >
-          <i className="fa fa-github" />
+          <i className="fa fa-github" aria-hidden />
         </AwesomeButton>
         <AwesomeButton
+          cssModule={AwsBtnStyles}
           type="linkedin"
@@ -121,5 +86,6 @@ size="icon"
         >
-          <i className="fa fa-linkedin" />
+          <i className="fa fa-linkedin" aria-hidden />
         </AwesomeButton>
         <AwesomeButton
+          cssModule={AwsBtnStyles}
           type="whatsapp"
@@ -130,3 +96,3 @@ size="icon"
         >
-          <i className="fa fa-whatsapp" />
+          <i className="fa fa-whatsapp" aria-hidden />
         </AwesomeButton>
@@ -137,9 +103,100 @@ </div>
   {
-    title: 'Disabled button',
+    title: 'Animated progress button',
+    js: `
+const action = (next) => {
+  // ... do something
+  next();
+}
+    `,
     text: `
-<AwesomeButton disabled>Disabled Button</AwesomeButton>`,
-    button: (<AwesomeButton
-      disabled
-    >Disabled Button</AwesomeButton>),
+<AwesomeButton
+  progress
+  action={action}
+>Progress Button</AwesomeButton>`,
+    button: (
+      <div>
+        <AwesomeButton
+          cssModule={AwsBtnStyles}
+          progress
+          action={(element, next) => {
+            setTimeout(() => {
+              next();
+            }, 600);
+          }}
+        >Progress Button</AwesomeButton>
+        <AwesomeButton
+          cssModule={AwsBtnStyles}
+          progress
+          type="secondary"
+          action={(element, next) => {
+            setTimeout(() => {
+              next();
+            }, 500);
+          }}
+        >Progress Button</AwesomeButton>
+      </div>),
   },
+  {
+    title: 'Customisable styles and CSSModules',
+    description: 'Change button raised level, color and extend types through SCSS variables and list tweak',
+    scss: `
+$button-default-border-radius: 40px;
+$button-horizontal-padding: 20px;
+$button-raise-level: 4px;
+    `,
+    text: `
+<AwesomeButton
+  cssModule={AwsBtnStylesThemeTwo}
+>Themed Button</AwesomeButton>
+<AwesomeButton
+  cssModule={AwsBtnStylesThemeTwo}
+  type="secondary"
+>Themed Button</AwesomeButton>
+<AwesomeButton
+  cssModule={AwsBtnStylesThemeTwo}
+  disabled
+>Themed Button</AwesomeButton>`,
+    button: (
+      <div>
+        <div>
+          <AwesomeButton
+            cssModule={AwsBtnStylesThemeTwo}
+          >Themed Button</AwesomeButton>
+          <AwesomeButton
+            cssModule={AwsBtnStylesThemeTwo}
+            type="secondary"
+          >Themed Button</AwesomeButton>
+          <AwesomeButton
+            cssModule={AwsBtnStylesThemeTwo}
+            disabled
+          >Themed Button</AwesomeButton>
+        </div>
+      </div>
+    ),
+  },
+  {
+    title: 'Hover Animations',
+    text: `
+<AwesomeButton>With Move Events</AwesomeButton>
+<AwesomeButton moveEvents={false}>Without Move Events</AwesomeButton>`,
+    button: (
+      <div>
+        <AwesomeButton cssModule={AwsBtnStyles}>With Move Events</AwesomeButton>
+        <AwesomeButton
+          cssModule={AwsBtnStyles}
+          moveEvents={false}
+        >Without Move Events</AwesomeButton>
+      </div>
+    ),
+  },
+  {
+    title: 'Overwrite Component Renderer',
+    description: 'Render overwrite is specially usefull when you want to render the button with the Link component from react-router.',
+    js: 'const Div = props => (<div {... props} />);',
+    text: `
+<AwesomeButton element={Div}>With Div Container</AwesomeButton>`,
+    button: (
+      <AwesomeButton element={Div} cssModule={AwsBtnStyles}>With Div Container</AwesomeButton>
+    ),
+  },
 ];
@@ -151,3 +208,3 @@
   description: 'The AwesomeButton is a performant, extendable, highly customisable, production ready react component that renders an animated basic set of UI buttons.',
-  size: '~4KB compressed ( js + styles )',
+  size: '~4KB compressed <script + styles>',
   repository: 'https://github.com/rcaferati/react-awesome-button',
@@ -154,0 +211,0 @@ article: '//caferati.me/labs/awesome-button',

src/demo/demo.js

@@ -9,8 +9,8 @@ import React from 'react';
 import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-scss';
+import 'prismjs/themes/prism-okaidia.css';
 import Data from './data';
+import Styles from './demo.scss';
 
-require('prismjs/themes/prism-okaidia.css');
-require('../react-awesome-button.scss');
-require('./demo.scss');
-
 const renderFeatures = () => Data.features.map((feature, index) => (<li key={`feature-${index}`}>{feature}</li>));
@@ -20,13 +20,37 @@
   <li key={`example-${index}`}>
-    <h3>{example.title}</h3>
-    {example.description && <p>{example.description}</p>}
-    <pre>
-      <code
-        className="html"
-        dangerouslySetInnerHTML={{ __html:
-          Prism.highlight(example.text.trim(), Prism.languages.jsx),
-        }}
-      />
-    </pre>
+    <div className={Styles.header}>
+      <h3>{example.title}</h3>
+      {example.description && <p>{example.description}</p>}
+    </div>
     <div>
+      {example.scss && (
+        <pre>
+          <h4>.scss</h4>
+          <code
+            dangerouslySetInnerHTML={{ __html:
+              Prism.highlight(example.scss.trim(), Prism.languages.scss),
+            }}
+          />
+        </pre>
+      )}
+      {example.js && (
+        <pre>
+          <h4>.js</h4>
+          <code
+            dangerouslySetInnerHTML={{ __html:
+              Prism.highlight(example.js.trim(), Prism.languages.jsx),
+            }}
+          />
+        </pre>
+      )}
+      <pre>
+        <h4>.jsx</h4>
+        <code
+          dangerouslySetInnerHTML={{ __html:
+            Prism.highlight(example.text.trim(), Prism.languages.jsx),
+          }}
+        />
+      </pre>
+    </div>
+    <div className={Styles.buttons}>
       {example.button}
@@ -47,3 +71,3 @@ </div>
     </header>
-    <div className="features">
+    <div className={Styles.features}>
       <h3>Main Features</h3>
@@ -54,3 +78,3 @@ <ul>
     </div>
-    <ul className="examples">
+    <ul className={Styles.examples}>
       {renderExamples()}
@@ -62,3 +86,3 @@ </ul>
       </div>
-      <small>Star and support this project on <a rel="noopener noreferrer" target="_blank" href={Data.repository}>github</a>.</small>
+      <small>Promote and support this project on <a rel="noopener noreferrer" target="_blank" href={Data.repository}>github</a>.</small>
       <small>Read more and discuss at the <a rel="noopener noreferrer" target="_blank" href={Data.article}>article page</a>.</small>
@@ -65,0 +89,0 @@ </footer>

webpack.config.js

@@ -6,3 +6,3 @@ const webpack = require('webpack');
   entry: {
-    index: ['./src/react-awesome-button.js'],
+    index: ['./src/component.js'],
   },
@@ -9,0 +9,0 @@ output: {

webpack.demo.config.js

@@ -20,3 +20,12 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
           fallback: 'style-loader',
-          use: ['css-loader', 'postcss-loader', 'sass-loader'],
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                localIdentName: '[hash:base64:4]',
+              },
+            },
+            'postcss-loader',
+            'sass-loader'],
         }),
@@ -23,0 +32,0 @@ },

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances 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

75460

increased by44.47%

Number of package files

29

increased by61.11%

Lines of code

856

increased by29.7%

Number of lines in readme file

68

increased by1260%

Worsened metrics

Number of medium supply chain risk alerts

3

increased byInfinity%

No dependency changes