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

package/dist/generators/QueryBarGenerator.js

@@ -40,6 +40,10 @@ const QueryBarGenerator = function QueryBarGenerator() {
   const resetFacetSection = functions && typeof functions.resetFacetSection === 'function' ? functions.resetFacetSection : _config.default.functions.resetFacetSection;
   const resetFacetCheckbox = functions && typeof functions.resetFacetCheckbox === 'function' ? functions.resetFacetCheckbox : _config.default.functions.resetFacetCheckbox;
   const resetFacetSlider = functions && typeof functions.resetFacetSlider === 'function' ? functions.resetFacetSlider : _config.default.functions.resetFacetSlider;
+  const clsName = function clsName() {
+    let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'filter-section';
+    return text.replace(/\s+/g, '-').toLowerCase();
+  };
   return {
     QueryBar: (0, _core.withStyles)(_styles.default, {
       withTheme: true
@@ -97,7 +101,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
       }, "INPUT CASE SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
         onClick: clearAutocomplete
-      }, "Participant IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
+      }, "Case IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
       }, 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", {
         className: classes.bracketsOpen
@@ -112,7 +116,9 @@ const QueryBarGenerator = function QueryBarGenerator() {
         className: classes.bracketsClose
       }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
-      }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
+      }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement("span", {
+        className: clsName(filter.section)
+      }, /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
         index: index,
         type: filter.type,
         data: filter,
@@ -120,7 +126,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
         classes: classes,
         onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
         onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
-      }))));
+      })))));
     })
   };
 };

package/dist/generators/styles.js

@@ -73,12 +73,12 @@ var _default = () => ({
     borderRadius: '15px',
     fontFamily: 'Nunito',
     boxSizing: 'border-box',
-    backgroundColor: '#646464',
+    backgroundColor: '#969696',
     textTransform: 'capitalize',
     border: '1px solid #B4B4B4',
     padding: '1px 5px 0px 6px',
     '&:hover': {
-      backgroundColor: '#646464'
+      backgroundColor: '#969696'
     }
   },
   divider: {
@@ -87,16 +87,16 @@ var _default = () => ({
   },
   /* Custom Styling by Project */
   localFind: {
-    color: '#7AA6B6'
+    color: '#10A075'
   },
   localFindBackground: {
-    backgroundColor: '#E4ECE9'
+    backgroundColor: '#C0E9D7'
   },
   facetSectionCases: {
-    color: '#7AA6B6'
+    color: '#10A075'
   },
   facetSectionCasesBackground: {
-    backgroundColor: '#E4ECE9'
+    backgroundColor: '#C0E9D7'
   },
   facetSectionFiles: {
     color: '#E636E4'
@@ -104,41 +104,11 @@ var _default = () => ({
   facetSectionFilesBackground: {
     backgroundColor: '#F5C3F1'
   },
-  facetSectionDemographics: {
-    color: '#7AA6B6'
-  },
-  facetSectionDemographicsBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionDiagnosis: {
-    color: '#7AA6B6'
-  },
-  facetSectionDiagnosisBackground: {
-    backgroundColor: '#E4ECE9'
-  },
   facetSectionSamples: {
-    color: '#7AA6B6'
+    color: '#10BEFF'
   },
   facetSectionSamplesBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionAssay: {
-    color: '#7AA6B6'
-  },
-  facetSectionAssayBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionStudy: {
-    color: '#7AA6B6'
-  },
-  facetSectionStudyBackground: {
-    backgroundColor: '#E4ECE9'
-  },
-  facetSectionLibrary: {
-    color: '#7AA6B6'
-  },
-  facetSectionLibraryBackground: {
-    backgroundColor: '#E4ECE9'
+    backgroundColor: '#C3EAF5'
   }
 });
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-ccdihub.0",
+  "version": "1.0.1-icdc.0",
   "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:",
   "main": "dist/index.js",
   "scripts": {

package/src/generators/QueryBarGenerator.js

@@ -48,6 +48,8 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? functions.resetFacetSlider
     : DEFAULT_CONFIG.functions.resetFacetSlider;
 
+  const clsName = (text = 'filter-section') => text.replace(/\s+/g, '-').toLowerCase();
+
   return {
     QueryBar: withStyles(DEFAULT_STYLES, { withTheme: true })((props) => {
       const { statusReducer, localFind, classes } = props;
@@ -113,7 +115,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                         className={clsx(classes.filterName, classes.localFindBackground)}
                         onClick={clearAutocomplete}
                       >
-                        Participant IDs
+                        Case IDs
                       </span>
                       {' '}
                       {' '}
@@ -163,19 +165,21 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
               ? <span className={classes.operators}> AND </span>
               : null}
             {mappedInputs.map((filter, index) => (
-              <Filter
-                index={index}
-                type={filter.type}
-                data={filter}
-                maxItems={maxItems}
-                classes={classes}
-                onSectionClick={filter.type === CHECKBOX
-                  ? resetFacetSection
-                  : resetFacetSlider}
-                onItemClick={filter.type === CHECKBOX
-                  ? resetFacetCheckbox
-                  : resetFacetSlider}
-              />
+              <span className={clsName(filter.section)}>
+                <Filter
+                  index={index}
+                  type={filter.type}
+                  data={filter}
+                  maxItems={maxItems}
+                  classes={classes}
+                  onSectionClick={filter.type === CHECKBOX
+                    ? resetFacetSection
+                    : resetFacetSlider}
+                  onItemClick={filter.type === CHECKBOX
+                    ? resetFacetCheckbox
+                    : resetFacetSlider}
+                />
+              </span>
             ))}
           </span>
         </div>

package/src/generators/styles.js

@@ -67,12 +67,12 @@ export default () => ({
     borderRadius: '15px',
     fontFamily: 'Nunito',
     boxSizing: 'border-box',
-    backgroundColor: '#646464',
+    backgroundColor: '#969696',
     textTransform: 'capitalize',
     border: '1px solid #B4B4B4',
     padding: '1px 5px 0px 6px',
     '&:hover': {
-      backgroundColor: '#646464',
+      backgroundColor: '#969696',
     },
   },
   divider: {
@@ -81,16 +81,16 @@ export default () => ({
   },
   /* Custom Styling by Project */
   localFind: {
-    color: '#7AA6B6',
+    color: '#10A075',
   },
   localFindBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#C0E9D7',
   },
   facetSectionCases: {
-    color: '#7AA6B6',
+    color: '#10A075',
   },
   facetSectionCasesBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#C0E9D7',
   },
   facetSectionFiles: {
     color: '#E636E4',
@@ -98,40 +98,10 @@ export default () => ({
   facetSectionFilesBackground: {
     backgroundColor: '#F5C3F1',
   },
-  facetSectionDemographics: {
-    color: '#7AA6B6',
-  },
-  facetSectionDemographicsBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionDiagnosis: {
-    color: '#7AA6B6',
-  },
-  facetSectionDiagnosisBackground: {
-    backgroundColor: '#E4ECE9',
-  },
   facetSectionSamples: {
-    color: '#7AA6B6',
+    color: '#10BEFF',
   },
   facetSectionSamplesBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionAssay: {
-    color: '#7AA6B6',
-  },
-  facetSectionAssayBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionStudy: {
-    color: '#7AA6B6',
-  },
-  facetSectionStudyBackground: {
-    backgroundColor: '#E4ECE9',
-  },
-  facetSectionLibrary: {
-    color: '#7AA6B6',
-  },
-  facetSectionLibraryBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#C3EAF5',
   },
 });