feat: add optional help popup to advanced filter checkboxes

agrc · Jul 21, 2023 · d221c10 · d221c10
1 parent c3c1565
commit d221c10
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/public/config.json b/public/config.json
@@ -97,9 +97,10 @@
           "points": null,
           "lines": "improvement_type = 'Bus Rapid Transit'"
         },
-        "Gondola (this reflects the current status of the federally-mandated EIS process; if that process ultimately results in a modified approach, the RTP will be changed to reflect that modified approach)": {
+        "Gondola": {
           "points": null,
-          "lines": "improvement_type = 'Gondola'"
+          "lines": "improvement_type = 'Gondola'",
+          "helpTxt": "This reflects the current status of the federally-mandated EIS process; if that process ultimately results in a modified approach, the RTP will be changed to reflect that modified approach."
         },
         "Core Routes": {
           "points": null,
@@ -212,7 +213,7 @@
     "newCommentsEnabled": false,
     "newCommentsEnabledUntil": "2023-02-27T00:00:00.000Z"
   },
-  "rtpInfoLink":"https://wfrc.org/vision-plans/regional-transportation-plan/2023-2050-regional-transportation-plan/",
+  "rtpInfoLink": "https://wfrc.org/vision-plans/regional-transportation-plan/2023-2050-regional-transportation-plan/",
   "sherlock": {
     "placeHolder": "trans:searchPlaceholder",
     "searchField": "NAME",

diff --git a/public/config.schema.json b/public/config.schema.json
@@ -17,6 +17,11 @@
           "description": "The query that will be applied to the point layers",
           "title": "Points Query",
           "type": ["string", "null"]
+        },
+        "helpTxt": {
+          "description": "Optionally show a '?' popup with help text",
+          "title": "Help Text",
+          "type": ["string"]
         }
       },
       "required": ["lines", "points"],

diff --git a/src/components/AdvancedControls.jsx b/src/components/AdvancedControls.jsx
@@ -71,6 +71,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                   color={labelColors?.road}
                   onChange={() => dispatch({ type: 'projectType', payload: name, meta: 'road' })}
                   disabled={disabled || !state.mode.includes(config.filter.symbolValues.mode.road)}
+                  helpTxt={config.filter.projectTypes.road[name].helpTxt}
                 />
               ))}
               {config.filter.limitFacilityType?.modes?.includes('road') ? (
@@ -116,6 +117,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                   color={labelColors?.transit}
                   onChange={() => dispatch({ type: 'projectType', payload: name, meta: 'transit' })}
                   disabled={disabled || !state.mode.includes(config.filter.symbolValues.mode.transit)}
+                  helpTxt={config.filter.projectTypes.transit[name].helpTxt}
                 />
               ))}
               {config.filter.limitFacilityType?.modes?.includes('transit') ? (
@@ -169,6 +171,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                     color={labelColors?.activeTransportation}
                     onChange={() => dispatch({ type: 'projectType', payload: name, meta: 'activeTransportation' })}
                     disabled={disabled || !state.mode.includes(config.filter.symbolValues.mode.activeTransportation)}
+                    helpTxt={config.filter.projectTypes.activeTransportation[name].helpTxt}
                   />
                 ))}
             </Col>
@@ -184,6 +187,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                     color={labelColors?.activeTransportation}
                     onChange={() => dispatch({ type: 'projectType', payload: name, meta: 'activeTransportation' })}
                     disabled={disabled || !state.mode.includes(config.filter.symbolValues.mode.activeTransportation)}
+                    helpTxt={config.filter.projectTypes.activeTransportation[name].helpTxt}
                   />
                 ))}
               {config.filter.limitFacilityType?.modes?.includes('activeTransportation') ? (

diff --git a/src/components/Checkbox.jsx b/src/components/Checkbox.jsx
@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { FormGroup, Input, Label } from 'reactstrap';
+import InfoPopup from './InfoPopup';
 
-export default function Checkbox({ label, checked, color, onChange, uniqueId, disabled, indent = false }) {
+export default function Checkbox({ label, checked, color, onChange, uniqueId, disabled, indent = false, helpTxt }) {
   const setIndeterminate = (ref) => {
     if (ref) {
       ref.indeterminate = checked === null;
@@ -23,6 +24,7 @@ export default function Checkbox({ label, checked, color, onChange, uniqueId, di
         <Label check for={uniqueId ?? label} style={{ marginBottom: 0, color }}>
           {` ${label}`}
         </Label>
+        {helpTxt ? <InfoPopup content={helpTxt} className="ms-2" style={{ color }} /> : null}
       </FormGroup>
     </>
   );
@@ -36,4 +38,5 @@ Checkbox.propTypes = {
   uniqueId: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
   indent: PropTypes.bool,
+  helpTxt: PropTypes.string,
 };
diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.jsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Popover from 'bootstrap/js/dist/popover';
 import PropTypes from 'prop-types';
 
-export default function InfoPopup({ content, className }) {
+export default function InfoPopup({ content, className, style }) {
   const setUp = (ref) => {
     if (ref) {
       new Popover(ref, {
@@ -17,12 +17,13 @@ export default function InfoPopup({ content, className }) {
   };
 
   return (
-    <span tabIndex="0" ref={setUp} className={className}>
+    <span tabIndex="0" ref={setUp} className={className} style={style}>
       <FontAwesomeIcon icon={faCircleQuestion} />
     </span>
   );
 }
 InfoPopup.propTypes = {
   content: PropTypes.string.isRequired,
   className: PropTypes.string.isRequired,
+  style: PropTypes.object,
 };