@hipay/hipay-material-ui 2.0.0-beta.44 → 2.0.0-beta.46

package/HiCheckbox/HiCheckbox.js

@@ -124,7 +124,7 @@ function (_React$Component) {
         width: size,
         height: size
       }, style);
-      var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+      var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
       return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
         classes: {
           root: classes.root,

package/HiColoredLabel/HiColoredLabel.js

@@ -147,12 +147,7 @@ function HiColoredLabel(props) {
     }, fontWeight && {
       fontWeight: fontWeight
     })
-  }, other, {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: (0, _helpers.escapeHTML)(label)
-    }
-  }));
+  }, other), label);
 }
 
 HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {

package/HiForm/HiFormControl.js

@@ -43,6 +43,8 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _HiFormLabel = _interopRequireDefault(require("./HiFormLabel"));
 
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
 var _helpers = require("../utils/helpers");
 
 var _index = _interopRequireDefault(require("keycode/index"));
@@ -56,15 +58,24 @@ var styles = function styles(theme) {
       textAlign: 'right',
       marginTop: 2
     },
-    errorIcon: {
-      width: 19,
-      height: 19,
-      color: theme.palette.negative.main,
+    iconButton: {
       position: 'absolute',
-      right: 8,
+      right: 5,
       cursor: 'pointer',
-      top: '-2px'
+      top: '-5px',
+      '&$iconButtonError': {
+        color: theme.palette.negative.main
+      },
+      '&$iconButtonInfo': {
+        color: theme.palette.neutral.main
+      },
+      '&$iconButtonInfoActive': {
+        color: theme.palette.primary.main
+      }
     },
+    iconButtonError: {},
+    iconButtonInfo: {},
+    iconButtonInfoActive: {},
     errorDiv: (0, _extends2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
@@ -72,7 +83,7 @@ var styles = function styles(theme) {
       verticalAlign: 'middle',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 5,
+      marginBottom: 8,
       fontWeight: theme.typography.fontWeightRegular
     }),
     arrowDown: {
@@ -83,23 +94,11 @@ var styles = function styles(theme) {
       borderTop: '4px solid #000',
       position: 'absolute',
       bottom: -4,
-      right: 14
+      right: 13
     },
     errorDivArrowDown: {
       borderTopColor: theme.palette.negative.main
     },
-    helperIcon: {
-      width: 19,
-      height: 19,
-      color: theme.palette.neutral.main,
-      position: 'absolute',
-      right: 8,
-      cursor: 'pointer',
-      top: '-2px'
-    },
-    helperIconActive: {
-      color: theme.palette.primary.main
-    },
     helperDiv: (0, _extends2.default)({}, theme.typography.b2, {
       width: '100%',
       backgroundColor: '#ffffff',
@@ -107,13 +106,16 @@ var styles = function styles(theme) {
       padding: '16px 8px',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 5,
+      marginBottom: 8,
       fontWeight: theme.typography.fontWeightRegular,
       boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
       lineHeight: 1.5
     }),
     helperDivArrowDown: {
       borderTopColor: '#ffffff'
+    },
+    icon: {
+      position: 'absolute'
     }
   };
 };
@@ -245,17 +247,19 @@ function (_React$PureComponent) {
         required: required,
         disabled: disabled,
         focused: !disabled && (focused || hovered)
-      }, InputLabelProps), error && _react.default.createElement(_Warning.default, {
-        className: classes.errorIcon,
+      }, InputLabelProps), error && _react.default.createElement(_HiIconButton.default, {
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
         onClick: this.handleHelperClick,
-        tabIndex: 0,
         onKeyDown: this.handleKeyDown
-      }), helperIcon && helperText && !error && _react.default.createElement(_Info.default, {
-        className: (0, _classnames.default)(classes.helperIcon, (0, _defineProperty2.default)({}, classes.helperIconActive, helperOpen)),
+      }, _react.default.createElement(_Warning.default, {
+        className: (0, _classnames.default)(classes.icon)
+      })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
         onClick: this.handleHelperClick,
-        tabIndex: 0,
         onKeyDown: this.handleKeyDown
-      })), _react.default.createElement("div", {
+      }, _react.default.createElement(_Info.default, {
+        className: (0, _classnames.default)(classes.icon)
+      }))), _react.default.createElement("div", {
         onMouseEnter: this.handleHover(true),
         onMouseLeave: this.handleHover(false),
         onFocus: this.handleFocus(true),

package/HiForm/HiInput.js

@@ -402,6 +402,8 @@ function (_React$PureComponent) {
           focused: nextProps.focused
         };
       }
+
+      return null;
     }
   }]);
   return HiInput;

package/HiSelectableList/HiSelectableListItem.js

@@ -222,7 +222,7 @@ function (_React$Component) {
         if (color && selected) {
           return _react.default.createElement(_HiColoredLabel.default, {
             color: color,
-            label: labelHighlight
+            label: spanHighlight
           });
         }
 
@@ -291,7 +291,7 @@ function (_React$Component) {
       var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
       return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
         id: id,
-        tabIndex: 0,
+        tabIndex: disabled ? '-1' : 0,
         key: "li-".concat(id),
         classes: {
           root: classes.root

package/es/HiCheckbox/HiCheckbox.js

@@ -81,7 +81,7 @@ class HiCheckbox extends React.Component {
       height: size
     }, style);
 
-    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+    const hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
     return React.createElement(Checkbox, _extends({
       classes: {
         root: classes.root,

package/es/HiColoredLabel/HiColoredLabel.js

@@ -130,12 +130,7 @@ function HiColoredLabel(props) {
     }, fontWeight && {
       fontWeight
     })
-  }, other, {
-    // eslint-disable-next-line react/no-danger
-    dangerouslySetInnerHTML: {
-      __html: escapeHTML(label)
-    }
-  }));
+  }, other), label);
 }
 
 HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/HiForm/HiFormControl.js

@@ -11,6 +11,7 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import withStyles from '../styles/withStyles';
 import HiFormLabel from './HiFormLabel';
+import HiIconButton from '../HiIconButton';
 import { escapeHTML } from '../utils/helpers';
 import keycode from 'keycode/index';
 export const styles = theme => ({
@@ -20,15 +21,24 @@ export const styles = theme => ({
     textAlign: 'right',
     marginTop: 2
   },
-  errorIcon: {
-    width: 19,
-    height: 19,
-    color: theme.palette.negative.main,
+  iconButton: {
     position: 'absolute',
-    right: 8,
+    right: 5,
     cursor: 'pointer',
-    top: '-2px'
+    top: '-5px',
+    '&$iconButtonError': {
+      color: theme.palette.negative.main
+    },
+    '&$iconButtonInfo': {
+      color: theme.palette.neutral.main
+    },
+    '&$iconButtonInfoActive': {
+      color: theme.palette.primary.main
+    }
   },
+  iconButtonError: {},
+  iconButtonInfo: {},
+  iconButtonInfoActive: {},
   errorDiv: _objectSpread({}, theme.typography.b3, {
     backgroundColor: theme.palette.negative.main,
     color: '#FFFFFF',
@@ -36,7 +46,7 @@ export const styles = theme => ({
     verticalAlign: 'middle',
     borderRadius: 2,
     position: 'relative',
-    marginBottom: 5,
+    marginBottom: 8,
     fontWeight: theme.typography.fontWeightRegular
   }),
   arrowDown: {
@@ -47,23 +57,11 @@ export const styles = theme => ({
     borderTop: '4px solid #000',
     position: 'absolute',
     bottom: -4,
-    right: 14
+    right: 13
   },
   errorDivArrowDown: {
     borderTopColor: theme.palette.negative.main
   },
-  helperIcon: {
-    width: 19,
-    height: 19,
-    color: theme.palette.neutral.main,
-    position: 'absolute',
-    right: 8,
-    cursor: 'pointer',
-    top: '-2px'
-  },
-  helperIconActive: {
-    color: theme.palette.primary.main
-  },
   helperDiv: _objectSpread({}, theme.typography.b2, {
     width: '100%',
     backgroundColor: '#ffffff',
@@ -71,13 +69,16 @@ export const styles = theme => ({
     padding: '16px 8px',
     borderRadius: 2,
     position: 'relative',
-    marginBottom: 5,
+    marginBottom: 8,
     fontWeight: theme.typography.fontWeightRegular,
     boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
     lineHeight: 1.5
   }),
   helperDivArrowDown: {
     borderTopColor: '#ffffff'
+  },
+  icon: {
+    position: 'absolute'
   }
 });
 /**
@@ -193,19 +194,21 @@ class HiFormControl extends React.PureComponent {
       required: required,
       disabled: disabled,
       focused: !disabled && (focused || hovered)
-    }, InputLabelProps), error && React.createElement(Warning, {
-      className: classes.errorIcon,
+    }, InputLabelProps), error && React.createElement(HiIconButton, {
+      className: classNames(classes.iconButton, classes.iconButtonError),
       onClick: this.handleHelperClick,
-      tabIndex: 0,
       onKeyDown: this.handleKeyDown
-    }), helperIcon && helperText && !error && React.createElement(Info, {
-      className: classNames(classes.helperIcon, {
-        [classes.helperIconActive]: helperOpen
+    }, React.createElement(Warning, {
+      className: classNames(classes.icon)
+    })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
+      className: classNames(classes.iconButton, classes.iconButtonInfo, {
+        [classes.iconButtonInfoActive]: helperOpen
       }),
       onClick: this.handleHelperClick,
-      tabIndex: 0,
       onKeyDown: this.handleKeyDown
-    })), React.createElement("div", {
+    }, React.createElement(Info, {
+      className: classNames(classes.icon)
+    }))), React.createElement("div", {
       onMouseEnter: this.handleHover(true),
       onMouseLeave: this.handleHover(false),
       onFocus: this.handleFocus(true),

package/es/HiForm/HiInput.js

@@ -147,6 +147,8 @@ class HiInput extends React.PureComponent {
         focused: nextProps.focused
       };
     }
+
+    return null;
   }
 
   getInputElement(el) {

package/es/HiSelectableList/HiSelectableListItem.js

@@ -171,7 +171,7 @@ class HiSelectableListItem extends React.Component {
       if (color && selected) {
         return React.createElement(HiColoredLabel, {
           color: color,
-          label: labelHighlight
+          label: spanHighlight
         });
       }
 
@@ -238,7 +238,7 @@ class HiSelectableListItem extends React.Component {
     const ListItemComponentName = pinned ? ListSubheader : ListItem;
     return React.createElement(ListItemComponentName, _extends({
       id: id,
-      tabIndex: 0,
+      tabIndex: disabled ? '-1' : 0,
       key: `li-${id}`,
       classes: {
         root: classes.root

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.44
+/** @license HiPay-Material-UI v2.0.0-beta.46
  *
  * 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.44
+/** @license HiPay-Material-UI v2.0.0-beta.46
  *
  * 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.44",
+  "version": "2.0.0-beta.46",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.44
+/** @license HiPay-Material-UI v2.0.0-beta.46
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -66106,7 +66106,7 @@
                     height: size
                   }, style);
 
-                  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+                  var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
                   return React__default.createElement(Checkbox$2, _extends_1({
                     classes: {
                       root: classes.root,
@@ -68915,6 +68915,8 @@
                       focused: nextProps.focused
                     };
                   }
+
+                  return null;
                 }
               }]);
 
@@ -73627,15 +73629,24 @@
                   textAlign: 'right',
                   marginTop: 2
                 },
-                errorIcon: {
-                  width: 19,
-                  height: 19,
-                  color: theme.palette.negative.main,
+                iconButton: {
                   position: 'absolute',
-                  right: 8,
+                  right: 5,
                   cursor: 'pointer',
-                  top: '-2px'
+                  top: '-5px',
+                  '&$iconButtonError': {
+                    color: theme.palette.negative.main
+                  },
+                  '&$iconButtonInfo': {
+                    color: theme.palette.neutral.main
+                  },
+                  '&$iconButtonInfoActive': {
+                    color: theme.palette.primary.main
+                  }
                 },
+                iconButtonError: {},
+                iconButtonInfo: {},
+                iconButtonInfoActive: {},
                 errorDiv: _extends_1({}, theme.typography.b3, {
                   backgroundColor: theme.palette.negative.main,
                   color: '#FFFFFF',
@@ -73643,7 +73654,7 @@
                   verticalAlign: 'middle',
                   borderRadius: 2,
                   position: 'relative',
-                  marginBottom: 5,
+                  marginBottom: 8,
                   fontWeight: theme.typography.fontWeightRegular
                 }),
                 arrowDown: {
@@ -73654,23 +73665,11 @@
                   borderTop: '4px solid #000',
                   position: 'absolute',
                   bottom: -4,
-                  right: 14
+                  right: 13
                 },
                 errorDivArrowDown: {
                   borderTopColor: theme.palette.negative.main
                 },
-                helperIcon: {
-                  width: 19,
-                  height: 19,
-                  color: theme.palette.neutral.main,
-                  position: 'absolute',
-                  right: 8,
-                  cursor: 'pointer',
-                  top: '-2px'
-                },
-                helperIconActive: {
-                  color: theme.palette.primary.main
-                },
                 helperDiv: _extends_1({}, theme.typography.b2, {
                   width: '100%',
                   backgroundColor: '#ffffff',
@@ -73678,13 +73677,16 @@
                   padding: '16px 8px',
                   borderRadius: 2,
                   position: 'relative',
-                  marginBottom: 5,
+                  marginBottom: 8,
                   fontWeight: theme.typography.fontWeightRegular,
                   boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
                   lineHeight: 1.5
                 }),
                 helperDivArrowDown: {
                   borderTopColor: '#ffffff'
+                },
+                icon: {
+                  position: 'absolute'
                 }
               };
             };
@@ -73815,17 +73817,19 @@
                     required: required,
                     disabled: disabled,
                     focused: !disabled && (focused || hovered)
-                  }, InputLabelProps), error && React__default.createElement(Warning$1, {
-                    className: classes.errorIcon,
+                  }, InputLabelProps), error && React__default.createElement(HiIconButton$1, {
+                    className: classnames(classes.iconButton, classes.iconButtonError),
                     onClick: this.handleHelperClick,
-                    tabIndex: 0,
                     onKeyDown: this.handleKeyDown
-                  }), helperIcon && helperText && !error && React__default.createElement(Info$1, {
-                    className: classnames(classes.helperIcon, defineProperty({}, classes.helperIconActive, helperOpen)),
+                  }, React__default.createElement(Warning$1, {
+                    className: classnames(classes.icon)
+                  })), helperIcon && helperText && !error && React__default.createElement(HiIconButton$1, {
+                    className: classnames(classes.iconButton, classes.iconButtonInfo, defineProperty({}, classes.iconButtonInfoActive, helperOpen)),
                     onClick: this.handleHelperClick,
-                    tabIndex: 0,
                     onKeyDown: this.handleKeyDown
-                  })), React__default.createElement("div", {
+                  }, React__default.createElement(Info$1, {
+                    className: classnames(classes.icon)
+                  }))), React__default.createElement("div", {
                     onMouseEnter: this.handleHover(true),
                     onMouseLeave: this.handleHover(false),
                     onFocus: this.handleFocus(true),
@@ -91692,12 +91696,7 @@
                 }, fontWeight && {
                   fontWeight: fontWeight
                 })
-              }, other, {
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                  __html: escapeHTML(label)
-                }
-              }));
+              }, other), label);
             }
 
             HiColoredLabel.propTypes = {
@@ -95759,7 +95758,7 @@
                     if (color && selected) {
                       return React__default.createElement(HiColoredLabel$1, {
                         color: color,
-                        label: labelHighlight
+                        label: spanHighlight
                       });
                     }
 
@@ -95828,7 +95827,7 @@
                   var ListItemComponentName = pinned ? ListSubheader$2 : ListItem$2;
                   return React__default.createElement(ListItemComponentName, _extends_1({
                     id: id,
-                    tabIndex: 0,
+                    tabIndex: disabled ? '-1' : 0,
                     key: "li-".concat(id),
                     classes: {
                       root: classes.root