@blaze-cms/react-page-builder 0.139.0-project-admin-customisations.0 → 0.139.1-core-styles.0

package/src/components/Carousel/CarouselRender/CarouselRender.js

@@ -1,61 +1,26 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import CarouselImage from '../CarouselImage';
 import { withTitle } from '../../../HOC';
-import { getDisplayCountData } from '../../../helpers';
 
-const CarouselRender = ({ imageIds, displayCount, priorityLimit, ...otherProps }) => {
-  const [showCount, setShowCount] = useState(displayCount);
-  const listRef = useRef(null);
-
-  const getListElement = () => {
-    if (!listRef) return null;
-    const { current } = listRef;
-    return current;
-  };
-
-  const moveScroll = (numberOfPixels, isNext) => {
-    const listElement = getListElement();
-    if (!listElement) return;
-
-    const totalDistance = listElement.scrollLeft + numberOfPixels;
-    const { scrollLeft, offsetWidth, scrollWidth } = listElement;
-    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
-
-    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
-
-    listElement.scrollTo({
-      top: 0,
-      left: leftPosition,
-      behavior: 'smooth'
-    });
-  };
-
-  const handleNavigation = direction => {
-    setShowCount(false);
-
-    const listElement = getListElement();
-    if (!listElement) return;
-
-    const { scrollWidth } = listElement;
-    const offset = scrollWidth / imageIds.length;
-
-    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
-  };
-
-  const navigation = {
-    next: true,
-    back: false
-  };
-
-  const { shouldDisplayCount, countMessage } = getDisplayCountData(showCount, imageIds);
-
-  return (
-    <>
+const CarouselRender = ({
+  handleNavigation,
+  imageIds,
+  listRef,
+  shouldDisplayCount,
+  shouldDisplayCaption,
+  caption,
+  countMessage,
+  direction,
+  priorityLimit,
+  ...otherProps
+}) => (
+  <div className="carousel">
+    <div>
       <div
         className="carousel__button carousel__button--previous"
         role="button"
-        onClick={() => handleNavigation(navigation.back)}>
+        onClick={() => handleNavigation(direction.back)}>
         <div className="arrow arrow--left" />
       </div>
       <div className="carousel__list" ref={listRef}>
@@ -71,23 +36,38 @@ const CarouselRender = ({ imageIds, displayCount, priorityLimit, ...otherProps }
       <div
         className="carousel__button carousel__button--next"
         role="button"
-        onClick={() => handleNavigation(navigation.next)}>
-        {shouldDisplayCount && <p>{countMessage}</p>}
+        onClick={() => handleNavigation(direction.next)}>
+        {shouldDisplayCount && <p data-testid="count">{countMessage}</p>}
         <div className="arrow arrow--right" />
       </div>
-    </>
-  );
-};
+    </div>
+    {shouldDisplayCaption && (
+      <div className="carousel__details" data-testid="carousel-details">
+        <div className="caption">{caption}</div>
+      </div>
+    )}
+  </div>
+);
 
 CarouselRender.propTypes = {
+  caption: PropTypes.string,
+  shouldDisplayCaption: PropTypes.bool.isRequired,
   imageIds: PropTypes.array,
   displayCount: PropTypes.bool,
+  listRef: PropTypes.object,
+  countMessage: PropTypes.number,
+  direction: PropTypes.object.isRequired,
+  handleNavigation: PropTypes.func.isRequired,
+  shouldDisplayCount: PropTypes.bool.isRequired,
   priorityLimit: PropTypes.number
 };
 
 CarouselRender.defaultProps = {
+  listRef: null,
   imageIds: [],
+  caption: '',
   displayCount: false,
+  countMessage: null,
   priorityLimit: 0
 };
 

package/src/components/Carousel/hooks/useCarouselNavigation.js

@@ -0,0 +1,50 @@
+import { useState, useRef } from 'react';
+
+export function useCarouselNavigation({ imageIds, displayCount }) {
+  const [showCount, setShowCount] = useState(displayCount);
+  const listRef = useRef(null);
+
+  const getListElement = () => {
+    if (!listRef.current) return null;
+    return listRef.current;
+  };
+
+  const moveScroll = (numberOfPixels, isNext) => {
+    const listElement = getListElement();
+    if (!listElement) return;
+
+    const totalDistance = listElement.scrollLeft + numberOfPixels;
+    const { scrollLeft, offsetWidth, scrollWidth } = listElement;
+    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
+
+    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
+
+    listElement.scrollTo({
+      top: 0,
+      left: leftPosition,
+      behavior: 'smooth'
+    });
+  };
+
+  const handleNavigation = direction => {
+    setShowCount(false);
+
+    const listElement = getListElement();
+    if (!listElement) return;
+
+    const { scrollWidth } = listElement;
+    const offset = scrollWidth / imageIds.length;
+
+    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
+  };
+
+  return {
+    listRef,
+    showCount,
+    handleNavigation,
+    direction: {
+      next: true,
+      back: false
+    }
+  };
+}

package/src/components/Image/ImageFactory.js

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import Image from './Image';
 import { useGetImageIdFromRelation, useGetImages, useGetSingleEntitySchema } from '../../hooks';
 import { getImageIds, isUsingRelationImage as checkIfUsingRelationImage } from '../../helpers';
@@ -9,20 +10,30 @@ const ImageFactory = props => {
   const {
     imageId,
     parent: { itemId },
+    parent,
     entity,
     fetchFromRelation,
-    imageRelation
+    imageRelation,
+    imgSrc
   } = props;
   const { isPreview } = useContext(MainContext);
+  const {
+    data: [imgSrcToUse]
+  } = useStringTemplate(parent, [imgSrc]);
+
+  const skipSingleEntitySchema = !entity || !!imgSrcToUse;
   const isUsingRelationImage = checkIfUsingRelationImage(entity, fetchFromRelation, imageRelation);
-  const { data: { getEntitySchema = {} } = {} } = useGetSingleEntitySchema(entity, !entity);
-  const { actions = {} } = getEntitySchema;
+  const { data: { getEntitySchema: { actions = {} } = {} } = {} } = useGetSingleEntitySchema(
+    entity,
+    skipSingleEntitySchema
+  );
   const { data: relationData, loading: relationLoading } = useGetImageIdFromRelation(
     itemId,
     imageRelation,
     actions,
     isUsingRelationImage,
-    isPreview
+    isPreview,
+    !!imgSrcToUse
   );
 
   const updatedImageIds = relationLoading
@@ -32,12 +43,16 @@ const ImageFactory = props => {
     updatedImageIds && updatedImageIds.length === 1 ? updatedImageIds[0] : updatedImageIds;
   const { data: { getFile, getFiles = [] } = {}, loading, error } = useGetImages(
     imageIds,
-    updatedImageIds && updatedImageIds.length > 1
+    updatedImageIds && updatedImageIds.length > 1,
+    !!imgSrcToUse
   );
   if (error) return error.message;
   if (loading) return '';
 
+  if (imgSrcToUse) return <Image {...props} imageUrl={imgSrcToUse} shouldRenderImgTag />;
+
   const files = getFile ? [getFile] : getFiles;
+
   return files.map(({ id, data: imageData = {}, url: imageUrl = '' }) => {
     if (!imageUrl) return null;
     return <Image key={id} {...props} imageData={imageData} imageUrl={imageUrl} />;

package/src/components/Image/ImageRender.js

@@ -20,6 +20,7 @@ const ImageRender = ({
   isHero,
   priority,
   sizeKey,
+  shouldRenderImgTag,
   ...otherProps
 }) => {
   const imageStyle = enableLightbox ? { cursor: 'pointer' } : style;
@@ -27,14 +28,19 @@ const ImageRender = ({
 
   return (
     <>
-      <ResponsiveImage
-        sizeKey={sizeKey}
-        alt={alt}
-        src={imageUrl}
-        onClick={handleEnableLightbox}
-        style={imageStyle}
-        HeadComponent={HeadComponent}
-      />
+      {shouldRenderImgTag ? (
+        <img style={imageStyle} src={imageUrl} alt={alt} onClick={handleEnableLightbox} />
+      ) : (
+        <ResponsiveImage
+          sizeKey={sizeKey}
+          alt={alt}
+          src={imageUrl}
+          onClick={handleEnableLightbox}
+          style={imageStyle}
+          HeadComponent={HeadComponent}
+        />
+      )}
+
       {displayLightbox && (
         <Lightbox
           imageUrl={imageUrl}

package/src/components/Layout/Layout.js

@@ -18,6 +18,7 @@ const Layout = React.forwardRef(
       tagType,
       dataNoSnippet,
       sticky,
+      VariantComponent,
       ...otherProps
     },
     ref
@@ -25,10 +26,8 @@ const Layout = React.forwardRef(
     const {
       data: { getFile: { url = null } = {} }
     } = useGetImages(backgroundImage);
-
     const style = getStylesToUpdate({ backgroundImage: url });
     const { title } = settings;
-
     const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });
     const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';
 
@@ -37,8 +36,10 @@ const Layout = React.forwardRef(
     const otherWrapperProps = {};
     if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
 
+    const WrapperComponent = VariantComponent || Wrapper;
+
     return (
-      <Wrapper
+      <WrapperComponent
         ref={ref}
         tagType={tagType}
         className={type}
@@ -47,7 +48,7 @@ const Layout = React.forwardRef(
         {...otherWrapperProps}>
         {title && <h2 className="heading heading--section">{title}</h2>}
         {renderChildren(children, otherProps)}
-      </Wrapper>
+      </WrapperComponent>
     );
   }
 );
@@ -62,6 +63,7 @@ Layout.propTypes = {
   backgroundImage: PropTypes.string,
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
+  VariantComponent: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
@@ -73,7 +75,8 @@ Layout.defaultProps = {
   modifier: '',
   tagType: '',
   dataNoSnippet: false,
-  sticky: false
+  sticky: false,
+  VariantComponent: null
 };
 
 export default Layout;

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

@@ -9,7 +9,13 @@ import { BANNER } from '../../constants';
 import Wrapper from '../../../Wrapper';
 import { checkIfShouldRenderBanner } from '../helpers';
 
-const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props }) => {
+const FullRender = ({
+  orderedListData,
+  omitWrappers,
+  paginationType,
+  graphqlEntityMap,
+  ...props
+}) => {
   const contextProps = useContext(MainContext);
   const pageBuilderID = uuid();
   const { parent, entity, propsToDisplay, banner, hasBanner } = props;
@@ -22,7 +28,7 @@ const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props })
   return (
     <MainContextProvider value={{ ...contextProps, isPreview: false }}>
       <WrapperToUse className="list list--full">
-        {orderedListData.map(({ id, ...entityProps }, i) => {
+        {orderedListData.map(({ id, __typename: dataEntity, ...entityProps }, i) => {
           const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(i, bannerProps);
           if (shouldRenderBanner) bannerIndex += 1;
 
@@ -31,6 +37,7 @@ const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props })
               key={id}
               {...props}
               {...entityProps}
+              entity={graphqlEntityMap[dataEntity]}
               index={i}
               itemId={id}
               pageBuilderID={pageBuilderID}
@@ -58,7 +65,8 @@ FullRender.propTypes = {
   entity: PropTypes.string.isRequired,
   omitWrappers: PropTypes.bool,
   hasBanner: PropTypes.bool,
-  banner: PropTypes.object
+  banner: PropTypes.object,
+  graphqlEntityMap: PropTypes.object.isRequired
 };
 
 FullRender.defaultProps = {

package/src/components/SearchContent/SearchContent.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
@@ -7,7 +7,6 @@ import SearchContentToggleIcon from './SearchContentToggleIcon';
 
 const SearchContent = ({
   entities,
-  searchInputAlignment,
   searchInputWrapperMobile,
   searchInputWrapperDesktop,
   isMobile,
@@ -15,7 +14,9 @@ const SearchContent = ({
   modifier,
   collapsedSearch
 }) => {
+  const searchContentRef = useRef(null);
   const [collapsed, setCollapsed] = useState(collapsedSearch);
+  const [showResults, setShowResults] = useState(false);
   const router = useRouter();
 
   const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
@@ -26,19 +27,44 @@ const SearchContent = ({
 
   useEffect(
     () => {
-      const handleRouteChange = () => setSearchTerm('');
+      const handleRouteChange = () => {
+        setSearchTerm('');
+        setShowResults(false);
+        if (collapsedSearch) setCollapsed(true);
+      };
       router.events.on('routeChangeStart', handleRouteChange);
 
       return () => {
         router.events.off('routeChangeStart', handleRouteChange);
       };
     },
-    [router.events, setSearchTerm]
+    [collapsedSearch, router.events, setSearchTerm]
+  );
+
+  useEffect(
+    () => {
+      const handleClickOutside = event => {
+        if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
+          setShowResults(false);
+          if (collapsedSearch) {
+            setCollapsed(true);
+            setSearchTerm('');
+          }
+        }
+      };
+
+      document.addEventListener('click', handleClickOutside);
+
+      return () => {
+        document.removeEventListener('click', handleClickOutside);
+      };
+    },
+    [collapsedSearch, setSearchTerm]
   );
 
   const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
 
-  const handleClick = (e, url) => {
+  const handleNavigation = (e, url) => {
     e.preventDefault();
     router.push(url);
   };
@@ -49,71 +75,60 @@ const SearchContent = ({
     }
   };
 
-  const handleOnBlur = () => {
-    if (!collapsedSearch) return;
-    if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
-  };
+  const handleIconClick = () => {
+    const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
+
+    if (collapsedSearch) setCollapsed(!collapsed);
 
-  const handleClearSearchResults = () => {
-    setSearchTerm('');
+    if (isCloseIcon) {
+      setSearchTerm('');
+      setShowResults(false);
+    } else {
+      setShowResults(true);
+    }
   };
 
   const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
-  return collapsed ? (
-    <div className={className}>
-      <div className="search-content--collapse__wrapper">
-        <label className="search-content--collapse__label">
-          <span className="search-content--collapse__icon_wrapper">
-            <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
-              <path
-                fillRule="evenodd"
-                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                clipRule="evenodd"
-              />
-            </svg>
+  const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
+
+  return (
+    <div className={className} ref={searchContentRef}>
+      <div className={`${searchModifier}__wrapper`}>
+        <label className={`${searchModifier}__label`}>
+          <span className={`${searchModifier}__icon_wrapper`}>
+            <SearchContentToggleIcon
+              searchTerm={debouncedSearchTerm}
+              onClick={handleIconClick}
+              useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}
+            />
           </span>
-          <input
-            onFocus={() => setCollapsed(false)}
-            onChange={e => setSearchTerm(e.target.value)}
-            type="text"
-            name="search"
-            className="search-content--collapse__input"
-          />
-        </label>
-      </div>
-    </div>
-  ) : (
-    <>
-      <div className={className}>
-        <div className="search-content--expanded__wrapper">
-          <label className="search-content--expanded__label">
-            <span className="search-content--expanded__icon_wrapper">
-              <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
-            </span>
+          {!collapsed && (
             <input
+              className={`${searchModifier}__input`}
               type="text"
               name="search"
-              onChange={e => setSearchTerm(e.target.value)}
-              onKeyPress={handleKeyPress}
-              className="search-content--expanded__input"
               placeholder={placeholder}
               value={searchTerm}
-              onBlur={handleOnBlur}
+              onChange={e => setSearchTerm(e.target.value)}
+              onKeyPress={handleKeyPress}
+              onFocus={() => setShowResults(true)}
+              data-testid="search-content-input"
             />
-          </label>
-        </div>
+          )}
+        </label>
+      </div>
+      {showResults && (
         <SearchContentResults
           results={results}
           debouncedSearchTerm={debouncedSearchTerm}
-          handleClick={handleClick}
+          handleClick={handleNavigation}
         />
-      </div>
-    </>
+      )}
+    </div>
   );
 };
 
 SearchContent.propTypes = {
-  searchInputAlignment: PropTypes.string,
   searchInputWrapperMobile: PropTypes.string,
   searchInputWrapperDesktop: PropTypes.string,
   placeholder: PropTypes.string,
@@ -124,7 +139,6 @@ SearchContent.propTypes = {
 };
 
 SearchContent.defaultProps = {
-  searchInputAlignment: '',
   searchInputWrapperMobile: '',
   searchInputWrapperDesktop: '',
   placeholder: '',

package/src/components/SearchContent/SearchContentResults.js

@@ -3,25 +3,25 @@ import BlazeLink from '../BlazeLink';
 import SearchContentItems from './SearchContentItems';
 
 const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
-  if (debouncedSearchTerm !== '') {
-    return (
-      <div className="search-content--results__wrapper">
-        <div className="search-content--results__wrapper--message">
-          <div className="search-content--results__content">
-            {results.length === 0 && (
-              <div className="search-content--results__message">
-                <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
-                  {`Search all results for: ${debouncedSearchTerm}`}
-                </BlazeLink>
-              </div>
-            )}
-            {results.length > 0 && <SearchContentItems results={results} onClick={onClick} />}
-          </div>
+  if (!debouncedSearchTerm) return null;
+  const hasResults = results.length > 0;
+  return (
+    <div className="search-content--results__wrapper">
+      <div className="search-content--results__wrapper--message">
+        <div className="search-content--results__content">
+          {hasResults ? (
+            <SearchContentItems results={results} onClick={onClick} />
+          ) : (
+            <div className="search-content--results__message">
+              <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
+                {`Search all results for: ${debouncedSearchTerm}`}
+              </BlazeLink>
+            </div>
+          )}
         </div>
       </div>
-    );
-  }
-  return null;
+    </div>
+  );
 };
 
 export default SearchContentResults;

package/src/components/SearchContent/SearchContentToggleIcon.js

@@ -1,27 +1,14 @@
 import React from 'react';
+import { CLOSE_ICON, SEARCH_ICON } from './constants';
 
-const SearchContentToggleIcon = ({ results, onClear }) => {
-  if (results && results.length > 0) {
-    return (
-      <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
-        <path
-          fillRule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          clipRule="evenodd"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
-      <path
-        fillRule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-};
+const SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (
+  <svg
+    className="search-content--expanded__icon"
+    viewBox="0 0 20 20"
+    onClick={onClick}
+    data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>
+    <path fillRule="evenodd" clipRule="evenodd" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />
+  </svg>
+);
 
 export default SearchContentToggleIcon;

package/src/components/SearchContent/constants.js

@@ -0,0 +1,6 @@
+const SEARCH_ICON =
+  'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
+const CLOSE_ICON =
+  'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
+
+export { SEARCH_ICON, CLOSE_ICON };

package/src/hooks/helpers/RenderComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from '@blaze-cms/core-errors-ui';
 import getComponent from './getComponent';
+import getVariant from './getVariant';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
 import { BannerContextProvider } from '../../BannerContext';
@@ -24,16 +25,19 @@ const RenderComponent = ({
   const imageOptions = isImage ? imageProps : {};
   if (!Component) return null;
   const updatedSettings = appendGtmClassName(settings, childComponents);
+  const [VariantComponent, variantSettings] = getVariant(settings);
 
   return (
     <ErrorBoundary>
       <Component
         key={id}
         type={type}
+        VariantComponent={VariantComponent}
         {...options}
         {...imageOptions}
         {...nestedComponentsProps}
         {...updatedSettings}
+        {...variantSettings}
         name={name || settings.name}>
         {hasTextBlockBanners ? (
           <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>