@blaze-cms/react-page-builder 0.140.3 → 0.141.0-alpha.1

package/src/components/BlazeLink.js

@@ -3,14 +3,31 @@ import PropTypes from 'prop-types';
 import { Link, MainContext } from '@blaze-cms/nextjs-components';
 import buildLinkExtraProps from '../helpers/build-link-extra-props';
 
-const BlazeLink = ({ children, className, name, href, as, shallow, scroll, gtmId, onClick }) => {
+const BlazeLink = ({
+  children,
+  className,
+  name,
+  ariaLabel,
+  href,
+  as,
+  shallow,
+  scroll,
+  gtmId,
+  onClick
+}) => {
   const { hasGTM } = useContext(MainContext);
   const gtmProps = hasGTM && !!gtmId ? { gtmId } : {};
   const linkExtraProps = buildLinkExtraProps({ className, name, as, ...gtmProps });
   if (!href) return children;
 
   return (
-    <Link href={href} shallow={shallow} scroll={scroll} onClick={onClick} {...linkExtraProps}>
+    <Link
+      href={href}
+      ariaLabel={ariaLabel}
+      shallow={shallow}
+      scroll={scroll}
+      onClick={onClick}
+      {...linkExtraProps}>
       {children}
     </Link>
   );
@@ -26,7 +43,8 @@ BlazeLink.propTypes = {
   shallow: PropTypes.bool,
   scroll: PropTypes.bool,
   gtmId: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  ariaLabel: PropTypes.string
 };
 
 BlazeLink.defaultProps = {
@@ -39,7 +57,8 @@ BlazeLink.defaultProps = {
   shallow: false,
   scroll: null,
   gtmId: '',
-  onClick: null
+  onClick: null,
+  ariaLabel: ''
 };
 
 export default BlazeLink;

package/src/components/Card/Card.js

@@ -106,7 +106,6 @@ const Card = ({
           role: 'button'
         }
       : {};
-
   return (
     <Wrapper {...wrapperProps}>
       <div className={classNameWithModifiers} {...clickProps}>

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { getActiveTab } from './helpers';
 import { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';
 
-const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sectionsData }) => {
+const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, VariantComponent }) => {
   const router = useRouter();
   const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
   const { asPath } = router;
@@ -21,10 +21,12 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
     [asPath, sectionsData, selectedTab]
   );
 
+  const WrapperComponent = VariantComponent || 'div';
+
   return (
     <div className={mainDivClass}>
       <ul className={contentGroupClass} role="tablist" aria-label={name}>
-        {groupSections.map((groupSection, index) => {
+        {groupSections.map((_, index) => {
           const [sectionName, sectioLabel] = sectionsData[index];
           const tabId = `${TAB}-${sectionName}`;
           const panelId = `${PANEL}-${sectionName}`;
@@ -61,14 +63,15 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
         if (selectedTab !== tabId) return null;
 
         return (
-          <div
-            id={sectionName}
+          <WrapperComponent
             key={panelId}
+            id={sectionName}
             className={sectionClass}
             role="tabpanel"
+            tabId={tabId}
             aria-labelledby={tabId}>
             {groupSection}
-          </div>
+          </WrapperComponent>
         );
       })}
     </div>
@@ -78,13 +81,13 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
 ContentGroupTabs.propTypes = {
   name: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
-  modifier: PropTypes.string,
   groupSections: PropTypes.array.isRequired,
-  sectionsData: PropTypes.array.isRequired
+  sectionsData: PropTypes.array.isRequired,
+  VariantComponent: PropTypes.func
 };
 
 ContentGroupTabs.defaultProps = {
-  modifier: ''
+  VariantComponent: null
 };
 
 export default ContentGroupTabs;

package/src/components/Image/ImageRender.js

@@ -72,7 +72,8 @@ ImageRender.propTypes = {
   style: PropTypes.object,
   isHero: PropTypes.bool,
   priority: PropTypes.bool,
-  sizeKey: PropTypes.string
+  sizeKey: PropTypes.string,
+  shouldRenderImgTag: PropTypes.bool
 };
 
 ImageRender.defaultProps = {
@@ -84,7 +85,8 @@ ImageRender.defaultProps = {
   isHero: false,
   priority: false,
   style: {},
-  sizeKey: ''
+  sizeKey: '',
+  shouldRenderImgTag: false
 };
 
 export default ImageRender;

package/src/components/List/ListRender.js

@@ -5,6 +5,8 @@ import ListPagination from './components/Pagination';
 import ListHeader from './components/Header';
 import { sortResponseData } from '../../helpers';
 import { LOAD_MORE } from '../../constants';
+import { useAppSyncEventHook } from '../../hooks';
+import { buildQueryBooster } from './helpers';
 
 const ListRender = props => {
   const {
@@ -27,9 +29,17 @@ const ListRender = props => {
     azFilter,
     displayTotal
   } = props;
+  const { data: updatedVariables } = useAppSyncEventHook({
+    eventName: 'list:query-variables',
+    data: variables,
+    props
+  });
+  const boostedVariables = buildQueryBooster(props, updatedVariables);
+
   const { data = {}, error, loading, fetchMore } = useQuery(action, {
-    variables
+    variables: boostedVariables
   });
+
   if (loading) return '';
   if (error) return error.message;
   if (!data[actionKey] || !data[actionKey].results) return null;

package/src/components/List/components/Header/ListHeader.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import { buildAzUrl } from '../../helpers';
+import BlazeLink from '../../../BlazeLink';
 
 const ListHeader = ({ name, listAggregations, azFilter }) => {
   const router = useRouter();
@@ -12,7 +13,8 @@ const ListHeader = ({ name, listAggregations, azFilter }) => {
 
   return (
     <div className="az_list_filter flex">
-      <a
+      <BlazeLink
+        ariaLabel="Show all"
         className={`az_list_filter_option${!azFilter ? ' selected' : ''} flex-grow`}
         href={allHref}
         onClick={e => {
@@ -20,7 +22,7 @@ const ListHeader = ({ name, listAggregations, azFilter }) => {
           return router.push('/Resolver', allHref, { shallow: true });
         }}>
         ALL
-      </a>
+      </BlazeLink>
       {listAggregations.map(({ key, doc_count: count }) => {
         if (!count)
           return (
@@ -34,7 +36,8 @@ const ListHeader = ({ name, listAggregations, azFilter }) => {
         const className = `az_list_filter_option${isSelected ? ' selected' : ''} flex-grow`;
 
         return (
-          <a
+          <BlazeLink
+            ariaLabel={`Filter by ${key}`}
             key={key}
             className={className}
             href={href}
@@ -43,7 +46,7 @@ const ListHeader = ({ name, listAggregations, azFilter }) => {
               return router.push('/Resolver', href, { shallow: true });
             }}>
             {key}
-          </a>
+          </BlazeLink>
         );
       })}
     </div>

package/src/components/List/components/Pagination/Classic.js

@@ -22,7 +22,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
           onClick={onClick}
           shallow
           scroll>
-          {PREVIOUS_STRING}
+          {`${PREVIOUS_STRING} page`}
         </BlazeLink>
       )}
       {pages}
@@ -33,7 +33,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
           onClick={onClick}
           shallow
           scroll>
-          {NEXT_STRING}
+          {`${NEXT_STRING} page`}
         </BlazeLink>
       )}
     </>

package/src/components/List/components/Pagination/LoadMore.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LOAD_MORE_STRING } from '../../../../constants';
 import buildPaginationUrl from '../../helpers/build-pagination-url';
+import BlazeLink from '../../../BlazeLink';
 
 const LoadMore = ({ name, currentPage, query, url, triggerInfiniteScroll, isLastPage }) => {
   if (isLastPage) return null;
@@ -15,9 +16,13 @@ const LoadMore = ({ name, currentPage, query, url, triggerInfiniteScroll, isLast
 
   return (
     <>
-      <a className="pagination_load-more" role="button" href={nextPageLink} onClick={loadMoreItems}>
+      <BlazeLink
+        className="pagination_load-more"
+        role="button"
+        href={nextPageLink}
+        onClick={loadMoreItems}>
         {LOAD_MORE_STRING}
-      </a>
+      </BlazeLink>
     </>
   );
 };

package/src/components/List/helpers/build-pagination-items.js

@@ -26,7 +26,8 @@ const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, on
             className="pagination_page-item"
             onClick={onClick}
             shallow
-            scroll>
+            scroll
+            ariaLabel={`Page ${page}`}>
             {page}
           </BlazeLink>
         );

package/src/components/List/helpers/build-query-booster.js

@@ -0,0 +1,35 @@
+const buildQueryBooster = (props, data) => {
+  const { recencyBoostProperty } = props;
+
+  if (!recencyBoostProperty || !recencyBoostProperty.length) return data;
+  const { rawQueryStringified = '' } = data;
+
+  const parsedRawQuery = JSON.parse(rawQueryStringified);
+  const { function_score: { query, functions = [] } = {} } = parsedRawQuery;
+
+  const boostedPropsFunctios = recencyBoostProperty.map(propToBoost => ({
+    gauss: {
+      [propToBoost]: {
+        origin: 'now',
+        scale: '30d',
+        offset: '7d',
+        decay: 0.5
+      }
+    }
+  }));
+
+  const updatedData = {
+    function_score: {
+      query: functions.length ? query : parsedRawQuery,
+      functions: [...functions, ...boostedPropsFunctios],
+      boost_mode: 'multiply'
+    }
+  };
+
+  return {
+    ...data,
+    rawQueryStringified: JSON.stringify(updatedData)
+  };
+};
+
+export default buildQueryBooster;

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

@@ -9,3 +9,4 @@ export { default as hasRequiredItemListDetails } from './has-required-item-list-
 export { default as getListComponent } from './get-list-component';
 export { default as getListQuery } from './get-list-query';
 export { default as getListSpecificSearchFilter } from './get-list-specific-search-filter';
+export { default as buildQueryBooster } from './build-query-booster';

package/src/components/Menu/Menu.js

@@ -6,6 +6,7 @@ import { useRouter } from 'next/router';
 import { MdMenu, MdClose } from 'react-icons/md';
 import { Link } from '@blaze-cms/nextjs-components';
 import MenuContext from './MenuContext';
+import BlazeLink from '../BlazeLink';
 
 const Menu = ({
   children,
@@ -22,7 +23,6 @@ const Menu = ({
   logoOnMobileAlt,
   logoOnMobileModifier,
   logoOnDesktopModifier,
-  logoOnDesktopAlignment,
   closeIconModifier
 }) => {
   const router = useRouter();
@@ -62,7 +62,8 @@ const Menu = ({
               className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
               <BlazeButton
                 className={`menu--mobile-button ${mobileButtonModifier}`}
-                onClick={() => setShowMobileMenu(!showMobileMenu)}>
+                onClick={() => setShowMobileMenu(!showMobileMenu)}
+                aria-label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
                 <i>
                   {showMobileMenu ? (
                     <MdClose className={closeIconModifier} />
@@ -76,7 +77,7 @@ const Menu = ({
         )}
         {logoOnMobile &&
           !showMobileMenu && (
-            <Link href="/">
+            <Link href="/" name="mobile menu">
               <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
             </Link>
           )}
@@ -84,13 +85,13 @@ const Menu = ({
         <div className="menu--desktop-wrapper">
           <ul className={childModifiers}>
             {logoOnDesktop && (
-              <a href="/" className="">
+              <BlazeLink href="/" className="">
                 <img
                   src={logoOnMobileUrl}
                   alt={logoOnMobileAlt}
                   className={logoOnDesktopModifier}
                 />
-              </a>
+              </BlazeLink>
             )}
             {children}
           </ul>
@@ -108,7 +109,6 @@ Menu.propTypes = {
   logoOnMobileAlt: PropTypes.string,
   logoOnMobileModifier: PropTypes.string,
   logoOnDesktopModifier: PropTypes.string,
-  logoOnDesktopAlignment: PropTypes.string,
   hamburgerIconModifier: PropTypes.string,
   closeIconModifier: PropTypes.string,
   mobileButtonModifier: PropTypes.string,
@@ -131,7 +131,6 @@ Menu.defaultProps = {
   mobileIconAlignment: '',
   mobileMenuModifier: '',
   mobileMenuChildrenModifier: '',
-  logoOnDesktopAlignment: 'left',
   modifier: '',
   children: []
 };

package/src/components/MenuItem/MenuItem.js

@@ -33,7 +33,11 @@ const MenuItem = ({ children, eventType, text, modifier, url }) => {
   const hasValidChildren = hasChildren(children);
 
   return (
-    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+    <li
+      className={modifier}
+      onMouseEnter={handleItemEvent}
+      onMouseLeave={handleItemEvent}
+      aria-label={text}>
       <div className="menu--item--link">
         {url ? (
           <BlazeLink href={url}>{text}</BlazeLink>
@@ -51,7 +55,6 @@ const MenuItem = ({ children, eventType, text, modifier, url }) => {
           </i>
         )}
       </div>
-
       {hasValidChildren && (
         <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
       )}

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

@@ -41,6 +41,7 @@ const SelectFilter = ({
         label={labelToUse}
         value={filterValue}
         id={prop}
+        name={`filter-${prop}`}
         data-testid={`filter-${prop}`}
         options={options}
         defaultTextValue={defaultTextValue}

package/src/components/SearchFilterSort/SearchFilterSort.js

@@ -31,6 +31,7 @@ const SearchFilterSort = ({ filters, elementLabel, selectLabel, id, listComponen
   return (
     <div className="sort-by">
       <Select
+        name="sortby"
         label={elementLabel}
         defaultTextValue={defaultTextValue}
         value={selectedValue}

package/src/components/SocialFollow/SFItem.js

@@ -2,18 +2,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { SOCIAL_NETWORKS, BASE_CLASS_NAME_FOLLOW } from './sf.config';
+import BlazeLink from '../BlazeLink';
 
 const SFItem = ({ url, id }) => {
   const { name, className, Icon, spanClassName } = SOCIAL_NETWORKS[id];
 
   return (
     <li className={BASE_CLASS_NAME_FOLLOW}>
-      <a title={name} href={url} className={className} rel="noopener nofollow" target="_blank">
+      <BlazeLink
+        href={url}
+        className={className}
+        rel="noopener nofollow"
+        target="_blank"
+        ariaLabel={name}>
         <i>
           <Icon />
         </i>
         <span className={`social__network ${spanClassName}`}>{name}</span>
-      </a>
+      </BlazeLink>
     </li>
   );
 };

package/src/components/Video/providers/Default.js

@@ -1,23 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Player } from 'video-react';
+import { VIDEO_WRAPPER_CLASS_NAME } from '../../../constants';
+
 // import 'video-react/styles/scss/video-react.scss';
 
-const Default = ({ modifier, url, autoplay }) => (
-  <Player className={modifier} preload="none" autoPlay={autoplay} muted={autoplay}>
-    <source src={url} type="video/mp4" />
-  </Player>
+const Default = ({ modifier, url, autoplay, loop }) => (
+  <div className={VIDEO_WRAPPER_CLASS_NAME}>
+    <Player className={modifier} preload="none" autoPlay={autoplay} loop={loop} muted={autoplay}>
+      <source src={url} />
+    </Player>
+  </div>
 );
 
 Default.propTypes = {
   url: PropTypes.string.isRequired,
   modifier: PropTypes.string,
-  autoplay: PropTypes.bool
+  autoplay: PropTypes.bool,
+  loop: PropTypes.bool
 };
 
 Default.defaultProps = {
   modifier: null,
-  autoplay: false
+  autoplay: false,
+  loop: false
 };
 
 export default Default;

package/src/components/Video/providers/get-provider.js

@@ -8,7 +8,8 @@ const SUPPORTED_PROVIDERS = {
     import(/* webpackChunkName: "blazePbVideoJWPlayer" */ './JWPlayer/JWPlayerProvider')
   ),
   vimeo: dynamic(() => import(/* webpackChunkName: "blazePbVideoVimeo" */ './Vimeo/VimeoProvider')),
-  default: dynamic(() => import(/* webpackChunkName: "blazePbVideoDefault" */ './Default'))
+  default: dynamic(() => import(/* webpackChunkName: "blazePbVideoDefault" */ './Default')),
+  html: dynamic(() => import(/* webpackChunkName: "blazePbVideoDefault" */ './Default'))
 };
 
 function getProvider(provider) {

package/src/hooks/helpers/getVariant.js

@@ -3,6 +3,7 @@ import { variantHandler } from '../../utils';
 export default function getVariant(settings) {
   const { variant } = settings;
   if (!variant) return [null, {}];
+
   const { VariantComponent, getSettings } = variantHandler.get(variant) || {};
   const variantSettings =
     !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;

package/src/hooks/index.js

@@ -6,3 +6,4 @@ export { default as usePageBuilder } from './use-page-builder';
 export { default as useGetSingleEntitySchema } from './use-get-single-entity-schema';
 export { default as useCheckMobileScreen } from './use-check-mobile-screen';
 export { default as useBannerInsertion } from './use-banner-insertion';
+export { default as useAppSyncEventHook } from './use-app-sync-event-hook';

package/src/hooks/use-app-sync-event-hook.js

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { AppContext } from '@blaze-cms/nextjs-components';
+
+const EVENET_PREFIX = 'plugin:page-builder:';
+const EVENET_SUFIX = ':sync';
+
+const useAppSyncEventHook = ({ eventName, data, props }) => {
+  const { blazeApp } = useContext(AppContext);
+  if (!blazeApp) return { data };
+
+  blazeApp.events.emit(`${EVENET_PREFIX}${eventName}${EVENET_SUFIX}`, {
+    data,
+    props
+  });
+
+  return { data };
+};
+
+export default useAppSyncEventHook;

package/src/utils/variant-handler.js

@@ -18,7 +18,8 @@ function variantMapHandler() {
 
   function validate(key, variant) {
     if (!key || !variant) throw new BlazeError('Variant requires key and component');
-    if (variants.has(key) && key !== 'array') throw new BlazeError(`Variant already exists`);
+    // eslint-disable-next-line no-console
+    if (variants.has(key) && key !== 'array') console.warn(`Variant already exists: ${key}`); // todo: restore error // throw new BlazeError(`Variant already exists: ${key}`);
   }
 
   return {

package/src/variants/HeroImage/index.js

@@ -0,0 +1,8 @@
+const HeroImage = {
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'hero-image'
+  })
+};
+
+export default HeroImage;

package/src/variants/Infographic/Infographic.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import useInfographic from './useInfographic';
+
+const Infographic = props => {
+  const { contentRef, id, className, tabId, children } = useInfographic(props);
+
+  return (
+    <div ref={contentRef} id={id} className={className} role="tabpanel" aria-labelledby={tabId}>
+      {children}
+    </div>
+  );
+};
+
+export default Infographic;

package/src/variants/Infographic/index.js

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+
+const Infographic = {
+  getSettings: componentSettings => ({
+    ...componentSettings
+  }),
+  VariantComponent: dynamic(() =>
+    import(/* webpackChunkName: "blazePbVariantInfographic" */ './Infographic')
+  )
+};
+
+export default Infographic;

package/src/variants/Infographic/useInfographic.js

@@ -0,0 +1,18 @@
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+
+const useInfographic = ({ className: _className, ...props }) => {
+  const [isIntersecting, contentRef] = useInView({
+    once: true,
+    offset: '200px'
+  });
+
+  const className = `${_className} infographic${isIntersecting ? ' infographic__active' : ''}`;
+
+  return {
+    ...props,
+    className,
+    contentRef
+  };
+};
+
+export default useInfographic;

package/src/variants/LongformGallery/LongformGallery.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { withTitle } from '../../HOC';
+import useLongformGallery from './useLongformGallery';
+import LongformGalleryImage from './LongformGalleryImage';
+
+const LongformGallery = props => {
+  const {
+    loading,
+    error,
+    groupedImages,
+    shouldDisplayCaption,
+    caption,
+    handleImageOnClick
+  } = useLongformGallery(props);
+
+  if (loading || error || !groupedImages.length) return null;
+
+  return (
+    <div className="longform-gallery" data-testid="longform-gallery">
+      {groupedImages.map((imageGroup, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={i} data-testid="grouped-images" className="longform-gallery__images">
+          {imageGroup.map(secondaryImage => (
+            <LongformGalleryImage
+              key={secondaryImage.id}
+              {...secondaryImage}
+              numberOfImages={imageGroup.length}
+              className={
+                imageGroup.length > 2
+                  ? 'longform-gallery__images__image secondary-image'
+                  : 'longform-gallery__images__image main-image'
+              }
+              handleImageOnClick={handleImageOnClick}
+            />
+          ))}
+        </div>
+      ))}
+      {shouldDisplayCaption && (
+        <div className="carousel__details" data-testid="carousel-details">
+          <div className="caption">{caption}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default withTitle(LongformGallery);