@bento-core/facet-filter 1.0.1-ccdihub.1 → 1.0.1-ccdihub.10

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.
@@ -128,6 +128,7 @@ const FacetFilterController = props => {
128
128
  updateFacet.minLowerBound = lowerBound;
129
129
  updateFacet.maxUpperBound = upperBound;
130
130
  updateFacet.facetValues = [lowerBound, upperBound];
131
+ updateFacet.style = facet.style;
131
132
  }
132
133
  }
133
134
  updateFacets.push(updateFacet);
@@ -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',
@@ -82,7 +82,7 @@ const FacetView = _ref => {
82
82
  className: (0, _clsx.default)(classes.subSectionSummaryText, {
83
83
  ["activeFacet".concat(facet.section)]: isActiveFacet
84
84
  })
85
- }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
85
+ }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
86
86
  className: classes.NonSortGroup
87
87
  }, /*#__PURE__*/_react.default.createElement("span", {
88
88
  className: classes.NonSortGroupItem
@@ -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',
@@ -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%'
@@ -9,6 +9,8 @@ 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
16
  /* eslint-disable no-unused-vars */
@@ -71,19 +73,27 @@ const CheckBoxView = _ref => {
71
73
  })
72
74
  }, /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
73
75
  id: "checkbox_".concat(facet.label, "_").concat(name),
74
- icon: /*#__PURE__*/_react.default.createElement(_icons.CheckBoxOutlineBlank, {
76
+ icon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
75
77
  style: {
76
- fontSize: 18
78
+ fontSize: '18px',
79
+ lineHeight: '22px'
77
80
  }
78
- }),
81
+ }, /*#__PURE__*/_react.default.createElement("img", {
82
+ src: _emptycheckbox.default,
83
+ alt: "checkbox-icon"
84
+ })),
79
85
  onClick: handleToggle,
80
86
  checked: isChecked,
81
- checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.CheckBox, {
87
+ checkedIcon: /*#__PURE__*/_react.default.createElement(_core.Icon, {
82
88
  style: {
83
- fontSize: 18
89
+ fontSize: '18px',
90
+ lineHeight: '22px'
84
91
  },
85
92
  className: "".concat(checkedSection, "CheckedIcon")
86
- }),
93
+ }, /*#__PURE__*/_react.default.createElement("img", {
94
+ src: _checkedbox.default,
95
+ alt: "checkedBox-icon"
96
+ })),
87
97
  disableRipple: true,
88
98
  color: "secondary",
89
99
  classes: {
@@ -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>
@@ -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>
@@ -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 }; }
@@ -98,6 +97,7 @@ const SliderView = _ref => {
98
97
  min: minLowerBound,
99
98
  max: maxUpperBound,
100
99
  classes: {
100
+ colorPrimary: classes.colorPrimary,
101
101
  rail: classes.rail,
102
102
  thumb: isValid() ? classes.thumb : classes.invalidThumb,
103
103
  track: isValid() ? classes.track : classes.invalidTrack
@@ -112,5 +112,125 @@ const SliderView = _ref => {
112
112
  className: isValid() ? classes.sliderText : classes.invalidSliderText
113
113
  }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
114
114
  };
115
- var _default = (0, _core.withStyles)(_SliderStyle.default)(SliderView);
115
+ const styles = () => ({
116
+ colorPrimary: props => props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary : {
117
+ color: '#3f51b5'
118
+ },
119
+ sliderRoot: props => props.facet.style && props.facet.style.sliderRoot ? props.facet.style.sliderRoot : {
120
+ marginTop: '10px',
121
+ marginLeft: '20px',
122
+ marginRight: 'Auto',
123
+ paddingRight: '20px'
124
+ },
125
+ minValue: props => props.facet.style && props.facet.style.minValue ? props.facet.style.minValue : {
126
+ fontFamily: 'Nunito',
127
+ fontSize: '15px',
128
+ color: '#000000',
129
+ marginBottom: '0px',
130
+ float: 'left',
131
+ width: '75px',
132
+ display: 'flex'
133
+ },
134
+ maxValue: props => props.facet.style && props.facet.style.maxValue ? props.facet.style.maxValue : {
135
+ fontFamily: 'Nunito',
136
+ fontSize: '15px',
137
+ color: '#000000',
138
+ float: 'right',
139
+ marginBottom: '0px',
140
+ display: 'flex'
141
+ },
142
+ rail: props => props.facet.style && props.facet.style.rail ? props.facet.style.rail : {
143
+ borderRadius: 4,
144
+ height: 6,
145
+ background: '#142D64'
146
+ },
147
+ minInputLabel: props => props.facet.style && props.facet.style.minInputLabel ? props.facet.style.minInputLabel : {
148
+ float: 'left',
149
+ lineHeight: '34px',
150
+ marginRight: '5px'
151
+ },
152
+ maxInputLabel: props => props.facet.style && props.facet.style.maxInputLabel ? props.facet.style.maxInputLabel : {
153
+ float: 'left',
154
+ lineHeight: '34px',
155
+ marginRight: '5px'
156
+ },
157
+ thumb: props => props.facet.style && props.facet.style.thumb ? props.facet.style.thumb : {
158
+ height: 16,
159
+ width: 16,
160
+ background: '#10A075'
161
+ },
162
+ invalidThumb: props => props.facet.style && props.facet.style.invalidThumb ? props.facet.style.invalidThumb : {
163
+ height: 16,
164
+ width: 16,
165
+ background: '#F44336'
166
+ },
167
+ track: props => props.facet.style && props.facet.style.track ? props.facet.style.track : {
168
+ borderRadius: 4,
169
+ height: 6,
170
+ background: '#10A075',
171
+ '&~&': {
172
+ background: '#142D64'
173
+ }
174
+ },
175
+ invalidTrack: props => props.facet.style && props.facet.style.invalidTrack ? props.facet.style.invalidTrack : {
176
+ borderRadius: 4,
177
+ height: 6,
178
+ background: '#F44336',
179
+ '&~&': {
180
+ background: '#142D64'
181
+ }
182
+ },
183
+ upperBound: props => props.facet.style && props.facet.style.upperBound ? props.facet.style.upperBound : {
184
+ fontFamily: 'Nunito',
185
+ fontSize: '10px',
186
+ color: '#000000',
187
+ float: 'right',
188
+ marginLeft: 'Auto',
189
+ marginRight: 'Auto',
190
+ marginBottom: '15px'
191
+ },
192
+ lowerBound: props => props.facet.style && props.facet.style.lowerBound ? props.facet.style.lowerBound : {
193
+ fontFamily: 'Nunito',
194
+ fontSize: '10px',
195
+ color: '#000000',
196
+ float: 'left',
197
+ marginLeft: 'Auto',
198
+ marginRight: 'Auto',
199
+ marginBottom: '15px'
200
+ },
201
+ sliderText: props => props.facet.style && props.facet.style.sliderText ? props.facet.style.sliderText : {
202
+ color: '#10a075',
203
+ lineHeight: '120%',
204
+ fontFamily: 'Nunito',
205
+ fontSize: '14px',
206
+ padding: '5px 15px 5px 0px',
207
+ width: '100%',
208
+ textAlign: 'right',
209
+ background: '#f5fdee',
210
+ marginTop: '10px'
211
+ },
212
+ invalidSliderText: props => props.facet.style && props.facet.style.invalidSliderText ? props.facet.style.invalidSliderText : {
213
+ color: '#D32F2F',
214
+ lineHeight: '120%',
215
+ fontFamily: 'Nunito',
216
+ fontSize: '14px',
217
+ padding: '5px 15px 5px 0px',
218
+ width: '100%',
219
+ textAlign: 'right',
220
+ background: '#E57373',
221
+ marginTop: '10px'
222
+ },
223
+ sliderListItem: props => props.facet.style && props.facet.style.sliderListItem ? props.facet.style.sliderListItem : {
224
+ height: '15px'
225
+ },
226
+ listItemGutters: props => props.facet.style && props.facet.style.listItemGutters ? props.facet.style.listItemGutters : {
227
+ display: 'flex',
228
+ justifyContent: 'space-between',
229
+ padding: '2px 5px 2px 8px'
230
+ },
231
+ lowerUpperBound: props => props.facet.style && props.facet.style.lowerUpperBound ? props.facet.style.lowerUpperBound : {
232
+ height: '15px'
233
+ }
234
+ });
235
+ var _default = (0, _core.withStyles)(styles)(SliderView);
116
236
  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.1",
3
+ "version": "1.0.1-ccdihub.10",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -113,6 +113,7 @@ const FacetFilterController = (props) => {
113
113
  updateFacet.minLowerBound = lowerBound;
114
114
  updateFacet.maxUpperBound = upperBound;
115
115
  updateFacet.facetValues = [lowerBound, upperBound];
116
+ updateFacet.style = facet.style;
116
117
  }
117
118
  }
118
119
  updateFacets.push(updateFacet);
@@ -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',
@@ -92,7 +92,7 @@ const FacetView = ({
92
92
  </CustomAccordionSummary>
93
93
  )}
94
94
  {
95
- (facet.type === InputTypes.SLIDER || facetValues.length === 0)
95
+ (facetValues.length === 0)
96
96
  && (
97
97
  <div className={classes.NonSortGroup}>
98
98
  <span
@@ -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',
@@ -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%',
@@ -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';
@@ -78,16 +81,33 @@ const CheckBoxView = ({
78
81
  >
79
82
  <Checkbox
80
83
  id={`checkbox_${facet.label}_${name}`}
81
- icon={<CheckBoxBlankIcon style={{ fontSize: 18 }} />}
84
+ icon={
85
+ <Icon style={{
86
+ fontSize: '18px',
87
+ lineHeight: '22px',
88
+ }}
89
+ >
90
+ <img
91
+ src={emptyCheckBox}
92
+ alt="checkbox-icon"
93
+ />
94
+ </Icon>
95
+ }
82
96
  onClick={handleToggle}
83
97
  checked={isChecked}
84
98
  checkedIcon={(
85
- <CheckBoxIcon
99
+ <Icon
86
100
  style={{
87
- fontSize: 18,
101
+ fontSize: '18px',
102
+ lineHeight: '22px',
88
103
  }}
89
104
  className={`${checkedSection}CheckedIcon`}
90
- />
105
+ >
106
+ <img
107
+ src={checkedBox}
108
+ alt="checkedBox-icon"
109
+ />
110
+ </Icon>
91
111
  )}
92
112
  disableRipple
93
113
  color="secondary"
@@ -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>
@@ -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>
@@ -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
 
@@ -93,6 +93,7 @@ const SliderView = ({
93
93
  min={minLowerBound}
94
94
  max={maxUpperBound}
95
95
  classes={{
96
+ colorPrimary: classes.colorPrimary,
96
97
  rail: classes.rail,
97
98
  thumb: isValid() ? classes.thumb : classes.invalidThumb,
98
99
  track: isValid() ? classes.track : classes.invalidTrack,
@@ -113,9 +114,7 @@ const SliderView = ({
113
114
  (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound)
114
115
  && (
115
116
  <Typography
116
- className={isValid()
117
- ? classes.sliderText
118
- : classes.invalidSliderText}
117
+ className={isValid() ? classes.sliderText : classes.invalidSliderText}
119
118
  >
120
119
  {sliderValue[0]}
121
120
  {' - '}
@@ -129,4 +128,161 @@ const SliderView = ({
129
128
  );
130
129
  };
131
130
 
131
+ const styles = () => ({
132
+ colorPrimary: (props) => (props.facet.style && props.facet.style.colorPrimary
133
+ ? props.facet.style.colorPrimary
134
+ : {
135
+ color: '#3f51b5',
136
+ }),
137
+ sliderRoot: (props) => (props.facet.style && props.facet.style.sliderRoot
138
+ ? props.facet.style.sliderRoot
139
+ : {
140
+ marginTop: '10px',
141
+ marginLeft: '20px',
142
+ marginRight: 'Auto',
143
+ paddingRight: '20px',
144
+ }),
145
+ minValue: (props) => (props.facet.style && props.facet.style.minValue
146
+ ? props.facet.style.minValue
147
+ : {
148
+ fontFamily: 'Nunito',
149
+ fontSize: '15px',
150
+ color: '#000000',
151
+ marginBottom: '0px',
152
+ float: 'left',
153
+ width: '75px',
154
+ display: 'flex',
155
+ }),
156
+ maxValue: (props) => (props.facet.style && props.facet.style.maxValue
157
+ ? props.facet.style.maxValue
158
+ : {
159
+ fontFamily: 'Nunito',
160
+ fontSize: '15px',
161
+ color: '#000000',
162
+ float: 'right',
163
+ marginBottom: '0px',
164
+ display: 'flex',
165
+ }),
166
+ rail: (props) => (props.facet.style && props.facet.style.rail
167
+ ? props.facet.style.rail
168
+ : {
169
+ borderRadius: 4,
170
+ height: 6,
171
+ background: '#142D64',
172
+ }),
173
+ minInputLabel: (props) => (props.facet.style && props.facet.style.minInputLabel
174
+ ? props.facet.style.minInputLabel
175
+ : {
176
+ float: 'left',
177
+ lineHeight: '34px',
178
+ marginRight: '5px',
179
+ }),
180
+ maxInputLabel: (props) => (props.facet.style && props.facet.style.maxInputLabel
181
+ ? props.facet.style.maxInputLabel
182
+ : {
183
+ float: 'left',
184
+ lineHeight: '34px',
185
+ marginRight: '5px',
186
+ }),
187
+ thumb: (props) => (props.facet.style && props.facet.style.thumb
188
+ ? props.facet.style.thumb
189
+ : {
190
+ height: 16,
191
+ width: 16,
192
+ background: '#10A075',
193
+ }),
194
+ invalidThumb: (props) => (props.facet.style && props.facet.style.invalidThumb
195
+ ? props.facet.style.invalidThumb
196
+ : {
197
+ height: 16,
198
+ width: 16,
199
+ background: '#F44336',
200
+ }),
201
+ track: (props) => (props.facet.style && props.facet.style.track
202
+ ? props.facet.style.track
203
+ : {
204
+ borderRadius: 4,
205
+ height: 6,
206
+ background: '#10A075',
207
+ '&~&': {
208
+ background: '#142D64',
209
+ },
210
+ }),
211
+ invalidTrack: (props) => (props.facet.style && props.facet.style.invalidTrack
212
+ ? props.facet.style.invalidTrack
213
+ : {
214
+ borderRadius: 4,
215
+ height: 6,
216
+ background: '#F44336',
217
+ '&~&': {
218
+ background: '#142D64',
219
+ },
220
+ }),
221
+ upperBound: (props) => (props.facet.style && props.facet.style.upperBound
222
+ ? props.facet.style.upperBound
223
+ : {
224
+ fontFamily: 'Nunito',
225
+ fontSize: '10px',
226
+ color: '#000000',
227
+ float: 'right',
228
+ marginLeft: 'Auto',
229
+ marginRight: 'Auto',
230
+ marginBottom: '15px',
231
+ }),
232
+ lowerBound: (props) => (props.facet.style && props.facet.style.lowerBound
233
+ ? props.facet.style.lowerBound
234
+ : {
235
+ fontFamily: 'Nunito',
236
+ fontSize: '10px',
237
+ color: '#000000',
238
+ float: 'left',
239
+ marginLeft: 'Auto',
240
+ marginRight: 'Auto',
241
+ marginBottom: '15px',
242
+ }),
243
+ sliderText: (props) => (props.facet.style && props.facet.style.sliderText
244
+ ? props.facet.style.sliderText
245
+ : {
246
+ color: '#10a075',
247
+ lineHeight: '120%',
248
+ fontFamily: 'Nunito',
249
+ fontSize: '14px',
250
+ padding: '5px 15px 5px 0px',
251
+ width: '100%',
252
+ textAlign: 'right',
253
+ background: '#f5fdee',
254
+ marginTop: '10px',
255
+ }),
256
+ invalidSliderText: (props) => (props.facet.style && props.facet.style.invalidSliderText
257
+ ? props.facet.style.invalidSliderText
258
+ : {
259
+ color: '#D32F2F',
260
+ lineHeight: '120%',
261
+ fontFamily: 'Nunito',
262
+ fontSize: '14px',
263
+ padding: '5px 15px 5px 0px',
264
+ width: '100%',
265
+ textAlign: 'right',
266
+ background: '#E57373',
267
+ marginTop: '10px',
268
+ }),
269
+ sliderListItem: (props) => (props.facet.style && props.facet.style.sliderListItem
270
+ ? props.facet.style.sliderListItem
271
+ : {
272
+ height: '15px',
273
+ }),
274
+ listItemGutters: (props) => (props.facet.style && props.facet.style.listItemGutters
275
+ ? props.facet.style.listItemGutters
276
+ : {
277
+ display: 'flex',
278
+ justifyContent: 'space-between',
279
+ padding: '2px 5px 2px 8px',
280
+ }),
281
+ lowerUpperBound: (props) => (props.facet.style && props.facet.style.lowerUpperBound
282
+ ? props.facet.style.lowerUpperBound
283
+ : {
284
+ height: '15px',
285
+ }),
286
+ });
287
+
132
288
  export default withStyles(styles)(SliderView);