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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/HiCheckbox/HiCheckbox.js +1 -1
  2. package/HiForm/HiFormControl.js +32 -28
  3. package/HiForm/HiInput.js +2 -0
  4. package/es/HiCheckbox/HiCheckbox.js +1 -1
  5. package/es/HiForm/HiFormControl.js +32 -29
  6. package/es/HiForm/HiInput.js +2 -0
  7. package/index.es.js +1 -1
  8. package/index.js +1 -1
  9. package/package.json +1 -1
  10. package/umd/hipay-material-ui.development.js +34 -30
  11. package/umd/hipay-material-ui.production.min.js +2 -2
  12. package/yarn-error.log +109 -0
package/HiCheckbox/HiCheckbox.js CHANGED
@@ -124,7 +124,7 @@ function (_React$Component) {
124
124
  width: size,
125
125
  height: size
126
126
  }, style);
127
- var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
127
+ var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
128
128
  return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
129
129
  classes: {
130
130
  root: classes.root,
package/HiForm/HiFormControl.js CHANGED
@@ -43,6 +43,8 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
43
43
 
44
44
  var _HiFormLabel = _interopRequireDefault(require("./HiFormLabel"));
45
45
 
46
+ var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
47
+
46
48
  var _helpers = require("../utils/helpers");
47
49
 
48
50
  var _index = _interopRequireDefault(require("keycode/index"));
@@ -56,15 +58,24 @@ var styles = function styles(theme) {
56
58
  textAlign: 'right',
57
59
  marginTop: 2
58
60
  },
59
- errorIcon: {
60
- width: 19,
61
- height: 19,
62
- color: theme.palette.negative.main,
61
+ iconButton: {
63
62
  position: 'absolute',
64
- right: 8,
63
+ right: 5,
65
64
  cursor: 'pointer',
66
- top: '-2px'
65
+ top: '-5px',
66
+ '&$iconButtonError': {
67
+ color: theme.palette.negative.main
68
+ },
69
+ '&$iconButtonInfo': {
70
+ color: theme.palette.neutral.main
71
+ },
72
+ '&$iconButtonInfoActive': {
73
+ color: theme.palette.primary.main
74
+ }
67
75
  },
76
+ iconButtonError: {},
77
+ iconButtonInfo: {},
78
+ iconButtonInfoActive: {},
68
79
  errorDiv: (0, _extends2.default)({}, theme.typography.b3, {
69
80
  backgroundColor: theme.palette.negative.main,
70
81
  color: '#FFFFFF',
@@ -72,7 +83,7 @@ var styles = function styles(theme) {
72
83
  verticalAlign: 'middle',
73
84
  borderRadius: 2,
74
85
  position: 'relative',
75
- marginBottom: 5,
86
+ marginBottom: 8,
76
87
  fontWeight: theme.typography.fontWeightRegular
77
88
  }),
78
89
  arrowDown: {
@@ -83,23 +94,11 @@ var styles = function styles(theme) {
83
94
  borderTop: '4px solid #000',
84
95
  position: 'absolute',
85
96
  bottom: -4,
86
- right: 14
97
+ right: 13
87
98
  },
88
99
  errorDivArrowDown: {
89
100
  borderTopColor: theme.palette.negative.main
90
101
  },
91
- helperIcon: {
92
- width: 19,
93
- height: 19,
94
- color: theme.palette.neutral.main,
95
- position: 'absolute',
96
- right: 8,
97
- cursor: 'pointer',
98
- top: '-2px'
99
- },
100
- helperIconActive: {
101
- color: theme.palette.primary.main
102
- },
103
102
  helperDiv: (0, _extends2.default)({}, theme.typography.b2, {
104
103
  width: '100%',
105
104
  backgroundColor: '#ffffff',
@@ -107,13 +106,16 @@ var styles = function styles(theme) {
107
106
  padding: '16px 8px',
108
107
  borderRadius: 2,
109
108
  position: 'relative',
110
- marginBottom: 5,
109
+ marginBottom: 8,
111
110
  fontWeight: theme.typography.fontWeightRegular,
112
111
  boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
113
112
  lineHeight: 1.5
114
113
  }),
115
114
  helperDivArrowDown: {
116
115
  borderTopColor: '#ffffff'
116
+ },
117
+ icon: {
118
+ position: 'absolute'
117
119
  }
118
120
  };
119
121
  };
@@ -245,17 +247,19 @@ function (_React$PureComponent) {
245
247
  required: required,
246
248
  disabled: disabled,
247
249
  focused: !disabled && (focused || hovered)
248
- }, InputLabelProps), error && _react.default.createElement(_Warning.default, {
249
- className: classes.errorIcon,
250
+ }, InputLabelProps), error && _react.default.createElement(_HiIconButton.default, {
251
+ className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
250
252
  onClick: this.handleHelperClick,
251
- tabIndex: 0,
252
253
  onKeyDown: this.handleKeyDown
253
- }), helperIcon && helperText && !error && _react.default.createElement(_Info.default, {
254
- className: (0, _classnames.default)(classes.helperIcon, (0, _defineProperty2.default)({}, classes.helperIconActive, helperOpen)),
254
+ }, _react.default.createElement(_Warning.default, {
255
+ className: (0, _classnames.default)(classes.icon)
256
+ })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
257
+ className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
255
258
  onClick: this.handleHelperClick,
256
- tabIndex: 0,
257
259
  onKeyDown: this.handleKeyDown
258
- })), _react.default.createElement("div", {
260
+ }, _react.default.createElement(_Info.default, {
261
+ className: (0, _classnames.default)(classes.icon)
262
+ }))), _react.default.createElement("div", {
259
263
  onMouseEnter: this.handleHover(true),
260
264
  onMouseLeave: this.handleHover(false),
261
265
  onFocus: this.handleFocus(true),
package/HiForm/HiInput.js CHANGED
@@ -402,6 +402,8 @@ function (_React$PureComponent) {
402
402
  focused: nextProps.focused
403
403
  };
404
404
  }
405
+
406
+ return null;
405
407
  }
406
408
  }]);
407
409
  return HiInput;
package/es/HiCheckbox/HiCheckbox.js CHANGED
@@ -81,7 +81,7 @@ class HiCheckbox extends React.Component {
81
81
  height: size
82
82
  }, style);
83
83
 
84
- const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
84
+ const hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
85
85
  return React.createElement(Checkbox, _extends({
86
86
  classes: {
87
87
  root: classes.root,
package/es/HiForm/HiFormControl.js CHANGED
@@ -11,6 +11,7 @@ import FormControl from '@material-ui/core/FormControl';
11
11
  import FormHelperText from '@material-ui/core/FormHelperText';
12
12
  import withStyles from '../styles/withStyles';
13
13
  import HiFormLabel from './HiFormLabel';
14
+ import HiIconButton from '../HiIconButton';
14
15
  import { escapeHTML } from '../utils/helpers';
15
16
  import keycode from 'keycode/index';
16
17
  export const styles = theme => ({
@@ -20,15 +21,24 @@ export const styles = theme => ({
20
21
  textAlign: 'right',
21
22
  marginTop: 2
22
23
  },
23
- errorIcon: {
24
- width: 19,
25
- height: 19,
26
- color: theme.palette.negative.main,
24
+ iconButton: {
27
25
  position: 'absolute',
28
- right: 8,
26
+ right: 5,
29
27
  cursor: 'pointer',
30
- top: '-2px'
28
+ top: '-5px',
29
+ '&$iconButtonError': {
30
+ color: theme.palette.negative.main
31
+ },
32
+ '&$iconButtonInfo': {
33
+ color: theme.palette.neutral.main
34
+ },
35
+ '&$iconButtonInfoActive': {
36
+ color: theme.palette.primary.main
37
+ }
31
38
  },
39
+ iconButtonError: {},
40
+ iconButtonInfo: {},
41
+ iconButtonInfoActive: {},
32
42
  errorDiv: _objectSpread({}, theme.typography.b3, {
33
43
  backgroundColor: theme.palette.negative.main,
34
44
  color: '#FFFFFF',
@@ -36,7 +46,7 @@ export const styles = theme => ({
36
46
  verticalAlign: 'middle',
37
47
  borderRadius: 2,
38
48
  position: 'relative',
39
- marginBottom: 5,
49
+ marginBottom: 8,
40
50
  fontWeight: theme.typography.fontWeightRegular
41
51
  }),
42
52
  arrowDown: {
@@ -47,23 +57,11 @@ export const styles = theme => ({
47
57
  borderTop: '4px solid #000',
48
58
  position: 'absolute',
49
59
  bottom: -4,
50
- right: 14
60
+ right: 13
51
61
  },
52
62
  errorDivArrowDown: {
53
63
  borderTopColor: theme.palette.negative.main
54
64
  },
55
- helperIcon: {
56
- width: 19,
57
- height: 19,
58
- color: theme.palette.neutral.main,
59
- position: 'absolute',
60
- right: 8,
61
- cursor: 'pointer',
62
- top: '-2px'
63
- },
64
- helperIconActive: {
65
- color: theme.palette.primary.main
66
- },
67
65
  helperDiv: _objectSpread({}, theme.typography.b2, {
68
66
  width: '100%',
69
67
  backgroundColor: '#ffffff',
@@ -71,13 +69,16 @@ export const styles = theme => ({
71
69
  padding: '16px 8px',
72
70
  borderRadius: 2,
73
71
  position: 'relative',
74
- marginBottom: 5,
72
+ marginBottom: 8,
75
73
  fontWeight: theme.typography.fontWeightRegular,
76
74
  boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
77
75
  lineHeight: 1.5
78
76
  }),
79
77
  helperDivArrowDown: {
80
78
  borderTopColor: '#ffffff'
79
+ },
80
+ icon: {
81
+ position: 'absolute'
81
82
  }
82
83
  });
83
84
  /**
@@ -193,19 +194,21 @@ class HiFormControl extends React.PureComponent {
193
194
  required: required,
194
195
  disabled: disabled,
195
196
  focused: !disabled && (focused || hovered)
196
- }, InputLabelProps), error && React.createElement(Warning, {
197
- className: classes.errorIcon,
197
+ }, InputLabelProps), error && React.createElement(HiIconButton, {
198
+ className: classNames(classes.iconButton, classes.iconButtonError),
198
199
  onClick: this.handleHelperClick,
199
- tabIndex: 0,
200
200
  onKeyDown: this.handleKeyDown
201
- }), helperIcon && helperText && !error && React.createElement(Info, {
202
- className: classNames(classes.helperIcon, {
203
- [classes.helperIconActive]: helperOpen
201
+ }, React.createElement(Warning, {
202
+ className: classNames(classes.icon)
203
+ })), helperIcon && helperText && !error && React.createElement(HiIconButton, {
204
+ className: classNames(classes.iconButton, classes.iconButtonInfo, {
205
+ [classes.iconButtonInfoActive]: helperOpen
204
206
  }),
205
207
  onClick: this.handleHelperClick,
206
- tabIndex: 0,
207
208
  onKeyDown: this.handleKeyDown
208
- })), React.createElement("div", {
209
+ }, React.createElement(Info, {
210
+ className: classNames(classes.icon)
211
+ }))), React.createElement("div", {
209
212
  onMouseEnter: this.handleHover(true),
210
213
  onMouseLeave: this.handleHover(false),
211
214
  onFocus: this.handleFocus(true),
package/es/HiForm/HiInput.js CHANGED
@@ -147,6 +147,8 @@ class HiInput extends React.PureComponent {
147
147
  focused: nextProps.focused
148
148
  };
149
149
  }
150
+
151
+ return null;
150
152
  }
151
153
 
152
154
  getInputElement(el) {
package/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.45
1
+ /** @license HiPay-Material-UI v2.0.0-beta.46
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.45
1
+ /** @license HiPay-Material-UI v2.0.0-beta.46
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
4
  "author": "HiPay PSYCHE Team",
5
- "version": "2.0.0-beta.45",
5
+ "version": "2.0.0-beta.46",
6
6
  "description": "React components that implement Google's Material Design.",
7
7
  "keywords": [
8
8
  "react",
package/umd/hipay-material-ui.development.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license HiPay-Material-UI v2.0.0-beta.45
1
+ /** @license HiPay-Material-UI v2.0.0-beta.46
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -66106,7 +66106,7 @@
66106
66106
  height: size
66107
66107
  }, style);
66108
66108
 
66109
- var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
66109
+ var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
66110
66110
  return React__default.createElement(Checkbox$2, _extends_1({
66111
66111
  classes: {
66112
66112
  root: classes.root,
@@ -68915,6 +68915,8 @@
68915
68915
  focused: nextProps.focused
68916
68916
  };
68917
68917
  }
68918
+
68919
+ return null;
68918
68920
  }
68919
68921
  }]);
68920
68922
 
@@ -73627,15 +73629,24 @@
73627
73629
  textAlign: 'right',
73628
73630
  marginTop: 2
73629
73631
  },
73630
- errorIcon: {
73631
- width: 19,
73632
- height: 19,
73633
- color: theme.palette.negative.main,
73632
+ iconButton: {
73634
73633
  position: 'absolute',
73635
- right: 8,
73634
+ right: 5,
73636
73635
  cursor: 'pointer',
73637
- top: '-2px'
73636
+ top: '-5px',
73637
+ '&$iconButtonError': {
73638
+ color: theme.palette.negative.main
73639
+ },
73640
+ '&$iconButtonInfo': {
73641
+ color: theme.palette.neutral.main
73642
+ },
73643
+ '&$iconButtonInfoActive': {
73644
+ color: theme.palette.primary.main
73645
+ }
73638
73646
  },
73647
+ iconButtonError: {},
73648
+ iconButtonInfo: {},
73649
+ iconButtonInfoActive: {},
73639
73650
  errorDiv: _extends_1({}, theme.typography.b3, {
73640
73651
  backgroundColor: theme.palette.negative.main,
73641
73652
  color: '#FFFFFF',
@@ -73643,7 +73654,7 @@
73643
73654
  verticalAlign: 'middle',
73644
73655
  borderRadius: 2,
73645
73656
  position: 'relative',
73646
- marginBottom: 5,
73657
+ marginBottom: 8,
73647
73658
  fontWeight: theme.typography.fontWeightRegular
73648
73659
  }),
73649
73660
  arrowDown: {
@@ -73654,23 +73665,11 @@
73654
73665
  borderTop: '4px solid #000',
73655
73666
  position: 'absolute',
73656
73667
  bottom: -4,
73657
- right: 14
73668
+ right: 13
73658
73669
  },
73659
73670
  errorDivArrowDown: {
73660
73671
  borderTopColor: theme.palette.negative.main
73661
73672
  },
73662
- helperIcon: {
73663
- width: 19,
73664
- height: 19,
73665
- color: theme.palette.neutral.main,
73666
- position: 'absolute',
73667
- right: 8,
73668
- cursor: 'pointer',
73669
- top: '-2px'
73670
- },
73671
- helperIconActive: {
73672
- color: theme.palette.primary.main
73673
- },
73674
73673
  helperDiv: _extends_1({}, theme.typography.b2, {
73675
73674
  width: '100%',
73676
73675
  backgroundColor: '#ffffff',
@@ -73678,13 +73677,16 @@
73678
73677
  padding: '16px 8px',
73679
73678
  borderRadius: 2,
73680
73679
  position: 'relative',
73681
- marginBottom: 5,
73680
+ marginBottom: 8,
73682
73681
  fontWeight: theme.typography.fontWeightRegular,
73683
73682
  boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
73684
73683
  lineHeight: 1.5
73685
73684
  }),
73686
73685
  helperDivArrowDown: {
73687
73686
  borderTopColor: '#ffffff'
73687
+ },
73688
+ icon: {
73689
+ position: 'absolute'
73688
73690
  }
73689
73691
  };
73690
73692
  };
@@ -73815,17 +73817,19 @@
73815
73817
  required: required,
73816
73818
  disabled: disabled,
73817
73819
  focused: !disabled && (focused || hovered)
73818
- }, InputLabelProps), error && React__default.createElement(Warning$1, {
73819
- className: classes.errorIcon,
73820
+ }, InputLabelProps), error && React__default.createElement(HiIconButton$1, {
73821
+ className: classnames(classes.iconButton, classes.iconButtonError),
73820
73822
  onClick: this.handleHelperClick,
73821
- tabIndex: 0,
73822
73823
  onKeyDown: this.handleKeyDown
73823
- }), helperIcon && helperText && !error && React__default.createElement(Info$1, {
73824
- className: classnames(classes.helperIcon, defineProperty({}, classes.helperIconActive, helperOpen)),
73824
+ }, React__default.createElement(Warning$1, {
73825
+ className: classnames(classes.icon)
73826
+ })), helperIcon && helperText && !error && React__default.createElement(HiIconButton$1, {
73827
+ className: classnames(classes.iconButton, classes.iconButtonInfo, defineProperty({}, classes.iconButtonInfoActive, helperOpen)),
73825
73828
  onClick: this.handleHelperClick,
73826
- tabIndex: 0,
73827
73829
  onKeyDown: this.handleKeyDown
73828
- })), React__default.createElement("div", {
73830
+ }, React__default.createElement(Info$1, {
73831
+ className: classnames(classes.icon)
73832
+ }))), React__default.createElement("div", {
73829
73833
  onMouseEnter: this.handleHover(true),
73830
73834
  onMouseLeave: this.handleHover(false),
73831
73835
  onFocus: this.handleFocus(true),