@bento-core/query-bar 1.0.1-ccdihub.1 → 1.0.1-icdc.0

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 (7) hide show
  1. package/dist/components/CheckboxFilter.js +1 -3
  2. package/dist/generators/QueryBarGenerator.js +9 -3
  3. package/dist/generators/styles.js +21 -58
  4. package/package.json +1 -1
  5. package/src/components/CheckboxFilter.js +1 -1
  6. package/src/generators/QueryBarGenerator.js +18 -14
  7. package/src/generators/styles.js +21 -58
package/dist/components/CheckboxFilter.js CHANGED
@@ -33,9 +33,7 @@ var _default = _ref => {
33
33
  className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
34
34
  key: idx,
35
35
  onClick: () => onItemClick(data, d)
36
- }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && /*#__PURE__*/_react.default.createElement("span", {
37
- className: classes.ellipsis
38
- }, "..."), items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
36
+ }, d), idx === maxItems - 1 ? null : ' ')), items.length > maxItems && '...', items.length > 1 && /*#__PURE__*/_react.default.createElement("span", {
39
37
  className: classes.bracketsClose
40
38
  }, ")")));
41
39
  };
package/dist/generators/QueryBarGenerator.js CHANGED
@@ -40,6 +40,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
40
40
  const resetFacetSection = functions && typeof functions.resetFacetSection === 'function' ? functions.resetFacetSection : _config.default.functions.resetFacetSection;
41
41
  const resetFacetCheckbox = functions && typeof functions.resetFacetCheckbox === 'function' ? functions.resetFacetCheckbox : _config.default.functions.resetFacetCheckbox;
42
42
  const resetFacetSlider = functions && typeof functions.resetFacetSlider === 'function' ? functions.resetFacetSlider : _config.default.functions.resetFacetSlider;
43
+ const clsName = function clsName() {
44
+ let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'filter-section';
45
+ return text.replace(/\s+/g, '-').toLowerCase();
46
+ };
43
47
  return {
44
48
  QueryBar: (0, _core.withStyles)(_styles.default, {
45
49
  withTheme: true
@@ -97,7 +101,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
97
101
  }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
98
102
  className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
99
103
  onClick: clearAutocomplete
100
- }, "Participant IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
104
+ }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
101
105
  className: classes.operators
102
106
  }, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
103
107
  className: classes.bracketsOpen
@@ -112,7 +116,9 @@ const QueryBarGenerator = function QueryBarGenerator() {
112
116
  className: classes.bracketsClose
113
117
  }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
114
118
  className: classes.operators
115
- }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
119
+ }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement("span", {
120
+ className: clsName(filter.section)
121
+ }, /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
116
122
  index: index,
117
123
  type: filter.type,
118
124
  data: filter,
@@ -120,7 +126,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
120
126
  classes: classes,
121
127
  onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
122
128
  onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
123
- }))));
129
+ })))));
124
130
  })
125
131
  };
126
132
  };
package/dist/generators/styles.js CHANGED
@@ -15,51 +15,46 @@ var _default = () => ({
15
15
  overflowY: 'auto'
16
16
  },
17
17
  queryContainer: {
18
- marginLeft: 5,
18
+ marginLeft: 7,
19
19
  position: 'relative',
20
20
  lineHeight: '2.4em',
21
+ letterSpacing: '0.5px',
21
22
  fontFamily: 'Nunito',
22
23
  fontSize: '14px',
23
24
  color: '#0e3151'
24
25
  },
25
26
  filterName: {
26
27
  textTransform: 'uppercase',
27
- padding: '3px 6px 3px 6px',
28
+ padding: '5px 6px 5px 7px',
28
29
  borderRadius: 4,
29
30
  fontSize: 12,
30
31
  fontWeight: 600,
31
32
  cursor: 'pointer'
32
33
  },
33
34
  filterCheckboxes: {
34
- padding: '3px 6px 3px 6px',
35
- borderRadius: 5,
35
+ padding: '4px 7px 3px 6px',
36
+ borderRadius: 4,
36
37
  fontSize: 12,
37
38
  fontWeight: 600,
38
- border: '0.5px solid #646464',
39
+ border: '0.75px solid #898989',
39
40
  width: 'fit-content',
40
41
  backgroundColor: '#fff',
41
42
  cursor: 'pointer'
42
43
  },
43
44
  bracketsOpen: {
44
- fontSize: 20,
45
- fontFamily: 'Nunito',
46
- color: '#646464',
45
+ fontSize: 18,
46
+ fontFamily: 'Nunito Sans Semibold',
47
+ color: '#787878',
47
48
  marginRight: 3,
48
49
  fontWeight: 600
49
50
  },
50
51
  bracketsClose: {
51
- fontSize: 20,
52
- fontFamily: 'Nunito',
53
- color: '#646464',
52
+ fontSize: 18,
53
+ fontFamily: 'Nunito Sans Semibold',
54
+ color: '#787878',
54
55
  marginLeft: 3,
55
56
  fontWeight: 600
56
57
  },
57
- ellipsis: {
58
- fontFamily: 'Nunito',
59
- fontWeight: 600,
60
- fontSize: 10,
61
- marginLeft: 3
62
- },
63
58
  operators: {
64
59
  color: '#646464',
65
60
  marginLeft: '3px',
@@ -78,32 +73,30 @@ var _default = () => ({
78
73
  borderRadius: '15px',
79
74
  fontFamily: 'Nunito',
80
75
  boxSizing: 'border-box',
81
- backgroundColor: '#646464',
76
+ backgroundColor: '#969696',
82
77
  textTransform: 'capitalize',
83
78
  border: '1px solid #B4B4B4',
84
79
  padding: '1px 5px 0px 6px',
85
80
  '&:hover': {
86
- backgroundColor: '#646464'
81
+ backgroundColor: '#969696'
87
82
  }
88
83
  },
89
84
  divider: {
90
- padding: '0 0 3px 0',
91
- fontSize: '23px',
92
- borderRight: '1px solid #969696',
85
+ borderRight: '2px solid #969696',
93
86
  marginLeft: 7
94
87
  },
95
88
  /* Custom Styling by Project */
96
89
  localFind: {
97
- color: '#7AA6B6'
90
+ color: '#10A075'
98
91
  },
99
92
  localFindBackground: {
100
- backgroundColor: '#E4ECE9'
93
+ backgroundColor: '#C0E9D7'
101
94
  },
102
95
  facetSectionCases: {
103
- color: '#7AA6B6'
96
+ color: '#10A075'
104
97
  },
105
98
  facetSectionCasesBackground: {
106
- backgroundColor: '#E4ECE9'
99
+ backgroundColor: '#C0E9D7'
107
100
  },
108
101
  facetSectionFiles: {
109
102
  color: '#E636E4'
@@ -111,41 +104,11 @@ var _default = () => ({
111
104
  facetSectionFilesBackground: {
112
105
  backgroundColor: '#F5C3F1'
113
106
  },
114
- facetSectionDemographics: {
115
- color: '#7AA6B6'
116
- },
117
- facetSectionDemographicsBackground: {
118
- backgroundColor: '#E4ECE9'
119
- },
120
- facetSectionDiagnosis: {
121
- color: '#7AA6B6'
122
- },
123
- facetSectionDiagnosisBackground: {
124
- backgroundColor: '#E4ECE9'
125
- },
126
107
  facetSectionSamples: {
127
- color: '#7AA6B6'
108
+ color: '#10BEFF'
128
109
  },
129
110
  facetSectionSamplesBackground: {
130
- backgroundColor: '#E4ECE9'
131
- },
132
- facetSectionAssay: {
133
- color: '#7AA6B6'
134
- },
135
- facetSectionAssayBackground: {
136
- backgroundColor: '#E4ECE9'
137
- },
138
- facetSectionStudy: {
139
- color: '#7AA6B6'
140
- },
141
- facetSectionStudyBackground: {
142
- backgroundColor: '#E4ECE9'
143
- },
144
- facetSectionLibrary: {
145
- color: '#7AA6B6'
146
- },
147
- facetSectionLibraryBackground: {
148
- backgroundColor: '#E4ECE9'
111
+ backgroundColor: '#C3EAF5'
149
112
  }
150
113
  });
151
114
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bento-core/query-bar",
3
- "version": "1.0.1-ccdihub.1",
3
+ "version": "1.0.1-icdc.0",
4
4
  "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/CheckboxFilter.js CHANGED
@@ -38,7 +38,7 @@ export default ({
38
38
  {idx === (maxItems - 1) ? null : ' '}
39
39
  </>
40
40
  ))}
41
- {items.length > maxItems && <span className={classes.ellipsis}>...</span>}
41
+ {items.length > maxItems && '...'}
42
42
  {items.length > 1 && <span className={classes.bracketsClose}>)</span>}
43
43
  </span>
44
44
  </span>
package/src/generators/QueryBarGenerator.js CHANGED
@@ -48,6 +48,8 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
48
48
  ? functions.resetFacetSlider
49
49
  : DEFAULT_CONFIG.functions.resetFacetSlider;
50
50
 
51
+ const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
52
+
51
53
  return {
52
54
  QueryBar: withStyles(DEFAULT_STYLES, { withTheme: true })((props) => {
53
55
  const { statusReducer, localFind, classes } = props;
@@ -113,7 +115,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
113
115
  className={clsx(classes.filterName, classes.localFindBackground)}
114
116
  onClick={clearAutocomplete}
115
117
  >
116
- Participant IDs
118
+ Case IDs
117
119
  </span>
118
120
  {' '}
119
121
  {' '}
@@ -163,19 +165,21 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
163
165
  ? <span className={classes.operators}> AND </span>
164
166
  : null}
165
167
  {mappedInputs.map((filter, index) => (
166
- <Filter
167
- index={index}
168
- type={filter.type}
169
- data={filter}
170
- maxItems={maxItems}
171
- classes={classes}
172
- onSectionClick={filter.type === CHECKBOX
173
- ? resetFacetSection
174
- : resetFacetSlider}
175
- onItemClick={filter.type === CHECKBOX
176
- ? resetFacetCheckbox
177
- : resetFacetSlider}
178
- />
168
+ <span className={clsName(filter.section)}>
169
+ <Filter
170
+ index={index}
171
+ type={filter.type}
172
+ data={filter}
173
+ maxItems={maxItems}
174
+ classes={classes}
175
+ onSectionClick={filter.type === CHECKBOX
176
+ ? resetFacetSection
177
+ : resetFacetSlider}
178
+ onItemClick={filter.type === CHECKBOX
179
+ ? resetFacetCheckbox
180
+ : resetFacetSlider}
181
+ />
182
+ </span>
179
183
  ))}
180
184
  </span>
181
185
  </div>
package/src/generators/styles.js CHANGED
@@ -9,51 +9,46 @@ export default () => ({
9
9
  overflowY: 'auto',
10
10
  },
11
11
  queryContainer: {
12
- marginLeft: 5,
12
+ marginLeft: 7,
13
13
  position: 'relative',
14
14
  lineHeight: '2.4em',
15
+ letterSpacing: '0.5px',
15
16
  fontFamily: 'Nunito',
16
17
  fontSize: '14px',
17
18
  color: '#0e3151',
18
19
  },
19
20
  filterName: {
20
21
  textTransform: 'uppercase',
21
- padding: '3px 6px 3px 6px',
22
+ padding: '5px 6px 5px 7px',
22
23
  borderRadius: 4,
23
24
  fontSize: 12,
24
25
  fontWeight: 600,
25
26
  cursor: 'pointer',
26
27
  },
27
28
  filterCheckboxes: {
28
- padding: '3px 6px 3px 6px',
29
- borderRadius: 5,
29
+ padding: '4px 7px 3px 6px',
30
+ borderRadius: 4,
30
31
  fontSize: 12,
31
32
  fontWeight: 600,
32
- border: '0.5px solid #646464',
33
+ border: '0.75px solid #898989',
33
34
  width: 'fit-content',
34
35
  backgroundColor: '#fff',
35
36
  cursor: 'pointer',
36
37
  },
37
38
  bracketsOpen: {
38
- fontSize: 20,
39
- fontFamily: 'Nunito',
40
- color: '#646464',
39
+ fontSize: 18,
40
+ fontFamily: 'Nunito Sans Semibold',
41
+ color: '#787878',
41
42
  marginRight: 3,
42
43
  fontWeight: 600,
43
44
  },
44
45
  bracketsClose: {
45
- fontSize: 20,
46
- fontFamily: 'Nunito',
47
- color: '#646464',
46
+ fontSize: 18,
47
+ fontFamily: 'Nunito Sans Semibold',
48
+ color: '#787878',
48
49
  marginLeft: 3,
49
50
  fontWeight: 600,
50
51
  },
51
- ellipsis: {
52
- fontFamily: 'Nunito',
53
- fontWeight: 600,
54
- fontSize: 10,
55
- marginLeft: 3,
56
- },
57
52
  operators: {
58
53
  color: '#646464',
59
54
  marginLeft: '3px',
@@ -72,32 +67,30 @@ export default () => ({
72
67
  borderRadius: '15px',
73
68
  fontFamily: 'Nunito',
74
69
  boxSizing: 'border-box',
75
- backgroundColor: '#646464',
70
+ backgroundColor: '#969696',
76
71
  textTransform: 'capitalize',
77
72
  border: '1px solid #B4B4B4',
78
73
  padding: '1px 5px 0px 6px',
79
74
  '&:hover': {
80
- backgroundColor: '#646464',
75
+ backgroundColor: '#969696',
81
76
  },
82
77
  },
83
78
  divider: {
84
- padding: '0 0 3px 0',
85
- fontSize: '23px',
86
- borderRight: '1px solid #969696',
79
+ borderRight: '2px solid #969696',
87
80
  marginLeft: 7,
88
81
  },
89
82
  /* Custom Styling by Project */
90
83
  localFind: {
91
- color: '#7AA6B6',
84
+ color: '#10A075',
92
85
  },
93
86
  localFindBackground: {
94
- backgroundColor: '#E4ECE9',
87
+ backgroundColor: '#C0E9D7',
95
88
  },
96
89
  facetSectionCases: {
97
- color: '#7AA6B6',
90
+ color: '#10A075',
98
91
  },
99
92
  facetSectionCasesBackground: {
100
- backgroundColor: '#E4ECE9',
93
+ backgroundColor: '#C0E9D7',
101
94
  },
102
95
  facetSectionFiles: {
103
96
  color: '#E636E4',
@@ -105,40 +98,10 @@ export default () => ({
105
98
  facetSectionFilesBackground: {
106
99
  backgroundColor: '#F5C3F1',
107
100
  },
108
- facetSectionDemographics: {
109
- color: '#7AA6B6',
110
- },
111
- facetSectionDemographicsBackground: {
112
- backgroundColor: '#E4ECE9',
113
- },
114
- facetSectionDiagnosis: {
115
- color: '#7AA6B6',
116
- },
117
- facetSectionDiagnosisBackground: {
118
- backgroundColor: '#E4ECE9',
119
- },
120
101
  facetSectionSamples: {
121
- color: '#7AA6B6',
102
+ color: '#10BEFF',
122
103
  },
123
104
  facetSectionSamplesBackground: {
124
- backgroundColor: '#E4ECE9',
125
- },
126
- facetSectionAssay: {
127
- color: '#7AA6B6',
128
- },
129
- facetSectionAssayBackground: {
130
- backgroundColor: '#E4ECE9',
131
- },
132
- facetSectionStudy: {
133
- color: '#7AA6B6',
134
- },
135
- facetSectionStudyBackground: {
136
- backgroundColor: '#E4ECE9',
137
- },
138
- facetSectionLibrary: {
139
- color: '#7AA6B6',
140
- },
141
- facetSectionLibraryBackground: {
142
- backgroundColor: '#E4ECE9',
105
+ backgroundColor: '#C3EAF5',
143
106
  },
144
107
  });