@blaze-cms/react-page-builder 0.122.1 → 0.123.0-alpha.12

package/src/components/Card/CardRender.js

@@ -134,8 +134,12 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherPr
   if (hasError) return null;
   if (cardsError) return cardsError.message;
   let { results: cardData } = data[SEARCH_PUBLISHED_CONTENT];
+
   if (!cardData || !cardData.length) return null;
+
   cardData = entitySameAsCurrentItemEntity ? removeExtraItems(cardData, limit, itemId) : cardData;
+  if (!cardData.length) return null;
+
   const orderedData = useRandomSort ? cardData : sortResponseData(cardData, itemsToDisplay);
   const { regularChildren, gtmChildren } = splitChildren(children, cardData, entity, {
     name: variableProps.name

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

@@ -4,6 +4,7 @@ import BlazeButton from '@blaze-react/button';
 import { MdMenu, MdClose } from 'react-icons/md';
 import { useCheckMobileScreen } from '../../hooks';
 import { HIDDEN } from '../../constants';
+import SearchContent from '../SearchContent';
 
 const Menu = ({
   children,
@@ -14,7 +15,18 @@ const Menu = ({
   mobileIconAlignment,
   mobileButtonModifier,
   hamburgerIconModifier,
+  searchInputAlignment,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
+  logoOnMobile,
+  logoOnDesktop,
+  logoOnMobileUrl,
+  logoOnMobileAlt,
+  logoOnMobileModifier,
+  logoOnDesktopModifier,
+  logoOnDesktopAlignment,
   closeIconModifier,
+  entity,
   ...rest
 }) => {
   const isMobile = useCheckMobileScreen();
@@ -34,7 +46,7 @@ const Menu = ({
   return (
     <>
       {collapse && (
-        <div className="top-0 absolute z-50">
+        <div className="menu--mobile-wrapper">
           <div
             className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
             <BlazeButton
@@ -51,13 +63,72 @@ const Menu = ({
           </div>
         </div>
       )}
-      <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>
+      {logoOnMobile && (
+        <a href="/">
+          <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
+        </a>
+      )}
+
+      <div className="menu--desktop-wrapper">
+        <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>
+          {logoOnDesktop &&
+            logoOnDesktopAlignment === 'left' && (
+              <a href="/" className="">
+                <img
+                  src={logoOnMobileUrl}
+                  alt={logoOnMobileAlt}
+                  className={logoOnDesktopModifier}
+                />
+              </a>
+            )}
+          {searchInputAlignment === 'left' && (
+            <li>
+              <SearchContent
+                searchInputWrapperMobile={searchInputWrapperMobile}
+                searchInputWrapperDesktop={searchInputWrapperDesktop}
+                searchInputAlignment={searchInputAlignment}
+                entity={entity}
+                isMobile={isMobile}
+              />
+            </li>
+          )}
+          {children}
+          {searchInputAlignment === 'right' && (
+            <li>
+              <SearchContent
+                searchInputWrapperMobile={searchInputWrapperMobile}
+                searchInputWrapperDesktop={searchInputWrapperDesktop}
+                searchInputAlignment={searchInputAlignment}
+                entity={entity}
+                isMobile={isMobile}
+              />
+            </li>
+          )}
+          {logoOnDesktop &&
+            logoOnDesktopAlignment === 'right' && (
+              <a href="/" className="">
+                <img
+                  src={logoOnMobileUrl}
+                  alt={logoOnMobileAlt}
+                  className={logoOnDesktopModifier}
+                />
+              </a>
+            )}
+        </ul>
+      </div>
     </>
   );
 };
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
+  logoOnMobile: PropTypes.bool.isRequired,
+  logoOnDesktop: PropTypes.bool.isRequired,
+  logoOnMobileUrl: PropTypes.string,
+  logoOnMobileAlt: PropTypes.string,
+  logoOnMobileModifier: PropTypes.string,
+  logoOnDesktopModifier: PropTypes.string,
+  logoOnDesktopAlignment: PropTypes.string,
   hamburgerIconModifier: PropTypes.string,
   closeIconModifier: PropTypes.string,
   mobileButtonModifier: PropTypes.string,
@@ -65,17 +136,30 @@ Menu.propTypes = {
   mobileMenuChildrenModifier: PropTypes.string,
   modifier: PropTypes.string,
   mobileIconAlignment: PropTypes.string,
+  entity: PropTypes.string,
+  searchInputAlignment: PropTypes.string,
+  searchInputWrapperMobile: PropTypes.string,
+  searchInputWrapperDesktop: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
 Menu.defaultProps = {
+  logoOnMobileUrl: '',
+  logoOnMobileAlt: '',
+  logoOnMobileModifier: '',
+  logoOnDesktopModifier: '',
   hamburgerIconModifier: '',
   closeIconModifier: '',
   mobileButtonModifier: '',
   mobileIconAlignment: '',
   mobileMenuModifier: '',
   mobileMenuChildrenModifier: '',
+  logoOnDesktopAlignment: 'left',
+  searchInputAlignment: 'right',
+  searchInputWrapperMobile: '',
+  searchInputWrapperDesktop: '',
   modifier: '',
+  entity: 'PublishedPage',
   children: []
 };
 

package/src/components/SearchContent/index.js

@@ -0,0 +1,165 @@
+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';
+import BlazeLink from '../BlazeLink';
+
+const SearchContent = ({
+  entity,
+  searchInputAlignment,
+  searchInputWrapperMobile,
+  searchInputWrapperDesktop,
+  isMobile
+}) => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [searchTerm, setSearchTerm] = useState(null);
+  const router = useRouter();
+
+  const capitalize = s => {
+    if (typeof s !== 'string') return '';
+    return s.charAt(0).toUpperCase() + s.slice(1);
+  };
+
+  const [a, b] = entity.split('_');
+
+  const entityName = capitalize(a) + capitalize(b);
+
+  const rawQueryStringified = JSON.stringify({
+    size: 0,
+    query: {
+      bool: {
+        should: [
+          {
+            match: {
+              docType: entity
+            }
+          }
+        ],
+        minimum_should_match: 1
+      }
+    }
+  });
+
+  const query = gql`
+    ${getPublishedContent(entityName)}
+  `;
+
+  const { loading, error, data } = useQuery(query, {
+    variables: { rawQueryStringified, offset: 0, limit: 5 }
+  });
+
+  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;
+
+    if (results && searchTerm && searchTerm !== '') {
+      return results.map(({ name, url }) => {
+        if (name.match(searchTerm)) {
+          return (
+            <BlazeLink href={url} onClick={e => handleClick(e, url)}>
+              {name}
+            </BlazeLink>
+          );
+        }
+
+        return null;
+      });
+    }
+
+    return [];
+  };
+
+  const searchResultsMessage = searchTerm ? `Search results for: ${searchTerm}` : '';
+
+  return collapsed ? (
+    <div className={isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}>
+      <div className="search-content--collapse__wrapper">
+        <label className="search-content--collapse__label">
+          <span className="search-content--collapse__icon_wrapper">
+            <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </span>
+          <input
+            onFocus={() => setCollapsed(false)}
+            onChange={e => setSearchTerm(e.target.value)}
+            type="text"
+            name="search"
+            value=""
+            className="search-content--collapse__input"
+          />
+        </label>
+      </div>
+    </div>
+  ) : (
+    <>
+      <div className={`${isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}`}>
+        <div className="search-content--expanded__wrapper">
+          <label className="search-content--expanded__label">
+            <span className="search-content--expanded__icon_wrapper">
+              <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </span>
+            <input
+              type="text"
+              name="search"
+              onChange={e => setSearchTerm(e.target.value)}
+              className="search-content--expanded__input"
+              placeholder="Search for anything..."
+              onBlur={() => {
+                if (!searchTerm || searchTerm === '') setCollapsed(true);
+              }}
+            />
+          </label>
+        </div>
+        {data &&
+          searchResultsMessage !== '' && (
+            <div className="search-content--results__wrapper">
+              <div className="search-content--results__wrapper--message">
+                <div className="text-sm pt-2">{searchResultsMessage}</div>
+
+                <div className="search-content--results__message">
+                  <div>{renderResults()}</div>
+                </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: '',
+  searchInputWrapperMobile: '',
+  searchInputWrapperDesktop: '',
+  isMobile: false
+};
+
+export default SearchContent;

package/src/components/index.js

@@ -17,6 +17,9 @@ export default {
   textblock: dynamic(() => import(/* webpackChunkName: "blazePbTextBlock" */ './TextBlock')),
   video: dynamic(() => import(/* webpackChunkName: "blazePbVideo" */ './Video')),
   wrapper: dynamic(() => import(/* webpackChunkName: "blazePbWrapper" */ './Wrapper')),
+  searchcontent: dynamic(() =>
+    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent')
+  ),
   searchfilter: dynamic(() =>
     import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
   ),

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/helpers/mocks.js

@@ -606,14 +606,11 @@ const ENTITY_SCHEMA_AS_OBJECT = [
 const CARD_RENDER_ENTITY_DATA_MOCK = [
   {
     request: {
-      query: getSingleEntitySchema,
-      variables: {
-        id: 'page'
-      }
+      query: getMultipleSchema(['page'])
     },
     result: {
       data: {
-        getEntitySchema: {
+        page: {
           id: 'page',
           identifier: 'page',
           properties: {
@@ -797,7 +794,7 @@ const CARD_RENDER_ENTITY_DATA_MOCK = [
             'content-base/has-authors'
           ],
           relations: [],
-          typename: 'typename'
+          __typename: ''
         }
       }
     }
@@ -844,22 +841,47 @@ const QUERY_PROPS = `results {
 }
 total`;
 
+const CARD_RECORD = {
+  id: 'CARD PAGE ID',
+  name: 'Card page',
+  url: '/card-page',
+  metaDescription: 'Card page meta',
+  category: {
+    name: 'Card page cat',
+    listingPageId: 'Card page Listing ID',
+    listingPageEntity: 'page',
+    publishedListingPage: {
+      url: '/listing-page',
+      __typename: 'PublishedPage'
+    },
+    __typename: 'Category'
+  },
+  image: {
+    url: '/card-image.jpg',
+    data: { alt: 'card image alt' },
+    __typename: 'File'
+  },
+  __typename: 'PublishedPage'
+};
+
 const CARD_RENDER_SEARCH_PUBLISHED_MOCK = [
   {
     request: {
       query: getSearchPublishedContent(QUERY_PROPS),
       variables: {
-        limit: 50,
+        limit: 51,
         offset: 0,
+        sort: '',
         rawQueryStringified:
-          '{"bool":{"filter":{"bool":{"must":[{"term":{"docType":"published_page"}}]}},"must_not":[{"ids":{"values":["itemId"]}}]}}'
+          '{"bool":{"filter":{"bool":{"must":[{"term":{"docType":"published_page"}}]}}}}'
       }
     },
     result: {
       data: {
         searchPublishedContent: {
-          results: [],
-          total: 0
+          results: [CARD_RECORD],
+          total: 1,
+          __typename: 'SearchPublishedContentReponse'
         }
       }
     }
@@ -2494,6 +2516,7 @@ const GET_IMAGE_ID_FROM_RELATION_MOCK = [
 export {
   PAGE_BUILDER_MOCK,
   DATA_SUMMARY_MOCK,
+  CARD_RECORD,
   CARD_RENDER_ENTITY_DATA_MOCK,
   CARD_RENDER_EMPTY_ENTITY_DATA_MOCK,
   CARD_RENDER_SEARCH_PUBLISHED_MOCK,

package/tests/unit/src/components/Card/CardRender.test.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { MockedProvider } from '@apollo/client/testing';
-import { render, act } from '@testing-library/react';
+import { render, act, waitFor } from '@testing-library/react';
 import {
   CARD_RENDER_ENTITY_DATA_MOCK,
-  CARD_RENDER_SEARCH_PUBLISHED_MOCK
+  CARD_RENDER_SEARCH_PUBLISHED_MOCK,
+  CARD_RECORD
 } from '../../../../helpers/mocks';
 import CardRender from '../../../../../src/components/Card/CardRender';
 
@@ -39,8 +40,8 @@ const renderComponent = async component => {
   };
 };
 
-const setupTest = async mocks => {
-  const componentMock = await setup(mockedProps, mocks);
+const setupTest = async (mocks, overrides = {}) => {
+  const componentMock = await setup({ ...mockedProps, ...overrides }, mocks);
   const renderResults = await renderComponent(componentMock);
 
   return {
@@ -50,11 +51,24 @@ const setupTest = async mocks => {
 
 describe('CardRender component', () => {
   it('should render without throwing an error and match snapshot', async () => {
-    const { asFragment } = await setupTest([
+    const { asFragment, getByText } = await setupTest([
       ...CARD_RENDER_ENTITY_DATA_MOCK,
       ...CARD_RENDER_SEARCH_PUBLISHED_MOCK
     ]);
-
+    await waitFor(() => getByText(CARD_RECORD.name));
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render empty string if parent matches result record and there is only one results', async () => {
+    const parent = {
+      itemId: CARD_RECORD.id,
+      itemEntity: 'published_page'
+    };
+    const { asFragment } = await setupTest(
+      [...CARD_RENDER_ENTITY_DATA_MOCK, ...CARD_RENDER_SEARCH_PUBLISHED_MOCK],
+      { parent }
+    );
+
+    expect(asFragment()).toMatchSnapshot(); // will be empty string
+  });
 });

package/tests/unit/src/components/Card/__snapshots__/CardRender.test.js.snap

@@ -1,3 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardRender component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;
+exports[`CardRender component should render empty string if parent matches result record and there is only one results 1`] = `<DocumentFragment />`;
+
+exports[`CardRender component should render without throwing an error and match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="grid grid-cols-1 grid--one"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__image card__image--portrait"
+      >
+        <a
+          class="card__image-link"
+          href="/card-page"
+        >
+          <span />
+        </a>
+      </div>
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <a
+            class="badge badge--label"
+            href="/listing-page"
+          >
+            Card page cat
+          </a>
+          <h2
+            class="card__title card__title--portrait"
+          >
+            <a
+              href="/card-page"
+            >
+              Card page
+            </a>
+          </h2>
+        </div>
+        <div
+          class="card__child-content"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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();
+  });
+});