From d221c10ca9237142e87492797e95d4973490831f Mon Sep 17 00:00:00 2001 From: stdavis Date: Fri, 21 Jul 2023 10:36:28 -0600 Subject: [PATCH] feat: add optional help popup to advanced filter checkboxes --- public/config.json | 7 ++++--- public/config.schema.json | 5 +++++ src/components/AdvancedControls.jsx | 4 ++++ src/components/Checkbox.jsx | 5 ++++- src/components/InfoPopup.jsx | 5 +++-- 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/public/config.json b/public/config.json index 08b6ef3..ca9a9b5 100644 --- 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 index afb0558..c660de1 100644 --- 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 index 105db8c..150d718 100644 --- 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} /> ))} @@ -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 index a182954..a5910fb 100644 --- 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 + {helpTxt ? : null} ); @@ -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 index 6bf593c..9bcc17b 100644 --- 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,7 +17,7 @@ export default function InfoPopup({ content, className }) { }; return ( - + ); @@ -25,4 +25,5 @@ export default function InfoPopup({ content, className }) { InfoPopup.propTypes = { content: PropTypes.string.isRequired, className: PropTypes.string.isRequired, + style: PropTypes.object, };