feat: add configurable "RTP Info" link to header

BREAKING CHANGE: added `rtpInfoLink` required config prop Closes #150
agrc · Apr 13, 2023 · 670b98b · 670b98b
1 parent 57cb3fa
commit 670b98b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/public/config.json b/public/config.json
@@ -194,6 +194,7 @@
     "newCommentsEnabled": false,
     "newCommentsEnabledUntil": "2030-01-31T00:00:00.000Z"
   },
+  "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
@@ -56,6 +56,7 @@
     "openOnLoad",
     "outFields",
     "projectInformation",
+    "rtpInfoLink",
     "sherlock",
     "splashScreen",
     "translations",
@@ -543,6 +544,11 @@
         }
       }
     },
+    "rtpInfoLink": {
+      "title": "RTP Info Link",
+      "description": "The URL to the RTP Info page",
+      "type": "string"
+    },
     "sherlock": {
       "title": "Sherlock Widget Config",
       "description": "Configuration options for the map search widget",

diff --git a/src/App.jsx b/src/App.jsx
@@ -280,12 +280,17 @@ function App() {
         <div className="d-flex flex-fill flex-column">
           <div className="m-3 title d-flex flex-row justify-content-between align-items-center">
             <h4 className="my-0">{config.appTitle}</h4>
-            <FontAwesomeIcon
-              icon={faCircleQuestion}
-              onClick={() => setAboutIsOpen(!aboutIsOpen)}
-              role="button"
-              size="xl"
-            />
+            <div className="d-flex flex-row">
+              <a href={config.rtpInfoLink} target="_blank" rel="noopener noreferrer" className="me-2">
+                RTP Info
+              </a>
+              <FontAwesomeIcon
+                icon={faCircleQuestion}
+                onClick={() => setAboutIsOpen(!aboutIsOpen)}
+                role="button"
+                size="xl"
+              />
+            </div>
           </div>
           <div id="mapDiv" className="flex-fill position-relative border-top">
             <MapWidgetContainer openStates={[filterIsOpen, projectInfoIsOpen]}>

diff --git a/src/App.scss b/src/App.scss
@@ -4,7 +4,9 @@
 @import '../node_modules/@ugrc/layer-selector/src/LayerSelector.css';
 
 .title {
-  font-family: Montserrat, Arial, sans-serif;
+  h4 {
+    font-family: Montserrat, Arial, sans-serif;
+  }
   color: $highlightColor;
 }