@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/src/components/Image/GlobalLightbox/GlobalLightbox.js

@@ -66,98 +66,96 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
   const showNext = index !== images.length - 1;
   const showPrevious = !!index;
 
-  const imageCounter = `${index + 1} of ${images.length}`;
+  const imageCounter = `${index + 1} / ${images.length}`;
 
   return (
-    <>
-      {!!images.length && (
-        <div>
-          <div className="overlay" />
-          <div className="modal modal--full-screen modal--gallery modal--show">
-            <header className="modal__header modal__header--gallery">
-              <div className="modal__title modal__title--gallery">
-                {parentName || metaTitle || name}
-              </div>
-              <div
-                role="button"
-                className="modal__close"
-                onClick={handleClose}
-                aria-label="Close modal">
-                <i>
-                  <FaTimes />
-                </i>
-              </div>
-            </header>
-            <div className="modal__content modal__content--gallery">
-              <div className="gallery">
-                <div className="gallery__column gallery__column--slider">
-                  <div className="gallery__slider">
-                    <div className="slider__wrapper slider__wrapper--gallery open">
-                      <div className="slider__header slider__header--gallery">
-                        <div
-                          className="slider__counter slider__counter--gallery"
-                          data-testid="image-counter">
-                          {imageCounter}
-                        </div>
+    !!images.length && (
+      <div>
+        <div className="overlay" />
+        <div className="modal modal--full-screen modal--gallery modal--show">
+          <header className="modal__header modal__header--gallery">
+            <div className="modal__title modal__title--gallery">
+              {parentName || metaTitle || name}
+            </div>
+            <div
+              role="button"
+              className="modal__close"
+              onClick={handleClose}
+              aria-label="Close modal">
+              <i>
+                <FaTimes />
+              </i>
+            </div>
+          </header>
+          <div className="modal__content modal__content--gallery">
+            <div className="gallery">
+              <div className="gallery__column gallery__column--slider">
+                <div className="gallery__slider">
+                  <div className="slider__wrapper slider__wrapper--gallery open">
+                    <div className="slider__header slider__header--gallery">
+                      <div
+                        className="slider__counter slider__counter--gallery"
+                        data-testid="image-counter">
+                        {imageCounter}
                       </div>
+                    </div>
 
-                      <NavButton
-                        handleAction={handlePrevious}
-                        show={showPrevious}
-                        modifier="previous"
-                        ariaLabel="Previous Image"
-                      />
-
-                      <div className="slider slider--gallery">
-                        <div className="slider__list slider__list--gallery">
-                          <div className="slider__list-wrapper slider__list-wrapper--gallery">
-                            <div className="slider__slide slider__slide--gallery">
-                              {loading && <div />}
-                              {Object.keys(imgWrapperProps).length ? (
-                                <BlazeLink {...imgWrapperProps}>
-                                  <ResponsiveImage
-                                    src={imageUrl}
-                                    alt={altText}
-                                    sizeKey="globalLightbox"
-                                    data-testid="globalLightboxImage"
-                                  />
-                                </BlazeLink>
-                              ) : (
+                    <NavButton
+                      handleAction={handlePrevious}
+                      show={showPrevious}
+                      modifier="previous"
+                      ariaLabel="Previous Image"
+                    />
+
+                    <div className="slider slider--gallery">
+                      <div className="slider__list slider__list--gallery">
+                        <div className="slider__list-wrapper slider__list-wrapper--gallery">
+                          <div className="slider__slide slider__slide--gallery">
+                            {loading && <div />}
+                            {Object.keys(imgWrapperProps).length ? (
+                              <BlazeLink {...imgWrapperProps}>
                                 <ResponsiveImage
                                   src={imageUrl}
                                   alt={altText}
                                   sizeKey="globalLightbox"
                                   data-testid="globalLightboxImage"
                                 />
-                              )}
-                            </div>
+                              </BlazeLink>
+                            ) : (
+                              <ResponsiveImage
+                                src={imageUrl}
+                                alt={altText}
+                                sizeKey="globalLightbox"
+                                data-testid="globalLightboxImage"
+                              />
+                            )}
                           </div>
                         </div>
                       </div>
-
-                      <NavButton
-                        ariaLabel="Next Image"
-                        handleAction={handleNext}
-                        show={showNext}
-                        modifier="next"
-                      />
                     </div>
-                    {(shouldDisplayCaption || shouldDisplayCredits) && (
-                      <ImageDetails
-                        caption={caption}
-                        credits={credits || imageCredits}
-                        shouldDisplayCaption={shouldDisplayCaption}
-                        shouldDisplayCredits={shouldDisplayCredits}
-                      />
-                    )}
+
+                    <NavButton
+                      ariaLabel="Next Image"
+                      handleAction={handleNext}
+                      show={showNext}
+                      modifier="next"
+                    />
                   </div>
+                  {(shouldDisplayCaption || shouldDisplayCredits) && (
+                    <ImageDetails
+                      caption={caption}
+                      credits={credits || imageCredits}
+                      shouldDisplayCaption={shouldDisplayCaption}
+                      shouldDisplayCredits={shouldDisplayCredits}
+                    />
+                  )}
                 </div>
               </div>
             </div>
           </div>
         </div>
-      )}
-    </>
+      </div>
+    )
   );
 };
 

package/src/components/Image/GlobalLightbox/NavButton.js

@@ -1,22 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavButton = ({ handleAction, show, modifier, ariaLabel }) => (
-  <>
-    {show && (
+const NavButton = ({ handleAction, show, modifier, ariaLabel }) =>
+  show ? (
+    <div
+      role="button"
+      className={`slider__button slider__button--gallery slider__button--${modifier}`}
+      onClick={handleAction}
+      aria-label={ariaLabel}>
       <div
-        role="button"
-        className={`slider__button slider__button--gallery slider__button--${modifier}`}
-        onClick={handleAction}
-        aria-label={ariaLabel}>
-        <div
-          className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
-          data-testid={`navButton-${modifier}`}
-        />
-      </div>
-    )}
-  </>
-);
+        className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
+        data-testid={`navButton-${modifier}`}
+      />
+    </div>
+  ) : null;
 
 NavButton.propTypes = {
   handleAction: PropTypes.func.isRequired,

package/src/components/ItemList/ItemListButton/ItemListButton.js

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  BsBookmarkStarFill,
-  BsBookmarkCheckFill,
-  BsBookmarkStar,
-  BsBookmarkXFill
-} from 'react-icons/bs';
 import { useQuery, useMutation } from '@apollo/client';
+import { AddedBookmark, BaseBookmark, HoverBookmark, RemoveBookmark } from '../icons';
 import { getItemList, addItemsToList, removeItemsFromList } from '../../../application/query';
 import { getItemListData, setItemListId } from '../helpers';
 import { useItemListId } from '../hooks';
@@ -16,11 +11,6 @@ const ItemListButton = ({ listName, parent, modifier }) => {
   const [isHover, setIsHover] = useState(false);
   const { listId } = useItemListId({ listName });
 
-  const getIcon = () => {
-    if (isInList) return isHover ? BsBookmarkXFill : BsBookmarkCheckFill;
-    return isHover ? BsBookmarkStarFill : BsBookmarkStar;
-  };
-
   const { data, error, loading } = useQuery(getItemList, {
     variables: { id: listId },
     skip: !listId
@@ -61,6 +51,14 @@ const ItemListButton = ({ listName, parent, modifier }) => {
     ({ itemId: idToCheck, itemEntity: entityToCheck }) =>
       idToCheck === itemId && entityToCheck === itemEntity
   );
+
+  const getIcon = () => {
+    if (isInList) {
+      return isHover ? RemoveBookmark : AddedBookmark;
+    }
+    return isHover ? HoverBookmark : BaseBookmark;
+  };
+
   const Icon = getIcon();
   const stateClassName = isInList ? 'item-list-button--selected' : '';
   const className = ['item-list-button', stateClassName, modifier].filter(Boolean).join(' ');
@@ -69,10 +67,10 @@ const ItemListButton = ({ listName, parent, modifier }) => {
     <div
       className={className}
       role="button"
+      tabIndex="0"
       onClick={clickHandler}
       onMouseEnter={() => setIsHover(true)}
-      onMouseLeave={() => setIsHover(false)}
-      aria-label={`Add to ${listName}`}>
+      onMouseLeave={() => setIsHover(false)}>
       <i>
         <Icon />
       </i>

package/src/components/ItemList/ItemListCounter/ItemListCounter.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
-import { BsBookmarkStarFill, BsBookmarkStar } from 'react-icons/bs';
+import { HoverBookmark, BaseBookmark } from '../icons';
 import { getItemList } from '../../../application/query';
 import { useItemListId } from '../hooks';
 import { getItemListData } from '../helpers';
@@ -21,7 +21,7 @@ const ItemListCounter = ({ listName, modifier, url }) => {
 
   const listItems = getItemListData(data);
   const listLength = listItems.length;
-  const CounterIcon = listLength ? BsBookmarkStarFill : BsBookmarkStar;
+  const CounterIcon = listLength ? HoverBookmark : BaseBookmark;
 
   const handleClick = () => router.push('/Resolver', `${url}?itemListId=${listId}`);
 

package/src/components/ItemList/icons/AddedBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function AddedBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/added</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-417, -433)">
+          <g id="wishlist-button/added" transform="translate(417, 433.0588)">
+            <path
+              d="M1.33333333,5.68434189e-14 L22.6666667,5.68434189e-14 C23.4030667,5.68434189e-14 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,5.68434189e-14 1.33333333,5.68434189e-14 Z"
+              id="Shape"
+              fill="currentColor"
+              fillRule="nonzero"
+            />
+            <path
+              d="M18.6268424,8.17492183 C19.1243859,7.67737836 19.1243859,6.87070105 18.6268424,6.3731576 C18.129299,5.87561415 17.3226216,5.87561413 16.8250782,6.37315756 L10.0913659,13.1094147 L7.1749509,10.1904547 C6.85309671,9.86860055 6.38398401,9.74290217 5.94432301,9.86070898 C5.50466201,9.97851579 5.16124768,10.3219301 5.04344087,10.7615911 C4.92563406,11.2012521 5.05133243,11.6703648 5.37318663,11.992219 L9.19048381,15.8095162 C9.42920298,16.0488396 9.75333852,16.183341 10.0913659,16.183341 C10.4293934,16.183341 10.7535289,16.0488396 10.9922481,15.8095162 L18.6268424,8.17492183 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default AddedBookmark;

package/src/components/ItemList/icons/BaseBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function BaseBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 26 30"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/base</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-416, -236)" fillRule="nonzero">
+          <g id="wishlist-button/base" transform="translate(417, 237)">
+            <g id="Group" fill="#FFFFFF" stroke="currentColor" strokeWidth="2">
+              <path
+                d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+                id="Shape"
+              />
+            </g>
+            <path
+              d="M18.5475051,9.70770608 L14.3505774,9.09775478 L12.4744399,5.29423737 C12.4231974,5.19009934 12.3388952,5.10579713 12.2347571,5.05455461 C11.9735856,4.92562182 11.6562126,5.03306581 11.5256268,5.29423737 L9.64948934,9.09775478 L5.4525616,9.70770608 C5.33685268,9.72423592 5.23106167,9.77878441 5.15006543,9.86143364 C4.94616811,10.0710041 4.95060698,10.406139 5.15998334,10.6102356 L8.19651593,13.5707309 L7.47912064,17.7511288 C7.44480011,17.9495157 7.52626118,18.150158 7.68916287,18.2684724 C7.85206456,18.3867868 8.06806465,18.4021884 8.24610546,18.3081846 L12.0000333,16.3345211 L15.7539612,18.3081846 C15.8564463,18.3627331 15.9754612,18.3809159 16.0895171,18.3610801 C16.3771364,18.3114906 16.5705356,18.0387481 16.5209461,17.7511288 L15.8035508,13.5707309 L18.8400834,10.6102356 C18.9227326,10.5292394 18.9772811,10.4234484 18.9938109,10.3077395 C19.0384415,10.0184672 18.8367774,9.75068367 18.5475051,9.70770608 Z"
+              id="Path"
+              fill="currentColor"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default BaseBookmark;

package/src/components/ItemList/icons/HoverBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function HoverBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/hover</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-566, -237)" fillRule="nonzero">
+          <g id="wishlist-button/hover" transform="translate(566, 237.3529)">
+            <g id="Group" fill="currentColor">
+              <path
+                d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+                id="Shape"
+              />
+            </g>
+            <path
+              d="M18.5475051,9.70770608 L14.3505774,9.09775478 L12.4744399,5.29423737 C12.4231974,5.19009934 12.3388952,5.10579713 12.2347571,5.05455461 C11.9735856,4.92562182 11.6562126,5.03306581 11.5256268,5.29423737 L9.64948934,9.09775478 L5.4525616,9.70770608 C5.33685268,9.72423592 5.23106167,9.77878441 5.15006543,9.86143364 C4.94616811,10.0710041 4.95060698,10.406139 5.15998334,10.6102356 L8.19651593,13.5707309 L7.47912064,17.7511288 C7.44480011,17.9495157 7.52626118,18.150158 7.68916287,18.2684724 C7.85206456,18.3867868 8.06806465,18.4021884 8.24610546,18.3081846 L12.0000333,16.3345211 L15.7539612,18.3081846 C15.8564463,18.3627331 15.9754612,18.3809159 16.0895171,18.3610801 C16.3771364,18.3114906 16.5705356,18.0387481 16.5209461,17.7511288 L15.8035508,13.5707309 L18.8400834,10.6102356 C18.9227326,10.5292394 18.9772811,10.4234484 18.9938109,10.3077395 C19.0384415,10.0184672 18.8367774,9.75068367 18.5475051,9.70770608 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default HoverBookmark;

package/src/components/ItemList/icons/RemoveBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function RemoveBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/remove</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-566, -433)">
+          <g id="Group" transform="translate(566, 433.4118)">
+            <path
+              d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+              id="Shape"
+              fill="currentColor"
+              fillRule="nonzero"
+            />
+            <path
+              d="M8.56311228,6.43978889 C8.18381709,6.06049368 7.6309823,5.91236204 7.11285543,6.05119372 C6.59472855,6.19002539 6.19002539,6.59472855 6.05119372,7.11285543 C5.91236204,7.6309823 6.06049368,8.18381709 6.43978889,8.56311228 L9.87969275,12.0000171 L6.43978889,15.4369219 C6.06049368,15.8162171 5.91236204,16.3690519 6.05119372,16.8871788 C6.19002539,17.4053057 6.59472855,17.8100088 7.11285543,17.9488405 C7.6309823,18.0876722 8.18381709,17.9395405 8.56311228,17.5602453 L12.0000171,14.1203415 L15.4369219,17.5602453 C16.0232615,18.1465849 16.9739058,18.1465849 17.5602453,17.5602453 C18.1465849,16.9739058 18.1465849,16.0232615 17.5602453,15.4369219 L14.1203415,12.0000171 L17.5602453,8.56311228 C18.1465849,7.97677272 18.1465849,7.02612845 17.5602453,6.43978889 C16.9739058,5.85344932 16.0232615,5.85344932 15.4369219,6.43978889 L12.0000171,9.87969275 L8.56311228,6.43978889 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default RemoveBookmark;

package/src/components/ItemList/icons/index.js

@@ -0,0 +1,4 @@
+export { default as AddedBookmark } from './AddedBookmark';
+export { default as BaseBookmark } from './BaseBookmark';
+export { default as HoverBookmark } from './HoverBookmark';
+export { default as RemoveBookmark } from './RemoveBookmark';

package/src/components/Layout/Layout.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import Wrapper from '../Wrapper';
 import { getClassModifiers } from '../../utils';
 import { useGetImages } from '../../hooks';
 import { getStylesToUpdate, checkIfRowHasColumns } from './helpers';
-import { renderChildren, hasChildren } from '../../helpers';
+import { renderChildren, hasChildren, getCustomHtmlProperties } from '../../helpers';
 import { COLUMN } from '../../constants';
 
 const Layout = React.forwardRef(
@@ -15,18 +16,25 @@ const Layout = React.forwardRef(
       settings,
       modifier,
       backgroundImage,
+      backgroundImageUrl,
+      parent,
       tagType,
       dataNoSnippet,
       sticky,
       VariantComponent,
+      customHtmlProps = [],
       ...otherProps
     },
     ref
   ) => {
+    const {
+      data: [resolvedBackgroundImageUrl]
+    } = useStringTemplate(parent, [backgroundImageUrl || '']);
     const {
       data: { getFile: { url = null } = {} }
-    } = useGetImages(backgroundImage);
-    const style = getStylesToUpdate({ backgroundImage: url });
+    } = useGetImages(backgroundImage, false, !!resolvedBackgroundImageUrl);
+    const backgroundUrl = resolvedBackgroundImageUrl || url;
+    const style = getStylesToUpdate({ backgroundImage: backgroundUrl });
     const { title } = settings;
     const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });
     const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';
@@ -36,6 +44,8 @@ const Layout = React.forwardRef(
     const otherWrapperProps = {};
     if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
 
+    const customHtmlProperties = getCustomHtmlProperties({ customHtmlProps });
+
     const WrapperComponent = VariantComponent || Wrapper;
 
     return (
@@ -45,7 +55,8 @@ const Layout = React.forwardRef(
         className={type}
         modifiers={`${classModifiers}${additionalRowModifier}`}
         style={style}
-        {...otherWrapperProps}>
+        {...otherWrapperProps}
+        {...customHtmlProperties}>
         {title && <h2 className="heading heading--section">{title}</h2>}
         {renderChildren(children, otherProps)}
       </WrapperComponent>
@@ -61,9 +72,17 @@ Layout.propTypes = {
   }),
   modifier: PropTypes.string,
   backgroundImage: PropTypes.string,
+  backgroundImageUrl: PropTypes.string,
+  parent: PropTypes.object,
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
   VariantComponent: PropTypes.func,
+  customHtmlProps: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string
+    })
+  ),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
@@ -72,11 +91,14 @@ Layout.defaultProps = {
     title: ''
   },
   backgroundImage: '',
+  backgroundImageUrl: '',
+  parent: {},
   modifier: '',
   tagType: '',
   dataNoSnippet: false,
   sticky: false,
-  VariantComponent: null
+  VariantComponent: null,
+  customHtmlProps: []
 };
 
 export default Layout;

package/src/components/List/ListBuilder.js

@@ -65,7 +65,7 @@ const ListBuilder = props => {
   const limitToUse = limit || itemsToDisplayToUse.length;
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
-  const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
+  const initialOffset = getCurrentOffset(limitToUse, offset, itemsPerPageToUse, paginationIndex);
   const fields = buildQueryFields(entityFields, entityTypes, !isCard);
   const action = getSearchPublishedContent(fields);
   const actionKey = SEARCH_PUBLISHED_CONTENT;

package/src/components/List/ListFactory.js

@@ -31,6 +31,8 @@ import { getItemListId, getItemListIds } from '../ItemList/helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
 
+export const VariantContext = React.createContext(null);
+
 const ListFactory = props => {
   const {
     entity: legacyEntity,
@@ -46,7 +48,8 @@ const ListFactory = props => {
     allSearchFilters,
     operator: filterOperator,
     sortProperties,
-    itemListName
+    itemListName,
+    VariantComponent
   } = props;
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -175,7 +178,11 @@ const ListFactory = props => {
     mainSchemas
   };
 
-  return <ListBuilder {...listProps} />;
+  return (
+    <VariantContext.Provider value={VariantComponent}>
+      <ListBuilder {...listProps} />
+    </VariantContext.Provider>
+  );
 };
 
 ListFactory.propTypes = {
@@ -192,7 +199,8 @@ ListFactory.propTypes = {
   sort: PropTypes.string,
   allSearchFilters: PropTypes.array,
   sortProperties: PropTypes.array,
-  itemListName: PropTypes.string
+  itemListName: PropTypes.string,
+  VariantComponent: PropTypes.func
 };
 
 ListFactory.defaultProps = {
@@ -207,7 +215,8 @@ ListFactory.defaultProps = {
   sort: '',
   operator: AND,
   allSearchFilters: [],
-  itemListName: ''
+  itemListName: '',
+  VariantComponent: null
 };
 
 export default ListFactory;