@blaze-cms/react-page-builder 0.146.0-alpha.0 → 0.146.0-alpha.10

package/src/components/MenuItem/MenuItemRender.js

@@ -0,0 +1,92 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { hasChildren } from '../../helpers';
+import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
+import { injectHelperIntoTemplate } from './helpers';
+
+const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+  const {
+    loading: loadingText,
+    data: [textToUse]
+  } = useStringTemplate(parent, [text]);
+
+  const {
+    loading: loadingUrl,
+    data: [urlToUse]
+  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
+  if (loadingUrl || loadingText) return '';
+
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
+  const handleItemEvent = ({ type }) => {
+    if (isHoverEvent) {
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
+    }
+  };
+  const hasValidChildren = hasChildren(children);
+
+  return (
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+      <div className="menu--item--link">
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
+      )}
+    </li>
+  );
+};
+
+MenuItemRender.propTypes = {
+  modifier: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  eventType: PropTypes.string.isRequired,
+  parent: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+MenuItemRender.defaultProps = {
+  url: '',
+  modifier: '',
+  text: '',
+  children: null,
+  parent: {}
+};
+
+export default MenuItemRender;

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

@@ -0,0 +1,3 @@
+import injectHelperIntoTemplate from './inject-helper-into-template';
+
+export { injectHelperIntoTemplate };

package/src/components/MenuItem/helpers/inject-helper-into-template.js

@@ -0,0 +1,11 @@
+const injectHelperIntoTemplate = (template, helper) => {
+  if (!helper || !template) return template;
+
+  let result = template.replace(/{{{([^{}]+)}}}/g, `{{{${helper} $1}}}`);
+
+  result = result.replace(/{{([^{}]+)}}(?!})/g, `{{${helper} $1}}`);
+
+  return result;
+};
+
+export default injectHelperIntoTemplate;

package/src/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BlazeModal from '@blaze-react/modal';
+import BlazeModal from '../ModalAdapter';
 import { renderChildren, updateChildrensParent, hasChildren } from '../../helpers';
 
 const Modal = ({ children, elementTitle, onClose, ...otherProps }) => {

package/src/components/ModalAdapter/ModalAdapter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Modal from '@blaze-react/modal';
+import ReactDOM from 'react-dom';
+import { usePortal } from '../../hooks';
+
+const ModalAdapter = ({ ...props }) => {
+  const target = usePortal();
+
+  return ReactDOM.createPortal(<Modal {...props} />, target);
+};
+
+export default ModalAdapter;

package/src/components/ModalAdapter/index.js

@@ -0,0 +1,3 @@
+import ModalAdapter from './ModalAdapter';
+
+export default ModalAdapter;

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -38,6 +38,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case CHECKBOX:
         return (
           <div
@@ -56,6 +57,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case SELECT:
         return (
           <div
@@ -74,6 +76,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case RANGE:
         return (
           !!areAggregationsAvailable && (

package/src/components/SearchFilter/SearchFilter/MobileFormToolbar.js

@@ -9,7 +9,7 @@ const MobileFormToolbar = ({ formId, handleReset }) => (
       data-testid="reset-button"
       role="button"
       onClick={handleReset}
-      aria-label="Reset Filters">
+      aria-label="Reset search filters">
       {RESET}
     </div>
 

package/src/components/SearchFilter/SearchFilter/ResetDesktopForm.js

@@ -10,13 +10,14 @@ const ResetDesktopForm = ({ handleReset }) => (
       className="icon-button icon-button--reset"
       title="reset--button"
       data-testid="reset-icon"
-      onClick={handleReset}>
+      onClick={handleReset}
+      aria-label="Reset search filters">
       <i>
         <FaRedoAlt />
       </i>
     </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button" aria-label="Reset Filters">
+    <div role="button" onClick={handleReset} data-testid="reset-button">
       {RESET}
     </div>
   </div>

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
-
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
+import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
 import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const SearchFilter = ({
@@ -26,6 +25,7 @@ const SearchFilter = ({
   groupAfterMobile,
   filterValues,
   setAppliedFilters,
+  mobileRefineButtonText,
   query
 }) => {
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
@@ -152,6 +152,11 @@ const SearchFilter = ({
                         data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
+                        aria-label={
+                          moreFiltersDesktopCollapsed
+                            ? 'Show more search filters'
+                            : 'Show less search filters'
+                        }
                         onClick={() =>
                           setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
                         }>
@@ -206,12 +211,12 @@ const SearchFilter = ({
 
       {isCollapsedOnResponsive &&
         !displaySearchFilter && (
-          <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
-            <div
-              role="button"
-              onClick={() => setDisplaySearchFilter(true)}
-              aria-label="Toggle Search Filter">
-              {REFINE}
+          <div
+            className="filter__refine filter__refine--mobile-close"
+            data-testid="refine-mobile"
+            aria-label="Toggle Search Filter">
+            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
+              {mobileRefineButtonText || REFINE}
             </div>
           </div>
         )}
@@ -235,10 +240,12 @@ SearchFilter.propTypes = {
   filterValues: PropTypes.object.isRequired,
   setAppliedFilters: PropTypes.func.isRequired,
   listComponentName: PropTypes.string,
-  query: PropTypes.object
+  query: PropTypes.object,
+  mobileRefineButtonText: PropTypes.string
 };
 
 SearchFilter.defaultProps = {
+  mobileRefineButtonText: '',
   listComponentName: '',
   query: {}
 };

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -11,7 +11,8 @@ import {
   buildNewUrl,
   getFilterValues,
   getFilterRangesAndCheckboxesValues,
-  getUpdatedFilterBy
+  getUpdatedFilterBy,
+  buildListNameQuery
 } from './helpers';
 import {
   getEntityData,
@@ -25,23 +26,6 @@ import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
-const getFiltersUrlQuery = (query, listName) => {
-  if (!listName) return query;
-  const updatedQuery = {};
-  const listKey = `pb[${listName}]`;
-  Object.keys(query).forEach(queryKey => {
-    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
-    if (!isListKey) return;
-    const decodedQueryValue = Array.isArray(query[queryKey])
-      ? query[queryKey].map(value => decodeURIComponent(value))
-      : decodeURIComponent(query[queryKey]);
-    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
-    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
-  });
-
-  return updatedQuery;
-};
-
 const SearchFilterContainer = ({
   entity,
   url,
@@ -54,7 +38,8 @@ const SearchFilterContainer = ({
   filterByProperty,
   shouldAddFilters,
   listComponentName,
-  parent
+  parent,
+  mobileRefineButtonText
 }) => {
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -65,15 +50,21 @@ const SearchFilterContainer = ({
   const [urlPath, setUrlPath] = useState(asPath); // used as asPath can take too long to update
   const [filterValues, dispatch] = useReducer(searchFilterReducer, null);
   const { url: currentUrl, query } = parseUrl(urlPath);
-  const updatedQuery = getFiltersUrlQuery(query, listComponentName);
+  const updatedQuery = buildListNameQuery(query, listComponentName);
   const { itemId: parentId, itemEntity: parentEntity } = parent;
 
   useEffect(
     () => {
-      if (asPath) setUrlPath(asPath);
+      const { query: newQuery } = parseUrl(asPath);
+      const updatedNewQuery = buildListNameQuery(newQuery, listComponentName);
+      const newValues = getFilterValues({}, filters, updatedNewQuery);
+      if (newValues) dispatch({ newValues, shouldSearch: false, type: 'update' });
+      setUrlPath(asPath);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [asPath]
   );
+
   const { data: mainSchemas = {}, loading: schemasLoading } = useGetEntitySchemasAsObj([
     parentEntity,
     entity
@@ -186,11 +177,13 @@ const SearchFilterContainer = ({
       setDisplaySearchFilter={setDisplaySearchFilter}
       groupAfterMobile={groupAfterMobile}
       groupAfterDesktop={groupAfterDesktop}
+      mobileRefineButtonText={mobileRefineButtonText}
     />
   );
 };
 
 SearchFilterContainer.propTypes = {
+  mobileRefineButtonText: PropTypes.string,
   entity: PropTypes.string,
   url: PropTypes.string,
   filters: PropTypes.array,
@@ -216,7 +209,8 @@ SearchFilterContainer.defaultProps = {
   filterByProperty: [],
   shouldAddFilters: false,
   listComponentName: '',
-  parent: {}
+  parent: {},
+  mobileRefineButtonText: ''
 };
 
 export default withTitle(SearchFilterContainer);

package/src/components/SearchFilter/components/Checkbox.js

@@ -84,7 +84,9 @@ const Checkbox = ({
           role="button"
           className="see-more"
           onClick={handleCheckboxOptions}
-          aria-label={shouldDisplayMore ? `See ${MORE} options` : `See ${LESS} options`}>
+          aria-label={
+            shouldDisplayMore ? `See ${MORE} ${label} options` : `See ${LESS} ${label} options`
+          }>
           {shouldDisplayMore ? (
             <>
               <i>

package/src/components/SearchFilter/components/TextSearch.js

@@ -22,6 +22,7 @@ const TextSearch = ({ label, searchValue, updateFilterValues, elementTitle }) =>
         <button
           type="button"
           className="icon-button icon-button--search"
+          aria-label="Search"
           onClick={e => {
             e.preventDefault();
             updateFilterValues({ [SEARCH_TERM]: searchValue }, true);

package/src/components/SearchFilter/helpers/build-list-name-query.js

@@ -0,0 +1,18 @@
+const buildListNameQuery = (query, listName) => {
+  if (!listName) return query;
+  const updatedQuery = {};
+  const listKey = `pb[${listName}]`;
+  Object.keys(query).forEach(queryKey => {
+    const isListKey = queryKey.indexOf(`${listName}`) !== -1;
+    if (!isListKey) return;
+    const decodedQueryValue = Array.isArray(query[queryKey])
+      ? query[queryKey].map(value => decodeURIComponent(value))
+      : decodeURIComponent(query[queryKey]);
+    const strippedKey = queryKey.substring(listKey.length + 1, queryKey.length - 1);
+    if (isListKey) updatedQuery[strippedKey] = decodedQueryValue;
+  });
+
+  return updatedQuery;
+};
+
+export default buildListNameQuery;

package/src/components/SearchFilter/helpers/decode-encode.js

@@ -1,5 +1,4 @@
 const decodeValue = value => decodeURIComponent(value);
-
 const encodeValue = value => encodeURIComponent(value);
 
 export { decodeValue, encodeValue };

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

@@ -1,3 +1,4 @@
+import buildListNameQuery from './build-list-name-query';
 import buildNewUrl from './build-new-url';
 import { decodeValue, encodeValue } from './decode-encode';
 import checkIfRangeUpdated from './check-if-range-updated';
@@ -16,6 +17,7 @@ import getUpdatedFilterBy from './get-updated-filter-by';
 import buildUrlQuery from './build-url-query';
 
 export {
+  buildListNameQuery,
   buildNewUrl,
   decodeValue,
   encodeValue,

package/src/components/Video/VideoModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Modal from '@blaze-react/modal';
+import Modal from '../ModalAdapter';
 import VideoRender from './VideoRender';
 
 const VideoModal = ({ ...props }) => {

package/src/components/Video/providers/Vimeo/VimeoProvider.js

@@ -51,7 +51,6 @@ const VimeoProvider = ({ url, autoplay, loop, imageData }) => {
       role="button"
       className={VIDEO_WRAPPER_CLASS_NAME}
       style={videoStyle}
-      aria-label="Open video"
       onClick={() => !shouldRenderVideo && setShouldRenderVideo(true)}>
       {shouldRenderVideo && !videoError && wrappedCode}
       {videoError && videoError.message}

package/src/helpers/build-filters-query.js

@@ -32,7 +32,6 @@ const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
 
 const buildFiltersQuery = ({
   shouldAddFilters,
-
   filterBy,
   filterByProperty,
   rangeValues,

package/src/{components/Card/helpers → helpers}/filter-query-setup.js

@@ -1,6 +1,8 @@
 import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
-import { getGenericRenderVariables, buildRawQueryBase, buildSetFilters } from '../../../helpers';
-import { DEFAULT_LIMIT } from '../../../constants';
+import getGenericRenderVariables from './get-generic-render-variables';
+import buildRawQueryBase from './build-raw-query-base';
+import buildSetFilters from './build-set-filters';
+import { DEFAULT_LIMIT } from '../constants';
 
 const filterQuerySetup = ({
   getEntitySchemas,
@@ -13,7 +15,7 @@ const filterQuerySetup = ({
   itemsToDisplay,
   entitySameAsCurrentItemEntity,
   entitySchema,
-  useRandomSort
+  useRandomSort = false
 }) => {
   const stringProps = getStringTypeProps(entity, filterEntityRelations, getEntitySchemas);
   const filterValues =

package/src/{components/Card/helpers → helpers}/filters-setup.js

@@ -1,5 +1,7 @@
-import { buildQueryFields, getInheritedFilters, getQueryProps } from '../../../helpers';
-import { getSearchPublishedContent } from '../../../application/query';
+import buildQueryFields from './build-query-fields';
+import getInheritedFilters from './get-inherited-filters';
+import getQueryProps from './get-query-props';
+import { getSearchPublishedContent } from '../application/query';
 
 const filtersSetup = ({
   entityFields,
@@ -16,6 +18,7 @@ const filtersSetup = ({
   const fields = buildQueryFields(entityFields, entityTypes, isFull);
   const action = getSearchPublishedContent(fields);
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
+
   const entitySameAsCurrentItemEntity = entities.includes(itemEntityUpdated);
   const { relations: filterEntityRelations = [] } = filterEntitySchema;
   const queryProps = getQueryProps(inheritedFilters, currentSchema, filterEntitySchema);

package/src/helpers/index.js

@@ -53,5 +53,11 @@ export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
 export { default as processDataSummaryValue } from './process-data-summary-value';
 export { default as buildQueryKey } from './build-query-key';
+export { default as filterQuerySetup } from './filter-query-setup';
+export { default as filtersSetup } from './filters-setup';
+export { default as getUpdatedItemsToDisplay } from './get-updated-items-to-display';
+export { default as getUpdatedSortProperties } from './get-updated-sort-properties';
+export { default as shouldReturn } from './should-return';
+export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';

package/src/{components/Card/helpers → helpers}/should-skip-single-query.js

@@ -1,4 +1,4 @@
-import { ID } from '../../../constants';
+import { ID } from '../constants';
 
 const shouldSkipSingleQuery = (loading, getAction, queryProps) =>
   loading || !getAction || queryProps === ID;

package/src/hooks/index.js

@@ -7,3 +7,4 @@ export { default as useGetSingleEntitySchema } from './use-get-single-entity-sch
 export { default as useCheckMobileScreen } from './use-check-mobile-screen';
 export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
+export { default as usePortal } from './use-portal';

package/src/hooks/use-portal.js

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+
+function usePortal() {
+  const rootElemRef = React.useRef(document.createElement('div'));
+
+  useEffect(() => {
+    document.body.appendChild(rootElemRef.current);
+
+    const element = rootElemRef.current;
+    return function removeElement() {
+      element.remove();
+    };
+  }, []);
+
+  return rootElemRef.current;
+}
+
+export default usePortal;

package/tests/unit/src/components/BackToTop/BackToTop.test.js

@@ -1,19 +1,23 @@
 /**
  * @jest-environment jsdom
  */
+import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import { render, screen } from '@testing-library/react';
 import BackToTop from '../../../../../src/components/BackToTop';
 
-describe('Breadcrumb component', () => {
+describe('BackToTop component', () => {
   it('should be a function', () => {
     expect(typeof BackToTop).toEqual('function');
   });
 
   it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(BackToTop, {
-      showAfterPixels: 500
-    });
+    const { asFragment } = render(<BackToTop showAfterPixels={500} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should not render the button initially', () => {
+    render(<BackToTop showAfterPixels={500} />);
+    expect(screen.queryByRole('link', { name: /back to top/i })).not.toBeInTheDocument();
+  });
 });

package/tests/unit/src/components/BackToTop/__snapshots__/BackToTop.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumb component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;
+exports[`BackToTop component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;

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

@@ -2,8 +2,9 @@
  * @jest-environment jsdom
  */
 import React from 'react';
-import { render as _render, act, waitFor } from '@testing-library/react';
+import { render as _render, act, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { setEnvs, deleteEnvs } from '@blaze-cms/tools/test-helpers/test-files/test-env';
 import Card from '../../../../../src/components/Card/Card';
 import { pageBuilderComponentsMocks } from './mockData';
 
@@ -211,4 +212,18 @@ describe('Card component', () => {
     });
     expect(getByTestId('full-card')).toBeInTheDocument();
   });
+
+  it('should render link wrapper', async () => {
+    const envs = {
+      BLAZE_PB_ADD_CLICK_TO_CARDS: 'true'
+    };
+    setEnvs(envs);
+    const { asFragment } = await render(Card, {
+      ...componentProps,
+      pageBuilderComponents: pageBuilderComponentsMocks
+    });
+    expect(screen.getByLabelText(componentProps.name)).toBeInTheDocument();
+    expect(asFragment()).toMatchSnapshot();
+    deleteEnvs(envs);
+  });
 });