@blaze-cms/react-page-builder 0.110.0-alpha.2 → 0.111.0-alpha.2

package/lib-es/components/List/components/Full/FullRenderItem.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -11,7 +12,6 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';
 import Banner from '../../../Banner';
 import { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';
-import { checkIfShouldRenderBanner } from '../helpers';
 
 const FullRenderItem = ({
   isInfinite,
@@ -28,7 +28,9 @@ const FullRenderItem = ({
   parent,
   pageBuilderID,
   displayCount,
-  bannerProps
+  shouldRenderBanner,
+  bannerProps,
+  bannerIndex
 }) => {
   const {
     hasGTM
@@ -37,7 +39,6 @@ const FullRenderItem = ({
   const parsedPropsToDisplay = parsePropsToDisplay(entityProps, propsToDisplay);
   const currentItemIndex = initialOffset + index;
   const renderWaypoint = isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
-  const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderWaypoint && /*#__PURE__*/React.createElement(Waypoint, {
     onEnter: triggerInfiniteScroll
   }), displayCount && /*#__PURE__*/React.createElement("div", {
@@ -57,7 +58,9 @@ const FullRenderItem = ({
     pageBuilderID
   })), !!parsedPropsToDisplay.length && /*#__PURE__*/React.createElement(React.Fragment, null, parsedPropsToDisplay.map(prop => prop ? /*#__PURE__*/React.createElement("span", {
     key: prop
-  }, prop) : null)), shouldRenderBanner && /*#__PURE__*/React.createElement(Banner, bannerProps));
+  }, prop) : null)), shouldRenderBanner && /*#__PURE__*/React.createElement(Banner, _extends({}, bannerProps, {
+    cardBannerIndex: bannerIndex
+  })));
 };
 
 FullRenderItem.propTypes = {
@@ -74,6 +77,8 @@ FullRenderItem.propTypes = {
   itemId: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   isInfinite: PropTypes.bool.isRequired,
+  shouldRenderBanner: PropTypes.bool.isRequired,
+  bannerIndex: PropTypes.number.isRequired,
   propsToDisplay: PropTypes.array,
   data: PropTypes.array,
   itemsToDisplay: PropTypes.array,

package/lib-es/components/List/components/Full/FullRenderItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/List/components/Full/FullRenderItem.js"],"names":["React","useContext","PropTypes","Waypoint","MainContext","BuildPBComponents","Banner","parsePropsToDisplay","shouldRenderWaypoint","checkIfShouldRenderBanner","FullRenderItem","isInfinite","pageBuilderComponents","entityProps","propsToDisplay","entity","index","itemId","listTotal","initialOffset","currentListLength","triggerInfiniteScroll","parent","pageBuilderID","displayCount","bannerProps","hasGTM","parsedPropsToDisplay","currentItemIndex","renderWaypoint","shouldRenderBanner","itemEntity","length","map","prop","propTypes","array","object","isRequired","number","bool","func","string","data","itemsToDisplay","defaultProps"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Waypoint } from 'react-waypoint';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';\nimport Banner from '../../../Banner';\nimport { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';\nimport { checkIfShouldRenderBanner } from '../helpers';\n\nconst FullRenderItem = ({\n  isInfinite,\n  pageBuilderComponents,\n  entityProps,\n  propsToDisplay,\n  entity,\n  index,\n  itemId,\n  listTotal,\n  initialOffset,\n  currentListLength,\n  triggerInfiniteScroll,\n  parent,\n  pageBuilderID,\n  displayCount,\n  bannerProps\n}) => {\n  const { hasGTM } = useContext(MainContext);\n  if (!pageBuilderComponents) return null;\n  const parsedPropsToDisplay = parsePropsToDisplay(entityProps, propsToDisplay);\n  const currentItemIndex = initialOffset + index;\n  const renderWaypoint =\n    isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);\n  const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);\n\n  return (\n    <>\n      {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}\n      {displayCount && (\n        <div className=\"heading heading--section heading--section--count\">\n          <span className=\"section-number\">{currentItemIndex + 1}</span>\n          <span className=\"section-total\">/{listTotal}</span>\n        </div>\n      )}\n      <div className=\"list__item list__item--full\">\n        {BuildPBComponents(pageBuilderComponents, {\n          parent: { ...parent, itemId, itemEntity: entity },\n          hasGTM,\n          pageBuilderID\n        })}\n      </div>\n      {!!parsedPropsToDisplay.length && (\n        <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>\n      )}\n      {shouldRenderBanner && <Banner {...bannerProps} />}\n    </>\n  );\n};\n\nFullRenderItem.propTypes = {\n  pageBuilderComponents: PropTypes.array,\n  entityProps: PropTypes.object.isRequired,\n  parent: PropTypes.object.isRequired,\n  currentListLength: PropTypes.number.isRequired,\n  listTotal: PropTypes.number.isRequired,\n  initialOffset: PropTypes.number.isRequired,\n  displayCount: PropTypes.bool.isRequired,\n  triggerInfiniteScroll: PropTypes.func,\n  entity: PropTypes.string.isRequired,\n  pageBuilderID: PropTypes.string.isRequired,\n  itemId: PropTypes.string.isRequired,\n  index: PropTypes.number.isRequired,\n  isInfinite: PropTypes.bool.isRequired,\n  propsToDisplay: PropTypes.array,\n  data: PropTypes.array,\n  itemsToDisplay: PropTypes.array,\n  bannerProps: PropTypes.object\n};\n\nFullRenderItem.defaultProps = {\n  pageBuilderComponents: null,\n  data: [],\n  propsToDisplay: [],\n  itemsToDisplay: [],\n  triggerInfiniteScroll: null,\n  bannerProps: null\n};\n\nexport default FullRenderItem;\n"],"file":"FullRenderItem.js"}
+{"version":3,"sources":["../../../../../src/components/List/components/Full/FullRenderItem.js"],"names":["React","useContext","PropTypes","Waypoint","MainContext","BuildPBComponents","Banner","parsePropsToDisplay","shouldRenderWaypoint","FullRenderItem","isInfinite","pageBuilderComponents","entityProps","propsToDisplay","entity","index","itemId","listTotal","initialOffset","currentListLength","triggerInfiniteScroll","parent","pageBuilderID","displayCount","shouldRenderBanner","bannerProps","bannerIndex","hasGTM","parsedPropsToDisplay","currentItemIndex","renderWaypoint","itemEntity","length","map","prop","propTypes","array","object","isRequired","number","bool","func","string","data","itemsToDisplay","defaultProps"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Waypoint } from 'react-waypoint';\nimport { MainContext } from '@blaze-cms/nextjs-components';\nimport BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';\nimport Banner from '../../../Banner';\nimport { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';\n\nconst FullRenderItem = ({\n  isInfinite,\n  pageBuilderComponents,\n  entityProps,\n  propsToDisplay,\n  entity,\n  index,\n  itemId,\n  listTotal,\n  initialOffset,\n  currentListLength,\n  triggerInfiniteScroll,\n  parent,\n  pageBuilderID,\n  displayCount,\n  shouldRenderBanner,\n  bannerProps,\n  bannerIndex\n}) => {\n  const { hasGTM } = useContext(MainContext);\n  if (!pageBuilderComponents) return null;\n  const parsedPropsToDisplay = parsePropsToDisplay(entityProps, propsToDisplay);\n  const currentItemIndex = initialOffset + index;\n  const renderWaypoint =\n    isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);\n\n  return (\n    <>\n      {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}\n      {displayCount && (\n        <div className=\"heading heading--section heading--section--count\">\n          <span className=\"section-number\">{currentItemIndex + 1}</span>\n          <span className=\"section-total\">/{listTotal}</span>\n        </div>\n      )}\n      <div className=\"list__item list__item--full\">\n        {BuildPBComponents(pageBuilderComponents, {\n          parent: { ...parent, itemId, itemEntity: entity },\n          hasGTM,\n          pageBuilderID\n        })}\n      </div>\n      {!!parsedPropsToDisplay.length && (\n        <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>\n      )}\n      {shouldRenderBanner && <Banner {...bannerProps} cardBannerIndex={bannerIndex} />}\n    </>\n  );\n};\n\nFullRenderItem.propTypes = {\n  pageBuilderComponents: PropTypes.array,\n  entityProps: PropTypes.object.isRequired,\n  parent: PropTypes.object.isRequired,\n  currentListLength: PropTypes.number.isRequired,\n  listTotal: PropTypes.number.isRequired,\n  initialOffset: PropTypes.number.isRequired,\n  displayCount: PropTypes.bool.isRequired,\n  triggerInfiniteScroll: PropTypes.func,\n  entity: PropTypes.string.isRequired,\n  pageBuilderID: PropTypes.string.isRequired,\n  itemId: PropTypes.string.isRequired,\n  index: PropTypes.number.isRequired,\n  isInfinite: PropTypes.bool.isRequired,\n  shouldRenderBanner: PropTypes.bool.isRequired,\n  bannerIndex: PropTypes.number.isRequired,\n  propsToDisplay: PropTypes.array,\n  data: PropTypes.array,\n  itemsToDisplay: PropTypes.array,\n  bannerProps: PropTypes.object\n};\n\nFullRenderItem.defaultProps = {\n  pageBuilderComponents: null,\n  data: [],\n  propsToDisplay: [],\n  itemsToDisplay: [],\n  triggerInfiniteScroll: null,\n  bannerProps: null\n};\n\nexport default FullRenderItem;\n"],"file":"FullRenderItem.js"}

package/lib-es/components/List/helpers/get-items-per-page-to-use.js

@@ -1,6 +1,9 @@
 import { DEFAULT_LIMIT } from '../../../constants';
 
-const getItemsPerPageToUse = (itemsPerPage, limitToUse) => limitToUse && itemsPerPage >= limitToUse || (!itemsPerPage ? limitToUse : itemsPerPage) || DEFAULT_LIMIT;
+const getItemsPerPageToUse = (itemsPerPage, limitToUse) => {
+  if (limitToUse && itemsPerPage >= limitToUse) return limitToUse;
+  return itemsPerPage || limitToUse || DEFAULT_LIMIT;
+};
 
 export default getItemsPerPageToUse;
 //# sourceMappingURL=get-items-per-page-to-use.js.map

package/lib-es/components/List/helpers/get-items-per-page-to-use.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/List/helpers/get-items-per-page-to-use.js"],"names":["DEFAULT_LIMIT","getItemsPerPageToUse","itemsPerPage","limitToUse"],"mappings":"AAAA,SAASA,aAAT,QAA8B,oBAA9B;;AAEA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAeC,UAAf,KAC1BA,UAAU,IAAID,YAAY,IAAIC,UAA/B,KACC,CAACD,YAAD,GAAgBC,UAAhB,GAA6BD,YAD9B,KAEAF,aAHF;;AAKA,eAAeC,oBAAf","sourcesContent":["import { DEFAULT_LIMIT } from '../../../constants';\n\nconst getItemsPerPageToUse = (itemsPerPage, limitToUse) =>\n  (limitToUse && itemsPerPage >= limitToUse) ||\n  (!itemsPerPage ? limitToUse : itemsPerPage) ||\n  DEFAULT_LIMIT;\n\nexport default getItemsPerPageToUse;\n"],"file":"get-items-per-page-to-use.js"}
+{"version":3,"sources":["../../../../src/components/List/helpers/get-items-per-page-to-use.js"],"names":["DEFAULT_LIMIT","getItemsPerPageToUse","itemsPerPage","limitToUse"],"mappings":"AAAA,SAASA,aAAT,QAA8B,oBAA9B;;AAEA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAeC,UAAf,KAA8B;AACzD,MAAIA,UAAU,IAAID,YAAY,IAAIC,UAAlC,EAA8C,OAAOA,UAAP;AAC9C,SAAOD,YAAY,IAAIC,UAAhB,IAA8BH,aAArC;AACD,CAHD;;AAKA,eAAeC,oBAAf","sourcesContent":["import { DEFAULT_LIMIT } from '../../../constants';\n\nconst getItemsPerPageToUse = (itemsPerPage, limitToUse) => {\n  if (limitToUse && itemsPerPage >= limitToUse) return limitToUse;\n  return itemsPerPage || limitToUse || DEFAULT_LIMIT;\n};\n\nexport default getItemsPerPageToUse;\n"],"file":"get-items-per-page-to-use.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.110.0-alpha.2",
+  "version": "0.111.0-alpha.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -88,5 +88,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "f1656c5eae74ff45a86ee8806e99b3c53bf6f93f"
+  "gitHead": "f3efa34b54fecfe15f81505509af8ccc1d3d66f9"
 }

package/src/components/Banner/BannerRender.js

@@ -79,20 +79,21 @@ const BannerRender = ({
   const isContextualTargetingReady = isContextualTargetingSet || !propsToDisplay.length;
   const shouldShowBanner =
     parsedAdunit && parsedSizes && !!parsedSizes.length && isContextualTargetingReady;
+
   if (!shouldShowBanner) return null;
   const customTargetings = setCustomTargetings(targetings, cardBannerIndex);
-
   const style = {
     maxHeight: maxBannerHeight,
     minHeight: minBannerHeight
   };
+  const targetingArguments = { ...parsedTargetings, ...customTargetings };
 
   return (
     <div className="ad-slot" style={style}>
       <AdSlot
         adUnit={parsedAdunit}
         sizes={parsedSizes}
-        targetingArguments={{ ...parsedTargetings, ...customTargetings }}
+        targetingArguments={targetingArguments}
         sizeMapping={sizeMapping}
       />
     </div>

package/src/components/Image/Image.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import { Waypoint } from 'react-waypoint';
 import PropTypes from 'prop-types';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
 import Wrapper from '../Wrapper';
 import ImageRender from './ImageRender';
 import ImageDetails from './ImageDetails';
 import getClassModifiers from '../../utils/get-class-modifiers';
 import { getImageData } from '../../utils';
 import { getDisplayCountData, shouldShowProperty, buildImageProperties } from '../../helpers';
-import { WAYPOINT_BOTTOM_OFFSET, IMAGE, HERO } from '../../constants';
+import { IMAGE, HERO, IN_VIEW_CONFIG } from '../../constants';
 
 const Image = ({
   url,
@@ -32,8 +32,7 @@ const Image = ({
   ...otherProps
 }) => {
   const [displayLightbox, setDisplayLightbox] = useState(false);
-  const [isIntersecting, setIsIntersecting] = useState(false);
-
+  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
   const { caption, altText, hrefUrl } = getImageData(otherProps, imageData);
 
   const href = url || hrefUrl;
@@ -70,19 +69,14 @@ const Image = ({
   });
   const { shouldDisplayCount, countMessage } = getDisplayCountData(displayCount, images);
   const sizeKey = [IMAGE, isHero ? HERO : '', _modifier].filter(Boolean).join(':');
-
+  const shouldDisplayImage = !!imageUrl && isIntersecting;
   return (
-    <Wrapper className={wrapperClassName} modifiers={modifiers} {...otherProps}>
-      <Waypoint
-        onEnter={() => !isIntersecting && setIsIntersecting(true)}
-        bottomOffset={WAYPOINT_BOTTOM_OFFSET}
-      />
+    <Wrapper ref={outerRef} className={wrapperClassName} modifiers={modifiers} {...otherProps}>
       {elementTitle && <h2 className="heading heading--section">{elementTitle}</h2>}
-      {!!imageUrl && (
+      {shouldDisplayImage && (
         <ImgWrapper {...imgWrapperProps}>
           <ImageRender
             {...otherProps}
-            isIntersecting={isIntersecting}
             alt={altText}
             imageUrl={imageUrl}
             handleEnableLightbox={handleEnableLightbox}

package/src/components/Image/ImageFactory.js

@@ -33,7 +33,7 @@ const ImageFactory = props => {
   );
 
   if (error) return error.message;
-  if (loading) return <div />;
+  if (loading) return '';
 
   return files.map(({ id, data: imageData = {}, url: imageUrl = '' }) => {
     if (!imageUrl) return null;

package/src/components/Image/ImageRender.js

@@ -4,7 +4,6 @@ import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
 import Lightbox from './Lightbox';
 
 const ImageRender = ({
-  isIntersecting,
   alt,
   imageUrl,
   handleEnableLightbox,
@@ -24,15 +23,13 @@ const ImageRender = ({
   const imageStyle = enableLightbox ? { cursor: 'pointer' } : style;
   return (
     <>
-      {isIntersecting && (
-        <ResponsiveImage
-          sizeKey={sizeKey}
-          alt={alt}
-          src={imageUrl}
-          onClick={handleEnableLightbox}
-          style={imageStyle}
-        />
-      )}
+      <ResponsiveImage
+        sizeKey={sizeKey}
+        alt={alt}
+        src={imageUrl}
+        onClick={handleEnableLightbox}
+        style={imageStyle}
+      />
       {displayLightbox && (
         <Lightbox
           imageUrl={imageUrl}
@@ -49,7 +46,6 @@ const ImageRender = ({
 };
 
 ImageRender.propTypes = {
-  isIntersecting: PropTypes.bool.isRequired,
   displayLightbox: PropTypes.bool.isRequired,
   enableLightbox: PropTypes.bool.isRequired,
   alt: PropTypes.string,

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 import Card from '../../../Card/Card';
 import { shouldRenderWaypoint, renderChildren, parsePropsToDisplay } from '../../../../helpers';
-import { checkIfShouldRenderGtm, checkIfShouldRenderBanner } from '../helpers';
+import { checkIfShouldRenderGtm } from '../helpers';
 import Banner from '../../../Banner';
 
 const CardsRenderItem = ({
@@ -18,7 +18,9 @@ const CardsRenderItem = ({
   modifier,
   gridModifier,
   propsToDisplayModifiers,
-  propsToDisplay
+  propsToDisplay,
+  shouldRenderBanner,
+  bannerIndex
 }) => {
   const {
     initialOffset,
@@ -40,7 +42,7 @@ const CardsRenderItem = ({
     isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
   const shouldRenderGtm =
     gtmChildren && checkIfShouldRenderGtm(itemsPerPage, currentListLength, index);
-  const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);
+
   const parsedPropsToDisplay = parsePropsToDisplay(cardProps, propsToDisplay);
 
   return (
@@ -72,7 +74,7 @@ const CardsRenderItem = ({
           {...cardProps}
         />
       </div>
-      {shouldRenderBanner && <Banner {...bannerProps} />}
+      {shouldRenderBanner && <Banner {...bannerProps} cardBannerIndex={bannerIndex} />}
     </>
   );
 };
@@ -83,6 +85,8 @@ CardsRenderItem.propTypes = {
   index: PropTypes.number.isRequired,
   currentListLength: PropTypes.number.isRequired,
   propsToDisplayModifiers: PropTypes.array.isRequired,
+  shouldRenderBanner: PropTypes.bool.isRequired,
+  bannerIndex: PropTypes.number.isRequired,
   bannerProps: PropTypes.object,
   gridModifier: PropTypes.string,
   propsToDisplay: PropTypes.array,

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

@@ -3,34 +3,46 @@ 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, ...props }) => (
-  <Wrapper className="grid" modifiers={gridModifier}>
-    {orderedListData.map((cardProps, index) => {
-      const { id } = cardProps;
+const CardsRenderWrapper = ({ orderedListData, gridModifier, bannerProps, ...props }) => {
+  let bannerIndex = 0;
 
-      return (
-        <CardsRenderItem
-          key={id}
-          index={index}
-          cardProps={cardProps}
-          gridModifier={gridModifier}
-          listProps={props}
-          {...props}
-        />
-      );
-    })}
-  </Wrapper>
-);
+  return (
+    <Wrapper className="grid" modifiers={gridModifier}>
+      {orderedListData.map((cardProps, index) => {
+        const { id } = cardProps;
+        const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);
+        if (shouldRenderBanner) bannerIndex += 1;
+
+        return (
+          <CardsRenderItem
+            key={id}
+            index={index}
+            cardProps={cardProps}
+            gridModifier={gridModifier}
+            listProps={props}
+            shouldRenderBanner={shouldRenderBanner}
+            bannerProps={bannerProps}
+            bannerIndex={bannerIndex}
+            {...props}
+          />
+        );
+      })}
+    </Wrapper>
+  );
+};
 
 CardsRenderWrapper.propTypes = {
   orderedListData: PropTypes.array.isRequired,
   gridModifier: PropTypes.string.isRequired,
-  imagesData: PropTypes.array
+  imagesData: PropTypes.array,
+  bannerProps: PropTypes.object
 };
 
 CardsRenderWrapper.defaultProps = {
-  imagesData: []
+  imagesData: [],
+  bannerProps: {}
 };
 
 export default withTitle(CardsRenderWrapper);

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

@@ -5,6 +5,7 @@ import FullRenderItem from './FullRenderItem';
 import ListPagination from '../Pagination';
 import { LOAD_MORE } from '../../../../constants';
 import { BANNER } from '../../constants';
+import { checkIfShouldRenderBanner } from '../helpers';
 
 const FullRender = ({ orderedListData, paginationType, ...props }) => {
   const pageBuilderID = uuid();
@@ -12,22 +13,30 @@ const FullRender = ({ orderedListData, paginationType, ...props }) => {
   const bannerProps = banner
     ? { hasBanner, parent, entity, propsToDisplay, ...banner, type: BANNER }
     : null;
+  let bannerIndex = 0;
 
   return (
     <>
       <div className="list list--full">
-        {orderedListData.map(({ id, ...entityProps }, i) => (
-          <FullRenderItem
-            key={id}
-            {...props}
-            {...entityProps}
-            index={i}
-            itemId={id}
-            pageBuilderID={pageBuilderID}
-            entityProps={entityProps}
-            bannerProps={bannerProps}
-          />
-        ))}
+        {orderedListData.map(({ id, ...entityProps }, i) => {
+          const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(i, bannerProps);
+          if (shouldRenderBanner) bannerIndex += 1;
+
+          return (
+            <FullRenderItem
+              key={id}
+              {...props}
+              {...entityProps}
+              index={i}
+              itemId={id}
+              pageBuilderID={pageBuilderID}
+              entityProps={entityProps}
+              shouldRenderBanner={shouldRenderBanner}
+              bannerProps={bannerProps}
+              bannerIndex={bannerIndex}
+            />
+          );
+        })}
       </div>
       {paginationType === LOAD_MORE && (
         <ListPagination paginationType={paginationType} {...props} />

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

@@ -5,7 +5,6 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';
 import Banner from '../../../Banner';
 import { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';
-import { checkIfShouldRenderBanner } from '../helpers';
 
 const FullRenderItem = ({
   isInfinite,
@@ -22,7 +21,9 @@ const FullRenderItem = ({
   parent,
   pageBuilderID,
   displayCount,
-  bannerProps
+  shouldRenderBanner,
+  bannerProps,
+  bannerIndex
 }) => {
   const { hasGTM } = useContext(MainContext);
   if (!pageBuilderComponents) return null;
@@ -30,7 +31,6 @@ const FullRenderItem = ({
   const currentItemIndex = initialOffset + index;
   const renderWaypoint =
     isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
-  const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);
 
   return (
     <>
@@ -51,7 +51,7 @@ const FullRenderItem = ({
       {!!parsedPropsToDisplay.length && (
         <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
       )}
-      {shouldRenderBanner && <Banner {...bannerProps} />}
+      {shouldRenderBanner && <Banner {...bannerProps} cardBannerIndex={bannerIndex} />}
     </>
   );
 };
@@ -70,6 +70,8 @@ FullRenderItem.propTypes = {
   itemId: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   isInfinite: PropTypes.bool.isRequired,
+  shouldRenderBanner: PropTypes.bool.isRequired,
+  bannerIndex: PropTypes.number.isRequired,
   propsToDisplay: PropTypes.array,
   data: PropTypes.array,
   itemsToDisplay: PropTypes.array,

package/src/components/List/helpers/get-items-per-page-to-use.js

@@ -1,8 +1,8 @@
 import { DEFAULT_LIMIT } from '../../../constants';
 
-const getItemsPerPageToUse = (itemsPerPage, limitToUse) =>
-  (limitToUse && itemsPerPage >= limitToUse) ||
-  (!itemsPerPage ? limitToUse : itemsPerPage) ||
-  DEFAULT_LIMIT;
+const getItemsPerPageToUse = (itemsPerPage, limitToUse) => {
+  if (limitToUse && itemsPerPage >= limitToUse) return limitToUse;
+  return itemsPerPage || limitToUse || DEFAULT_LIMIT;
+};
 
 export default getItemsPerPageToUse;

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

@@ -7,6 +7,10 @@ jest.mock('../../../../../src/components/Image/ImageRender', () =>
   jest.fn(({ alt, imageUrl, sizeKey }) => <img alt={alt} src={imageUrl} data-testid={sizeKey} />)
 );
 
+jest.mock('@blaze-react/utils/lib/customHooks', () => ({
+  useInView: jest.fn(() => [true, null])
+}));
+
 const renderComponent = props => {
   const _render = render(<Image {...props} />);
   return { ..._render };

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

@@ -5,16 +5,16 @@ import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
 import ImageFactory from '../../../../../src/components/Image/ImageFactory';
 import { MOCK_BASIC, MOCK_NO_URL, MOCK_WITH_ERR } from './mocks';
 
+jest.mock('@blaze-react/utils/lib/customHooks', () => ({
+  useInView: jest.fn(() => [true, null])
+}));
+
 const setup = async (props, mocks) => (
   <MockedRoot mocks={mocks} addTypename={false}>
     <ImageFactory {...props} />
   </MockedRoot>
 );
 
-jest.mock('react-waypoint', () => ({
-  Waypoint: jest.fn(() => <div>Test Component</div>)
-}));
-
 const renderComponent = async component => {
   let renderResults;
 

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

@@ -19,12 +19,6 @@ const mockedProps = {
 };
 
 describe('Image Render component', () => {
-  it('should render if not interseting and lightbox not displaying', () => {
-    const { container } = render(<ImageRender {...mockedProps} isIntersecting={false} />);
-
-    expect(container).toBeEmptyDOMElement();
-  });
-
   it('should render image', () => {
     const { container, asFragment } = render(<ImageRender {...mockedProps} />);
     expect(container.childNodes[0].nodeName).toEqual('IMG');

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

@@ -5,9 +5,6 @@ exports[`Image component should render image 1`] = `
   <div
     class="image "
   >
-    <span
-      style="font-size: 0px;"
-    />
     <a
       class="image__wrapper"
       href="http://www.url-test-prop.com"

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

@@ -5,15 +5,17 @@ exports[`ImageFactory component should render image 1`] = `
   <div
     class="image "
   >
-    <div>
-      Test Component
-    </div>
     <a
       class="image__wrapper"
       href="http://www.url-test-prop.com"
       rel="noopener nofollow"
       target="_blank"
-    />
+    >
+      <img
+        alt=""
+        src="test-url"
+      />
+    </a>
   </div>
 </DocumentFragment>
 `;

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

@@ -16,10 +16,6 @@ const props = {
 };
 
 describe('LazyImage component', () => {
-  it('should be defined', () => {
-    expect(LazyImage).toBeDefined();
-  });
-
   it('should not load image when not in view', () => {
     const queryByAltText = lazyImageTest(false);
     expect(queryByAltText(props.alt)).toBeNull();

package/tests/unit/src/components/List/helpers/get-items-per-page-to-use.test.js

@@ -0,0 +1,24 @@
+import getItemsPerPageToUse from '../../../../../../src/components/List/helpers/get-items-per-page-to-use';
+
+export default getItemsPerPageToUse;
+describe('getItemsPerPageToUse helper function', () => {
+  it('should return limit if passed and itemsPerPage is greater', () => {
+    const withLimit = getItemsPerPageToUse(12, 3);
+    expect(withLimit).toEqual(3);
+  });
+
+  it('should return itemsPerPage if passed and is lower than limit', () => {
+    const withLimit = getItemsPerPageToUse(12, 15);
+    expect(withLimit).toEqual(12);
+  });
+
+  it('should return limit if no itemsPerPage is passed', () => {
+    const withLimit = getItemsPerPageToUse(null, 5);
+    expect(withLimit).toEqual(5);
+  });
+
+  it('should return 50 if no itemsPerPage or limit is passed', () => {
+    const withLimit = getItemsPerPageToUse(null, null);
+    expect(withLimit).toEqual(50);
+  });
+});