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

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,26 @@ 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 +182,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 +214,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/Select.js

@@ -17,6 +17,7 @@ const SelectFilter = ({
   const filterValue = filterValues[prop] || '';
   const disabledOptions = [];
   const { buckets = [] } = data[prop] || {};
+
   const options = buckets
     .map(({ key, doc_count: count }) => {
       if (!count) disabledOptions.push(key);
@@ -48,6 +49,7 @@ const SelectFilter = ({
         onChange={({ value }) => {
           let valueToUse = value;
           if (value === defaultTextValue) valueToUse = '';
+
           updateFilterValues({ [prop]: valueToUse }, shouldSearch);
         }}
         disabled={disabledOptions}

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,16 +32,14 @@ const builFilterObject = ({ queryKey, value, filters, isRange, isInQuery }) => {
 
 const buildFiltersQuery = ({
   shouldAddFilters,
-
   filterBy,
   filterByProperty,
   rangeValues,
   queryKeys,
   query
 }) => {
-  if (!shouldAddFilters) return [];
   const mustFilters = [];
-  if (query) {
+  if (shouldAddFilters && query) {
     Object.keys(query).forEach(queryKey => {
       if (QUERY_KEYS_TO_IGNORE.includes(queryKey)) return;
       if (!queryKey || !query[queryKey]) return;

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,5 @@ 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';
+export { default as useFilterAggregationValues } from './use-filter-aggregation-values';

package/src/hooks/use-filter-aggregation-values.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+const useFilterAggregationValues = ({ data, filterValues }) => {
+  const [stateValues, setStateValues] = useState(data);
+  const [prop, setProp] = useState('');
+
+  useEffect(
+    () => {
+      if (!stateValues) return setStateValues(data);
+
+      const lastChangedFilter = filterValues?.[prop];
+
+      if (!data) return;
+
+      const newOptions = data[prop];
+      const currentOptions = stateValues?.[prop];
+
+      if (lastChangedFilter === null || lastChangedFilter === '') {
+        return setStateValues(prevState => ({
+          ...data,
+          [prop]: newOptions
+        }));
+      }
+
+      setStateValues(prevState => ({
+        ...data,
+        [prop]: currentOptions
+      }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, prop, filterValues]
+  );
+
+  return [stateValues, setStateValues, setProp, prop];
+};
+
+export default useFilterAggregationValues;

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

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

@@ -303,6 +303,89 @@ exports[`Card component should render customPreheader and alternativeHeadline in
 </DocumentFragment>
 `;
 
+exports[`Card component should render link wrapper 1`] = `
+<DocumentFragment>
+  <a
+    aria-label="mock name"
+    class="card card--portrait"
+    href="/mockurl"
+  >
+    <div
+      class="card__image card__image--portrait"
+    >
+      <div
+        class="card__image-link"
+        gtmid=""
+      >
+        <img
+          alt="test-altText"
+          src="test-url"
+        />
+      </div>
+    </div>
+    <div
+      class="card__content-wrapper card__content-wrapper--portrait "
+    >
+      <div
+        class="card__content card__content--portrait"
+      >
+        <div
+          class="badge badge--label"
+          gtmid=""
+          href="published-url"
+        >
+          category-name
+        </div>
+        <div
+          class="card__title card__title--portrait "
+        >
+          <div
+            gtmid=""
+            title="mock name"
+          >
+            mock name
+          </div>
+        </div>
+        <div
+          class="card__item card__item--full"
+          data-testid="full-card"
+        />
+        <div
+          class="card__details card__details--portrait"
+        >
+          <span
+            class=""
+            data-testid="some%20description"
+          >
+            some description
+          </span>
+          <span
+            class=""
+          >
+            extra props
+          </span>
+        </div>
+      </div>
+      <div
+        class="card__child-content"
+      >
+        <div
+          class="child_1"
+        >
+          some stuff
+        </div>
+        <div
+          class="child_2"
+          modifier="child-modi"
+        >
+          another child
+        </div>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
 exports[`Card component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div

package/tests/unit/src/components/Card/helpers/get-updated-items-to-display.test.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom/extend-expect';
-import getUpdatedItemsToDisplay from '../../../../../../src/components/Card/helpers/get-updated-items-to-display';
+import getUpdatedItemsToDisplay from '../../../../../../src/helpers/get-updated-items-to-display';
 
 const mockedProps = {
   itemsToDisplay: [

package/tests/unit/src/components/Carousel/CarouselImage/__snapshots__/CarouselImage.test.js.snap

@@ -5,7 +5,7 @@ exports[`Carousel image component should match snapshot 1`] = `
   className="carousel__slide"
 >
   <img
-    alt=""
+    alt="Carousel image"
     aria-label="View Image"
     data-testid="lazy-image-mock"
     onClick={[Function]}

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

@@ -66,7 +66,7 @@ exports[`Carousel component should render priority images and match snapshot 1`]
         >
           <span>
             <img
-              alt=""
+              alt="Carousel image"
               aria-label="View Image"
               role="button"
               src="test-url"

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -11,7 +11,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
       role="tablist"
     >
       <button
-        aria-controls="panel-section-one"
+        aria-controls="section-one"
         aria-selected="true"
         class="content-group-sidepanel__button--is-active"
         id="tab-section-one"
@@ -21,7 +21,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
         sectionOne
       </button>
       <button
-        aria-controls="panel-section-two"
+        aria-controls="section-two"
         aria-selected="false"
         class="content-group-sidepanel__button"
         id="tab-section-two"
@@ -57,7 +57,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
       role="tablist"
     >
       <button
-        aria-controls="panel-section-one"
+        aria-controls="section-one"
         aria-selected="true"
         class="content-group-tabs__button--is-active"
         id="tab-section-one"
@@ -67,7 +67,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
         sectionOne
       </button>
       <button
-        aria-controls="panel-section-two"
+        aria-controls="section-two"
         aria-selected="false"
         class="content-group-tabs__button"
         id="tab-section-two"

package/tests/unit/src/components/Image/Lightbox/Lightbox.test.js

@@ -10,6 +10,10 @@ jest.mock('../../../../../../src/components/Banner', () =>
   jest.fn().mockImplementation(() => <span>Banner</span>)
 );
 
+jest.mock('../../../../../../src/components/ModalAdapter', () =>
+  jest.fn().mockImplementation(({ children }) => children)
+);
+
 const mockProps = {
   imageUrl: 'some-url',
   altTxt: 'atl text',

package/tests/unit/src/components/Image/Lightbox/__snapshots__/Lightbox.test.js.snap

@@ -3,48 +3,13 @@
 exports[`LightBox component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="overlay"
-  />
-  <div
-    class=" modal modal--show modal--full-screen"
+    class="row row--display-row"
   >
     <div
-      class="modal__header"
-    >
-      <div
-        class="modal__title"
-      />
-      <div
-        class="modal__close"
-        role="button"
-      >
-        <i
-          class="material-icons"
-        >
-          close
-        </i>
-      </div>
-    </div>
-    <div
-      class="modal__content"
-    >
-      <div
-        class="row row--display-row"
-      >
-        <div
-          class="column column--two-thirds"
-        >
-          <div
-            class="image"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="modal__footer"
+      class="column column--two-thirds"
     >
       <div
-        class="modal__button"
+        class="image"
       />
     </div>
   </div>

package/tests/unit/src/components/ItemList/__snapshots__/ItemListNew.test.js.snap

@@ -3,7 +3,6 @@
 exports[`ItemListNew component should match snapshot and render without throwing an error 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Create new list_name"
     class="item-list-new button"
     type="button"
   >
@@ -19,7 +18,6 @@ exports[`ItemListNew component should not render if list not found 1`] = `<Docum
 exports[`ItemListNew component should render using listId from query 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Create new QUERY-LIST-ID"
     class="item-list-new button"
     type="button"
   >

package/tests/unit/src/components/MenuItem/MenuEntitiesItem.test.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import MenuEntitiesItem from '../../../../../src/components/MenuItem/MenuEntitiesItem';
+import { MOCKED_MENUITEMS_PROPS } from './mocks';
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
+}));
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
+}));
+
+describe('MenuEntitiesItem component', () => {
+  it('should render based on listData received', async () => {
+    const { asFragment } = await render(MenuEntitiesItem, MOCKED_MENUITEMS_PROPS);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});