@blaze-cms/react-page-builder 0.141.0-core-styles.21 → 0.141.0-core-styles.23

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;

package/src/variants/LongformGallery/index.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+
+const LongformGallery = {
+  VariantComponent: dynamic(() =>
+    import(/* webpackChunkName: "blazePbVariantLongformGallery" */ './LongformGallery')
+  ),
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'longformGallery'
+  })
+};
+
+export default LongformGallery;

package/src/variants/LongformGallery/useLongformGallery.js

@@ -0,0 +1,41 @@
+import { useQuery } from '@apollo/client';
+import { GET_IMAGES_QUERY } from './constants';
+import { separateImages, shouldSkip } from './helpers';
+
+const useLongformGallery = ({
+  imageIds = [],
+  priorityLimit = 0,
+  caption = '',
+  shouldDisplayCaption = false,
+  enableLightbox = false,
+  toggleModal = () => {},
+  handleSelectedImage = () => {}
+}) => {
+  const skip = shouldSkip(imageIds);
+
+  const { data, loading, error } = useQuery(GET_IMAGES_QUERY, {
+    variables: { where: { id: { _in: imageIds } } },
+    skip
+  });
+
+  const { getImages } = data || {};
+
+  const groupedImages = separateImages(getImages, priorityLimit, shouldDisplayCaption);
+
+  const handleImageOnClick = clickedImageId => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(clickedImageId);
+  };
+
+  return {
+    loading,
+    error,
+    shouldDisplayCaption,
+    caption,
+    groupedImages,
+    handleImageOnClick
+  };
+};
+
+export default useLongformGallery;

package/src/variants/LongformRow/index.js

@@ -0,0 +1,8 @@
+const LongformRow = {
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'longform-row'
+  })
+};
+
+export default LongformRow;

package/src/variants/ParallaxImageTextRight/index.js

@@ -0,0 +1,9 @@
+const ParallaxImageTextRight = {
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    parallax: true,
+    modifier: 'image-children-right'
+  })
+};
+
+export default ParallaxImageTextRight;

package/src/variants/ThumbnailCarousel/ThumbnailCarousel.js

@@ -8,8 +8,8 @@ const ThumbnailCarousel = props => {
     imageIds,
     selectedImageId,
     priorityLimit,
-    mainImageButtonClick,
-    thumbnailImageClick
+    scrollToImage,
+    mainImageButtonClick
   } = useThumbnailCarousel(props);
 
   return (
@@ -22,12 +22,7 @@ const ThumbnailCarousel = props => {
           onClick={() => mainImageButtonClick()}>
           <div className="arrow arrow--left" />
         </div>
-        <div
-          className="thumbnail-carousel__main_image_container__main-image"
-          data-testid="thumbnail-main-image"
-          ref={thumbnailsListRef}>
-          <ThumbnailImage {...props} priority imageId={selectedImageId} />
-        </div>
+        <ThumbnailImage {...props} priority imageId={selectedImageId} />
         <div
           id="next-button"
           className="thumbnail-carousel__main_image_container__button next"
@@ -36,15 +31,16 @@ const ThumbnailCarousel = props => {
           <div className="arrow arrow--right" />
         </div>
       </div>
-      <div className="thumbnail-carousel__list">
+      <div className="thumbnail-carousel__list" ref={thumbnailsListRef}>
         {imageIds.map((imageId, index) => (
           <ThumbnailImage
             {...props}
             key={imageId}
+            imageIndex={index}
             priority={index < priorityLimit}
             imageId={imageId}
             selectedImageId={selectedImageId}
-            handleOnClick={thumbnailImageClick}
+            scrollToImage={scrollToImage}
           />
         ))}
       </div>

package/src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js

@@ -3,33 +3,19 @@ import LazyImage from '../../../components/LazyImage';
 import useThumbnailImage from './useThumbnailImage';
 
 const ThumbnailImage = props => {
-  const {
-    loading,
-    error,
-    className,
-    imageRef,
-    imageUrl,
-    altText,
-    priority,
-    handleClick,
-    handleEnableLightbox
-  } = useThumbnailImage(props);
+  const { loading, error, className, imageUrl, altText, priority, handleClick } = useThumbnailImage(
+    props
+  );
 
   if (error) return error.message;
   if (loading) return null;
 
   return (
-    <div
-      ref={imageRef}
-      className={className}
-      onClick={handleClick}
-      role="button"
-      data-testid="thumbnail-image">
+    <div className={className} onClick={handleClick} role="button" data-testid="thumbnail-image">
       <LazyImage
         src={imageUrl}
         alt={altText}
         sizeKey="carousel"
-        onClick={handleEnableLightbox}
         role="button"
         priority={priority}
       />

package/src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js

@@ -1,38 +1,25 @@
-import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useGetImages } from '../../../hooks';
 import { getImageData } from '../../../utils';
 
 const useThumbnailImage = ({
   imageId,
+  imageIndex,
   enableLightbox,
   toggleModal,
   handleSelectedImage,
   priority,
   selectedImageId,
-  handleOnClick
+  scrollToImage
 }) => {
-  const imageRef = useRef(null);
-  const isSelected = selectedImageId === imageId;
   const { data = {}, loading, error } = useGetImages(imageId);
 
-  useEffect(
-    () => {
-      if (imageRef.current && isSelected) {
-        imageRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-    },
-    [isSelected]
-  );
-
-  const handleEnableLightbox = () => {
-    if (!enableLightbox) return;
-    toggleModal();
-    handleSelectedImage(imageId);
-  };
-
   const handleClick = () => {
-    handleOnClick(imageId);
+    if (scrollToImage) scrollToImage(imageIndex);
+    else if (enableLightbox) {
+      toggleModal();
+      handleSelectedImage(imageId);
+    }
   };
 
   const { url: imageUrl = '', data: imageData = {} } = data.getFile || {
@@ -49,12 +36,11 @@ const useThumbnailImage = ({
     loading,
     error,
     className,
-    imageRef,
+    imageId,
     imageUrl,
     altText,
     priority,
-    handleClick,
-    handleEnableLightbox
+    handleClick
   };
 };
 
@@ -65,11 +51,11 @@ useThumbnailImage.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   handleSelectedImage: PropTypes.func.isRequired,
   priority: PropTypes.bool.isRequired,
-  handleOnClick: PropTypes.func
+  scrollToImage: PropTypes.func
 };
 
 useThumbnailImage.defaultProps = {
-  handleOnClick: () => {}
+  scrollToImage: null
 };
 
 export default useThumbnailImage;

package/src/variants/ThumbnailCarousel/index.js

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

package/src/variants/ThumbnailCarousel/useThumbnailCarousel.js

@@ -6,20 +6,25 @@ const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
   const selectedImageId = imageIds[selectedImageIndex];
 
   const mainImageButtonClick = next => {
+    let newIndex;
     if (next) {
       const isLast = imageIds.length - 1 === selectedImageIndex;
-      const newIndex = isLast ? 0 : selectedImageIndex + 1;
-      setSelectedImageIndex(newIndex);
+      newIndex = isLast ? 0 : selectedImageIndex + 1;
     } else {
       const isFirst = selectedImageIndex === 0;
-      const newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
-      setSelectedImageIndex(newIndex);
+      newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
     }
+    scrollToImage(newIndex);
   };
 
-  const thumbnailImageClick = id => {
-    const newIndex = imageIds.indexOf(id);
-    if (newIndex !== -1) setSelectedImageIndex(newIndex);
+  const scrollToImage = newIndex => {
+    if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {
+      thumbnailsListRef.current.scrollTo({
+        left: 150 * newIndex,
+        behavior: 'smooth'
+      });
+      setSelectedImageIndex(newIndex);
+    }
   };
 
   return {
@@ -29,7 +34,7 @@ const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
     selectedImageIndex,
     thumbnailsListRef,
     priorityLimit,
-    thumbnailImageClick,
+    scrollToImage,
     mainImageButtonClick
   };
 };

package/src/variants/index.js

@@ -1,5 +1,15 @@
+import heroImage from './HeroImage';
+import infographic from './Infographic';
+import longformGallery from './LongformGallery';
+import longformRow from './LongformRow';
+import parallaxImageTextRight from './ParallaxImageTextRight';
 import thumbnailCarousel from './ThumbnailCarousel';
 
 export default {
+  heroImage,
+  infographic,
+  longformGallery,
+  longformRow,
+  parallaxImageTextRight,
   thumbnailCarousel
 };

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -36,6 +36,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
       class="content-group-sidepanel__content-section"
       id="section-one"
       role="tabpanel"
+      tabid="tab-section-one"
     >
       <div>
         section one
@@ -81,6 +82,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
       class="content-group-tabs__content-section"
       id="section-one"
       role="tabpanel"
+      tabid="tab-section-one"
     >
       <div>
         section one