@blaze-cms/react-page-builder 0.128.0-core-styles.0 → 0.128.0

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/src/helpers/build-props-query.js

@@ -6,7 +6,7 @@ const categoryProps = 'id publishedListingPage{id, url}';
 const checkProps = props =>
   !!(props && Object.keys(props).filter(prop => prop === CATEGORY_ID).length);
 
-const buildPropsQuery = (entitySchema, extraProps = [], cardOptions = null) => {
+const buildPropsQuery = (entitySchema, extraProps = [], cardOptions = null, linkProps = []) => {
   const parsedSchema = entitySchema.getEntitySchema ? entitySchema.getEntitySchema : entitySchema;
   const extraPropsHaveCategory = !!extraProps.filter(prop => prop.includes('category.')).length;
   const { typeBasedProps, shouldAddCategoryProps } = getTypeBaseProps(
@@ -16,39 +16,55 @@ const buildPropsQuery = (entitySchema, extraProps = [], cardOptions = null) => {
   );
 
   const allProps = [...typeBasedProps, ...extraProps];
-
   const uniqueProps = [...new Set([...allProps])];
+  const basicProps = [];
+  const nestedProps = {};
+  uniqueProps.forEach(prop => {
+    if (prop) {
+      if (!prop.includes('.')) {
+        basicProps.push(prop);
+        return;
+      }
+      const [base, nested] = prop.split('.');
+      if (!nestedProps[base]) nestedProps[base] = [nested];
+      else nestedProps[base].push(nested);
+    }
+  });
+
+  const complexProps = buildComplexProps(
+    shouldAddCategoryProps,
+    nestedProps,
+    parsedSchema,
+    linkProps
+  );
 
-  const basicProps = uniqueProps
-    .filter(prop => prop && !prop.includes('.'))
-    .filter((prop, i, arr) => arr.indexOf(prop) === i);
-  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps, parsedSchema);
   return [...basicProps, ...complexProps].join(',');
 };
 
-const buildComplexProps = (shouldAddCategoryProps, props, { relations }) =>
-  props
-    .filter(prop => prop && prop.includes('.'))
-    .map(nested => nested.split('.')[0])
-    .filter((prop, i, arr) => arr.indexOf(prop) === i)
-    .map(base => {
-      const matchingRelation = relations.find(({ localField }) => localField === base);
-      const nestedProps = props
-        .filter(
-          (extraProp, i, arr) =>
-            extraProp && extraProp.startsWith(`${base}.`) && arr.indexOf(extraProp) === i
-        )
-        .map(nested => nested.split('.')[1]);
-      if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
-
-      const jointNestedProps = nestedProps.join(',');
-      if (base === 'category' && shouldAddCategoryProps)
-        return `${base}{${jointNestedProps}, ${categoryProps}}`;
-      if (base.includes('published')) {
-        return `${base}{${jointNestedProps},url}`;
-      }
-      return `${base}{${jointNestedProps}}`;
-    });
+const buildComplexProps = (
+  shouldAddCategoryProps,
+  props,
+  { relations = [], dynamicProperties = {} },
+  linkProps
+) =>
+  Object.keys(props).map(base => {
+    const nestedProps = props[base];
+    const hasLink = !!linkProps.find(linkProp => linkProp.includes(base));
+    const matchingRelation = relations.find(({ localField }) => localField === base);
+    const matchingDynamicProp = Object.keys(dynamicProperties).find(
+      dynamicKey => dynamicKey === base
+    );
+
+    if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
+    if (hasLink && (!!matchingRelation || !!matchingDynamicProp)) nestedProps.push('url');
+    const jointNestedProps = nestedProps.join(',');
+    if (base === 'category' && shouldAddCategoryProps)
+      return `${base}{${jointNestedProps}, ${categoryProps}}`;
+    if (base.includes('published')) {
+      return `${base}{${jointNestedProps},url}`;
+    }
+    return `${base}{${jointNestedProps}}`;
+  });
 
 const getTypeBaseProps = (entitySchema, cardOptions, extraPropsHaveCategory) => {
   const isCard = !!cardOptions;
@@ -83,12 +99,9 @@ const getContentProps = isContent => (isContent ? ['url', 'sponsored', 'featured
 
 const getCategoyProps = (shouldAddCategoryProps, hasCategory, hasPreheader) => {
   if (!shouldAddCategoryProps) return [];
-
   const props = [];
-
-  if (hasCategory) {
+  if (hasCategory)
     props.push('category.name', 'category.listingPageId', 'category.listingPageEntity');
-  }
 
   if (hasPreheader) {
     props.push(`${PREHEADER_PROP}{name}`);

package/src/hooks/helpers/RenderComponent.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ErrorBoundary from '@blaze-cms/core-errors-ui';
 import getComponent from './getComponent';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
@@ -25,22 +26,24 @@ const RenderComponent = ({
   const updatedSettings = appendGtmClassName(settings, childComponents);
 
   return (
-    <Component
-      key={id}
-      type={type}
-      {...options}
-      {...imageOptions}
-      {...nestedComponentsProps}
-      {...updatedSettings}
-      name={name || settings.name}>
-      {hasTextBlockBanners ? (
-        <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>
-          {childComponents}
-        </BannerContextProvider>
-      ) : (
-        childComponents
-      )}
-    </Component>
+    <ErrorBoundary>
+      <Component
+        key={id}
+        type={type}
+        {...options}
+        {...imageOptions}
+        {...nestedComponentsProps}
+        {...updatedSettings}
+        name={name || settings.name}>
+        {hasTextBlockBanners ? (
+          <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>
+            {childComponents}
+          </BannerContextProvider>
+        ) : (
+          childComponents
+        )}
+      </Component>
+    </ErrorBoundary>
   );
 };
 

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"

package/tests/unit/src/components/DataSummary/DataSummaryTypes/__snapshots__/ItemDetailsSummary.test.js.snap

@@ -13,12 +13,22 @@ exports[`ItemDetailsSummary component should render without throwing an error an
     <span
       class=""
     >
-      something
+      <span
+        class="item-details-summary-label"
+      >
+        first
+      </span>
+       something
     </span>
     <span
       class=""
     >
-      other thing
+      <span
+        class="item-details-summary-label"
+      >
+        second
+      </span>
+       other thing
     </span>
   </div>
 </DocumentFragment>
@@ -37,12 +47,22 @@ exports[`ItemDetailsSummary component should render without throwing an error if
     <span
       class=""
     >
-      something
+      <span
+        class="item-details-summary-label"
+      >
+        first
+      </span>
+       something
     </span>
     <span
       class=""
     >
-      other thing
+      <span
+        class="item-details-summary-label"
+      >
+        second
+      </span>
+       other thing
     </span>
   </div>
 </DocumentFragment>