@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/es/HiButton/HiButton.js

@@ -1,130 +1,203 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent Button
-
 import React from 'react';
-import Button from 'material-ui/Button';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
-
+import Button from '@material-ui/core/Button';
 export const styles = theme => ({
-    root: {
-        paddingTop: 9,
-        color: theme.palette.neutral.normal
-    },
-    flatPrimary: {
-        color: theme.palette.business.primary.normal,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.business.primary.light, 0.08)
-        }
-    },
-    raised: {
-        color: theme.palette.neutral.normal
-    },
-    raisedPrimary: {
-        color: theme.palette.business.primary.contrast,
-        backgroundColor: theme.palette.business.primary.normal,
-        '&:hover': {
-            backgroundColor: theme.palette.business.primary.dark
-        }
-    },
-    raisedPositive: {
-        backgroundColor: theme.palette.positive.normal,
-        '&:hover': {
-            backgroundColor: theme.palette.positive.dark
-        },
-        color: theme.palette.positive.contrast
-    },
-    raisedNegative: {
-        backgroundColor: theme.palette.negative.normal,
-        '&:hover': {
-            backgroundColor: theme.palette.negative.dark
-        },
-        color: theme.palette.negative.contrast
-    },
-    flatPositive: {
-        color: theme.palette.positive.normal,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.positive.light, 0.08)
-        }
-    },
-    flatNegative: {
-        color: theme.palette.negative.normal,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.negative.light, 0.08)
-        }
-    },
-    label: {},
-    // Important de mettre disabled en dernier, car il surcharge les autres classes, comme raised
-    disabled: {
-        color: theme.palette.text.disabled
+  root: {},
+  flatPositive: {
+    color: theme.palette.positive.main,
+    '&:hover': {
+      backgroundColor: fade(theme.palette.positive.main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  },
+  flatNegative: {
+    color: theme.palette.negative.main,
+    '&:hover': {
+      backgroundColor: fade(theme.palette.negative.main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  },
+  flatMiddle: {
+    color: theme.palette.middle.main,
+    '&:hover': {
+      backgroundColor: fade(theme.palette.middle.main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  },
+  flatNeutral: {
+    color: theme.palette.neutral.main,
+    '&:hover': {
+      backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  },
+
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
+  containedPositive: {
+    color: theme.palette.positive.contrastText,
+    backgroundColor: theme.palette.positive.main,
+    '&:hover': {
+      backgroundColor: theme.palette.positive.dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.positive.main
+      }
+    }
+  },
+
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="negative"`. */
+  containedNegative: {
+    color: theme.palette.negative.contrastText,
+    backgroundColor: theme.palette.negative.main,
+    '&:hover': {
+      backgroundColor: theme.palette.negative.dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.negative.main
+      }
+    }
+  },
+
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="middle"`. */
+  containedMiddle: {
+    color: theme.palette.middle.contrastText,
+    backgroundColor: theme.palette.middle.main,
+    '&:hover': {
+      backgroundColor: theme.palette.middle.dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.middle.main
+      }
+    }
+  },
+
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="neutral"`. */
+  containedNeutral: {
+    color: theme.palette.neutral.contrastText,
+    backgroundColor: theme.palette.neutral.main,
+    '&:hover': {
+      backgroundColor: theme.palette.neutral.dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.neutral.main
+      }
+    }
+  },
+
+  /* Styles applied to the root element if `variant="outlined"` and `color="positive"`. */
+  outlinedPositive: {
+    border: `1px solid ${fade(theme.palette.positive.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.positive.main}`
     }
+  },
+
+  /* Styles applied to the root element if `variant="outlined"` and `color="negative"`. */
+  outlinedNegative: {
+    border: `1px solid ${fade(theme.palette.negative.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.negative.main}`
+    }
+  },
+
+  /* Styles applied to the root element if `variant="outlined"` and `color="middle"`. */
+  outlinedMiddle: {
+    border: `1px solid ${fade(theme.palette.middle.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.middle.main}`
+    }
+  },
+
+  /* Styles applied to the root element if `variant="outlined"` and `color="neutral"`. */
+  outlinedNeutral: {
+    border: `1px solid ${fade(theme.palette.neutral.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.neutral.main}`
+    }
+  }
 });
+
 function HiButton(props) {
-    const {
-        classes,
-        positive,
-        negative,
-        className,
-        variant,
-        disabled,
-        children,
-        onClick,
-        color
-    } = props,
-          other = _objectWithoutProperties(props, ['classes', 'positive', 'negative', 'className', 'variant', 'disabled', 'children', 'onClick', 'color']);
-    const buttonClassNames = classNames(classes.root, {
-        [classes.raisedPositive]: variant === 'raised' && positive,
-        [classes.raisedNegative]: variant === 'raised' && negative,
-        [classes.flatPositive]: variant !== 'raised' && positive,
-        [classes.flatNegative]: variant !== 'raised' && negative
-    });
+  const {
+    children,
+    classes,
+    className,
+    color,
+    variant
+  } = props,
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
 
-    return React.createElement(
-        Button,
-        _extends({
-            className: classNames(classes.root, className),
-            classes: {
-                root: buttonClassNames,
-                flatPrimary: classes.flatPrimary,
-                raised: classes.raised,
-                raisedPrimary: classes.raisedPrimary,
-                disabled: classes.disabled,
-                label: classes.label
-            },
-            variant: variant,
-            disabled: disabled,
-            onClick: onClick,
-            color: color
-        }, other),
-        children
-    );
+  const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+  const fab = variant === 'fab' || variant === 'extendedFab';
+  const contained = variant === 'contained' || variant === 'raised';
+  const buttonClassNames = classNames(classes.root, {
+    [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
+    [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
+    [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
+    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral',
+    [classes.containedPositive]: (contained || fab) && color === 'positive',
+    [classes.containedNegative]: (contained || fab) && color === 'negative',
+    [classes.containedMiddle]: (contained || fab) && color === 'middle',
+    [classes.containedNeutral]: (contained || fab) && color === 'neutral',
+    [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
+    [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
+    [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
+    [classes.outlinedNeutral]: variant === 'outlined' && color === 'neutral'
+  });
+  return React.createElement(Button, _extends({
+    className: className,
+    classes: {
+      root: buttonClassNames
+    },
+    color: hcolor,
+    variant: variant
+  }, other), children);
 }
+
 HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Surcharge des classes
-     */
-    classes: PropTypes.object,
-    /**
-     * Surcharge des classes
-     */
-    className: PropTypes.string,
-    /**
-     * Colore le bouton en rouge
-     */
-    negative: PropTypes.bool,
-    /**
-     * Colore le bouton en vert
-     */
-    positive: PropTypes.bool
-} : {};
+  /**
+   * Surcharge des classes
+   */
+  classes: PropTypes.object,
 
+  /**
+   * Surcharge des classes
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
+} : {};
 HiButton.defaultProps = {
-    negative: false,
-    positive: false
+  color: 'default',
+  variant: 'text'
 };
-
-export default withStyles(styles, { name: 'HmuiHiButton' })(HiButton);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiButton'
+})(HiButton);

package/es/HiCheckbox/HiCheckbox.js

@@ -1,104 +1,177 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-//
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent Checkbox
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import Checkbox from 'material-ui/Checkbox';
-import CheckboxBlankOutline from 'mdi-material-ui/CheckboxBlankOutline';
-import CheckboxMarked from 'mdi-material-ui/CheckboxMarked';
-import MinusBox from 'mdi-material-ui/MinusBox';
+import Checkbox from '@material-ui/core/Checkbox';
 import withStyles from '../styles/withStyles';
-
+import HiIcon from '../HiIcon';
+import classNames from 'classnames';
 export const styles = theme => ({
-    root: {
-        marginRight: 12,
-        marginLeft: 12
-    },
-    checked: {
-        color: theme.palette.business.primary.normal
-    },
-    disabled: {
-        color: theme.palette.action.disabled
-    }
+  root: {
+    marginRight: 12,
+    marginLeft: 12
+  },
+  checked: {},
+  checkedPrimary: {
+    color: theme.palette.primary.main
+  },
+  checkedSecondary: {
+    color: theme.palette.secondary.main
+  },
+  checkedPositive: {
+    color: theme.palette.positive.main
+  },
+  checkedNegative: {
+    color: theme.palette.negative.main
+  },
+  checkedMiddle: {
+    color: theme.palette.middle.main
+  },
+  checkedNeutral: {
+    color: theme.palette.neutral.main
+  },
+  disabled: {
+    color: theme.palette.action.disabled
+  }
 });
 
 class HiCheckbox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  /**
+   * Call callback function and stop click propagation
+   * @param event
+   * @param checked
+   */
 
-    constructor(props) {
-        super();
 
-        this.handleChange = this.handleChange.bind(this);
+  handleChange(event, checked) {
+    // Stop propagation
+    if (event) {
+      event.stopPropagation();
+      event.preventDefault();
     }
 
-    /**
-     * Call callback function and stop click propagation
-     * @param event
-     * @param checked
-     */
-    handleChange(event, checked) {
-        // Stop propagation
-        if (event) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-
-        if (this.props.onChange) {
-            this.props.onChange(event, checked);
-        }
+    if (this.props.onChange) {
+      this.props.onChange(event, checked);
     }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      color,
+      checkedIcon,
+      icon,
+      indeterminateIcon,
+      style,
+      size
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size"]);
+
+    const iconStyles = _objectSpread({
+      width: size,
+      height: size
+    }, style);
+
+    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'default' : color;
+    return React.createElement(Checkbox, _extends({
+      classes: {
+        root: classes.root,
+        checked: classNames(classes.checked, {
+          [classes.checkedPrimary]: color === 'primary' || color === 'default',
+          [classes.checkedSecondary]: color === 'secondary',
+          [classes.checkedPositive]: color === 'positive',
+          [classes.checkedNegative]: color === 'negative',
+          [classes.checkedMiddle]: color === 'middle',
+          [classes.checkedNeutral]: color === 'neutral'
+        }),
+        disabled: classes.disabled
+      },
+      style: iconStyles,
+      color: hcolor,
+      onChange: this.handleChange
+    }, icon && {
+      icon: React.createElement(HiIcon, {
+        className: classes.root,
+        icon: icon
+      })
+    }, checkedIcon && {
+      checkedIcon: React.createElement(HiIcon, {
+        className: classes.root,
+        icon: checkedIcon,
+        color: color
+      })
+    }, indeterminateIcon && {
+      indeterminateIcon: React.createElement(HiIcon, {
+        className: classes.root,
+        icon: indeterminateIcon,
+        color: color
+      })
+    }, other));
+  }
 
-    render() {
-        const _props = this.props,
-              { classes, style, size, icon } = _props,
-              props = _objectWithoutProperties(_props, ['classes', 'style', 'size', 'icon']);
-
-        const iconStyles = _extends({
-            width: size,
-            height: size
-        }, style);
-
-        return React.createElement(Checkbox, _extends({
-            classes: {
-                default: classes.root,
-                checked: classes.checked,
-                disabled: classes.disabled
-            },
-            style: iconStyles,
-            icon: icon || React.createElement(CheckboxBlankOutline, { className: classes.root, style: iconStyles }),
-            checkedIcon: React.createElement(CheckboxMarked, { className: classes.root, style: iconStyles }),
-            indeterminateIcon: React.createElement(MinusBox, { className: classes.root, style: iconStyles }),
-            onChange: this.handleChange
-        }, props));
-    }
 }
 
 HiCheckbox.defaultProps = {
-    size: 20
+  checked: false,
+  color: 'default',
+  size: 20
 };
 HiCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: PropTypes.object,
-    /**
-     * icon à afficher quand le composant est coché.
-     */
-    icon: PropTypes.node,
-    /**
-     * Fonction de callback onChange
-     * @param {object} event The event source of the callback
-     * @param {bool} checked Boolean state of checkbox
-     */
-    onChange: PropTypes.func,
-    /**
-     * Définit la taille des checkbox (px), différent dans le tableau
-     */
-    size: PropTypes.number,
-    /**
-     * Surcharge le style du composant
-     */
-    style: PropTypes.object
+  /**
+   * L'icon est cochée
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * icon à afficher quand le composant est coché.
+   */
+  checkedIcon: PropTypes.string,
+
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * icon à afficher quand le composant est non coché.
+   */
+  icon: PropTypes.string,
+
+  /**
+   * icon à afficher quand le composant a la prop indeterminate.
+   */
+  indeterminateIcon: PropTypes.string,
+
+  /**
+   * Fonction de callback onChange
+   * @param {object} event The event source of the callback
+   * @param {bool} checked Boolean state of checkbox
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Définit la taille des checkbox (px), différent dans le tableau
+   */
+  size: PropTypes.number,
+
+  /**
+   * Surcharge le style du composant
+   */
+  style: PropTypes.object
 } : {};
-export default withStyles(styles, { name: 'HmuiHiCheckbox' })(HiCheckbox);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiCheckbox'
+})(HiCheckbox);