@hipay/hipay-material-ui 2.0.0-beta.35 → 2.0.0-beta.36

package/HiCheckbox/HiCheckbox.js

@@ -41,8 +41,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var styles = function styles(theme) {
   return {
     root: {
-      marginRight: 12,
-      marginLeft: 12
+      marginRight: 6,
+      marginLeft: 6,
+      padding: 0
     },
     checked: {},
     checkedPrimary: {
@@ -117,16 +118,17 @@ function (_React$Component) {
           indeterminateIcon = _this$props.indeterminateIcon,
           style = _this$props.style,
           size = _this$props.size,
-          other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size"]);
+          className = _this$props.className,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size", "className"]);
       var iconStyles = (0, _extends2.default)({
         width: size,
         height: size
       }, style);
-      var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'default' : color;
+      var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
       return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
         classes: {
           root: classes.root,
-          checked: (0, _classnames.default)(classes.checked, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.checkedPrimary, color === 'primary' || color === 'default'), (0, _defineProperty2.default)(_classNames, classes.checkedSecondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.checkedPositive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.checkedNegative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.checkedMiddle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.checkedNeutral, color === 'neutral'), _classNames)),
+          checked: (0, _classnames.default)(classes.checked, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.checkedPrimary, color === 'primary' || color === 'inherit'), (0, _defineProperty2.default)(_classNames, classes.checkedSecondary, color === 'secondary'), (0, _defineProperty2.default)(_classNames, classes.checkedPositive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.checkedNegative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.checkedMiddle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.checkedNeutral, color === 'neutral'), _classNames)),
           disabled: classes.disabled
         },
         style: iconStyles,
@@ -135,19 +137,22 @@ function (_React$Component) {
       }, icon && {
         icon: _react.default.createElement(_HiIcon.default, {
           className: classes.root,
-          icon: icon
+          icon: icon,
+          size: 20
         })
       }, checkedIcon && {
         checkedIcon: _react.default.createElement(_HiIcon.default, {
           className: classes.root,
           icon: checkedIcon,
-          color: color
+          color: color,
+          size: 20
         })
       }, indeterminateIcon && {
         indeterminateIcon: _react.default.createElement(_HiIcon.default, {
           className: classes.root,
           icon: indeterminateIcon,
-          color: color
+          color: color,
+          size: 20
         })
       }, other));
     }
@@ -158,7 +163,8 @@ function (_React$Component) {
 HiCheckbox.defaultProps = {
   checked: false,
   color: 'default',
-  size: 20
+  size: 20,
+  icon: 'check_box_outline_blank'
 };
 HiCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
   /**

package/HiIcon/HiIcon.js

@@ -38,7 +38,7 @@ var styles = function styles(theme) {
 
     /* Styles applied to the root element. */
     faIcon: {
-      fontSize: 24
+      fontSize: 20
     },
 
     /* Styles applied to the root element if `color="primary"`. */
@@ -80,11 +80,10 @@ function HiIcon(props) {
       classes = props.classes,
       className = props.className,
       color = props.color,
-      fontSize = props.fontSize,
       icon = props.icon,
       size = props.size,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "fontSize", "icon", "size", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "icon", "size", "theme"]);
   var iconName = icon !== null ? icon : children;
   var isHiColor = ['positive', 'negative', 'middle', 'neutral'].includes(color); // Line Awesome icons
 
@@ -92,7 +91,7 @@ function HiIcon(props) {
     return _react.default.createElement("i", (0, _extends2.default)({
       className: (0, _classnames.default)('fa', iconName, classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], color !== 'inherit'), className),
       style: {
-        fontSize: fontSize !== 'inherit' ? size : 'inherit'
+        fontSize: size
       }
     }, other));
   } // Specific HiPay icons
@@ -102,12 +101,9 @@ function HiIcon(props) {
     var IconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
     return _react.default.createElement(IconName, (0, _extends2.default)({
       className: (0, _classnames.default)(classes.root, className),
-      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main
-    }, fontSize === 'default' ? {
+      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main,
       width: size,
       height: size
-    } : {
-      fontSize: fontSize
     }, other));
   } // MDI - Material Design Icons - https://materialdesignicons.com
 
@@ -116,26 +112,20 @@ function HiIcon(props) {
     var _IconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
     return _react.default.createElement(_IconName, (0, _extends2.default)({
       className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], isHiColor), className),
-      color: isHiColor ? 'inherit' : color
-    }, fontSize === 'default' ? {
+      color: isHiColor ? 'inherit' : color,
       style: {
         fontSize: size
       }
-    } : {
-      fontSize: fontSize
     }, other));
   } // @material-ui/icons
 
 
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
     className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], isHiColor), className),
-    color: isHiColor ? 'inherit' : color
-  }, fontSize === 'default' ? {
+    color: isHiColor ? 'inherit' : color,
     style: {
       fontSize: size
     }
-  } : {
-    fontSize: fontSize
   }, other), iconName);
 }
 
@@ -161,11 +151,6 @@ HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled', 'positive', 'negative', 'middle', 'neutral']),
 
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   */
-  fontSize: _propTypes.default.oneOf(['inherit', 'default']),
-
   /**
    * Deprecated use (same as children)
    * The name of the icon font ligature.
@@ -179,9 +164,8 @@ HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 HiIcon.defaultProps = {
   color: 'inherit',
-  fontSize: 'default',
   icon: null,
-  size: 24
+  size: 20
 };
 HiIcon.muiName = 'HiIcon';
 

package/HiSelectableList/HiSelectableListItem.js

@@ -50,6 +50,7 @@ var styles = function styles(theme) {
     root: {},
     listItem: {
       backgroundColor: theme.palette.background3,
+      color: theme.palette.neutral.dark,
       padding: '5px 0',
       fontWeight: theme.typography.fontWeightRegular,
       maxHeight: 56,
@@ -79,7 +80,6 @@ var styles = function styles(theme) {
       width: '100%'
     },
     disabled: {
-      color: theme.palette.action.disabled,
       fontWeight: theme.typography.fontWeightLight,
       cursor: 'default'
     },
@@ -109,11 +109,11 @@ var styles = function styles(theme) {
       fontWeight: 'inherit',
       width: '100%',
       height: '-webkit-fill-available',
-      padding: '4px 0'
+      padding: '5px 0'
     }),
     label: {
       display: 'inline-block',
-      margin: '1px 0 1px 8px'
+      margin: '1px 0'
     },
     coloredLabel: {
       display: 'inline-flex',
@@ -147,7 +147,7 @@ var styles = function styles(theme) {
       width: 20,
       height: 20,
       fontSize: 20,
-      margin: '5px 6px 5px 0'
+      marginTop: 3
     },
     img: {
       width: 24,
@@ -303,12 +303,14 @@ function (_React$Component) {
         onMouseLeave: this.setHover(false)
       }, {
         style: {
-          paddingLeft: "".concat(paddingLeft + level * 32, "px")
+          paddingLeft: "".concat(level * 32, "px")
         }
       }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
         checked: selected,
         checkedIcon: checkedIcon,
-        className: classes.checkbox,
+        classes: {
+          root: classes.checkbox
+        },
         color: "primary" // TODO ?
         ,
         disabled: disabled,
@@ -338,9 +340,11 @@ HiSelectableListItem.defaultProps = {
   centered: false,
   disabled: false,
   hideCheckbox: false,
+  hoverIcon: 'check_box_outline_blank',
+  checkedIcon: 'check_box',
   indeterminate: false,
   level: 0,
-  paddingLeft: 16,
+  paddingLeft: 0,
   pinned: false,
   secondaryInline: true,
   selected: false,
@@ -380,7 +384,7 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
    */
-  hoverIcon: _propTypes.default.string,
+  hoverIcon: _propTypes.default.node,
 
   /**
    * Icon affiché lorsque l'item n'est pas sélectionné

package/es/HiCheckbox/HiCheckbox.js

@@ -10,8 +10,9 @@ import HiIcon from '../HiIcon';
 import classNames from 'classnames';
 export const styles = theme => ({
   root: {
-    marginRight: 12,
-    marginLeft: 12
+    marginRight: 6,
+    marginLeft: 6,
+    padding: 0
   },
   checked: {},
   checkedPrimary: {
@@ -70,21 +71,22 @@ class HiCheckbox extends React.Component {
       icon,
       indeterminateIcon,
       style,
-      size
+      size,
+      className
     } = _this$props,
-          other = _objectWithoutProperties(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size"]);
+          other = _objectWithoutProperties(_this$props, ["classes", "color", "checkedIcon", "icon", "indeterminateIcon", "style", "size", "className"]);
 
     const iconStyles = _objectSpread({
       width: size,
       height: size
     }, style);
 
-    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'default' : color;
+    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
     return React.createElement(Checkbox, _extends({
       classes: {
         root: classes.root,
         checked: classNames(classes.checked, {
-          [classes.checkedPrimary]: color === 'primary' || color === 'default',
+          [classes.checkedPrimary]: color === 'primary' || color === 'inherit',
           [classes.checkedSecondary]: color === 'secondary',
           [classes.checkedPositive]: color === 'positive',
           [classes.checkedNegative]: color === 'negative',
@@ -99,19 +101,22 @@ class HiCheckbox extends React.Component {
     }, icon && {
       icon: React.createElement(HiIcon, {
         className: classes.root,
-        icon: icon
+        icon: icon,
+        size: 20
       })
     }, checkedIcon && {
       checkedIcon: React.createElement(HiIcon, {
         className: classes.root,
         icon: checkedIcon,
-        color: color
+        color: color,
+        size: 20
       })
     }, indeterminateIcon && {
       indeterminateIcon: React.createElement(HiIcon, {
         className: classes.root,
         icon: indeterminateIcon,
-        color: color
+        color: color,
+        size: 20
       })
     }, other));
   }
@@ -121,7 +126,8 @@ class HiCheckbox extends React.Component {
 HiCheckbox.defaultProps = {
   checked: false,
   color: 'default',
-  size: 20
+  size: 20,
+  icon: 'check_box_outline_blank'
 };
 HiCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
   /**

package/es/HiDatePicker/HiDatePicker.js

@@ -254,8 +254,8 @@ class HiDatePicker extends React.Component {
       inputProps: inputProps,
       placeholder: '',
       format: enableTime ? `${format} HH:mm` : format,
-      formatDate: momentLocaleUtils.formatDate,
-      parseDate: momentLocaleUtils.parseDate,
+      formatDate: MomentLocaleUtils.formatDate,
+      parseDate: MomentLocaleUtils.parseDate,
       onDayChange: this.handleDayChange
     }));
   }

package/es/HiIcon/HiIcon.js

@@ -14,7 +14,7 @@ export const styles = theme => ({
 
   /* Styles applied to the root element. */
   faIcon: {
-    fontSize: 24
+    fontSize: 20
   },
 
   /* Styles applied to the root element if `color="primary"`. */
@@ -54,12 +54,11 @@ function HiIcon(props) {
     classes,
     className,
     color,
-    fontSize,
     icon,
     size,
     theme
   } = props,
-        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "fontSize", "icon", "size", "theme"]);
+        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "icon", "size", "theme"]);
 
   const iconName = icon !== null ? icon : children;
   const isHiColor = ['positive', 'negative', 'middle', 'neutral'].includes(color); // Line Awesome icons
@@ -70,7 +69,7 @@ function HiIcon(props) {
         [classes[`color${capitalize(color)}`]]: color !== 'inherit'
       }, className),
       style: {
-        fontSize: fontSize !== 'inherit' ? size : 'inherit'
+        fontSize: size
       }
     }, other));
   } // Specific HiPay icons
@@ -80,12 +79,9 @@ function HiIcon(props) {
     const IconName = hiSvgIcons[capitalize(camelize(iconName))];
     return React.createElement(IconName, _extends({
       className: classNames(classes.root, className),
-      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main
-    }, fontSize === 'default' ? {
+      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main,
       width: size,
       height: size
-    } : {
-      fontSize
     }, other));
   } // MDI - Material Design Icons - https://materialdesignicons.com
 
@@ -96,13 +92,10 @@ function HiIcon(props) {
       className: classNames(classes.root, {
         [classes[`color${capitalize(color)}`]]: isHiColor
       }, className),
-      color: isHiColor ? 'inherit' : color
-    }, fontSize === 'default' ? {
+      color: isHiColor ? 'inherit' : color,
       style: {
         fontSize: size
       }
-    } : {
-      fontSize
     }, other));
   } // @material-ui/icons
 
@@ -111,13 +104,10 @@ function HiIcon(props) {
     className: classNames(classes.root, {
       [classes[`color${capitalize(color)}`]]: isHiColor
     }, className),
-    color: isHiColor ? 'inherit' : color
-  }, fontSize === 'default' ? {
+    color: isHiColor ? 'inherit' : color,
     style: {
       fontSize: size
     }
-  } : {
-    fontSize
   }, other), iconName);
 }
 
@@ -143,11 +133,6 @@ HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled', 'positive', 'negative', 'middle', 'neutral']),
 
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   */
-  fontSize: PropTypes.oneOf(['inherit', 'default']),
-
   /**
    * Deprecated use (same as children)
    * The name of the icon font ligature.
@@ -161,9 +146,8 @@ HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 HiIcon.defaultProps = {
   color: 'inherit',
-  fontSize: 'default',
   icon: null,
-  size: 24
+  size: 20
 };
 HiIcon.muiName = 'HiIcon';
 export default withStyles(styles, {

package/es/HiSelectableList/HiSelectableListItem.js

@@ -15,6 +15,7 @@ export const styles = theme => ({
   root: {},
   listItem: {
     backgroundColor: theme.palette.background3,
+    color: theme.palette.neutral.dark,
     padding: '5px 0',
     fontWeight: theme.typography.fontWeightRegular,
     maxHeight: 56,
@@ -44,7 +45,6 @@ export const styles = theme => ({
     width: '100%'
   },
   disabled: {
-    color: theme.palette.action.disabled,
     fontWeight: theme.typography.fontWeightLight,
     cursor: 'default'
   },
@@ -74,11 +74,11 @@ export const styles = theme => ({
     fontWeight: 'inherit',
     width: '100%',
     height: '-webkit-fill-available',
-    padding: '4px 0'
+    padding: '5px 0'
   }),
   label: {
     display: 'inline-block',
-    margin: '1px 0 1px 8px'
+    margin: '1px 0'
   },
   coloredLabel: {
     display: 'inline-flex',
@@ -112,7 +112,7 @@ export const styles = theme => ({
     width: 20,
     height: 20,
     fontSize: 20,
-    margin: '5px 6px 5px 0'
+    marginTop: 3
   },
   img: {
     width: 24,
@@ -256,12 +256,14 @@ class HiSelectableListItem extends React.Component {
       onMouseLeave: this.setHover(false)
     }, {
       style: {
-        paddingLeft: `${paddingLeft + level * 32}px`
+        paddingLeft: `${level * 32}px`
       }
     }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
       checked: selected,
       checkedIcon: checkedIcon,
-      className: classes.checkbox,
+      classes: {
+        root: classes.checkbox
+      },
       color: "primary" // TODO ?
       ,
       disabled: disabled,
@@ -295,9 +297,11 @@ HiSelectableListItem.defaultProps = {
   centered: false,
   disabled: false,
   hideCheckbox: false,
+  hoverIcon: 'check_box_outline_blank',
+  checkedIcon: 'check_box',
   indeterminate: false,
   level: 0,
-  paddingLeft: 16,
+  paddingLeft: 0,
   pinned: false,
   secondaryInline: true,
   selected: false,
@@ -337,7 +341,7 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
    */
-  hoverIcon: PropTypes.string,
+  hoverIcon: PropTypes.node,
 
   /**
    * Icon affiché lorsque l'item n'est pas sélectionné

package/es/styles/createPalette.js

@@ -45,9 +45,9 @@ export const light = {
     hover: 'rgba(0, 0, 0, 0.08)',
     hoverOpacity: 0.08,
     // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.04)',
+    selected: '#F8F9FB',
     // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
+    disabled: '#E0E0E0',
     // The background color of a disabled action.
     disabledBackground: 'rgba(0, 0, 0, 0.12)'
   },

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.35
+/** @license HiPay-Material-UI v2.0.0-beta.36
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.35
+/** @license HiPay-Material-UI v2.0.0-beta.36
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.35",
+  "version": "2.0.0-beta.36",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -52,11 +52,13 @@
     "popper.js": "^1.14.1",
     "prop-types": "^15.6.0",
     "react-custom-scrollbars": "^4.2.1",
+    "react-day-picker": "^7.2.4",
     "react-event-listener": "^0.6.2",
     "react-jss": "^8.1.0",
     "react-spinners": "^0.4.5",
     "react-transition-group": "^2.2.1",
     "recompose": "^0.29.0",
+    "rimraf": "^2.6.2",
     "validator": "^10.7.1",
     "warning": "^4.0.1"
   },

package/styles/createPalette.js

@@ -63,9 +63,9 @@ var light = {
     hover: 'rgba(0, 0, 0, 0.08)',
     hoverOpacity: 0.08,
     // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.04)',
+    selected: '#F8F9FB',
     // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
+    disabled: '#E0E0E0',
     // The background color of a disabled action.
     disabledBackground: 'rgba(0, 0, 0, 0.12)'
   },