Add ability to hide search from main nav (#98)

* Add ability to hide search from main nav * Fix mobile menu links not working when clicked and visbility set * Bump to 1.16.0
GetDKAN · Feb 7, 2023 · 09ff44a · 09ff44a
1 parent 9be3888
commit 09ff44a
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "1.16.0-alpha.2",
+  "version": "1.16.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/NavLink/index.jsx b/src/components/NavLink/index.jsx
@@ -6,7 +6,7 @@ import validator from 'validator';
 const NavLink = ({ link, className, wrapLabel }) => {
   const innerHtml = wrapLabel ? <span>{link.label}</span> : link.label;
 
-  if (validator.isURL(link.url, { require_protocol: true })) {
+  if (validator.isURL(link.url, { require_protocol: true }) || link.nonReactLink) {
     return (
       <a className={className} href={link.url}>
         {innerHtml}
@@ -33,6 +33,7 @@ NavLink.propTypes = {
   link: PropTypes.shape({
     url: PropTypes.string,
     label: PropTypes.string,
+    nonReactLink: PropTypes.bool,
   }).isRequired,
   className: PropTypes.string,
   /**

diff --git a/src/templates/header/index.jsx b/src/templates/header/index.jsx
@@ -16,6 +16,7 @@ const Header = ({
   includeTopNav,
   inversedModalButton,
   inversedSearchButton,
+  includeSearch,
 }) => {
   const { url, tagline, logo, urlTitle, logoAltText } = org;
   const headerClassString = headerClasses ?? 'dc-c-header ds-base';
@@ -59,17 +60,19 @@ const Header = ({
               menuClasses="ds-u-display--flex dc-c-header--links ds-u-align-items--center"
               linkClasses={linkClasses}
             />
-            <div className="dc-c-main-navigation--search ds-u-margin-left--auto ds-u-lg-padding-left--1 ds-u-xl-padding-left--3">
-              {customSearch ? (
-                customSearch
-              ) : (
-                <SearchModal
-                  searchModalText={searchModalText}
-                  inversedModalButton={inversedModalButton}
-                  inversedSearchButton={inversedSearchButton}
-                />
-              )}
-            </div>
+            {includeSearch && (
+              <div className="dc-c-main-navigation--search ds-u-margin-left--auto ds-u-lg-padding-left--1 ds-u-xl-padding-left--3">
+                {customSearch ? (
+                  customSearch
+                ) : (
+                  <SearchModal
+                    searchModalText={searchModalText}
+                    inversedModalButton={inversedModalButton}
+                    inversedSearchButton={inversedSearchButton}
+                  />
+                )}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -88,12 +91,14 @@ Header.defaultProps = {
   includeTopNav: true,
   customSearch: false,
   linkClasses: 'ds-u-xl-margin-right--4 ds-u-margin-right--3 ds-u-padding-y--3',
+  includeSearch: true,
 };
 
 Header.propTypes = {
   siteName: PropTypes.node.isRequired,
   includeTopNav: PropTypes.bool,
   linkClasses: PropTypes.string,
+  includeSearch: PropTypes.bool,
 };
 
 export default Header;
diff --git a/src/templates/mobile_header/index.jsx b/src/templates/mobile_header/index.jsx
@@ -16,6 +16,7 @@ const MobileHeader = ({
   includeTopNav,
   inversedModalButton,
   inversedSearchButton,
+  includeSearch,
 }) => {
   const { url, logo, urlTitle, logoAltText, inverseLogo } = org;
 
@@ -32,7 +33,7 @@ const MobileHeader = ({
     function handleClick(event) {
       // Links are wrapped in spans, this checks if the parent is an A, also check if in the search modal.
       if (
-        event.target.parentElement.nodeName === 'A' ||
+        // event.target.parentElement.nodeName === 'A' ||
         event.target.closest('.dc-c-search-dialog')
       ) {
         setMenuOpen(false);
@@ -99,21 +100,23 @@ const MobileHeader = ({
             <span className="ds-h1">{siteName}</span>
           </Link>
         </div>
-        <div className="dc-c-mobile-menu--search">
-          {customSearch ? (
-            customSearch
-          ) : (
-            <SearchModal
-              searchFunc={(e) => {
-                e.preventDefault();
-              }}
-              searchModalText={searchModalText}
-              buttonSize={'small'}
-              inversedModalButton={inversedModalButton}
-              inversedSearchButton={inversedSearchButton}
-            />
-          )}
-        </div>
+        {includeSearch && (
+          <div className="dc-c-mobile-menu--search">
+            {customSearch ? (
+              customSearch
+            ) : (
+              <SearchModal
+                searchFunc={(e) => {
+                  e.preventDefault();
+                }}
+                searchModalText={searchModalText}
+                buttonSize={'small'}
+                inversedModalButton={inversedModalButton}
+                inversedSearchButton={inversedSearchButton}
+              />
+            )}
+          </div>
+        )}
       </div>
       <div className="dc-c-mobile-header--menu" ref={menu}>
         <div className="ds-u-display--flex dc-c-mobile-header--menu-close ds-u-justify-content--between">
@@ -126,7 +129,7 @@ const MobileHeader = ({
           >
             Close
           </Button>
-          {tablet && (
+          {tablet && includeSearch && (
             <div className="dc-c-mobile-menu--search">
               {customSearch ? (
                 customSearch
@@ -177,6 +180,7 @@ MobileHeader.defaultProps = {
     inverseLogo: cmsLogoWhite,
   },
   includeTopNav: true,
+  includeSearch: true,
 };
 
 export default MobileHeader;