@blaze-cms/react-page-builder 0.141.0-core-styles.22 → 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/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/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