@blaze-cms/react-page-builder 0.128.0-admin-updates.3 → 0.128.0-admin-updates.7

package/src/components/Card/CardsContainer.js

@@ -9,8 +9,9 @@ import Card from './Card';
 import { getDynamicGridClasses } from './helpers';
 import { getEntitiesWithBanner, parsePropsToDisplay } from '../../helpers';
 import { getPropsToDisplayModifiers } from '../../utils';
+import { checkIfShouldRenderBanner, checkNewBannerSettings } from '../List/components/helpers';
 
-const CardsContainer = ({
+const CardContainer = ({
   cardData,
   gridModifier,
   style,
@@ -36,14 +37,20 @@ const CardsContainer = ({
   titleOverlayModifier,
   ...cardProps
 }) => {
-  const cardsWithBanners = getEntitiesWithBanner(cardData, cardProps);
   const { itemId } = useContext(MainContext);
+  const { banner } = cardProps;
+  // TODO: remove this check and all associated code once old banner setup is no longer supported
+  const hasNewBannerSettings = checkNewBannerSettings(banner);
+  const parsedCardsData = hasNewBannerSettings
+    ? cardData
+    : getEntitiesWithBanner(cardData, cardProps);
   const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);
   const dynamicWrapperSizes = enableCarousel
     ? ''
     : getDynamicGridClasses('grid', itemsPerRow, designConfig);
-  let renderCounter = 0;
   const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;
+  let bannerIndex = 0;
+  const bannerProps = banner ? { ...cardProps, ...banner, type: 'banner' } : null;
 
   return (
     <CardWrapper
@@ -53,13 +60,48 @@ const CardsContainer = ({
       bannerModifier={bannerModifier}
       enableAutoScroll={enableAutoScroll}
       autoScrollTimer={autoScrollTimer}>
-      {cardsWithBanners.map(({ baseAdunit, id, ...entityProps }, index) => {
+      {parsedCardsData.map((currentEntity, index) => {
+        const { baseAdunit, id, ...entityProps } = currentEntity;
+        const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, banner);
         const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);
         const dynamicKey = [itemId, index].join('-');
-        if (baseAdunit) renderCounter += 1;
-
         const priority = priorityLimit > 0 && index + 1 <= priorityLimit;
+        if (hasNewBannerSettings && shouldRenderBanner) bannerIndex += 1;
+        if (!hasNewBannerSettings && baseAdunit) bannerIndex += 1;
+        const parsedCardProps = {
+          key: id,
+          id,
+          enableCarousel,
+          graphqlEntityMap,
+          propsToDisplay,
+          parsedPropsToDisplay: extraProps,
+          propsToDisplayModifiers,
+          modifier,
+          style,
+          cardChildren,
+          gtmChildren,
+          gtmId: name,
+          gridModifier,
+          entityProps,
+          displayCategory,
+          displayThumbnail,
+          displayTitle,
+          priority,
+          enableOverlay,
+          overlayModifier,
+          titleOverlayModifier,
+          ...entityProps
+        };
 
+        if (hasNewBannerSettings)
+          return (
+            <>
+              <Card key={id} {...parsedCardProps} />
+              {shouldRenderBanner && (
+                <Banner key={dynamicKey} {...bannerProps} renderCounter={bannerIndex} />
+              )}
+            </>
+          );
         return baseAdunit ? (
           <Banner
             key={dynamicKey}
@@ -67,44 +109,21 @@ const CardsContainer = ({
             baseAdunit={baseAdunit}
             {...entityProps}
             modifier={modifier}
-            renderCounter={renderCounter}
+            renderCounter={bannerIndex}
           />
         ) : (
-          <Card
-            key={id}
-            id={id}
-            enableCarousel={enableCarousel}
-            graphqlEntityMap={graphqlEntityMap}
-            propsToDisplay={propsToDisplay}
-            parsedPropsToDisplay={extraProps}
-            propsToDisplayModifiers={propsToDisplayModifiers}
-            modifier={modifier}
-            style={style}
-            cardChildren={cardChildren}
-            gtmChildren={gtmChildren}
-            gtmId={name}
-            gridModifier={gridModifier}
-            entityProps={entityProps}
-            displayCategory={displayCategory}
-            displayThumbnail={displayThumbnail}
-            displayTitle={displayTitle}
-            priority={priority}
-            enableOverlay={enableOverlay}
-            overlayModifier={overlayModifier}
-            titleOverlayModifier={titleOverlayModifier}
-            {...entityProps}
-          />
+          <Card key={id} {...parsedCardProps} />
         );
       })}
     </CardWrapper>
   );
 };
 
-CardsContainer.propTypes = {
+CardContainer.propTypes = {
   cardData: PropTypes.array.isRequired,
+  graphqlEntityMap: PropTypes.object.isRequired,
   name: PropTypes.string,
   entity: PropTypes.string.isRequired,
-  graphqlEntityMap: PropTypes.object.isRequired,
   gridModifier: PropTypes.string,
   gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
@@ -126,7 +145,7 @@ CardsContainer.propTypes = {
   autoScrollTimer: PropTypes.number
 };
 
-CardsContainer.defaultProps = {
+CardContainer.defaultProps = {
   gtmChildren: [],
   cardChildren: [],
   name: '',
@@ -149,4 +168,4 @@ CardsContainer.defaultProps = {
   titleOverlayModifier: ''
 };
 
-export default withTitle(CardsContainer);
+export default withTitle(CardContainer);

package/src/components/Card/CardsRender.js

@@ -95,13 +95,14 @@ const CardsRender = ({
     isPreview,
     itemEntityUpdated: unpublishedParentEntityName
   });
-  const { data: { parentEntityData = {} } = {}, error: _err, loading: _load } = useQuery(
-    generateSingleItemQuery(getAction, queryProps),
-    {
-      variables: { id: parentId },
-      skip: shouldSkipSingleQuery(_loading, getAction, queryProps)
-    }
-  );
+  const {
+    data: { entityData: parentEntityData = {} } = {},
+    error: _err,
+    loading: _load
+  } = useQuery(generateSingleItemQuery(getAction, queryProps), {
+    variables: { id: parentId },
+    skip: shouldSkipSingleQuery(_loading, getAction, queryProps)
+  });
 
   const {
     data: requiredSchema = {},
@@ -138,6 +139,7 @@ const CardsRender = ({
     fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',
     skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)
   });
+
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
   const isLoading = shouldReturn(_loading, _load, schemaLoading, cardsLoading, imagesLoading);

package/src/components/DataSummary/DataSummaryTypes/ItemDetailsSummary/ItemDetailsSummaryContent.js

@@ -13,7 +13,7 @@ const ItemDetailsSummaryContent = ({ summaryPropsWithContent }) => {
 
     return (
       <span className={modifier} key={dynamicKey}>
-        {wrappedValue}
+        {key && <span className="item-details-summary-label">{key}</span>} {wrappedValue}
       </span>
     );
   });

package/src/components/Image/Image.js

@@ -78,7 +78,7 @@ const Image = ({
 
   return (
     <Wrapper ref={outerRef} className={wrapperClassName} modifiers={modifiers} {...otherProps}>
-      {elementTitle && <h2 className="heading heading--section">{elementTitle}</h2>}
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
       {shouldDisplayImage && (
         <ImgWrapper {...imgWrapperProps}>
           <ImageRender

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

@@ -17,7 +17,6 @@ const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props })
     ? { hasBanner, parent, entity, propsToDisplay, ...banner, type: BANNER }
     : null;
   let bannerIndex = 0;
-
   const WrapperToUse = omitWrappers ? Fragment : Wrapper;
 
   return (

package/src/components/List/components/helpers/check-if-should-render-banner.js

@@ -1,5 +1,4 @@
-const checkIfShouldRenderBanner = (elementIndex, banner) => {
-  if (!banner) return false;
+const legacyCheckIfShouldRenderBanner = (elementIndex, banner) => {
   const { interval, repeat, hasBanner } = banner;
   if (!hasBanner || !interval) return false;
   const position = elementIndex + 1;
@@ -8,5 +7,27 @@ const checkIfShouldRenderBanner = (elementIndex, banner) => {
   if (repeat && repeatMatch) return true;
   return false;
 };
+const checkNewBannerSettings = banner => {
+  if (!banner) return false;
+
+  const { repeatEvery, startingPoint, maxRepetitions } = banner;
+  return repeatEvery > 0 || startingPoint > 0 || maxRepetitions > 0;
+};
+
+const checkIfShouldRenderBanner = (elementIndex, banner) => {
+  if (!banner) return false;
+  if (!checkNewBannerSettings(banner)) return legacyCheckIfShouldRenderBanner(elementIndex, banner);
+
+  const { repeatEvery, startingPoint, maxRepetitions } = banner;
+  const position = elementIndex + 1;
+  if (position < startingPoint) return false;
+  if (position === startingPoint) return true;
+  const positionDifference = position - startingPoint;
+  if (positionDifference < repeatEvery) return false;
+  const timesRepeated = positionDifference / repeatEvery;
+  const repeatMatch = Number.isInteger(timesRepeated);
+  if (!repeatMatch) return false;
+  return timesRepeated < maxRepetitions;
+};
 
-export default checkIfShouldRenderBanner;
+export { checkIfShouldRenderBanner, checkNewBannerSettings };

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

@@ -1,2 +1,4 @@
-export { default as checkIfShouldRenderGtm } from './check-if-should-render-gtm';
-export { default as checkIfShouldRenderBanner } from './check-if-should-render-banner';
+import { checkIfShouldRenderBanner, checkNewBannerSettings } from './check-if-should-render-banner';
+import checkIfShouldRenderGtm from './check-if-should-render-gtm';
+
+export { checkIfShouldRenderBanner, checkNewBannerSettings, checkIfShouldRenderGtm };

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

@@ -80,7 +80,6 @@ const SearchFilter = ({
 
   const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
   const shouldSearch = !hasUrl;
-
   return (
     <>
       <form

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

@@ -13,6 +13,7 @@ const Checkbox = ({
   updateFilterValues,
   filterValues,
   label,
+  elementTitle,
   shouldSearch,
   displayFilterCount
 }) => {
@@ -68,6 +69,7 @@ const Checkbox = ({
 
   return (
     <>
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
       {label ? <p>{label}</p> : ''}
       <Checkboxes
         className="form-checkbox"
@@ -109,12 +111,14 @@ Checkbox.propTypes = {
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
   displayFilterCount: PropTypes.bool
 };
 
 Checkbox.defaultProps = {
   shouldSearch: false,
   label: '',
+  elementTitle: '',
   displayFilterCount: false
 };
 

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

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router';
 import Select from '@blaze-react/select';
 import { parseUrl } from 'query-string';
 import { useGetSingleEntitySchema } from '../../../hooks';
-import { withTitle } from '../../../HOC';
 import { getSelectOptions, getIntersectedProp, getRangeValue, calculateMinMax } from '../helpers';
 import { decodeValue } from '../helpers/decode-encode';
 
@@ -18,7 +17,8 @@ const Range = ({
   dataAggregations,
   updateFilterValues,
   filterValues,
-  shouldSearch
+  shouldSearch,
+  elementTitle
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -50,6 +50,7 @@ const Range = ({
 
   return (
     <>
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
       {hasMultipleOptions && (
         <>
           <label>{label}</label>
@@ -93,13 +94,15 @@ Range.propTypes = {
   shouldSearch: PropTypes.bool,
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
   dataAggregations: PropTypes.object.isRequired
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
-  label: ''
+  label: '',
+  elementTitle: ''
 };
 
-export default withTitle(Range);
+export default Range;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from '@blaze-react/select';
-import { withTitle } from '../../../HOC';
 import { DEFAULT_OPTION } from '../constants';
 
 const SelectFilter = ({
@@ -12,7 +11,8 @@ const SelectFilter = ({
   filterValues,
   shouldSearch,
   displayLabelAsPlaceholder,
-  displayFilterCount
+  displayFilterCount,
+  elementTitle
 }) => {
   const filterValue = filterValues[prop] || '';
   const disabledOptions = [];
@@ -35,20 +35,23 @@ const SelectFilter = ({
   }
 
   return (
-    <Select
-      label={labelToUse}
-      value={filterValue}
-      id={prop}
-      data-testid={`filter-${prop}`}
-      options={options}
-      defaultTextValue={defaultTextValue}
-      onChange={({ value }) => {
-        let valueToUse = value;
-        if (value === defaultTextValue) valueToUse = '';
-        updateFilterValues({ [prop]: valueToUse }, shouldSearch);
-      }}
-      disabled={disabledOptions}
-    />
+    <>
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
+      <Select
+        label={labelToUse}
+        value={filterValue}
+        id={prop}
+        data-testid={`filter-${prop}`}
+        options={options}
+        defaultTextValue={defaultTextValue}
+        onChange={({ value }) => {
+          let valueToUse = value;
+          if (value === defaultTextValue) valueToUse = '';
+          updateFilterValues({ [prop]: valueToUse }, shouldSearch);
+        }}
+        disabled={disabledOptions}
+      />
+    </>
   );
 };
 
@@ -59,6 +62,8 @@ SelectFilter.propTypes = {
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
+
   displayLabelAsPlaceholder: PropTypes.bool,
   displayFilterCount: PropTypes.bool
 };
@@ -67,8 +72,9 @@ SelectFilter.defaultProps = {
   filterValues: {},
   shouldSearch: false,
   label: '',
+  elementTitle: '',
   displayLabelAsPlaceholder: false,
   displayFilterCount: false
 };
 
-export default withTitle(SelectFilter);
+export default SelectFilter;

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

@@ -2,45 +2,49 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
 import { MdSearch } from 'react-icons/md';
-import { withTitle } from '../../../HOC';
 import { SEARCH_TERM } from '../constants';
 
-const TextSearch = ({ label, searchValue, updateFilterValues }) => (
-  <div className="search">
-    <div className="search__wrapper">
-      <div className="form-field form-field--input form-field--search">
-        <Input
-          id={SEARCH_TERM}
-          value={searchValue}
-          placeholder={label || 'Search'}
-          onChange={({ value: eValue }) => {
-            updateFilterValues({ [SEARCH_TERM]: eValue }, false);
-          }}
-        />
+const TextSearch = ({ label, searchValue, updateFilterValues, elementTitle }) => (
+  <>
+    {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
+    <div className="search">
+      <div className="search__wrapper">
+        <div className="form-field form-field--input form-field--search">
+          <Input
+            id={SEARCH_TERM}
+            value={searchValue}
+            placeholder={label || 'Search'}
+            onChange={({ value: eValue }) => {
+              updateFilterValues({ [SEARCH_TERM]: eValue }, false);
+            }}
+          />
+        </div>
+        <button
+          type="button"
+          className="icon-button icon-button--search"
+          onClick={e => {
+            e.preventDefault();
+            updateFilterValues({ [SEARCH_TERM]: searchValue }, true);
+          }}>
+          <i>
+            <MdSearch />
+          </i>
+        </button>
       </div>
-      <button
-        type="button"
-        className="icon-button icon-button--search"
-        onClick={e => {
-          e.preventDefault();
-          updateFilterValues({ [SEARCH_TERM]: searchValue }, true);
-        }}>
-        <i>
-          <MdSearch />
-        </i>
-      </button>
     </div>
-  </div>
+  </>
 );
 
 TextSearch.propTypes = {
   searchValue: PropTypes.string.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  elementTitle: PropTypes.string,
   label: PropTypes.string
 };
 
 TextSearch.defaultProps = {
+  elementTitle: '',
   label: ''
 };
 
-export default withTitle(TextSearch);
+export default TextSearch;

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

@@ -30,7 +30,7 @@ exports[`Card component should not render alternative headline if alternativePre
         >
           category-name
         </a>
-        <h2
+        <div
           class="card__title card__title--portrait "
         >
           <a
@@ -38,7 +38,7 @@ exports[`Card component should not render alternative headline if alternativePre
           >
             mock name
           </a>
-        </h2>
+        </div>
         <div
           class="card__details card__details--portrait"
         >
@@ -99,7 +99,7 @@ exports[`Card component should not render alternative headline if displayCategor
       <div
         class="card__content card__content--portrait"
       >
-        <h2
+        <div
           class="card__title card__title--portrait "
         >
           <a
@@ -107,7 +107,7 @@ exports[`Card component should not render alternative headline if displayCategor
           >
             mock name
           </a>
-        </h2>
+        </div>
         <div
           class="card__details card__details--portrait"
         >
@@ -174,7 +174,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
         >
           category-name
         </a>
-        <h2
+        <div
           class="card__title card__title--portrait "
         >
           <a
@@ -182,7 +182,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
           >
             mock name
           </a>
-        </h2>
+        </div>
         <div
           class="card__details card__details--portrait"
         >
@@ -248,7 +248,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
         >
           Pre header
         </div>
-        <h2
+        <div
           class="card__title card__title--portrait "
         >
           <a
@@ -256,7 +256,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
           >
             Alternative headline
           </a>
-        </h2>
+        </div>
         <div
           class="card__details card__details--portrait"
         >
@@ -323,7 +323,7 @@ exports[`Card component should render without throwing an error and match snapsh
         >
           category-name
         </a>
-        <h2
+        <div
           class="card__title card__title--portrait "
         >
           <a
@@ -331,7 +331,7 @@ exports[`Card component should render without throwing an error and match snapsh
           >
             mock name
           </a>
-        </h2>
+        </div>
         <div
           class="card__details card__details--portrait"
         >

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

@@ -36,7 +36,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
             >
               page
             </div>
-            <h2
+            <div
               class="card__title card__title--portrait "
             >
               <a
@@ -44,7 +44,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
               >
                 Swan 78
               </a>
-            </h2>
+            </div>
           </div>
           <div
             class="card__child-content"
@@ -73,7 +73,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
             >
               page
             </div>
-            <h2
+            <div
               class="card__title card__title--portrait "
             >
               <a
@@ -81,7 +81,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
               >
                 Swan 98
               </a>
-            </h2>
+            </div>
           </div>
           <div
             class="card__child-content"
@@ -123,7 +123,7 @@ exports[`CardsContainer component should render without throwing error and match
           >
             page
           </div>
-          <h2
+          <div
             class="card__title card__title--portrait "
           >
             <a
@@ -131,7 +131,7 @@ exports[`CardsContainer component should render without throwing error and match
             >
               Swan 78
             </a>
-          </h2>
+          </div>
         </div>
         <div
           class="card__child-content"
@@ -160,7 +160,7 @@ exports[`CardsContainer component should render without throwing error and match
           >
             page
           </div>
-          <h2
+          <div
             class="card__title card__title--portrait "
           >
             <a
@@ -168,7 +168,7 @@ exports[`CardsContainer component should render without throwing error and match
             >
               Swan 98
             </a>
-          </h2>
+          </div>
         </div>
         <div
           class="card__child-content"