@bento-core/facet-filter 1.0.1-ccdihub.37 → 1.0.1-ccdihub.38

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/NewFacetStyle.js +20 -12
  2. package/dist/components/facet/NewFacetView.js +2 -2
  3. package/dist/components/facet/NewSearchFacetView.js +6 -4
  4. package/dist/components/inputs/FilterItemStyle.js +2 -2
  5. package/dist/components/inputs/checkbox/CheckboxStyle.js +2 -2
  6. package/dist/components/inputs/checkbox/CheckboxView.js +3 -3
  7. package/dist/components/inputs/checkbox/SearchCheckboxView.js +3 -3
  8. package/dist/components/inputs/checkbox/assets/checkedbox.svg +1 -1
  9. package/package.json +1 -1
  10. package/src/components/facet/NewFacetStyle.js +19 -11
  11. package/src/components/facet/NewFacetView.js +2 -2
  12. package/src/components/facet/NewSearchFacetView.js +5 -4
  13. package/src/components/inputs/FilterItemStyle.js +2 -2
  14. package/src/components/inputs/checkbox/CheckboxStyle.js +2 -2
  15. package/src/components/inputs/checkbox/CheckboxView.js +3 -3
  16. package/src/components/inputs/checkbox/SearchCheckboxView.js +3 -3
  17. package/src/components/inputs/checkbox/assets/checkedbox.svg +1 -1
package/dist/components/facet/NewFacetStyle.js CHANGED
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _Search_Icon = _interopRequireDefault(require("./assets/Search_Icon.svg"));
8
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
7
  var _default = () => ({
10
8
  expansionPanelDetailsRoot: {
11
9
  display: 'block'
@@ -21,7 +19,6 @@ var _default = () => ({
21
19
  },
22
20
  subSectionSummaryText: {
23
21
  marginLeft: '10px',
24
- lineHeight: 0,
25
22
  color: '#323232',
26
23
  fontFamily: 'Raleway',
27
24
  fontSize: '13px',
@@ -64,10 +61,7 @@ var _default = () => ({
64
61
  sortGroupItemCounts: {
65
62
  cursor: 'pointer',
66
63
  fontFamily: 'Nunito',
67
- fontSize: '10px',
68
- float: 'right',
69
- marginRight: '10px',
70
- marginTop: '5px'
64
+ fontSize: '10px'
71
65
  },
72
66
  highlight: {
73
67
  color: '#b2c6d6'
@@ -85,19 +79,18 @@ var _default = () => ({
85
79
  position: 'relative'
86
80
  },
87
81
  searchBox: {
88
- fontSize: '11px',
82
+ fontSize: '14px',
89
83
  fontFamily: 'Nunito',
90
84
  width: 'calc(100% - 26px)',
91
85
  height: '30px',
92
86
  marginTop: '12px',
93
87
  borderRadius: '5px',
94
- background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
95
88
  marginLeft: '6px',
96
89
  border: '1px solid',
97
90
  padding: '5px'
98
91
  },
99
92
  searchBoxWithText: {
100
- fontSize: '11px',
93
+ fontSize: '14px',
101
94
  fontFamily: 'Nunito',
102
95
  width: 'calc(100% - 26px)',
103
96
  height: '30px',
@@ -108,23 +101,38 @@ var _default = () => ({
108
101
  padding: '5px'
109
102
  },
110
103
  expandedDisplayButton: {
104
+ display: 'flex',
105
+ alignItems: 'center',
106
+ justifyContent: 'space-between',
111
107
  backgroundColor: '#4D889E !important',
112
108
  color: 'white',
113
109
  width: 'calc(100% - 26px)',
114
110
  height: '30px',
115
111
  marginBottom: '5px',
116
112
  marginLeft: '6px',
113
+ padding: '6px 11px',
117
114
  borderRadius: '5px',
118
- fontSize: '12px',
115
+ fontFamily: 'Nunito',
116
+ fontSize: '11px',
119
117
  fontWeight: '600',
120
118
  top: '8px'
121
119
  },
120
+ expandedDisplayCount: {
121
+ marginLeft: '4px',
122
+ fontFamily: 'Nunito',
123
+ fontSize: '11px',
124
+ fontWeight: '600',
125
+ lineHeight: '17px',
126
+ color: '#ffffff',
127
+ backgroundColor: '#5D98AE',
128
+ padding: '1px 2px'
129
+ },
122
130
  clearTextButton: {
123
131
  padding: '0px',
124
132
  height: '20px',
125
133
  position: 'absolute',
126
134
  right: '14px',
127
- top: '14px'
135
+ top: '16px'
128
136
  },
129
137
  timeUnitToggle: {
130
138
  marginLeft: '8px',
package/dist/components/facet/NewFacetView.js CHANGED
@@ -171,14 +171,14 @@ const NewFacetView = _ref => {
171
171
  onClick: () => {
172
172
  onSortFacet(_Sort.sortType.ALPHABET);
173
173
  }
174
- }, "Sort alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
174
+ }, "Sort Alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
175
175
  className: (0, _clsx.default)(classes.sortGroupItemCounts, {
176
176
  [classes.highlight]: sortBy === _Sort.sortType.NUMERIC
177
177
  }),
178
178
  onClick: () => {
179
179
  onSortFacet(_Sort.sortType.NUMERIC);
180
180
  }
181
- }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
181
+ }, "Sort by Count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
182
182
  facet: facet,
183
183
  queryParams: queryParams,
184
184
  sortBy: sortBy,
package/dist/components/facet/NewSearchFacetView.js CHANGED
@@ -151,7 +151,7 @@ const SearchFacetView = _ref => {
151
151
  className: searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox,
152
152
  value: searchText,
153
153
  type: "text",
154
- placeholder: "e.g. Sarcoma, Neoplasm",
154
+ placeholder: "e.g. Sarcoma, Neoplasm, phs087...",
155
155
  onChange: e => onSearchTextChange(facet.datafield, e.target.value)
156
156
  }), searchText && searchText.trim() !== '' && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
157
157
  "aria-label": "close",
@@ -171,7 +171,9 @@ const SearchFacetView = _ref => {
171
171
  variant: "text",
172
172
  className: classes.expandedDisplayButton,
173
173
  onClick: () => setOpen(!open)
174
- }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")")))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
174
+ }, "VIEW EXPANDED DISPLAY", /*#__PURE__*/_react.default.createElement("span", {
175
+ className: classes.expandedDisplayCount
176
+ }, "".concat(checkedItems.length + newUncheckedFullList.length))))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
175
177
  className: classes.sortGroup
176
178
  }, /*#__PURE__*/_react.default.createElement("span", {
177
179
  className: classes.sortGroupIcon
@@ -192,14 +194,14 @@ const SearchFacetView = _ref => {
192
194
  onClick: () => {
193
195
  onSortChange(facet.datafield, _Sort.sortType.ALPHABET);
194
196
  }
195
- }, "Sort alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
197
+ }, "Sort Alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
196
198
  className: (0, _clsx.default)(classes.sortGroupItemCounts, {
197
199
  [classes.highlight]: sortBy === _Sort.sortType.NUMERIC
198
200
  }),
199
201
  onClick: () => {
200
202
  onSortChange(facet.datafield, _Sort.sortType.NUMERIC);
201
203
  }
202
- }, "Sort by count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
204
+ }, "Sort by Count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
203
205
  searchText: searchText,
204
206
  facet: facet,
205
207
  queryParams: queryParams,
package/dist/components/inputs/FilterItemStyle.js CHANGED
@@ -37,8 +37,8 @@ var _default = () => ({
37
37
  maxHeight: '400px',
38
38
  overflowY: 'auto',
39
39
  overflowX: 'hidden',
40
- borderTop: '2px solid #AEAEAE',
41
- borderBottom: '2px solid #AEAEAE',
40
+ borderTop: '1px solid #AEAEAE',
41
+ borderBottom: '1px solid #AEAEAE',
42
42
  marginRight: '-1px',
43
43
  '&::-webkit-scrollbar': {
44
44
  width: '12px',
package/dist/components/inputs/checkbox/CheckboxStyle.js CHANGED
@@ -30,11 +30,11 @@ var _default = () => ({
30
30
  checkboxName: {
31
31
  margin: '0',
32
32
  color: '#000000',
33
- fontSize: '16px',
33
+ fontSize: '15px',
34
34
  fontWeight: 300,
35
35
  marginTop: '1.5px',
36
36
  fontFamily: 'Nunito',
37
- lineHeight: '120%'
37
+ lineHeight: '16px'
38
38
  }
39
39
  });
40
40
  exports.default = _default;
package/dist/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -135,11 +135,11 @@ const CheckBoxView = _ref => {
135
135
  ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
136
136
  ["".concat(checkedSection, "SubjectChecked")]: isChecked
137
137
  })
138
- }, "(".concat(subjects.toLocaleString(), ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
138
+ }, "".concat(subjects.toLocaleString()))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
139
139
  style: {
140
- backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
140
+ backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
141
141
  margin: '0px',
142
- height: isChecked ? '2px' : '1px'
142
+ height: isChecked ? '0.5px' : '0.5px'
143
143
  }
144
144
  }));
145
145
  };
package/dist/components/inputs/checkbox/SearchCheckboxView.js CHANGED
@@ -135,11 +135,11 @@ const CheckBoxView = _ref => {
135
135
  ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
136
136
  ["".concat(checkedSection, "SubjectChecked")]: isChecked
137
137
  })
138
- }, "(".concat(subjects.toLocaleString(), ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
138
+ }, "".concat(subjects.toLocaleString()))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
139
139
  style: {
140
- backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
140
+ backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
141
141
  margin: '0px',
142
- height: isChecked ? '2px' : '1px'
142
+ height: isChecked ? '0.5px' : '0.5px'
143
143
  }
144
144
  }));
145
145
  };
package/dist/components/inputs/checkbox/assets/checkedbox.svg CHANGED
@@ -1,4 +1,4 @@
1
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"/>
2
+ <rect width="14" height="14" fill="#477C90"/>
3
3
  <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
4
4
  </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/facet-filter",
3
- "version": "1.0.1-ccdihub.37",
3
+ "version": "1.0.1-ccdihub.38",
4
4
  "description": "### Bento core sidebar design:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/facet/NewFacetStyle.js CHANGED
@@ -1,5 +1,3 @@
1
- import SearchIcon from './assets/Search_Icon.svg';
2
-
3
1
  export default () => ({
4
2
  expansionPanelDetailsRoot: {
5
3
  display: 'block',
@@ -15,7 +13,6 @@ export default () => ({
15
13
  },
16
14
  subSectionSummaryText: {
17
15
  marginLeft: '10px',
18
- lineHeight: 0,
19
16
  color: '#323232',
20
17
  fontFamily: 'Raleway',
21
18
  fontSize: '13px',
@@ -59,9 +56,6 @@ export default () => ({
59
56
  cursor: 'pointer',
60
57
  fontFamily: 'Nunito',
61
58
  fontSize: '10px',
62
- float: 'right',
63
- marginRight: '10px',
64
- marginTop: '5px',
65
59
  },
66
60
  highlight: {
67
61
  color: '#b2c6d6',
@@ -79,19 +73,18 @@ export default () => ({
79
73
  position: 'relative',
80
74
  },
81
75
  searchBox: {
82
- fontSize: '11px',
76
+ fontSize: '14px',
83
77
  fontFamily: 'Nunito',
84
78
  width: 'calc(100% - 26px)',
85
79
  height: '30px',
86
80
  marginTop: '12px',
87
81
  borderRadius: '5px',
88
- background: `url(${SearchIcon}) right 5px center no-repeat`,
89
82
  marginLeft: '6px',
90
83
  border: '1px solid',
91
84
  padding: '5px',
92
85
  },
93
86
  searchBoxWithText: {
94
- fontSize: '11px',
87
+ fontSize: '14px',
95
88
  fontFamily: 'Nunito',
96
89
  width: 'calc(100% - 26px)',
97
90
  height: '30px',
@@ -102,23 +95,38 @@ export default () => ({
102
95
  padding: '5px',
103
96
  },
104
97
  expandedDisplayButton: {
98
+ display: 'flex',
99
+ alignItems: 'center',
100
+ justifyContent: 'space-between',
105
101
  backgroundColor: '#4D889E !important',
106
102
  color: 'white',
107
103
  width: 'calc(100% - 26px)',
108
104
  height: '30px',
109
105
  marginBottom: '5px',
110
106
  marginLeft: '6px',
107
+ padding: '6px 11px',
111
108
  borderRadius: '5px',
112
- fontSize: '12px',
109
+ fontFamily: 'Nunito',
110
+ fontSize: '11px',
113
111
  fontWeight: '600',
114
112
  top: '8px',
115
113
  },
114
+ expandedDisplayCount: {
115
+ marginLeft: '4px',
116
+ fontFamily: 'Nunito',
117
+ fontSize: '11px',
118
+ fontWeight: '600',
119
+ lineHeight: '17px',
120
+ color: '#ffffff',
121
+ backgroundColor: '#5D98AE',
122
+ padding: '1px 2px',
123
+ },
116
124
  clearTextButton: {
117
125
  padding: '0px',
118
126
  height: '20px',
119
127
  position: 'absolute',
120
128
  right: '14px',
121
- top: '14px',
129
+ top: '16px',
122
130
  },
123
131
  timeUnitToggle: {
124
132
  marginLeft: '8px',
package/src/components/facet/NewFacetView.js CHANGED
@@ -209,7 +209,7 @@ const NewFacetView = ({
209
209
  onSortFacet(sortType.ALPHABET);
210
210
  }}
211
211
  >
212
- Sort alphabetically
212
+ Sort Alphabetically
213
213
  </span>
214
214
  <span
215
215
  className={
@@ -221,7 +221,7 @@ const NewFacetView = ({
221
221
  onSortFacet(sortType.NUMERIC);
222
222
  }}
223
223
  >
224
- Sort by count
224
+ Sort by Count
225
225
  </span>
226
226
  </>
227
227
  )}
package/src/components/facet/NewSearchFacetView.js CHANGED
@@ -178,7 +178,7 @@ const SearchFacetView = ({
178
178
  className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
179
179
  value={searchText}
180
180
  type="text"
181
- placeholder="e.g. Sarcoma, Neoplasm"
181
+ placeholder="e.g. Sarcoma, Neoplasm, phs087..."
182
182
  onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
183
183
  />
184
184
  {
@@ -203,7 +203,8 @@ const SearchFacetView = ({
203
203
  </div>
204
204
  <div className={classes.searchContainer}>
205
205
  <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
206
- {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
206
+ VIEW EXPANDED DISPLAY
207
+ <span className={classes.expandedDisplayCount}>{`${checkedItems.length + newUncheckedFullList.length}`}</span>
207
208
  </Button>
208
209
  </div>
209
210
  </>
@@ -237,7 +238,7 @@ const SearchFacetView = ({
237
238
  onSortChange(facet.datafield, sortType.ALPHABET);
238
239
  }}
239
240
  >
240
- Sort alphabetically
241
+ Sort Alphabetically
241
242
  </span>
242
243
  <span
243
244
  className={
@@ -249,7 +250,7 @@ const SearchFacetView = ({
249
250
  onSortChange(facet.datafield, sortType.NUMERIC);
250
251
  }}
251
252
  >
252
- Sort by count
253
+ Sort by Count
253
254
  </span>
254
255
  </div>
255
256
  <SearchFilterItems
package/src/components/inputs/FilterItemStyle.js CHANGED
@@ -31,8 +31,8 @@ export default () => ({
31
31
  maxHeight: '400px',
32
32
  overflowY: 'auto',
33
33
  overflowX: 'hidden',
34
- borderTop: '2px solid #AEAEAE',
35
- borderBottom: '2px solid #AEAEAE',
34
+ borderTop: '1px solid #AEAEAE',
35
+ borderBottom: '1px solid #AEAEAE',
36
36
  marginRight: '-1px',
37
37
  '&::-webkit-scrollbar': {
38
38
  width: '12px',
package/src/components/inputs/checkbox/CheckboxStyle.js CHANGED
@@ -24,10 +24,10 @@ export default () => ({
24
24
  checkboxName: {
25
25
  margin: '0',
26
26
  color: '#000000',
27
- fontSize: '16px',
27
+ fontSize: '15px',
28
28
  fontWeight: 300,
29
29
  marginTop: '1.5px',
30
30
  fontFamily: 'Nunito',
31
- lineHeight: '120%',
31
+ lineHeight: '16px',
32
32
  },
33
33
  });
package/src/components/inputs/checkbox/CheckboxView.js CHANGED
@@ -162,14 +162,14 @@ const CheckBoxView = ({
162
162
  [`${checkedSection}SubjectChecked`]: isChecked,
163
163
  })}
164
164
  >
165
- {`(${subjects.toLocaleString()})`}
165
+ {`${subjects.toLocaleString()}`}
166
166
  </Typography>
167
167
  </ListItem>
168
168
  <Divider
169
169
  style={{
170
- backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
170
+ backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
171
171
  margin: '0px',
172
- height: isChecked ? '2px' : '1px',
172
+ height: isChecked ? '0.5px' : '0.5px',
173
173
  }}
174
174
  />
175
175
  </>
package/src/components/inputs/checkbox/SearchCheckboxView.js CHANGED
@@ -162,14 +162,14 @@ const CheckBoxView = ({
162
162
  [`${checkedSection}SubjectChecked`]: isChecked,
163
163
  })}
164
164
  >
165
- {`(${subjects.toLocaleString()})`}
165
+ {`${subjects.toLocaleString()}`}
166
166
  </Typography>
167
167
  </ListItem>
168
168
  <Divider
169
169
  style={{
170
- backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
170
+ backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
171
171
  margin: '0px',
172
- height: isChecked ? '2px' : '1px',
172
+ height: isChecked ? '0.5px' : '0.5px',
173
173
  }}
174
174
  />
175
175
  </>
package/src/components/inputs/checkbox/assets/checkedbox.svg CHANGED
@@ -1,4 +1,4 @@
1
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"/>
2
+ <rect width="14" height="14" fill="#477C90"/>
3
3
  <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
4
4
  </svg>