Element84 · bradleyandrick · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023
diff --git a/.prettierignore b/.prettierignore
@@ -2,5 +2,4 @@
 build
 coverage
 
-data/
-*.html
+data/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Refactor config to be a json object instead of separate exported constants
 - Changed config key names to remove the word `VITE` (leftover from when they were .env vars)
 - Refactor `default.js` to remove dead code and rename vars
+- Conditionally render E84 FilmDrop Logo based on config var for `SHOW_BRAND_LOGO``
 
 ### Fixed
 
@@ -40,6 +41,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Reusable System Message component for showing app alerts
 - Load `config.json` into redux on app load once instead of direct imports
 - Add pre-initialization page to handle and show error (and not render app) if config is missing
+- Add `SHOW_BRAND_LOGO` config option to optionally hide brand logo
 
 ### Removed
 

diff --git a/README.md b/README.md
@@ -90,6 +90,7 @@ The files `.env.example` and `./public/config/config.example.json` are included
 | BASEMAP_HTML_ATTRIBUTION | String of HTML markup used to set the attribution for the basemap provider used by the leaflet map. Markup is sanitized prior to render with `DOMPurify` and only is retricted to only allow `html`, `'a' tags`, and `'href'` and `'target'` attributes. Custom attribution will not render if `BASEMAP_URL` is not also set. If not set, the default attribution will be `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>`. (Note: Raw HTML was used here since attribution is non-standardized.) | Optional |
 | ADVANCED_SEARCH_ENABLED  | If set to `true` advanced search options will render and allow users to draw or upload a geojson file to use as search bounds.                                                                                                                                                                                                                                                                                                                                                                                                | Optional |
 | CART_ENABLED             | If set to `true` cart features will be enabled. These include: rendering cart button in search controls bar, adding cart management buttons to popup results, render buttons in messages to quickly add some or all scenes to cart after search completes.                                                                                                                                                                                                                                                                    | Optional |
+| SHOW_BRAND_LOGO          | If set to `true` filmdrop brand logo and clickable hyperlink are rendered at the top right of the UI. If not set or `false`, the logo will not be visible.                                                                                                                                                                                                                                                                                                                                                                    | Optional |
 
 ### Links
 

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "eslint-plugin-testing-library": "^5.11.0",
     "jsdom": "^22.0.0",
     "pre-commit": "^1.2.2",
-    "prettier": "3.0.0",
+    "prettier": "^3.0.0",
     "prettier-eslint": "^15.0.1",
     "prettier-eslint-cli": "^7.1.0",
     "remark-cli": "^11.0.0",

diff --git a/public/config/config.example.json b/public/config/config.example.json
@@ -100,5 +100,6 @@
   "BASEMAP_URL": "https://tile-provider.example.com/{z}/{x}/{y}.png",
   "BASEMAP_HTML_ATTRIBUTION": "&copy; <a href=\"https://www.tile-provider.example.com/copyright\">TileProvider</a>",
   "ADVANCED_SEARCH_ENABLED": false,
-  "CART_ENABLED": false
+  "CART_ENABLED": false,
+  "SHOW_BRAND_LOGO": true
 }
diff --git a/src/components/Layout/PageHeader/PageHeader.jsx b/src/components/Layout/PageHeader/PageHeader.jsx
@@ -38,16 +38,18 @@ const PageHeader = () => {
             </span>
           </Box>
         )}
-        <a
-          href="https://element84.com/filmdrop"
-          title="Learn more about FilmDrop"
-        >
-          <img
-            src={logoFilmDrop}
-            alt="FilmDrop by Element 84"
-            className="headerLogoImage filmDrop"
-          />
-        </a>
+        {_appConfig.SHOW_BRAND_LOGO && (
+          <a
+            href="https://element84.com/filmdrop"
+            title="Learn more about FilmDrop"
+          >
+            <img
+              src={logoFilmDrop}
+              alt="FilmDrop by Element 84"
+              className="headerLogoImage filmDrop"
+            />
+          </a>
+        )}
       </div>
     </div>
   )

diff --git a/src/components/Layout/PageHeader/PageHeader.test.jsx b/src/components/Layout/PageHeader/PageHeader.test.jsx
@@ -18,13 +18,26 @@ describe('PageHeader', () => {
     store.dispatch(setappConfig(mockAppConfig))
   })
   describe('on app render', () => {
-    it('should load the filmdrop logo into the document', () => {
+    it('should load the filmdrop logo into the document if SHOW_BRAND_LOGO set to true in config', () => {
       setup()
       expect(
-        screen.getByRole('img', {
+        screen.queryByRole('img', {
           name: /filmdrop by element 84/i
         })
       ).toBeInTheDocument()
     })
+    it('should not load the filmdrop logo into the document if SHOW_BRAND_LOGO set to false in config', () => {
+      const mockAppConfigSearchEnabled = {
+        ...mockAppConfig,
+        SHOW_BRAND_LOGO: false
+      }
+      store.dispatch(setappConfig(mockAppConfigSearchEnabled))
+      setup()
+      expect(
+        screen.queryByRole('img', {
+          name: /filmdrop by element 84/i
+        })
+      ).not.toBeInTheDocument()
+    })
   })
 })
diff --git a/src/testing/shared-mocks.js b/src/testing/shared-mocks.js
@@ -3546,5 +3546,6 @@ export const mockAppConfig = {
   BASEMAP_HTML_ATTRIBUTION:
     '&copy; <a href="https://www.tile-provider.example.com/copyright">TileProvider</a>',
   ADVANCED_SEARCH_ENABLED: false,
-  CART_ENABLED: false
+  CART_ENABLED: false,
+  SHOW_BRAND_LOGO: true
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,5 +2,4 @@ @@
     build
     coverage
-    data/
-    *.html
+    data/