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

package/src/components/List/ListFactory.js

@@ -31,6 +31,7 @@ const ListFactory = props => {
     name,
     filterByProperty,
     filterBy,
+    omitWrappers,
     type,
     sortby: defaultSortBy,
     sort: defaultSort,
@@ -132,6 +133,7 @@ const ListFactory = props => {
     filterEntitySchema,
     requiredSchema,
     currentSchema,
+    omitWrappers,
     operator,
     isTextSearchFilterApplied,
     paginationIndex,
@@ -149,6 +151,7 @@ ListFactory.propTypes = {
   type: PropTypes.string.isRequired,
   filterBy: PropTypes.array,
   filterByProperty: PropTypes.array,
+  omitWrappers: PropTypes.bool,
   operator: PropTypes.string,
   name: PropTypes.string,
   sortby: PropTypes.array,
@@ -159,6 +162,7 @@ ListFactory.propTypes = {
 ListFactory.defaultProps = {
   filterBy: [],
   filterByProperty: [],
+  omitWrappers: false,
   name: '',
   sortby: [],
   sort: '',

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/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"