@bento-core/facet-filter 1.0.1-ccdihub.2 → 1.0.1-ccdihub.21

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 (17) hide show
  1. package/dist/components/facet/FacetStyle.js +1 -1
  2. package/dist/components/inputs/FilterItemStyle.js +1 -1
  3. package/dist/components/inputs/checkbox/CheckboxStyle.js +4 -3
  4. package/dist/components/inputs/checkbox/CheckboxView.js +26 -17
  5. package/dist/components/inputs/checkbox/assets/checkedbox.svg +4 -0
  6. package/dist/components/inputs/checkbox/assets/emptycheckbox.svg +5 -0
  7. package/dist/components/inputs/slider/InputMinMaxStyle.js +20 -1
  8. package/dist/components/inputs/slider/SliderView.js +153 -18
  9. package/package.json +1 -1
  10. package/src/components/facet/FacetStyle.js +1 -1
  11. package/src/components/inputs/FilterItemStyle.js +1 -1
  12. package/src/components/inputs/checkbox/CheckboxStyle.js +4 -3
  13. package/src/components/inputs/checkbox/CheckboxView.js +27 -4
  14. package/src/components/inputs/checkbox/assets/checkedbox.svg +4 -0
  15. package/src/components/inputs/checkbox/assets/emptycheckbox.svg +5 -0
  16. package/src/components/inputs/slider/InputMinMaxStyle.js +18 -0
  17. package/src/components/inputs/slider/SliderView.js +194 -37
package/dist/components/facet/FacetStyle.js CHANGED
@@ -41,7 +41,7 @@ var _default = () => ({
41
41
  fontFamily: 'Nunito',
42
42
  fontSize: '10px',
43
43
  marginRight: '12px',
44
- marginLeft: '16px'
44
+ marginLeft: '24px'
45
45
  },
46
46
  sortGroupItem: {
47
47
  cursor: 'pointer',
package/dist/components/inputs/FilterItemStyle.js CHANGED
@@ -17,7 +17,7 @@ var _default = () => ({
17
17
  fontFamily: 'Nunito',
18
18
  fontSize: '10px',
19
19
  marginRight: '12px',
20
- marginLeft: '16px'
20
+ marginLeft: '24px'
21
21
  },
22
22
  sortGroupItem: {
23
23
  cursor: 'pointer',
package/dist/components/inputs/checkbox/CheckboxStyle.js CHANGED
@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _default = () => ({
8
8
  listItemGutters: {
9
- padding: '10px 20px 10px 0px'
9
+ padding: '10px 10px 10px 0px'
10
10
  },
11
11
  checkboxRoot: {
12
- marginLeft: '5px',
12
+ marginLeft: '8px',
13
13
  height: 12
14
14
  },
15
15
  panelDetailText: {
@@ -30,7 +30,8 @@ var _default = () => ({
30
30
  checkboxName: {
31
31
  margin: '0',
32
32
  color: '#000000',
33
- fontSize: '14px',
33
+ fontSize: '16px',
34
+ fontWeight: 300,
34
35
  marginTop: '1.5px',
35
36
  fontFamily: 'Nunito',
36
37
  lineHeight: '120%'
package/dist/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -9,16 +9,11 @@ var _styles = require("@material-ui/core/styles");
9
9
  var _core = require("@material-ui/core");
10
10
  var _clsx = _interopRequireDefault(require("clsx"));
11
11
  var _icons = require("@material-ui/icons");
12
+ var _emptycheckbox = _interopRequireDefault(require("./assets/emptycheckbox.svg"));
13
+ var _checkedbox = _interopRequireDefault(require("./assets/checkedbox.svg"));
12
14
  var _CheckboxStyle = _interopRequireDefault(require("./CheckboxStyle"));
13
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
- /* eslint-disable no-unused-vars */
15
- /* eslint-disable no-unused-vars */
16
- /* eslint-disable react/jsx-wrap-multilines */
17
- /* eslint-disable react/jsx-indent */
18
- /* eslint-disable object-curly-newline */
19
- /* eslint-disable object-shorthand */
20
- /* eslint-disable react/jsx-one-expression-per-line */
21
-
16
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
22
17
  const alignment = 'flex-start';
23
18
  const CheckBoxView = _ref => {
24
19
  let {
@@ -39,6 +34,11 @@ const CheckBoxView = _ref => {
39
34
  } = checkboxItem;
40
35
  const indexType = index % 2 === 0 ? 'Even' : 'Odd';
41
36
  const checkedSection = "".concat(section).toLowerCase().replace(' ', '_');
37
+ const labelCheckbox = {
38
+ inputProps: {
39
+ 'aria-label': 'Checkbox item'
40
+ }
41
+ };
42
42
  const handleToggle = () => {
43
43
  const toggleCheckBoxItem = {
44
44
  name: name,
@@ -69,27 +69,36 @@ const CheckBoxView = _ref => {
69
69
  className: (0, _clsx.default)({
70
70
  ["".concat(checkedSection, "Checked").concat(indexType)]: isChecked
71
71
  })
72
- }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
73
- id: "checkbox_".concat(facet.label, "_").concat(name),
74
- icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
72
+ }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, _extends({
73
+ id: "checkbox_".concat(facet.label, "_").concat(name)
74
+ }, labelCheckbox, {
75
+ icon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
75
76
  style: {
76
- fontSize: 18
77
+ fontSize: '18px',
78
+ lineHeight: '22px'
77
79
  }
78
- }),
80
+ }, /*#__PURE__*/_react.default.createElement("img", {
81
+ src: _emptycheckbox.default,
82
+ alt: "checkbox-icon"
83
+ })),
79
84
  onClick: handleToggle,
80
85
  checked: isChecked,
81
- checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
86
+ checkedIcon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
82
87
  style: {
83
- fontSize: 18
88
+ fontSize: '18px',
89
+ lineHeight: '22px'
84
90
  },
85
91
  className: "".concat(checkedSection, "CheckedIcon")
86
- }),
92
+ }, /*#__PURE__*/_react.default.createElement("img", {
93
+ src: _checkedbox.default,
94
+ alt: "checkedBox-icon"
95
+ })),
87
96
  disableRipple: true,
88
97
  color: "secondary",
89
98
  classes: {
90
99
  root: classes.checkboxRoot
91
100
  }
92
- }), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
101
+ })), tooltip ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
93
102
  id: datafield,
94
103
  title: tooltip
95
104
  }, /*#__PURE__*/_react.default.createElement("div", {
package/dist/components/inputs/checkbox/assets/checkedbox.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
4
+ </svg>
package/dist/components/inputs/checkbox/assets/emptycheckbox.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <rect width="14" height="14" fill="#6D5F5B"/>
4
+ <rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
5
+ </svg>
package/dist/components/inputs/slider/InputMinMaxStyle.js CHANGED
@@ -5,6 +5,25 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _default = () => ({
8
- slider_INPUT_MIN: {}
8
+ slider_INPUT_MIN: {
9
+ fontFamily: 'Montserrat',
10
+ fontSize: '13px',
11
+ fontWeight: 500,
12
+ color: '#717171',
13
+ background: '#F0F0F0',
14
+ '& input': {
15
+ width: '70px'
16
+ }
17
+ },
18
+ slider_INPUT_MAX: {
19
+ fontFamily: 'Montserrat',
20
+ fontSize: '13px',
21
+ fontWeight: 500,
22
+ color: '#717171',
23
+ background: '#F0F0F0',
24
+ '& input': {
25
+ width: '70px'
26
+ }
27
+ }
9
28
  });
10
29
  exports.default = _default;
package/dist/components/inputs/slider/SliderView.js CHANGED
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _core = require("@material-ui/core");
9
- var _SliderStyle = _interopRequireDefault(require("./SliderStyle"));
10
9
  var _Types = require("../Types");
11
10
  var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
12
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,8 +28,7 @@ const SliderView = _ref => {
29
28
  maxUpperBound,
30
29
  quantifier,
31
30
  datafield,
32
- facetValues,
33
- style
31
+ facetValues
34
32
  } = facet;
35
33
  const lowerBoundValue = facetValues[0];
36
34
  const upperBoundValue = facetValues[1];
@@ -62,14 +60,15 @@ const SliderView = _ref => {
62
60
  };
63
61
  const valuetext = value => "".concat(value);
64
62
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
65
- className: style && style.sliderRoot ? style.sliderRoot : classes.sliderRoot
63
+ className: classes.sliderRoot
66
64
  }, /*#__PURE__*/_react.default.createElement("div", {
67
- className: style && style.minMaxInputs ? style.minMaxInputs : classes.minMaxInputs
65
+ className: classes.minMaxInputs
68
66
  }, /*#__PURE__*/_react.default.createElement("div", {
69
- className: style && style.minValue ? style.minValue : classes.minValue
67
+ className: classes.minValue
70
68
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
71
- className: style && style.minInputLabel ? style.minInputLabel : classes.minInputLabel
69
+ className: classes.minInputLabel
72
70
  }, "Min:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
71
+ className: classes.minInputValue,
73
72
  lowerBoundVal: sliderValue[0],
74
73
  upperBoundVal: sliderValue[1],
75
74
  minLowerBound: minLowerBound,
@@ -77,10 +76,11 @@ const SliderView = _ref => {
77
76
  type: _Types.silderTypes.INPUT_MIN,
78
77
  onInputChange: handleChangeCommittedSlider
79
78
  })), /*#__PURE__*/_react.default.createElement("div", {
80
- className: style && style.maxValue ? style.maxValue : classes.maxValue
79
+ className: classes.maxValue
81
80
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
82
- className: style && style.maxInputLabel ? style.maxInputLabel : classes.maxInputLabel
81
+ className: classes.maxInputLabel
83
82
  }, "Max:"), /*#__PURE__*/_react.default.createElement(_InputMinMaxView.default, {
83
+ className: classes.maxInputValue,
84
84
  lowerBoundVal: sliderValue[0],
85
85
  upperBoundVal: sliderValue[1],
86
86
  minLowerBound: minLowerBound,
@@ -88,7 +88,7 @@ const SliderView = _ref => {
88
88
  type: _Types.silderTypes.INPUT_MAX,
89
89
  onInputChange: handleChangeCommittedSlider
90
90
  }))), /*#__PURE__*/_react.default.createElement("div", {
91
- className: style && style.slider ? style.slider : classes.slider
91
+ className: classes.slider
92
92
  }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
93
93
  disableSwap: true,
94
94
  getAriaValueText: valuetext,
@@ -99,19 +99,154 @@ const SliderView = _ref => {
99
99
  min: minLowerBound,
100
100
  max: maxUpperBound,
101
101
  classes: {
102
- rail: style && style.rail ? style.rail : classes.rail,
103
- thumb: isValid() ? style && style.thumb ? style.thumb : classes.thumb : style && style.invalidThumb ? style.invalidThumb : classes.invalidThumb,
104
- track: isValid() ? style && style.track ? style.track : classes.track : style && style.invalidTrack ? style.invalidTrack : classes.invalidTrack
102
+ colorPrimary: classes.colorPrimary,
103
+ rail: classes.rail,
104
+ thumb: isValid() ? classes.thumb : classes.invalidThumb,
105
+ track: isValid() ? classes.track : classes.invalidTrack
105
106
  }
106
107
  })), /*#__PURE__*/_react.default.createElement(_core.Box, {
107
- className: style && style.lowerUpperBound ? style.lowerUpperBound : classes.lowerUpperBound
108
+ className: classes.lowerUpperBound
108
109
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
109
- className: style && style.lowerBound ? style.lowerBound : classes.lowerBound
110
+ className: classes.lowerBound
110
111
  }, minLowerBound), /*#__PURE__*/_react.default.createElement(_core.Typography, {
111
- className: style && style.upperBound ? style.upperBound : classes.upperBound
112
+ className: classes.upperBound
112
113
  }, maxUpperBound))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
113
- className: isValid() ? style && style.sliderText ? style.sliderText : classes.sliderText : style && style.invalidSliderText ? style.invalidSliderText : classes.invalidSliderText
114
+ className: isValid() ? classes.sliderText : classes.invalidSliderText
114
115
  }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
115
116
  };
116
- var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);
117
+ const styles = () => ({
118
+ colorPrimary: props => props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary : {
119
+ color: '#3f51b5'
120
+ },
121
+ sliderRoot: props => props.facet.style && props.facet.style.sliderRoot ? props.facet.style.sliderRoot : {
122
+ marginTop: '10px',
123
+ marginLeft: '20px',
124
+ marginRight: 'Auto',
125
+ paddingRight: '20px'
126
+ },
127
+ minValue: props => props.facet.style && props.facet.style.minValue ? props.facet.style.minValue : {
128
+ fontFamily: 'Nunito',
129
+ fontSize: '15px',
130
+ color: '#000000',
131
+ marginBottom: '0px',
132
+ float: 'left',
133
+ width: '75px',
134
+ display: 'flex'
135
+ },
136
+ maxValue: props => props.facet.style && props.facet.style.maxValue ? props.facet.style.maxValue : {
137
+ fontFamily: 'Nunito',
138
+ fontSize: '15px',
139
+ color: '#000000',
140
+ float: 'right',
141
+ marginBottom: '0px',
142
+ display: 'flex'
143
+ },
144
+ rail: props => props.facet.style && props.facet.style.rail ? props.facet.style.rail : {
145
+ borderRadius: 4,
146
+ height: 6,
147
+ background: '#142D64'
148
+ },
149
+ minInputLabel: props => props.facet.style && props.facet.style.minInputLabel ? props.facet.style.minInputLabel : {
150
+ float: 'left',
151
+ lineHeight: '34px',
152
+ marginRight: '5px'
153
+ },
154
+ maxInputLabel: props => props.facet.style && props.facet.style.maxInputLabel ? props.facet.style.maxInputLabel : {
155
+ float: 'left',
156
+ lineHeight: '34px',
157
+ marginRight: '5px'
158
+ },
159
+ minInputValue: props => props.facet.style && props.facet.style.minInputValue ? props.facet.style.minInputValue : {
160
+ fontFamily: 'Montserrat',
161
+ fontSize: '13px',
162
+ color: '#717171',
163
+ background: '#F0F0F0',
164
+ textAlign: 'center'
165
+ },
166
+ maxInputValue: props => props.facet.style && props.facet.style.maxInputValue ? props.facet.style.maxInputValue : {
167
+ fontFamily: 'Montserrat',
168
+ fontSize: '13px',
169
+ color: '#717171',
170
+ background: '#F0F0F0',
171
+ textAlign: 'center'
172
+ },
173
+ thumb: props => props.facet.style && props.facet.style.thumb ? props.facet.style.thumb : {
174
+ height: 16,
175
+ width: 16,
176
+ background: '#10A075'
177
+ },
178
+ invalidThumb: props => props.facet.style && props.facet.style.invalidThumb ? props.facet.style.invalidThumb : {
179
+ height: 16,
180
+ width: 16,
181
+ background: '#F44336'
182
+ },
183
+ track: props => props.facet.style && props.facet.style.track ? props.facet.style.track : {
184
+ borderRadius: 4,
185
+ height: 6,
186
+ background: '#10A075',
187
+ '&~&': {
188
+ background: '#142D64'
189
+ }
190
+ },
191
+ invalidTrack: props => props.facet.style && props.facet.style.invalidTrack ? props.facet.style.invalidTrack : {
192
+ borderRadius: 4,
193
+ height: 6,
194
+ background: '#F44336',
195
+ '&~&': {
196
+ background: '#142D64'
197
+ }
198
+ },
199
+ upperBound: props => props.facet.style && props.facet.style.upperBound ? props.facet.style.upperBound : {
200
+ fontFamily: 'Nunito',
201
+ fontSize: '10px',
202
+ color: '#000000',
203
+ float: 'right',
204
+ marginLeft: 'Auto',
205
+ marginRight: 'Auto',
206
+ marginBottom: '15px'
207
+ },
208
+ lowerBound: props => props.facet.style && props.facet.style.lowerBound ? props.facet.style.lowerBound : {
209
+ fontFamily: 'Nunito',
210
+ fontSize: '10px',
211
+ color: '#000000',
212
+ float: 'left',
213
+ marginLeft: 'Auto',
214
+ marginRight: 'Auto',
215
+ marginBottom: '15px'
216
+ },
217
+ sliderText: props => props.facet.style && props.facet.style.sliderText ? props.facet.style.sliderText : {
218
+ color: '#10a075',
219
+ lineHeight: '120%',
220
+ fontFamily: 'Nunito',
221
+ fontSize: '14px',
222
+ padding: '5px 15px 5px 0px',
223
+ width: '100%',
224
+ textAlign: 'right',
225
+ background: '#f5fdee',
226
+ marginTop: '10px'
227
+ },
228
+ invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
229
+ color: '#D32F2F',
230
+ lineHeight: '120%',
231
+ fontFamily: 'Nunito',
232
+ fontSize: '14px',
233
+ padding: '5px 15px 5px 0px',
234
+ width: '100%',
235
+ textAlign: 'right',
236
+ background: '#E57373',
237
+ marginTop: '10px'
238
+ },
239
+ sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
240
+ height: '15px'
241
+ },
242
+ listItemGutters: props => props.facet.style && props.facet.style.listItemGutters ? props.facet.style.listItemGutters : {
243
+ display: 'flex',
244
+ justifyContent: 'space-between',
245
+ padding: '2px 5px 2px 8px'
246
+ },
247
+ lowerUpperBound: props => props.facet.style && props.facet.style.lowerUpperBound ? props.facet.style.lowerUpperBound : {
248
+ height: '15px'
249
+ }
250
+ });
251
+ var _default = (0, _core.withStyles)(styles)(SliderView);
117
252
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-ccdihub.2",
3
+ "version": "1.0.1-ccdihub.21",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/facet/FacetStyle.js CHANGED
@@ -35,7 +35,7 @@ export default () => ({
35
35
  fontFamily: 'Nunito',
36
36
  fontSize: '10px',
37
37
  marginRight: '12px',
38
- marginLeft: '16px',
38
+ marginLeft: '24px',
39
39
  },
40
40
  sortGroupItem: {
41
41
  cursor: 'pointer',
package/src/components/inputs/FilterItemStyle.js CHANGED
@@ -11,7 +11,7 @@ export default () => ({
11
11
  fontFamily: 'Nunito',
12
12
  fontSize: '10px',
13
13
  marginRight: '12px',
14
- marginLeft: '16px',
14
+ marginLeft: '24px',
15
15
  },
16
16
  sortGroupItem: {
17
17
  cursor: 'pointer',
package/src/components/inputs/checkbox/CheckboxStyle.js CHANGED
@@ -1,9 +1,9 @@
1
1
  export default () => ({
2
2
  listItemGutters: {
3
- padding: '10px 20px 10px 0px',
3
+ padding: '10px 10px 10px 0px',
4
4
  },
5
5
  checkboxRoot: {
6
- marginLeft: '5px',
6
+ marginLeft: '8px',
7
7
  height: 12,
8
8
  },
9
9
  panelDetailText: {
@@ -24,7 +24,8 @@ export default () => ({
24
24
  checkboxName: {
25
25
  margin: '0',
26
26
  color: '#000000',
27
- fontSize: '14px',
27
+ fontSize: '16px',
28
+ fontWeight: 300,
28
29
  marginTop: '1.5px',
29
30
  fontFamily: 'Nunito',
30
31
  lineHeight: '120%',
package/src/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -15,11 +15,14 @@ import {
15
15
  Tooltip,
16
16
  Box,
17
17
  Typography,
18
+ Icon,
18
19
  } from '@material-ui/core';
19
20
  import clsx from 'clsx';
20
21
  import {
21
22
  CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
22
23
  } from '@material-ui/icons';
24
+ import emptyCheckBox from './assets/emptycheckbox.svg';
25
+ import checkedBox from './assets/checkedbox.svg';
23
26
  import styles from './CheckboxStyle';
24
27
 
25
28
  const alignment = 'flex-start';
@@ -43,6 +46,8 @@ const CheckBoxView = ({
43
46
  const indexType = index % 2 === 0 ? 'Even' : 'Odd';
44
47
  const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
45
48
 
49
+ const labelCheckbox = { inputProps: { 'aria-label': 'Checkbox item' } };
50
+
46
51
  const handleToggle = () => {
47
52
  const toggleCheckBoxItem = {
48
53
  name: name,
@@ -78,16 +83,34 @@ const CheckBoxView = ({
78
83
  >
79
84
  <Checkbox
80
85
  id={`checkbox_${facet.label}_${name}`}
81
- icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
86
+ {...labelCheckbox}
87
+ icon={
88
+ <Icon style={{
89
+ fontSize: '18px',
90
+ lineHeight: '22px',
91
+ }}
92
+ >
93
+ <img
94
+ src={emptyCheckBox}
95
+ alt="checkbox-icon"
96
+ />
97
+ </Icon>
98
+ }
82
99
  onClick={handleToggle}
83
100
  checked={isChecked}
84
101
  checkedIcon={(
85
- <CheckBoxIcon
102
+ <Icon
86
103
  style={{
87
- fontSize: 18,
104
+ fontSize: '18px',
105
+ lineHeight: '22px',
88
106
  }}
89
107
  className={`${checkedSection}CheckedIcon`}
90
- />
108
+ >
109
+ <img
110
+ src={checkedBox}
111
+ alt="checkedBox-icon"
112
+ />
113
+ </Icon>
91
114
  )}
92
115
  disableRipple
93
116
  color="secondary"
package/src/components/inputs/checkbox/assets/checkedbox.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
4
+ </svg>
package/src/components/inputs/checkbox/assets/emptycheckbox.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect width="14" height="14" fill="#6D5F5B"/>
3
+ <rect width="14" height="14" fill="#6D5F5B"/>
4
+ <rect x="0.5" y="0.5" width="13" height="13" fill="white" stroke="#6D5F5B"/>
5
+ </svg>
package/src/components/inputs/slider/InputMinMaxStyle.js CHANGED
@@ -1,4 +1,22 @@
1
1
  export default () => ({
2
2
  slider_INPUT_MIN: {
3
+ fontFamily: 'Montserrat',
4
+ fontSize: '13px',
5
+ fontWeight: 500,
6
+ color: '#717171',
7
+ background: '#F0F0F0',
8
+ '& input': {
9
+ width: '70px',
10
+ },
11
+ },
12
+ slider_INPUT_MAX: {
13
+ fontFamily: 'Montserrat',
14
+ fontSize: '13px',
15
+ fontWeight: 500,
16
+ color: '#717171',
17
+ background: '#F0F0F0',
18
+ '& input': {
19
+ width: '70px',
20
+ },
3
21
  },
4
22
  });
package/src/components/inputs/slider/SliderView.js CHANGED
@@ -4,7 +4,7 @@
4
4
  /* eslint-disable object-curly-newline */
5
5
  import React, { useEffect, useState } from 'react';
6
6
  import { withStyles, Slider, Typography, Box } from '@material-ui/core';
7
- import styles from './SliderStyle';
7
+ // import styles from './SliderStyle';
8
8
  import { silderTypes } from '../Types';
9
9
  import InputMinMaxView from './InputMinMaxView';
10
10
 
@@ -14,7 +14,7 @@ const SliderView = ({
14
14
  onSliderToggle,
15
15
  filterState,
16
16
  }) => {
17
- const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues, style } = facet;
17
+ const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
18
18
  const lowerBoundValue = facetValues[0];
19
19
  const upperBoundValue = facetValues[1];
20
20
 
@@ -52,16 +52,14 @@ const SliderView = ({
52
52
 
53
53
  return (
54
54
  <>
55
- <div className={style && style.sliderRoot ? style.sliderRoot : classes.sliderRoot}>
56
- <div className={style && style.minMaxInputs ? style.minMaxInputs : classes.minMaxInputs}>
57
- <div className={style && style.minValue ? style.minValue : classes.minValue}>
58
- <Typography className={style && style.minInputLabel
59
- ? style.minInputLabel
60
- : classes.minInputLabel}
61
- >
55
+ <div className={classes.sliderRoot}>
56
+ <div className={classes.minMaxInputs}>
57
+ <div className={classes.minValue}>
58
+ <Typography className={classes.minInputLabel}>
62
59
  Min:
63
60
  </Typography>
64
61
  <InputMinMaxView
62
+ className={classes.minInputValue}
65
63
  lowerBoundVal={sliderValue[0]}
66
64
  upperBoundVal={sliderValue[1]}
67
65
  minLowerBound={minLowerBound}
@@ -70,14 +68,12 @@ const SliderView = ({
70
68
  onInputChange={handleChangeCommittedSlider}
71
69
  />
72
70
  </div>
73
- <div className={style && style.maxValue ? style.maxValue : classes.maxValue}>
74
- <Typography className={style && style.maxInputLabel
75
- ? style.maxInputLabel
76
- : classes.maxInputLabel}
77
- >
71
+ <div className={classes.maxValue}>
72
+ <Typography className={classes.maxInputLabel}>
78
73
  Max:
79
74
  </Typography>
80
75
  <InputMinMaxView
76
+ className={classes.maxInputValue}
81
77
  lowerBoundVal={sliderValue[0]}
82
78
  upperBoundVal={sliderValue[1]}
83
79
  minLowerBound={minLowerBound}
@@ -87,7 +83,7 @@ const SliderView = ({
87
83
  />
88
84
  </div>
89
85
  </div>
90
- <div className={style && style.slider ? style.slider : classes.slider}>
86
+ <div className={classes.slider}>
91
87
  {/* Change to red if invalid range */}
92
88
  <Slider
93
89
  disableSwap
@@ -99,28 +95,18 @@ const SliderView = ({
99
95
  min={minLowerBound}
100
96
  max={maxUpperBound}
101
97
  classes={{
102
- rail: style && style.rail ? style.rail : classes.rail,
103
- thumb: isValid() ? (style && style.thumb ? style.thumb : classes.thumb)
104
- : (style && style.invalidThumb ? style.invalidThumb : classes.invalidThumb),
105
- track: isValid() ? (style && style.track ? style.track : classes.track)
106
- : (style && style.invalidTrack ? style.invalidTrack : classes.invalidTrack),
98
+ colorPrimary: classes.colorPrimary,
99
+ rail: classes.rail,
100
+ thumb: isValid() ? classes.thumb : classes.invalidThumb,
101
+ track: isValid() ? classes.track : classes.invalidTrack,
107
102
  }}
108
103
  />
109
104
  </div>
110
- <Box className={style && style.lowerUpperBound
111
- ? style.lowerUpperBound
112
- : classes.lowerUpperBound}
113
- >
114
- <Typography className={style && style.lowerBound
115
- ? style.lowerBound
116
- : classes.lowerBound}
117
- >
105
+ <Box className={classes.lowerUpperBound}>
106
+ <Typography className={classes.lowerBound}>
118
107
  {minLowerBound}
119
108
  </Typography>
120
- <Typography className={style && style.upperBound
121
- ? style.upperBound
122
- : classes.upperBound}
123
- >
109
+ <Typography className={classes.upperBound}>
124
110
  {maxUpperBound}
125
111
  </Typography>
126
112
  </Box>
@@ -130,11 +116,7 @@ const SliderView = ({
130
116
  (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
131
117
  && (
132
118
  <Typography
133
- className={isValid()
134
- ? (style && style.sliderText ? style.sliderText : classes.sliderText)
135
- : (style && style.invalidSliderText
136
- ? style.invalidSliderText
137
- : classes.invalidSliderText)}
119
+ className={isValid() ? classes.sliderText : classes.invalidSliderText}
138
120
  >
139
121
  {sliderValue[0]}
140
122
  {' - '}
@@ -148,4 +130,179 @@ const SliderView = ({
148
130
  );
149
131
  };
150
132
 
133
+ const styles = () => ({
134
+ colorPrimary: (props) => (props.facet.style && props.facet.style.colorPrimary
135
+ ? props.facet.style.colorPrimary
136
+ : {
137
+ color: '#3f51b5',
138
+ }),
139
+ sliderRoot: (props) => (props.facet.style && props.facet.style.sliderRoot
140
+ ? props.facet.style.sliderRoot
141
+ : {
142
+ marginTop: '10px',
143
+ marginLeft: '20px',
144
+ marginRight: 'Auto',
145
+ paddingRight: '20px',
146
+ }),
147
+ minValue: (props) => (props.facet.style && props.facet.style.minValue
148
+ ? props.facet.style.minValue
149
+ : {
150
+ fontFamily: 'Nunito',
151
+ fontSize: '15px',
152
+ color: '#000000',
153
+ marginBottom: '0px',
154
+ float: 'left',
155
+ width: '75px',
156
+ display: 'flex',
157
+ }),
158
+ maxValue: (props) => (props.facet.style && props.facet.style.maxValue
159
+ ? props.facet.style.maxValue
160
+ : {
161
+ fontFamily: 'Nunito',
162
+ fontSize: '15px',
163
+ color: '#000000',
164
+ float: 'right',
165
+ marginBottom: '0px',
166
+ display: 'flex',
167
+ }),
168
+ rail: (props) => (props.facet.style && props.facet.style.rail
169
+ ? props.facet.style.rail
170
+ : {
171
+ borderRadius: 4,
172
+ height: 6,
173
+ background: '#142D64',
174
+ }),
175
+ minInputLabel: (props) => (props.facet.style && props.facet.style.minInputLabel
176
+ ? props.facet.style.minInputLabel
177
+ : {
178
+ float: 'left',
179
+ lineHeight: '34px',
180
+ marginRight: '5px',
181
+ }),
182
+ maxInputLabel: (props) => (props.facet.style && props.facet.style.maxInputLabel
183
+ ? props.facet.style.maxInputLabel
184
+ : {
185
+ float: 'left',
186
+ lineHeight: '34px',
187
+ marginRight: '5px',
188
+ }),
189
+ minInputValue: (props) => (props.facet.style && props.facet.style.minInputValue
190
+ ? props.facet.style.minInputValue
191
+ : {
192
+ fontFamily: 'Montserrat',
193
+ fontSize: '13px',
194
+ color: '#717171',
195
+ background: '#F0F0F0',
196
+ textAlign: 'center',
197
+ }),
198
+ maxInputValue: (props) => (props.facet.style && props.facet.style.maxInputValue
199
+ ? props.facet.style.maxInputValue
200
+ : {
201
+ fontFamily: 'Montserrat',
202
+ fontSize: '13px',
203
+ color: '#717171',
204
+ background: '#F0F0F0',
205
+ textAlign: 'center',
206
+ }),
207
+ thumb: (props) => (props.facet.style && props.facet.style.thumb
208
+ ? props.facet.style.thumb
209
+ : {
210
+ height: 16,
211
+ width: 16,
212
+ background: '#10A075',
213
+ }),
214
+ invalidThumb: (props) => (props.facet.style && props.facet.style.invalidThumb
215
+ ? props.facet.style.invalidThumb
216
+ : {
217
+ height: 16,
218
+ width: 16,
219
+ background: '#F44336',
220
+ }),
221
+ track: (props) => (props.facet.style && props.facet.style.track
222
+ ? props.facet.style.track
223
+ : {
224
+ borderRadius: 4,
225
+ height: 6,
226
+ background: '#10A075',
227
+ '&~&': {
228
+ background: '#142D64',
229
+ },
230
+ }),
231
+ invalidTrack: (props) => (props.facet.style && props.facet.style.invalidTrack
232
+ ? props.facet.style.invalidTrack
233
+ : {
234
+ borderRadius: 4,
235
+ height: 6,
236
+ background: '#F44336',
237
+ '&~&': {
238
+ background: '#142D64',
239
+ },
240
+ }),
241
+ upperBound: (props) => (props.facet.style && props.facet.style.upperBound
242
+ ? props.facet.style.upperBound
243
+ : {
244
+ fontFamily: 'Nunito',
245
+ fontSize: '10px',
246
+ color: '#000000',
247
+ float: 'right',
248
+ marginLeft: 'Auto',
249
+ marginRight: 'Auto',
250
+ marginBottom: '15px',
251
+ }),
252
+ lowerBound: (props) => (props.facet.style && props.facet.style.lowerBound
253
+ ? props.facet.style.lowerBound
254
+ : {
255
+ fontFamily: 'Nunito',
256
+ fontSize: '10px',
257
+ color: '#000000',
258
+ float: 'left',
259
+ marginLeft: 'Auto',
260
+ marginRight: 'Auto',
261
+ marginBottom: '15px',
262
+ }),
263
+ sliderText: (props) => (props.facet.style && props.facet.style.sliderText
264
+ ? props.facet.style.sliderText
265
+ : {
266
+ color: '#10a075',
267
+ lineHeight: '120%',
268
+ fontFamily: 'Nunito',
269
+ fontSize: '14px',
270
+ padding: '5px 15px 5px 0px',
271
+ width: '100%',
272
+ textAlign: 'right',
273
+ background: '#f5fdee',
274
+ marginTop: '10px',
275
+ }),
276
+ invalidSliderText: (props) => (props.facet.style && props.facet.style.invalidSliderText
277
+ ? props.facet.style.invalidSliderText
278
+ : {
279
+ color: '#D32F2F',
280
+ lineHeight: '120%',
281
+ fontFamily: 'Nunito',
282
+ fontSize: '14px',
283
+ padding: '5px 15px 5px 0px',
284
+ width: '100%',
285
+ textAlign: 'right',
286
+ background: '#E57373',
287
+ marginTop: '10px',
288
+ }),
289
+ sliderListItem: (props) => (props.facet.style && props.facet.style.sliderListItem
290
+ ? props.facet.style.sliderListItem
291
+ : {
292
+ height: '15px',
293
+ }),
294
+ listItemGutters: (props) => (props.facet.style && props.facet.style.listItemGutters
295
+ ? props.facet.style.listItemGutters
296
+ : {
297
+ display: 'flex',
298
+ justifyContent: 'space-between',
299
+ padding: '2px 5px 2px 8px',
300
+ }),
301
+ lowerUpperBound: (props) => (props.facet.style && props.facet.style.lowerUpperBound
302
+ ? props.facet.style.lowerUpperBound
303
+ : {
304
+ height: '15px',
305
+ }),
306
+ });
307
+
151
308
  export default withStyles(styles)(SliderView);