@blaze-cms/react-page-builder 0.141.0-alpha.0 → 0.141.0-alpha.2

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/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/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,
@@ -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>

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/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);

package/src/variants/LongformGallery/LongformGalleryImage.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import { IN_VIEW_CONFIG } from './constants';
+
+const LongformGalleryImage = ({
+  id,
+  url,
+  caption,
+  altText,
+  priority,
+  className,
+  numberOfImages,
+  handleImageOnClick,
+  ...props
+}) => {
+  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
+  const shouldRender = priority || isIntersecting;
+  const HeadComponent = priority ? Head : null;
+  const sizeKey = `carousel:longform:${numberOfImages}`;
+
+  return (
+    <div ref={outerRef} className={`${className}`}>
+      <div
+        role="button"
+        className="longform-gallery__images__image__container"
+        data-testid="longform-gallery__images__image__container"
+        onClick={() => handleImageOnClick(id)}>
+        {shouldRender && (
+          <ResponsiveImage
+            sizeKey={sizeKey}
+            role="button"
+            src={url}
+            alt={altText}
+            priority={priority}
+            HeadComponent={HeadComponent}
+            {...props}
+          />
+        )}
+      </div>
+      {!!caption && (
+        <div
+          className="longform-gallery__images__image__details"
+          data-testid="longform-gallery__images__image__details">
+          <div className="longform-gallery__images__image__details__caption">{caption}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+LongformGalleryImage.propTypes = {
+  id: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  caption: PropTypes.string.isRequired,
+  numberOfImages: PropTypes.number.isRequired,
+  altText: PropTypes.string.isRequired,
+  priority: PropTypes.bool.isRequired,
+  className: PropTypes.string.isRequired,
+  handleImageOnClick: PropTypes.func.isRequired
+};
+
+export default LongformGalleryImage;

package/src/variants/LongformGallery/constants.js

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+const GET_IMAGES_QUERY = gql`
+  query getImages($where: JSON!) {
+    getImages: getFiles(where: $where) {
+      id
+      url
+      data
+    }
+  }
+`;
+
+const PROPS_TO_CHECK = ['altText', 'caption', 'hrefUrl', 'credits'];
+
+const IN_VIEW_CONFIG = {
+  once: true,
+  offset: '200px',
+  bottomOffset: '-200px'
+};
+
+export { GET_IMAGES_QUERY, IN_VIEW_CONFIG, PROPS_TO_CHECK };

package/src/variants/LongformGallery/helpers/index.js

@@ -0,0 +1,5 @@
+import parseImageData from './parseImageData';
+import separateImages from './separateImages';
+import shouldSkip from './shouldSkip';
+
+export { parseImageData, separateImages, shouldSkip };

package/src/variants/LongformGallery/helpers/parseImageData.js

@@ -0,0 +1,25 @@
+import parseHTML from 'html-react-parser';
+import { PROPS_TO_CHECK } from '../constants';
+
+const parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {
+  const { data = {} } = image;
+  const parsedData = {};
+
+  PROPS_TO_CHECK.forEach(dataKey => {
+    const value = data && data[dataKey];
+    if (dataKey === 'caption') {
+      parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';
+      return;
+    }
+    parsedData[dataKey] = value || '';
+  });
+
+  return {
+    ...parsedData,
+    id: image.id,
+    url: image.url,
+    priority: index < priorityLimit
+  };
+};
+
+export default parseImageData;

package/src/variants/LongformGallery/helpers/separateImages.js

@@ -0,0 +1,38 @@
+import parseImageData from './parseImageData';
+
+const buildImageGroups = (images, priorityLimit, shouldDisplayCaption) => {
+  const imageGroups = [];
+  let imageGroupIndex = 0;
+  const isDivisible = images.length % 3 === 0;
+
+  images.forEach((image, index) => {
+    if (!imageGroups[imageGroupIndex])
+      imageGroups[imageGroupIndex] = [
+        parseImageData(image, index, priorityLimit, shouldDisplayCaption)
+      ];
+    else
+      imageGroups[imageGroupIndex].push(
+        parseImageData(image, index, priorityLimit, shouldDisplayCaption)
+      );
+
+    if (isDivisible) {
+      if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;
+    } else {
+      if (imageGroupIndex === 0 && imageGroups[imageGroupIndex].length >= 2) {
+        imageGroupIndex += 1;
+        return;
+      }
+      if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;
+    }
+  });
+
+  return imageGroups;
+};
+
+const separateImages = (images, priorityLimit, shouldDisplayCaption) => {
+  if (!images || !images.length) return [];
+
+  return buildImageGroups(images, priorityLimit, shouldDisplayCaption);
+};
+
+export default separateImages;

package/src/variants/LongformGallery/helpers/shouldSkip.js

@@ -0,0 +1,3 @@
+const shouldSkip = ids => !ids || (Array.isArray(ids) && !ids.length);
+
+export default shouldSkip;