Fixed all eslint issues

Author: Kameshwaran

package-lock.json

@@ -49,6 +49,7 @@
     "babel-preset-es2017": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
     "classnames": "^2.2.6",
+    "prop-types": "^15.6.2",
     "ramda": "^0.25.0",
     "react": "^16.3.2",
     "react-css-themr": "^2.1.2",

package.json

@@ -8,27 +8,42 @@ import rippleFactory from '../ripple/Ripple';
 
 const factory = (ripple, FontIcon) => {
   class Button extends Component {
+    static propTypes = {
+      children: PropTypes.node.isRequired,
+      type: PropTypes.string,
+      size: PropTypes.string,
+      className: PropTypes.string,
+      href: PropTypes.string,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element,
+      ]),
+      iconAlignment: PropTypes.string,
+      theme: PropTypes.shape({}),
+      disabled: PropTypes.bool,
+      onClick: PropTypes.func,
+    };
+
     static defaultProps = {
       type: 'default',
       size: 'medium',
       className: '',
       href: '',
+      icon: null,
       iconAlignment: 'left',
+      theme: {},
+      disabled: false,
+      onClick: null,
     };
 
     getIcon = (icon, iconAlignment, theme) => {
       const iconClasses = classnames(theme.icon, theme[`icon-${iconAlignment}`]);
       return <FontIcon className={iconClasses} value={icon} />;
     }
 
-    handleMouseUp = (event) => {
-      this.buttonNode.blur();
-      if (this.props.onMouseUp) this.props.onMouseUp(event);
-    };
-
     handleMouseLeave = (event) => {
       this.buttonNode.blur();
-      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+      if (this.props.onClick) this.props.onClick(event);
     };
 
     render() {

src/button/Button.js

@@ -10,8 +10,9 @@ The base button component.
 | `size` | `String` | `medium`  | Defines the size of the button. Possible values are 'small', 'medium', and 'large' |
 | `className` | `String` | `''` | Set a class to style the Component |
 | `href` | `String` | `null` | Creates a link for the button. |
-| `icon` | `String`/`Element` |  | Value of the icon |
+| `icon` | `String`/`Element` | `null` | Value of the icon |
 | `iconAlignment` | `String` | `left` | Set an alignment of the icon. Possible values are 'left', 'right' |
+| `onClick` | `Function` |  | Callback to be called when the button is clicked |
 
 ### Theme
 

src/button/readme.md

@@ -13,17 +13,20 @@ const Card = ({
   noPadding,
   header, ...other
 }) => {
-  const classes = classnames(theme.card, theme[`elevation-${elevation}`],{
+  const classes = classnames(theme.card, theme[`elevation-${elevation}`], {
     [theme.wrapContent]: wrapContent,
     [theme.noPadding]: noPadding,
   }, className);
   const headerClass = classnames(theme.cardHeader);
+
   let cardHeader;
   if (typeof header === 'string') {
-    cardHeader = (<div className={headerClass}>
-                    <span>{header}</span>
-                  </div>)
-  } else if(typeof header === 'function') {
+    cardHeader = (
+      <div className={headerClass}>
+        <span>{header}</span>
+      </div>
+    );
+  } else if (typeof header === 'function') {
     cardHeader = header();
   }
 
@@ -35,16 +38,29 @@ const Card = ({
   );
 };
 
-Card.prototype = {
-  theme: PropTypes.object,
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  theme: PropTypes.shape({
+    card: PropTypes.string,
+    cardHeader: PropTypes.string,
+  }),
   wrapContent: PropTypes.bool,
   noPadding: PropTypes.bool,
   elevation: PropTypes.oneOf(['low', 'medium', 'high']),
-  header: PropTypes.oneOf([PropTypes.string, PropTypes.func]),
-}
+  header: PropTypes.oneOf([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+};
 
 Card.defaultProps = {
+  className: null,
   elevation: 'low',
-}
+  theme: {},
+  wrapContent: false,
+  noPadding: false,
+  header: null,
+};
 
-export default themr('CBCard', defaultTheme)(Card);
+export default themr('CBCard', defaultTheme)(Card);

src/card/index.js

@@ -1,19 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { themr } from 'react-css-themr';
 
 import iconTheme from './theme.scss';
 
 const FontIcon = ({ alt, children, className, theme, value, ...other}) => { // eslint-disable-line
-  const _classNames = classnames({
+  const classNames = classnames({
     [iconTheme.materialIcons]: typeof value === 'string' || typeof children === 'string',
   }, className);
 
   return (
     <span
       aria-label={alt}
-      className={_classNames}
+      className={classNames}
       {...other}
     >
       {value}
@@ -30,10 +29,11 @@ FontIcon.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.element,
-  ]),
+  ]).isRequired,
 };
 
 FontIcon.defaultProps = {
+  children: null,
   alt: '',
   className: '',
 };

src/font_icon/FontIcon.js

@@ -3,14 +3,15 @@ import ReactDOM from 'react-dom';
 import Card from './card';
 import customTheme from './customcard.scss';
 
-import Button from './button';
+import Button from './button'; // eslint-disable-line
 
 const Index = () => (
   <div>
     <Card
-      header='Card String header'
+      header="Card String header"
       wrapContent
-      theme={customTheme}>
+      theme={customTheme}
+    >
       <span>Card Content</span>
       <span>Card Content</span>
       <span>Card Content</span>

src/index.js

@@ -30,7 +30,7 @@ const rippleFactory = (options = {}) => {
   return (ComposedComponent) => {
     class RippledComponent extends Component {
       static propTypes = {
-        children: PropTypes.node,
+        children: PropTypes.node.isRequired,
         disabled: PropTypes.bool,
         onMouseDown: PropTypes.func,
         onRippleEnded: PropTypes.func,
@@ -55,6 +55,10 @@ const rippleFactory = (options = {}) => {
         rippleClassName: defaultClassName,
         rippleMultiple: defaultMultiple,
         rippleSpread: defaultSpread,
+        onMouseDown: null,
+        onRippleEnded: null,
+        onTouchStart: null,
+        theme: {},
       };
 
       state = {
@@ -86,7 +90,7 @@ const rippleFactory = (options = {}) => {
       getDescriptor(x, y) {
         const {
           left, top, height, width,
-        } = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        } = ReactDOM.findDOMNode(this).getBoundingClientRect(); // eslint-disable-line
         const { rippleCentered: centered, rippleSpread: spread } = this.props;
         return {
           left: centered ? 0 : x - left - (width / 2),
@@ -253,14 +257,14 @@ const rippleFactory = (options = {}) => {
       }) {
         const scale = restarting ? 0 : 1;
         const transform = `translate3d(${(-width / 2) + left}px, ${(-width / 2) + top}px, 0) scale(${scale})`;
-        const _className = classnames(this.props.theme.ripple, {
+        const classNames = classnames(this.props.theme.ripple, {
           [this.props.theme.rippleActive]: active,
           [this.props.theme.rippleRestarting]: restarting,
         }, className);
         return (
           <span key={key} data-react-toolbox="ripple" className={this.props.theme.rippleWrapper} {...props}>
             <span
-              className={_className}
+              className={classNames}
               ref={(node) => { if (node) this.rippleNodes[key] = node; }}
               style={prefixer({ transform }, { width, height: width })}
             />

src/ripple/Ripple.js

@@ -1,5 +1,20 @@
 import keys from 'ramda/src/keys';
 
+const TRANSITIONS = {
+  transition: 'transitionend',
+  OTransition: 'oTransitionEnd',
+  MozTransition: 'transitionend',
+  WebkitTransition: 'webkitTransitionEnd',
+};
+
+function transitionEventNamesFor(element) {
+  return keys(TRANSITIONS).reduce((result, transition) => (
+    !result && (element && element.style[transition] !== undefined)
+      ? TRANSITIONS[transition]
+      : result
+  ), null);
+}
+
 export default {
   getMousePosition(event) {
     return {
@@ -55,18 +70,3 @@ export default {
     return true;
   },
 };
-
-const TRANSITIONS = {
-  transition: 'transitionend',
-  OTransition: 'oTransitionEnd',
-  MozTransition: 'transitionend',
-  WebkitTransition: 'webkitTransitionEnd',
-};
-
-function transitionEventNamesFor(element) {
-  return keys(TRANSITIONS).reduce((result, transition) => (
-    !result && (element && element.style[transition] !== undefined)
-      ? TRANSITIONS[transition]
-      : result
-  ), null);
-}

src/utils/events.js

@@ -28,17 +28,17 @@ function addPrefixesTo(style, property, value) {
 }
 
 function prefixer(style, defaultValue = {}) {
-  const _style = defaultValue;
+  const newStyle = defaultValue;
   for (const property in style) { // eslint-disable-line no-restricted-syntax
     if ({}.hasOwnProperty.call(style, property)) {
-      _style[property] = style[property];
+      newStyle[property] = style[property];
       if (properties[property]) {
-        addPrefixesTo(_style, property, style[property]);
+        addPrefixesTo(newStyle, property, style[property]);
       }
     }
   }
 
-  return _style;
+  return newStyle;
 }
 
 export default prefixer;