@blaze-cms/react-page-builder 0.123.0-alpha.3 → 0.123.0-alpha.6

package/src/components/DataSummary/helpers/build-props-to-display-with-content.js

@@ -3,6 +3,7 @@ import flatten from 'lodash.flatten';
 import { isObject } from '../../../helpers';
 import getLinkToPublishedContent from './get-link-to-published-content';
 import getPropValue from './get-prop-value';
+import getLinkBasedOnValue from './get-link-based-on-value';
 
 const buildPropsToDisplayWithContent = (props, propsToDisplay = []) => {
   if (!isObject(propsToDisplay[0])) {
@@ -19,18 +20,29 @@ const buildPropsToDisplayWithContent = (props, propsToDisplay = []) => {
 
   return flatten(
     propsToDisplay.map(options => {
-      const { propertiesToDisplay, label, modifier = '' } = options;
+      const { propertiesToDisplay, label, modifier = '', enableLink } = options;
       return propertiesToDisplay.map(key => {
         if (!key) return null;
 
         const objPropValue = getPropValue(key, props, options);
         if (!objPropValue) return null;
-        const linkToPublishedContent = getLinkToPublishedContent(key, props);
 
-        return [upperFirst(label), objPropValue, linkToPublishedContent, modifier];
+        const link = getLink(enableLink, key, props, objPropValue);
+
+        return [upperFirst(label), objPropValue, link, modifier];
       });
     })
   ).filter(Boolean);
 };
 
 export default buildPropsToDisplayWithContent;
+function getLink(enableLink, key, props, objPropValue) {
+  let link = '';
+  if (enableLink) {
+    link = getLinkToPublishedContent(key, props);
+    if (!link) {
+      link = getLinkBasedOnValue(objPropValue);
+    }
+  }
+  return link;
+}

package/src/components/DataSummary/helpers/get-link-based-on-value.js

@@ -0,0 +1,14 @@
+import { DATA_SUMMARY_EMAIL_REGEX, DATA_SUMMARY_URL_REGEX } from '../../../constants';
+
+function getLinkBasedOnValue(value) {
+  if (DATA_SUMMARY_EMAIL_REGEX.test(value)) {
+    return `mailto:${value}`;
+  }
+  if (DATA_SUMMARY_URL_REGEX.test(value)) {
+    return value;
+  }
+
+  return '';
+}
+
+export default getLinkBasedOnValue;

package/src/components/DataSummary/helpers/index.js

@@ -4,6 +4,7 @@ import getLinkToPublishedContent from './get-link-to-published-content';
 import stripSummaryPropsContent from './strip-summary-props-content';
 import buildLoopPropsContent from './build-loop-props-content';
 import parseBooleanValues from './parse-boolean-values';
+import getLinkBasedOnValue from './get-link-based-on-value';
 
 export {
   getDataSummaryQuery,
@@ -11,5 +12,6 @@ export {
   getLinkToPublishedContent,
   stripSummaryPropsContent,
   buildLoopPropsContent,
-  parseBooleanValues
+  parseBooleanValues,
+  getLinkBasedOnValue
 };

package/src/components/Menu/Menu.js

@@ -16,12 +16,15 @@ const Menu = ({
   mobileButtonModifier,
   hamburgerIconModifier,
   searchInputAlignment,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
   logoOnMobile,
   logoOnDesktop,
   logoOnMobileUrl,
   logoOnMobileAlt,
   logoOnMobileModifier,
   logoOnDesktopModifier,
+
   closeIconModifier,
   entity,
   ...rest
@@ -57,18 +60,14 @@ const Menu = ({
                 )}
               </i>
             </BlazeButton>
-            {showMobileMenu && (
-              <SearchContent searchInputAlignment={searchInputAlignment} entity={entity} />
-            )}
           </div>
         </div>
       )}
-      {logoOnMobile &&
-        !showMobileMenu && (
-          <a href="/">
-            <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
-          </a>
-        )}
+      {logoOnMobile && (
+        <a href="/">
+          <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
+        </a>
+      )}
 
       <div className="menu--desktop-wrapper">
         <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>
@@ -78,6 +77,17 @@ const Menu = ({
             </a>
           )}
           {children}
+          {searchInputAlignment === 'right' && (
+            <li>
+              <SearchContent
+                searchInputWrapperMobile={searchInputWrapperMobile}
+                searchInputWrapperDesktop={searchInputWrapperDesktop}
+                searchInputAlignment={searchInputAlignment}
+                entity={entity}
+                isMobile={isMobile}
+              />
+            </li>
+          )}
         </ul>
       </div>
     </>
@@ -99,8 +109,10 @@ Menu.propTypes = {
   mobileMenuChildrenModifier: PropTypes.string,
   modifier: PropTypes.string,
   mobileIconAlignment: PropTypes.string,
-  searchInputAlignment: PropTypes.string,
   entity: PropTypes.string,
+  searchInputAlignment: PropTypes.string,
+  searchInputWrapperMobile: PropTypes.string,
+  searchInputWrapperDesktop: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
@@ -115,7 +127,9 @@ Menu.defaultProps = {
   mobileIconAlignment: '',
   mobileMenuModifier: '',
   mobileMenuChildrenModifier: '',
-  searchInputAlignment: '',
+  searchInputAlignment: 'right',
+  searchInputWrapperMobile: '',
+  searchInputWrapperDesktop: '',
   modifier: '',
   entity: 'PublishedPage',
   children: []

package/src/components/SearchContent/index.js

@@ -1,20 +1,20 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { gql, useQuery } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { getPublishedContent } from '../../application/query';
-
-const SearchContent = ({ searchInputAlignment, entity }) => {
+import BlazeLink from '../BlazeLink';
+
+const SearchContent = ({
+  entity,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
+  isMobile
+}) => {
   const [collapsed, setCollapsed] = useState(true);
   const [searchTerm, setSearchTerm] = useState(null);
   const router = useRouter();
 
-  let alignmentModifier = '';
-
-  if (searchInputAlignment && searchInputAlignment !== '') {
-    alignmentModifier = searchInputAlignment === 'left' ? 'left-6' : 'right-16';
-  }
-
   const capitalize = s => {
     if (typeof s !== 'string') return '';
     return s.charAt(0).toUpperCase() + s.slice(1);
@@ -51,22 +51,22 @@ const SearchContent = ({ searchInputAlignment, entity }) => {
   if (loading) return null;
   if (error) return `Error! ${error}`;
 
+  const handleClick = (e, url) => {
+    e.preventDefault();
+    router.push(url);
+  };
+
   const renderResults = () => {
     // eslint-disable-next-line no-undef
     const { results } = data?.searchPublishedContent;
 
-    const handleClick = (e, url) => {
-      e.preventDefault();
-      router.push(url);
-    };
-
     if (results && searchTerm && searchTerm !== '') {
       return results.map(({ name, url }) => {
         if (name.match(searchTerm)) {
           return (
-            <a href={url} onClick={e => handleClick(e, url)}>
+            <BlazeLink href={url} onClick={e => handleClick(e, url)}>
               {name}
-            </a>
+            </BlazeLink>
           );
         }
 
@@ -80,7 +80,7 @@ const SearchContent = ({ searchInputAlignment, entity }) => {
   const searchResultsMessage = searchTerm ? `Search results for: ${searchTerm}` : '';
 
   return collapsed ? (
-    <div className={`absolute rounded-3xl overflow-clip top-3 ${alignmentModifier}`}>
+    <div className={isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}>
       <div className="w-11 mx-auto">
         <label className="relative block">
           <span className="absolute inset-y-0 right-3 flex items-center pl-2 cursor-pointer">
@@ -99,14 +99,14 @@ const SearchContent = ({ searchInputAlignment, entity }) => {
             type="text"
             name="search"
             value=""
-            className="disabled:bg-white block bg-white w-full rounded-full py-2 pl-5 pr-3 placeholder:italic placeholder:text-gray-400 focus:outline-none sm:text-sm"
+            className="disabled:bg-white block bg-white w-full rounded-none border-white py-2 pl-5 pr-3 placeholder:italic placeholder:text-gray-400 focus:outline-none sm:text-sm"
           />
         </label>
       </div>
     </div>
   ) : (
     <>
-      <div className={`absolute  overflow-clip top-3 ${alignmentModifier}`}>
+      <div className={`${isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}`}>
         <div className="w-96 mx-auto rounded-3xl">
           <label className="relative block">
             <span className="absolute inset-y-0 right-3 flex items-center pl-2">
@@ -123,31 +123,41 @@ const SearchContent = ({ searchInputAlignment, entity }) => {
               type="text"
               name="search"
               onChange={e => setSearchTerm(e.target.value)}
-              className="block bg-white w-full rounded-full py-2 pl-3 pr-3 placeholder:italic placeholder:text-slate-400 focus:outline-none sm:text-sm"
+              className="block w-full rounded-full rounded-white py-2 pl-3 pr-3 placeholder:italic placeholder:text-slate-400 focus:outline-none sm:text-sm"
               placeholder="Search for anything..."
-              onBlur={() => setCollapsed(true)}
+              onBlur={() => {
+                if (!searchTerm || searchTerm === '') setCollapsed(true);
+              }}
             />
           </label>
         </div>
-        <div className="bg-white ml-1 mr-1 rounded rounded-lg relative top-0 flex flex-col">
-          <div className="text-sm pt-2">{searchResultsMessage}</div>
-
-          <div className="text-left px-4 py-2">
-            <div className="text-bold">{data && renderResults()}</div>
-          </div>
-        </div>
+        {data &&
+          searchResultsMessage !== '' && (
+            <div className="bg-white ml-1 mr-1 rounded rounded-lg relative top-0 flex flex-col z-50 border-2 border-gray-50">
+              <div className="text-sm pt-2">{searchResultsMessage}</div>
+
+              <div className="text-left px-4 py-2">
+                <div className="text-bold">{renderResults()}</div>
+              </div>
+            </div>
+          )}
       </div>
     </>
   );
 };
 
 SearchContent.propTypes = {
-  searchInputAlignment: PropTypes.string,
+  searchInputWrapperMobile: PropTypes.string,
+  searchInputWrapperDesktop: PropTypes.string,
+  isMobile: PropTypes.bool,
   entity: PropTypes.string.isRequired
 };
 
 SearchContent.defaultProps = {
-  searchInputAlignment: ''
+  searchInputAlignment: '',
+  searchInputWrapperMobile: '',
+  searchInputWrapperDesktop: '',
+  isMobile: false
 };
 
 export default SearchContent;

package/src/constants/index.js

@@ -205,6 +205,9 @@ const BANNER_LOADED = 'loaded';
 const ANCHOR_TAG = 'a';
 const TARGET_BLANK = '_blank';
 
+const DATA_SUMMARY_EMAIL_REGEX = /^([a-z0-9_\.\+-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
+const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -313,5 +316,7 @@ export {
   AZ,
   SCROLL_OFFSET,
   ANCHOR_TAG,
-  TARGET_BLANK
+  TARGET_BLANK,
+  DATA_SUMMARY_EMAIL_REGEX,
+  DATA_SUMMARY_URL_REGEX
 };

package/tests/unit/src/components/DataSummary/helpers/build-props-to-display-with-content.test.js

@@ -27,4 +27,26 @@ describe('build props to display func', () => {
   it('should return an empty array if no values are passed', () => {
     expect(emptyPropsToDisplay.length).toEqual(0);
   });
+
+  it('should add link if enableLink=true', () => {
+    const obj = {
+      name: 'Item name',
+      url: '/url',
+      email: 'email@blazecms.app'
+    };
+    const propsTorDisplay = [
+      {
+        propertiesToDisplay: ['name'],
+        enableLink: false
+      },
+      {
+        propertiesToDisplay: ['email'],
+        enableLink: true
+      }
+    ];
+    const [nameProp, emailProp] = buildPropsToDisplayWithContent(obj, propsTorDisplay);
+
+    expect(nameProp[2]).toEqual('');
+    expect(emailProp[2]).toEqual('mailto:email@blazecms.app');
+  });
 });

package/tests/unit/src/components/DataSummary/helpers/get-link-based-on-value.test.js

@@ -0,0 +1,29 @@
+/**
+ * @testEnvironment node
+ */
+import { getLinkBasedOnValue } from '../../../../../../src/components/DataSummary/helpers';
+
+describe('Get link based on value', () => {
+  it('should be a function', () => {
+    expect(typeof getLinkBasedOnValue).toEqual('function');
+  });
+
+  it('should not return link if value does not match values', () => {
+    const result = getLinkBasedOnValue('not matched');
+    expect(result).toEqual('');
+  });
+
+  it('should return mailto: link for email string', () => {
+    const email = 'email@blazecms.app';
+    const result = getLinkBasedOnValue(email);
+    expect(result).toEqual(`mailto:${email}`);
+  });
+
+  it('should return url link with or without scheme', () => {
+    const urls = ['https://www.blazecms.app/path?query=string', 'blazecms.app/page'];
+    urls.forEach(url => {
+      expect(getLinkBasedOnValue(url)).toEqual(url);
+    });
+    expect.hasAssertions();
+  });
+});