@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.8

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 (41) hide show
  1. package/HiBreadcrumb/HiBreadcrumb.js +143 -0
  2. package/HiBreadcrumb/HiStep.js +123 -0
  3. package/HiBreadcrumb/HiStepConnector.js +142 -0
  4. package/HiBreadcrumb/HiStepIcon.js +134 -0
  5. package/HiBreadcrumb/HiStepLabel.js +182 -0
  6. package/HiBreadcrumb/HiStepper.js +125 -0
  7. package/HiBreadcrumb/index.js +16 -0
  8. package/HiDatePicker/HiDateRangeSelector.js +1 -1
  9. package/HiForm/HiFormControl.js +19 -27
  10. package/HiForm/HiSearchField.js +1 -1
  11. package/HiPins/HiPins.js +0 -1
  12. package/HiSelectableList/HiSelectableListItem.js +22 -9
  13. package/HiTable/BodyCells/CellLayout.js +5 -1
  14. package/HiTable/BodyCells/CellStatus.js +5 -1
  15. package/HiTable/BodyCells/CellText.js +2 -1
  16. package/HiTable/ColumnFilter.js +5 -1
  17. package/HiTable/HiTable.js +15 -8
  18. package/HiTable/HiTableBody.js +13 -3
  19. package/HiTable/OrderColumns.js +6 -2
  20. package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
  21. package/es/HiBreadcrumb/HiStep.js +93 -0
  22. package/es/HiBreadcrumb/HiStepConnector.js +83 -0
  23. package/es/HiBreadcrumb/HiStepIcon.js +81 -0
  24. package/es/HiBreadcrumb/HiStepLabel.js +154 -0
  25. package/es/HiBreadcrumb/HiStepper.js +62 -0
  26. package/es/HiBreadcrumb/index.js +1 -0
  27. package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
  28. package/es/HiForm/HiFormControl.js +15 -15
  29. package/es/HiForm/HiSearchField.js +1 -1
  30. package/es/HiPins/HiPins.js +0 -1
  31. package/es/HiSelectableList/HiSelectableListItem.js +21 -9
  32. package/es/HiTable/BodyCells/CellLayout.js +5 -1
  33. package/es/HiTable/BodyCells/CellStatus.js +5 -1
  34. package/es/HiTable/BodyCells/CellText.js +2 -1
  35. package/es/HiTable/ColumnFilter.js +5 -1
  36. package/es/HiTable/HiTable.js +15 -8
  37. package/es/HiTable/HiTableBody.js +13 -3
  38. package/es/HiTable/OrderColumns.js +6 -2
  39. package/package.json +1 -1
  40. package/umd/hipay-material-ui.development.js +104 -66
  41. package/umd/hipay-material-ui.production.min.js +2 -2
@@ -0,0 +1,73 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import { withStyles } from '../styles';
5
+ import HiStepper from './HiStepper';
6
+ import HiStepLabel from './HiStepLabel';
7
+ import HiStep from './HiStep';
8
+
9
+ export const styles = theme => ({
10
+ label: _extends({
11
+ display: 'inline-block',
12
+ marginLeft: 12,
13
+ fontWeight: theme.typography.fontWeightRegular,
14
+ color: theme.palette.neutral.normal
15
+ }, theme.typography.body3),
16
+ active: {
17
+ fontWeight: theme.typography.fontWeightMedium
18
+ }
19
+ });
20
+
21
+ class HiBreadcrumb extends React.PureComponent {
22
+ constructor(...args) {
23
+ var _temp;
24
+
25
+ return _temp = super(...args), this.handleStep = idx => () => {
26
+ this.props.handleStep(idx);
27
+ }, _temp;
28
+ }
29
+
30
+ render() {
31
+ const { activeStep, steps } = this.props;
32
+
33
+ return React.createElement(
34
+ HiStepper,
35
+ { activeStep: activeStep },
36
+ React.createElement(
37
+ 'div',
38
+ null,
39
+ steps.map((step, index) => {
40
+ const validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
41
+ return React.createElement(
42
+ HiStep,
43
+ {
44
+ key: step.id,
45
+ onClick: this.handleStep(index),
46
+ isLast: index === steps.length - 1,
47
+ validConnector: validConnector
48
+ },
49
+ React.createElement(
50
+ HiStepLabel,
51
+ {
52
+ active: activeStep === index,
53
+ status: step.status,
54
+ notificationNumber: step.notificationNumber
55
+ },
56
+ step.label
57
+ )
58
+ );
59
+ })
60
+ )
61
+ );
62
+ }
63
+ }
64
+
65
+ HiBreadcrumb.defaultProps = {
66
+ activeStep: 0
67
+ };
68
+ HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
69
+ activeStep: PropTypes.number,
70
+ steps: PropTypes.array.isRequired,
71
+ handleStep: PropTypes.func
72
+ } : {};
73
+ export default withStyles(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);
@@ -0,0 +1,93 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { withStyles } from '../styles';
7
+ import HiStepConnector from './HiStepConnector';
8
+
9
+ export const styles = theme => ({
10
+ root: {},
11
+ horizontal: {
12
+ paddingLeft: theme.spacing.unit,
13
+ paddingRight: theme.spacing.unit,
14
+ '&:first-child': {
15
+ paddingLeft: 0
16
+ },
17
+ '&:last-child': {
18
+ paddingRight: 0
19
+ }
20
+ },
21
+ vertical: {}
22
+ });
23
+
24
+ function HiStep(props) {
25
+ const {
26
+ active,
27
+ children,
28
+ classes,
29
+ className: classNameProp,
30
+ index,
31
+ isLast,
32
+ orientation,
33
+ validConnector
34
+ } = props,
35
+ other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
36
+
37
+ const className = classNames(classes.root, classes[orientation], classNameProp);
38
+
39
+ return React.createElement(
40
+ 'div',
41
+ _extends({ className: className }, other),
42
+ React.Children.map(children, child => React.cloneElement(child, _extends({
43
+ active,
44
+ icon: index + 1,
45
+ orientation
46
+ }, child.props))),
47
+ !isLast && React.createElement(HiStepConnector, { orientation: 'vertical', validConnector: validConnector })
48
+ );
49
+ }
50
+
51
+ HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
52
+ /**
53
+ * Sets the step as active. Is passed to child components.
54
+ */
55
+ active: PropTypes.bool,
56
+ /**
57
+ * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
58
+ */
59
+ children: PropTypes.node,
60
+ /**
61
+ * @ignore
62
+ */
63
+ classes: PropTypes.object.isRequired,
64
+ /**
65
+ * @ignore
66
+ */
67
+ className: PropTypes.string,
68
+ /**
69
+ * @ignore
70
+ * Used internally for numbering.
71
+ */
72
+ index: PropTypes.number,
73
+ /**
74
+ * @ignore
75
+ * Used to know which step is the last, to not put a HiStepConnector
76
+ */
77
+ isLast: PropTypes.bool,
78
+ /**
79
+ * @ignore
80
+ */
81
+ orientation: PropTypes.oneOf(['horizontal', 'vertical']),
82
+ /**
83
+ * @ignore
84
+ */
85
+ validConnector: PropTypes.bool
86
+ } : {};
87
+
88
+ HiStep.defaultProps = {
89
+ active: false,
90
+ validConnector: false
91
+ };
92
+
93
+ export default withStyles(styles, { name: 'MuiStep' })(HiStep);
@@ -0,0 +1,83 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { withStyles } from '../styles';
7
+
8
+ export const styles = theme => ({
9
+ root: {
10
+ flex: '1 1 auto'
11
+ },
12
+ vertical: {
13
+ marginLeft: 13, // half icon
14
+ padding: `0 0 ${theme.spacing.unit}px`
15
+ },
16
+ line: {
17
+ display: 'block',
18
+ borderColor: theme.palette.grey[600]
19
+ },
20
+ lineHorizontal: {
21
+ borderTopStyle: 'solid',
22
+ borderTopWidth: 1
23
+ },
24
+ lineVertical: {
25
+ borderLeftStyle: 'solid',
26
+ borderLeftWidth: 2,
27
+ minHeight: theme.spacing.unit * 3,
28
+ height: 37
29
+ },
30
+ lineVerticalGreen: {
31
+ borderColor: theme.palette.status[116]
32
+ }
33
+ });
34
+
35
+ /**
36
+ * @ignore - internal component.
37
+ */
38
+ class HiStepConnector extends React.PureComponent {
39
+ render() {
40
+ const _props = this.props,
41
+ {
42
+ className: classNameProp,
43
+ classes,
44
+ orientation,
45
+ validConnector
46
+ } = _props,
47
+ other = _objectWithoutProperties(_props, ['className', 'classes', 'orientation', 'validConnector']);
48
+
49
+ const className = classNames(classes.root, classes[orientation], classNameProp);
50
+ const lineClassName = classNames(classes.line, {
51
+ [classes.lineHorizontal]: orientation === 'horizontal',
52
+ [classes.lineVertical]: orientation === 'vertical',
53
+ [classes.lineVerticalGreen]: orientation === 'vertical' && validConnector
54
+ });
55
+
56
+ return React.createElement(
57
+ 'div',
58
+ _extends({ className: className }, other),
59
+ React.createElement('span', { className: lineClassName })
60
+ );
61
+ }
62
+ }
63
+
64
+ HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
65
+ /**
66
+ * Useful to extend the style applied to the component.
67
+ */
68
+ classes: PropTypes.object.isRequired,
69
+ /**
70
+ * @ignore
71
+ */
72
+ className: PropTypes.string,
73
+ /**
74
+ * @ignore
75
+ */
76
+ orientation: PropTypes.oneOf(['horizontal', 'vertical'])
77
+ } : {};
78
+
79
+ HiStepConnector.defaultProps = {
80
+ orientation: 'vertical'
81
+ };
82
+
83
+ export default withStyles(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);
@@ -0,0 +1,81 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import classNames from 'classnames';
4
+ import { withStyles } from '../styles';
5
+
6
+ export const styles = theme => ({
7
+ circle: {
8
+ borderRadius: '50%',
9
+ width: 16,
10
+ height: 16,
11
+ border: 'solid 2px ' + theme.palette.neutral.normal,
12
+ marginLeft: 6,
13
+ display: 'inline-block'
14
+ },
15
+ validated: {
16
+ border: 'solid 2px ' + theme.palette.status[116]
17
+ },
18
+ refused: {
19
+ border: 'solid 2px ' + theme.palette.negative.normal
20
+ },
21
+ warning: {
22
+ border: 'solid 2px ' + theme.palette.middle.normal
23
+ },
24
+ active: {
25
+ border: '5px solid rgba(255, 0, 0, 0)',
26
+ backgroundClip: 'padding-box',
27
+ boxShadow: '0 0 0 1px ' + theme.palette.neutral.normal,
28
+ backgroundColor: theme.palette.neutral.normal
29
+ },
30
+ activeValidated: {
31
+ boxShadow: '0 0 0 1px ' + theme.palette.status[116],
32
+ backgroundColor: theme.palette.status[116]
33
+ },
34
+ activeRefused: {
35
+ boxShadow: '0 0 0 1px ' + theme.palette.negative.normal,
36
+ backgroundColor: theme.palette.negative.normal
37
+ },
38
+ activeWarning: {
39
+ boxShadow: '0 0 0 1px ' + theme.palette.middle.normal,
40
+ backgroundColor: theme.palette.middle.normal
41
+ }
42
+ });
43
+
44
+ class HiStepIcon extends React.PureComponent {
45
+ render() {
46
+ const { active, classes, status } = this.props;
47
+
48
+ return React.createElement('div', {
49
+ className: classNames(classes.circle, {
50
+ [classes.activeRefused]: status === 'refused' && active,
51
+ [classes.activeValidated]: status === 'validated' && active,
52
+ [classes.activeWarning]: status === 'warning' && active,
53
+ [classes.active]: active,
54
+ [classes.refused]: status === 'refused',
55
+ [classes.validated]: status === 'validated',
56
+ [classes.warning]: status === 'warning'
57
+ })
58
+ });
59
+ }
60
+ }
61
+
62
+ HiStepIcon.propTypes = process.env.NODE_ENV !== "production" ? {
63
+ /**
64
+ * Whether this step is active.
65
+ */
66
+ active: PropTypes.bool,
67
+ /**
68
+ * Useful to extend the style applied to components.
69
+ */
70
+ classes: PropTypes.object.isRequired,
71
+
72
+ status: PropTypes.oneOf(['refused', 'validated', 'warning', 'unreviewed'])
73
+ } : {};
74
+
75
+ HiStepIcon.defaultProps = {
76
+ active: false,
77
+ status: 'unreviewed',
78
+ classes: {}
79
+ };
80
+
81
+ export default withStyles(styles, { name: 'MuiHiStepIcon' })(HiStepIcon);
@@ -0,0 +1,154 @@
1
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
2
+ import _extends from 'babel-runtime/helpers/extends';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { withStyles } from '../styles';
7
+ import HiStepIcon from './HiStepIcon';
8
+ import HiPin from '../HiPins';
9
+
10
+ export const styles = theme => ({
11
+ root: {
12
+ display: 'flex',
13
+ alignItems: 'center'
14
+ },
15
+ test: {
16
+ marginLeft: '0 '
17
+ },
18
+ vertical: {
19
+ marginTop: -10,
20
+ marginBottom: -6
21
+ },
22
+ label: _extends({
23
+ display: 'inline-block',
24
+ marginLeft: 4,
25
+ fontWeight: theme.typography.fontWeightRegular,
26
+ color: theme.palette.neutral.normal,
27
+ marginBottom: -4
28
+ }, theme.typography.body3),
29
+ labelContainer: {
30
+ marginBottom: 4,
31
+ maxWidth: 160
32
+ },
33
+ validated: {
34
+ color: theme.palette.status[116]
35
+ },
36
+ refused: {
37
+ color: theme.palette.negative.normal
38
+ },
39
+ active: {
40
+ fontWeight: theme.typography.fontWeightMedium
41
+ },
42
+ warning: {
43
+ color: theme.palette.middle.normal
44
+ },
45
+ pin: {
46
+ marginLeft: 4
47
+ },
48
+ shortEllipsis: {
49
+ display: 'inline-block',
50
+ overflow: 'hidden',
51
+ textOverflow: 'ellipsis',
52
+ whiteSpace: 'pre',
53
+ maxWidth: 51
54
+ },
55
+ longEllipsis: {
56
+ display: 'inline-block',
57
+ overflow: 'hidden',
58
+ textOverflow: 'ellipsis',
59
+ whiteSpace: 'pre',
60
+ maxWidth: 90
61
+ }
62
+ });
63
+
64
+ function HiStepLabel(props) {
65
+ const {
66
+ active,
67
+ children,
68
+ classes,
69
+ className: classNameProp,
70
+ icon,
71
+ notificationNumber,
72
+ orientation,
73
+ status
74
+ } = props,
75
+ other = _objectWithoutProperties(props, ['active', 'children', 'classes', 'className', 'icon', 'notificationNumber', 'orientation', 'status']);
76
+
77
+ return React.createElement(
78
+ 'span',
79
+ _extends({
80
+ className: classNames(classes.root, {
81
+ [classes.vertical]: orientation === 'vertical'
82
+ }, classNameProp)
83
+ }, other),
84
+ icon && React.createElement(
85
+ 'span',
86
+ { className: classes.iconContainer },
87
+ React.createElement(HiStepIcon, { active: active, status: status })
88
+ ),
89
+ React.createElement(
90
+ 'span',
91
+ { className: classes.labelContainer },
92
+ React.createElement(
93
+ 'div',
94
+ {
95
+ className: classNames(classes.label, {
96
+ [classes.validated]: status === 'validated',
97
+ [classes.refused]: status === 'refused',
98
+ [classes.warning]: status === 'warning',
99
+ [classes.active]: active,
100
+ [classes.shortEllipsis]: notificationNumber > 0,
101
+ [classes.longEllipsis]: notificationNumber === 0
102
+ })
103
+ },
104
+ children
105
+ ),
106
+ notificationNumber > 0 && React.createElement(
107
+ 'span',
108
+ { className: classes.pin },
109
+ React.createElement(
110
+ HiPin,
111
+ {
112
+ color: props.theme.palette.business.primary.normal,
113
+ className: classes.test
114
+ },
115
+ notificationNumber
116
+ )
117
+ )
118
+ )
119
+ );
120
+ }
121
+
122
+ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
123
+ /**
124
+ * @ignore
125
+ * Sets the step as active. Is passed to child components.
126
+ */
127
+ active: PropTypes.bool,
128
+ /**
129
+ * In most cases will simply be a string containing a title for the label.
130
+ */
131
+ children: PropTypes.node,
132
+ /**
133
+ * Custom styles for component.
134
+ */
135
+ classes: PropTypes.object.isRequired,
136
+ /**
137
+ * @ignore
138
+ */
139
+ className: PropTypes.string,
140
+ /**
141
+ * @ignore
142
+ */
143
+ orientation: PropTypes.oneOf(['horizontal', 'vertical']),
144
+
145
+ status: PropTypes.oneOf(['unreviewed', 'refused', 'validated', 'warning'])
146
+ } : {};
147
+
148
+ HiStepLabel.defaultProps = {
149
+ active: false,
150
+ status: 'unreviewed',
151
+ orientation: 'vertical'
152
+ };
153
+
154
+ export default withStyles(styles, { name: 'MuiHiStepLabel', withTheme: true })(HiStepLabel);
@@ -0,0 +1,62 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import classNames from 'classnames';
6
+ import { withStyles } from '../styles';
7
+ import Paper from '../Paper';
8
+
9
+ export const styles = theme => ({
10
+ root: {
11
+ display: 'flex',
12
+ padding: theme.spacing.unit * 3,
13
+ maxWidth: 160,
14
+ flexDirection: 'column'
15
+ }
16
+ });
17
+
18
+ class HiStepper extends React.PureComponent {
19
+
20
+ render() {
21
+ const _props = this.props,
22
+ { activeStep, children, classes, className: classNameProp } = _props,
23
+ other = _objectWithoutProperties(_props, ['activeStep', 'children', 'classes', 'className']);
24
+
25
+ const className = classNames(classes.root, classNameProp);
26
+
27
+ const childrenArray = React.Children.toArray(children.props.children);
28
+
29
+ const steps = childrenArray.map((step, index) => {
30
+ return React.cloneElement(step, _extends({ index, active: activeStep === index }, step.props));
31
+ });
32
+
33
+ return React.createElement(
34
+ Paper,
35
+ _extends({ square: true, elevation: 0, className: className }, other),
36
+ steps
37
+ );
38
+ }
39
+ }
40
+
41
+ HiStepper.defaultProps = {
42
+ activeStep: 0
43
+ };
44
+ HiStepper.propTypes = process.env.NODE_ENV !== "production" ? {
45
+ /**
46
+ * Set the active step (zero based index).
47
+ */
48
+ activeStep: PropTypes.number,
49
+ /**
50
+ * Two or more `<Step />` components.
51
+ */
52
+ children: PropTypes.node.isRequired,
53
+ /**
54
+ * Useful to extend the style applied to components.
55
+ */
56
+ classes: PropTypes.object.isRequired,
57
+ /**
58
+ * @ignore
59
+ */
60
+ className: PropTypes.string
61
+ } : {};
62
+ export default withStyles(styles, { name: 'MuiHiStepper' })(HiStepper);
@@ -0,0 +1 @@
1
+ export { default } from './HiBreadcrumb';
@@ -27,7 +27,7 @@ export function buildDateRangeOptionByKey(key, t, format) {
27
27
  type = 'primary-highlight';
28
28
  break;
29
29
  case 'cd':
30
- label = t.last_24h;
30
+ label = t.today;
31
31
  from = moment().subtract(1, 'day');
32
32
  to = moment();
33
33
  info = `${from.calendar()} ${t.to_now}`;
@@ -87,6 +87,17 @@ class HiFormControl extends React.PureComponent {
87
87
  constructor(props) {
88
88
  super(props);
89
89
 
90
+ this.handleFocus = value => () => {
91
+ this.setState({ focused: value });
92
+ if (value === false && this.state.hovered) {
93
+ this.setState({ hovered: false });
94
+ }
95
+ };
96
+
97
+ this.handleHover = value => () => {
98
+ this.setState({ hovered: value });
99
+ };
100
+
90
101
  this.state = {
91
102
  helperOpen: false,
92
103
  focused: false,
@@ -105,17 +116,6 @@ class HiFormControl extends React.PureComponent {
105
116
  }
106
117
  }
107
118
 
108
- handleFocus(value) {
109
- this.setState({ focused: value });
110
- if (value === false && this.state.hovered) {
111
- this.setState({ hovered: false });
112
- }
113
- }
114
-
115
- handleHover(value) {
116
- this.setState({ hovered: value });
117
- }
118
-
119
119
  render() {
120
120
  const _props = this.props,
121
121
  {
@@ -195,10 +195,10 @@ class HiFormControl extends React.PureComponent {
195
195
  React.createElement(
196
196
  'div',
197
197
  {
198
- onMouseEnter: () => this.handleHover(true),
199
- onMouseLeave: () => this.handleHover(false),
200
- onFocus: () => this.handleFocus(true),
201
- onBlur: () => this.handleFocus(false)
198
+ onMouseEnter: this.handleHover(true),
199
+ onMouseLeave: this.handleHover(false),
200
+ onFocus: this.handleFocus(true),
201
+ onBlur: this.handleFocus(false)
202
202
  },
203
203
  children
204
204
  ),
@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
85
85
  if (typeof this.props.onSearch === 'undefined') {
86
86
  this.props.callbackFilteredList(this.props.itemList);
87
87
  } else {
88
- this.props.onSearch('');
88
+ this.props.onSearch(undefined, '');
89
89
  }
90
90
  }
91
91
 
@@ -15,7 +15,6 @@ export const styles = theme => ({
15
15
  textAlign: 'center',
16
16
  borderRadius: '45px',
17
17
  verticalAlign: 'middle',
18
- margin: 0.5 * theme.spacing.unit,
19
18
  fontSize: 11,
20
19
  fontWeight: theme.typography.fontWeightMedium,
21
20
  fontFamily: theme.typography.fontFamily
@@ -14,7 +14,8 @@ import HiColoredLabel from '../HiColoredLabel';
14
14
  export const styles = theme => ({
15
15
  listItem: {
16
16
  padding: `${9}px 0px`,
17
- fontWeight: theme.typography.fontWeightRegular
17
+ fontWeight: theme.typography.fontWeightRegular,
18
+ maxHeight: 40
18
19
  },
19
20
  listItemTitle: {
20
21
  padding: `${9}px 0px`,
@@ -105,6 +106,11 @@ export const styles = theme => ({
105
106
  color: '#000000'
106
107
  }
107
108
  },
109
+ labelHighlightColored: {
110
+ '&>strong': {
111
+ fontWeight: theme.typography.fontWeightMedium
112
+ }
113
+ },
108
114
  primaryHighlight: {
109
115
  fontWeight: theme.typography.fontWeightMedium,
110
116
  color: theme.palette.business.primary.normal,
@@ -186,13 +192,7 @@ class HiSelectableListItem extends React.Component {
186
192
  return React.createElement(
187
193
  'div',
188
194
  { className: itemTextClass, 'data-id': item.id },
189
- item.labelHighlight && React.createElement('span', {
190
- className: classes.labelHighlight,
191
- dangerouslySetInnerHTML: {
192
- __html: escapeHTML(item.labelHighlight)
193
- }
194
- }),
195
- !item.labelHighlight && this.getItemLabel(item),
195
+ this.getItemLabel(item),
196
196
  React.createElement(
197
197
  'span',
198
198
  { className: classes.listItemSecondaryText },
@@ -216,8 +216,20 @@ class HiSelectableListItem extends React.Component {
216
216
  }
217
217
 
218
218
  getItemLabel(item) {
219
- if (item.color) {
219
+ const { classes } = this.props;
220
+ if (!item.labelHighlight && item.color && this.props.selected) {
220
221
  return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
222
+ } else if (item.labelHighlight) {
223
+ const mLabel = React.createElement('span', {
224
+ className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
225
+ dangerouslySetInnerHTML: {
226
+ __html: escapeHTML(item.labelHighlight)
227
+ }
228
+ });
229
+ if (item.color && this.props.selected) {
230
+ return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
231
+ }
232
+ return mLabel;
221
233
  }
222
234
  return item.label;
223
235
  }