@blaze-cms/react-page-builder 0.112.0-alpha.2 → 0.113.0-alpha.2

package/src/components/List/ListRender.js

@@ -17,6 +17,7 @@ const ListRender = props => {
     limitToUse,
     initialOffset,
     isInfinite,
+    omitWrappers,
     paginationType,
     listComponent: ListComponent,
     query,
@@ -57,6 +58,7 @@ const ListRender = props => {
         actionKey={actionKey}
         limitToUse={limitToUse}
         fetchMore={fetchMore}
+        omitWrappers={omitWrappers}
         itemsPerPageToUse={itemsPerPageToUse || listData.length}
         listTotal={listTotal}
         currentListLength={currentListLength}
@@ -94,6 +96,7 @@ ListRender.propTypes = {
   limitToUse: PropTypes.number.isRequired,
   initialOffset: PropTypes.number.isRequired,
   isInfinite: PropTypes.bool.isRequired,
+  omitWrappers: PropTypes.bool,
   query: PropTypes.object.isRequired,
   url: PropTypes.string.isRequired,
   listComponent: PropTypes.func.isRequired,
@@ -105,6 +108,7 @@ ListRender.propTypes = {
 };
 
 ListRender.defaultProps = {
+  omitWrappers: false,
   itemsToDisplay: [],
   listAggregations: [],
   displayTotal: false

package/src/components/List/components/Cards/CardsRender.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import CardsRenderWrapper from './CardsRenderWrapper';
 import { BANNER } from '../../constants';
+import Wrapper from '../../../Wrapper';
 import { splitChildren, appendImages } from '../../../../helpers';
 import { getPropsToDisplayModifiers } from '../../../../utils';
 import ListPagination from '../Pagination';
@@ -14,6 +15,7 @@ const CardsRender = ({
   children,
   entity,
   banner,
+  omitWrappers,
   propsToDisplay,
   paginationType,
   parent,
@@ -38,15 +40,18 @@ const CardsRender = ({
   if (imagesLoading) return '';
   const updatedListWithImages = appendImages(imagesData, orderedListData, itemsToDisplay);
 
+  const WrapperToUse = omitWrappers ? Fragment : Wrapper;
+
   return (
     <>
-      <div className="list list--compact">
+      <WrapperToUse className="list list--compact">
         <CardsRenderWrapper
           orderedListData={updatedListWithImages}
           listProps={props}
           bannerProps={bannerProps}
           cardChildren={regularChildren}
           gtmChildren={gtmChildren}
+          omitWrappers={omitWrappers}
           propsToDisplay={propsToDisplay}
           propsToDisplayModifiers={propsToDisplayModifiers}
           gridModifier={gridModifier}
@@ -54,7 +59,8 @@ const CardsRender = ({
           parent={parent}
           {...props}
         />
-      </div>
+      </WrapperToUse>
+
       {paginationType === LOAD_MORE && (
         <ListPagination paginationType={paginationType} parent={parent} {...props} />
       )}
@@ -70,6 +76,7 @@ CardsRender.propTypes = {
   paginationType: PropTypes.string.isRequired,
   hasBanner: PropTypes.bool,
   banner: PropTypes.object,
+  omitWrappers: PropTypes.bool,
   gridModifier: PropTypes.string,
   entity: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
@@ -82,6 +89,7 @@ CardsRender.defaultProps = {
   children: null,
   hasBanner: false,
   banner: null,
+  omitWrappers: false,
   gtmData: null,
   itemsToDisplay: []
 };

package/src/components/List/components/Cards/CardsRenderWrapper.js

@@ -1,15 +1,23 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import CardsRenderItem from './CardsRenderItem';
 import Wrapper from '../../../Wrapper';
 import { withTitle } from '../../../../HOC';
 import { checkIfShouldRenderBanner } from '../helpers';
 
-const CardsRenderWrapper = ({ orderedListData, gridModifier, bannerProps, ...props }) => {
+const CardsRenderWrapper = ({
+  orderedListData,
+  gridModifier,
+  omitWrappers,
+  bannerProps,
+  ...props
+}) => {
   let bannerIndex = 0;
 
+  const WrapperToUse = omitWrappers ? Fragment : Wrapper;
+
   return (
-    <Wrapper className="grid" modifiers={gridModifier}>
+    <WrapperToUse className="grid" modifiers={gridModifier}>
       {orderedListData.map((cardProps, index) => {
         const { id } = cardProps;
         const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);
@@ -29,18 +37,20 @@ const CardsRenderWrapper = ({ orderedListData, gridModifier, bannerProps, ...pro
           />
         );
       })}
-    </Wrapper>
+    </WrapperToUse>
   );
 };
 
 CardsRenderWrapper.propTypes = {
   orderedListData: PropTypes.array.isRequired,
   gridModifier: PropTypes.string.isRequired,
+  omitWrappers: PropTypes.bool,
   imagesData: PropTypes.array,
   bannerProps: PropTypes.object
 };
 
 CardsRenderWrapper.defaultProps = {
+  omitWrappers: false,
   imagesData: [],
   bannerProps: {}
 };

package/src/components/List/components/Full/FullRender.js

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import uuid from 'uuid/v1';
 import FullRenderItem from './FullRenderItem';
 import ListPagination from '../Pagination';
 import { LOAD_MORE } from '../../../../constants';
 import { BANNER } from '../../constants';
+import Wrapper from '../../../Wrapper';
 import { checkIfShouldRenderBanner } from '../helpers';
 
-const FullRender = ({ orderedListData, paginationType, ...props }) => {
+const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props }) => {
   const pageBuilderID = uuid();
   const { parent, entity, propsToDisplay, banner, hasBanner } = props;
   const bannerProps = banner
@@ -15,9 +16,11 @@ const FullRender = ({ orderedListData, paginationType, ...props }) => {
     : null;
   let bannerIndex = 0;
 
+  const WrapperToUse = omitWrappers ? Fragment : Wrapper;
+
   return (
     <>
-      <div className="list list--full">
+      <WrapperToUse className="list list--full">
         {orderedListData.map(({ id, ...entityProps }, i) => {
           const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(i, bannerProps);
           if (shouldRenderBanner) bannerIndex += 1;
@@ -37,7 +40,8 @@ const FullRender = ({ orderedListData, paginationType, ...props }) => {
             />
           );
         })}
-      </div>
+      </WrapperToUse>
+
       {paginationType === LOAD_MORE && (
         <ListPagination paginationType={paginationType} {...props} />
       )}
@@ -51,11 +55,13 @@ FullRender.propTypes = {
   parent: PropTypes.object.isRequired,
   propsToDisplay: PropTypes.array.isRequired,
   entity: PropTypes.string.isRequired,
+  omitWrappers: PropTypes.bool,
   hasBanner: PropTypes.bool,
   banner: PropTypes.object
 };
 
 FullRender.defaultProps = {
+  omitWrappers: false,
   hasBanner: false,
   banner: null
 };

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

@@ -12,6 +12,7 @@ const SearchFilter = ({
   data,
   filters,
   buttonRef,
+  searchFilterRef,
   hasUrl,
   entity,
   handleSearch,
@@ -69,7 +70,12 @@ const SearchFilter = ({
   return (
     <>
       {isDesktopFormDisplayed || isMobileFormDisplayed ? (
-        <form className={formClass} data-testid={formId} id={formId} onSubmit={handleSearch}>
+        <form
+          className={formClass}
+          data-testid={formId}
+          id={formId}
+          onSubmit={handleSearch}
+          ref={searchFilterRef}>
           {isMobileFormDisplayed && (
             <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
           )}
@@ -144,6 +150,7 @@ const SearchFilter = ({
           {isCollapsedOnResponsive && (
             <div
               className="filter__refine filter__refine--mobile-close"
+              ref={searchFilterRef}
               data-testid="refine-mobile">
               <div role="button" onClick={() => setDisplaySearchFilter(true)}>
                 {REFINE}
@@ -160,6 +167,7 @@ SearchFilter.propTypes = {
   data: PropTypes.object.isRequired,
   filters: PropTypes.array.isRequired,
   buttonRef: PropTypes.object.isRequired,
+  searchFilterRef: PropTypes.object.isRequired,
   hasUrl: PropTypes.bool.isRequired,
   entity: PropTypes.string.isRequired,
   handleSearch: PropTypes.func.isRequired,

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -26,9 +26,12 @@ const SearchFilterContainer = ({
   groupAfter
 }) => {
   const [displaySearchFilter, setDisplaySearchFilter] = useState(false);
+  const [key, setKey] = useState(`filter-${name}`);
 
   removeUpdatedRanges();
   const buttonRef = useRef(null);
+  const searchFilterRef = useRef(null);
+
   const hasUrl = !!url;
   const {
     url: currentUrl,
@@ -43,16 +46,32 @@ const SearchFilterContainer = ({
     const queryParams = buildQueryParams(e, filters, updatedRanges);
     setDisplaySearchFilter(false);
 
-    if (!queryParams)
-      return router
-        .push('/Resolver', baseQuery, { shallow: !hasUrl })
-        .then(() => window.scrollTo(0, 0));
+    if (!queryParams) {
+      scrollToParent();
+      return router.push('/Resolver', baseQuery, { shallow: !hasUrl, scroll: false });
+    }
     const newUrl = buildNewQuery(url, currentUrl, queryParams, sortValues);
-    return router.push('/Resolver', newUrl, { shallow: !hasUrl }).then(() => window.scrollTo(0, 0));
+    scrollToParent();
+    return router.push('/Resolver', newUrl, { shallow: !hasUrl, scroll: false });
+  };
+
+  const scrollToParent = () => {
+    if (searchFilterRef && searchFilterRef.current) {
+      window.scrollTo({
+        left: 0,
+        top: window.pageYOffset + searchFilterRef.current.parentNode.getBoundingClientRect().top,
+        behavior: 'smooth'
+      });
+    } else {
+      window.scrollTo(0, 0);
+    }
   };
 
   const resetFilters = () => {
-    router.push('/Resolver', baseQuery, { shallow: !hasUrl }).then(() => window.scrollTo(0, 0));
+    scrollToParent();
+    router.push('/Resolver', baseQuery, { shallow: !hasUrl, scroll: false }).then(() => {
+      setKey(`filter-${name}:${Date.now()}`);
+    });
   };
 
   const action = getSearchPublishedContent(RAW_RESULTS);
@@ -85,9 +104,11 @@ const SearchFilterContainer = ({
 
   return shouldDisplayForm ? (
     <SearchFilter
+      key={key}
       data={data}
       filters={filters}
       buttonRef={buttonRef}
+      searchFilterRef={searchFilterRef}
       hasUrl={hasUrl}
       entity={entity}
       handleSearch={handleSearch}

package/tests/unit/src/components/List/components/Cards/CardsRender.test.js

@@ -8,8 +8,16 @@ jest.mock('../../../../../../../src/hooks', () => ({
 }));
 
 describe('CardsRender component', () => {
-  it('should render based on listData  recieved', async () => {
+  it('should render based on listData received', async () => {
     const { asFragment } = await render(CardsRender, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render without wrapper, when requested', async () => {
+    const { asFragment } = await render(CardsRender, {
+      ...MOCKED_LIST_OPTIONS,
+      omitWrappers: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/List/components/Cards/CardsRenderWrapper.test.js

@@ -9,8 +9,16 @@ jest.mock('../../../../../../../src/components/List/components/Cards/CardsRender
 );
 
 describe('CardsRenderWrapper component', () => {
-  it('should render list with wrapper and tittle', async () => {
+  it('should render list with wrapper and title', async () => {
     const { asFragment } = await render(CardsRenderWrapper, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render without wrapper, when requested', async () => {
+    const { asFragment } = await render(CardsRenderWrapper, {
+      ...MOCKED_LIST_OPTIONS,
+      omitWrappers: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/List/components/Cards/__snapshots__/CardsRender.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardsRender component should render based on listData  recieved 1`] = `
+exports[`CardsRender component should render based on listData received 1`] = `
 <DocumentFragment>
   <div
-    class="list list--compact"
+    class="list list--compact "
   >
     <h2
       class="heading heading--section"
@@ -74,3 +74,70 @@ exports[`CardsRender component should render based on listData  recieved 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`CardsRender component should render without wrapper, when requested 1`] = `
+<DocumentFragment>
+  <h2
+    class="heading heading--section"
+  >
+    Some title
+  </h2>
+  <div
+    class="list__item list__item--compact"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <h2
+            class="card__title card__title--portrait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="list__item list__item--compact"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <h2
+            class="card__title card__title--portrait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="list__item list__item--compact"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <h2
+            class="card__title card__title--portrait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/List/components/Cards/__snapshots__/CardsRenderWrapper.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardsRenderWrapper component should render list with wrapper and tittle 1`] = `
+exports[`CardsRenderWrapper component should render list with wrapper and title 1`] = `
 <DocumentFragment>
   <h2
     class="heading heading--section"
@@ -16,3 +16,16 @@ exports[`CardsRenderWrapper component should render list with wrapper and tittle
   </div>
 </DocumentFragment>
 `;
+
+exports[`CardsRenderWrapper component should render without wrapper, when requested 1`] = `
+<DocumentFragment>
+  <h2
+    class="heading heading--section"
+  >
+    Some title
+  </h2>
+  <div />
+  <div />
+  <div />
+</DocumentFragment>
+`;

package/tests/unit/src/components/List/components/Full/FullRender.test.js

@@ -9,8 +9,13 @@ jest.mock('../../../../../../../src/components/List/components/Full/FullRenderIt
 );
 
 describe('FullRender component', () => {
-  it('should  render if orderedListData is recieved', async () => {
+  it('should render if orderedListData is received', async () => {
     const { asFragment } = await render(FullRender, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render without wrapper, when requested', async () => {
+    const { asFragment } = await render(FullRender, { ...MOCKED_LIST_OPTIONS, omitWrappers: true });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/List/components/Full/FullRenderItem.test.js

@@ -18,7 +18,7 @@ describe('FullRenderItem component', () => {
     });
     expect(asFragment()).toMatchSnapshot();
   });
-  it('should render item recieved', async () => {
+  it('should render item received', async () => {
     const { asFragment, getByTestId } = await render(FullRenderItem, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
     MOCKED_LIST_OPTIONS.pageBuilderComponents.forEach(({ id }) => {

package/tests/unit/src/components/List/components/Full/__snapshots__/FullRender.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FullRender component should  render if orderedListData is recieved 1`] = `
+exports[`FullRender component should render if orderedListData is received 1`] = `
 <DocumentFragment>
   <div
-    class="list list--full"
+    class="list list--full "
   >
     <div>
       item1
@@ -17,3 +17,17 @@ exports[`FullRender component should  render if orderedListData is recieved 1`]
   </div>
 </DocumentFragment>
 `;
+
+exports[`FullRender component should render without wrapper, when requested 1`] = `
+<DocumentFragment>
+  <div>
+    item1
+  </div>
+  <div>
+    item2
+  </div>
+  <div>
+    item3
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/List/components/Full/__snapshots__/FullRenderItem.test.js.snap

@@ -22,7 +22,7 @@ exports[`FullRenderItem component should not render if no pageBuilderComponents
 </DocumentFragment>
 `;
 
-exports[`FullRenderItem component should render item recieved 1`] = `
+exports[`FullRenderItem component should render item received 1`] = `
 <DocumentFragment>
   <div
     class="heading heading--section heading--section--count"

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

@@ -22,8 +22,7 @@ const mockedProps = {
   name: 'test',
   groupAfter: 0,
   isCollapsedOnResponsive: true,
-  displaySearchFilter: false,
-  setDisplaySearchFilter: jest.fn()
+  displaySearchFilter: false
 };
 
 const customGlobal = global;