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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import useThumbnailCarousel from './useThumbnailCarousel';
+import ThumbnailImage from './ThumbnailImage';
+
+const ThumbnailCarousel = props => {
+  const {
+    thumbnailsListRef,
+    imageIds,
+    selectedImageId,
+    priorityLimit,
+    scrollToImage,
+    mainImageButtonClick
+  } = useThumbnailCarousel(props);
+
+  return (
+    <div className="thumbnail-carousel" data-testid="thumbnail-carousel">
+      <div className="thumbnail-carousel__main_image_container">
+        <div
+          id="previous-button"
+          className="thumbnail-carousel__main_image_container__button"
+          role="button"
+          onClick={() => mainImageButtonClick()}>
+          <div className="arrow arrow--left" />
+        </div>
+        <ThumbnailImage {...props} priority imageId={selectedImageId} />
+        <div
+          id="next-button"
+          className="thumbnail-carousel__main_image_container__button next"
+          role="button"
+          onClick={() => mainImageButtonClick(true)}>
+          <div className="arrow arrow--right" />
+        </div>
+      </div>
+      <div className="thumbnail-carousel__list" ref={thumbnailsListRef}>
+        {imageIds.map((imageId, index) => (
+          <ThumbnailImage
+            {...props}
+            key={imageId}
+            imageIndex={index}
+            priority={index < priorityLimit}
+            imageId={imageId}
+            selectedImageId={selectedImageId}
+            scrollToImage={scrollToImage}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ThumbnailCarousel;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import LazyImage from '../../../components/LazyImage';
+import useThumbnailImage from './useThumbnailImage';
+
+const ThumbnailImage = props => {
+  const { loading, error, className, imageUrl, altText, priority, handleClick } = useThumbnailImage(
+    props
+  );
+
+  if (error) return error.message;
+  if (loading) return null;
+
+  return (
+    <div className={className} onClick={handleClick} role="button" data-testid="thumbnail-image">
+      <LazyImage
+        src={imageUrl}
+        alt={altText}
+        sizeKey="carousel"
+        role="button"
+        priority={priority}
+      />
+    </div>
+  );
+};
+
+export default ThumbnailImage;

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

@@ -0,0 +1,3 @@
+import ThumbnailImage from './ThumbnailImage';
+
+export default ThumbnailImage;

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

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import { useGetImages } from '../../../hooks';
+import { getImageData } from '../../../utils';
+
+const useThumbnailImage = ({
+  imageId,
+  imageIndex,
+  enableLightbox,
+  toggleModal,
+  handleSelectedImage,
+  priority,
+  selectedImageId,
+  scrollToImage
+}) => {
+  const { data = {}, loading, error } = useGetImages(imageId);
+
+  const handleClick = () => {
+    if (scrollToImage) scrollToImage(imageIndex);
+    else if (enableLightbox) {
+      toggleModal();
+      handleSelectedImage(imageId);
+    }
+  };
+
+  const { url: imageUrl = '', data: imageData = {} } = data.getFile || {
+    getFile: { url: '', data: {} }
+  };
+  const { altText } = getImageData({}, imageData);
+
+  const className =
+    selectedImageId === imageId
+      ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'
+      : 'thumbnail-carousel-image';
+
+  return {
+    loading,
+    error,
+    className,
+    imageId,
+    imageUrl,
+    altText,
+    priority,
+    handleClick
+  };
+};
+
+useThumbnailImage.propTypes = {
+  imageId: PropTypes.string.isRequired,
+  selectedImageId: PropTypes.string.isRequired,
+  enableLightbox: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  handleSelectedImage: PropTypes.func.isRequired,
+  priority: PropTypes.bool.isRequired,
+  scrollToImage: PropTypes.func
+};
+
+useThumbnailImage.defaultProps = {
+  scrollToImage: null
+};
+
+export default useThumbnailImage;

package/src/variants/ThumbnailCarousel/index.js

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

package/src/variants/ThumbnailCarousel/useThumbnailCarousel.js

@@ -0,0 +1,42 @@
+import { useState, useRef } from 'react';
+
+const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const thumbnailsListRef = useRef(null);
+  const selectedImageId = imageIds[selectedImageIndex];
+
+  const mainImageButtonClick = next => {
+    let newIndex;
+    if (next) {
+      const isLast = imageIds.length - 1 === selectedImageIndex;
+      newIndex = isLast ? 0 : selectedImageIndex + 1;
+    } else {
+      const isFirst = selectedImageIndex === 0;
+      newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
+    }
+    scrollToImage(newIndex);
+  };
+
+  const scrollToImage = newIndex => {
+    if (thumbnailsListRef.current && selectedImageIndex !== newIndex) {
+      thumbnailsListRef.current.scrollTo({
+        left: 150 * newIndex,
+        behavior: 'smooth'
+      });
+      setSelectedImageIndex(newIndex);
+    }
+  };
+
+  return {
+    ...props,
+    imageIds,
+    selectedImageId,
+    selectedImageIndex,
+    thumbnailsListRef,
+    priorityLimit,
+    scrollToImage,
+    mainImageButtonClick
+  };
+};
+
+export default useThumbnailCarousel;

package/src/variants/index.js

@@ -1 +1,15 @@
-export default {};
+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/Breadcrumb/__snapshots__/Breadcrumb.test.js.snap

@@ -12,6 +12,7 @@ exports[`Breadcrumb component should match snapshot 1`] = `
         class="breadcrumb__item"
       >
         <a
+          aria-label="Home"
           href="/"
         >
           Home
@@ -39,6 +40,7 @@ exports[`Breadcrumb component should not render if loading, err or no data exist
         class="breadcrumb__item"
       >
         <a
+          aria-label="Home"
           href="/"
         >
           Home
@@ -66,6 +68,7 @@ exports[`Breadcrumb component should render 1`] = `
         class="breadcrumb__item"
       >
         <a
+          aria-label="Home"
           href="/"
         >
           Home

package/tests/unit/src/components/Button.test.js

@@ -74,7 +74,7 @@ describe('Button component', () => {
     const propsWithoutText = { ...componentProps, text: '' };
     const { container } = await renderComponent(propsWithoutText);
     expect(container.innerHTML).toBe(
-      '<a href="http://google.com" rel="noopener nofollow" target="_blank" class="icon-button"><i class="fas fas-trash"></i></a>'
+      '<a aria-label="Open http://google.com" href="http://google.com" rel="noopener nofollow" target="_blank" class="icon-button"><i class="fas fas-trash"></i></a>'
     );
   });
 
@@ -87,7 +87,7 @@ describe('Button component', () => {
     const propsWithIcon = { ...componentProps, text: '', icon: 'test-icon' };
     const { container } = await renderComponent(propsWithIcon);
     expect(container.innerHTML).toBe(
-      '<a href="http://google.com" rel="noopener nofollow" target="_blank" class="icon-button"><i class="test-icon"></i></a>'
+      '<a aria-label="Open http://google.com" href="http://google.com" rel="noopener nofollow" target="_blank" class="icon-button"><i class="test-icon"></i></a>'
     );
   });
 

package/tests/unit/src/components/Card/__snapshots__/Card.test.js.snap

@@ -9,6 +9,7 @@ exports[`Card component should not render alternative headline if alternativePre
       class="card__image card__image--portrait"
     >
       <a
+        aria-label="Open /mockurl"
         class="card__image-link"
         href="/mockurl"
       >
@@ -25,6 +26,7 @@ exports[`Card component should not render alternative headline if alternativePre
         class="card__content card__content--portrait"
       >
         <a
+          aria-label="category-name"
           class="badge badge--label"
           href="published-url"
         >
@@ -34,6 +36,7 @@ exports[`Card component should not render alternative headline if alternativePre
           class="card__title card__title--portrait "
         >
           <a
+            aria-label="mock name"
             href="/mockurl"
           >
             mock name
@@ -84,6 +87,7 @@ exports[`Card component should not render alternative headline if displayCategor
       class="card__image card__image--portrait"
     >
       <a
+        aria-label="Open /mockurl"
         class="card__image-link"
         href="/mockurl"
       >
@@ -103,6 +107,7 @@ exports[`Card component should not render alternative headline if displayCategor
           class="card__title card__title--portrait "
         >
           <a
+            aria-label="mock name"
             href="/mockurl"
           >
             mock name
@@ -153,6 +158,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
       class="card__image card__image--portrait"
     >
       <a
+        aria-label="Open /mockurl"
         class="card__image-link"
         href="/mockurl"
       >
@@ -169,6 +175,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
         class="card__content card__content--portrait"
       >
         <a
+          aria-label="category-name"
           class="badge badge--label"
           href="published-url"
         >
@@ -178,6 +185,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
           class="card__title card__title--portrait "
         >
           <a
+            aria-label="mock name"
             href="/mockurl"
           >
             mock name
@@ -228,6 +236,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
       class="card__image card__image--portrait"
     >
       <a
+        aria-label="Open /mockurl"
         class="card__image-link"
         href="/mockurl"
       >
@@ -252,6 +261,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
           class="card__title card__title--portrait "
         >
           <a
+            aria-label="Alternative headline"
             href="/mockurl"
           >
             Alternative headline
@@ -302,6 +312,7 @@ exports[`Card component should render without throwing an error and match snapsh
       class="card__image card__image--portrait"
     >
       <a
+        aria-label="Open /mockurl"
         class="card__image-link"
         href="/mockurl"
       >
@@ -318,6 +329,7 @@ exports[`Card component should render without throwing an error and match snapsh
         class="card__content card__content--portrait"
       >
         <a
+          aria-label="category-name"
           class="badge badge--label"
           href="published-url"
         >
@@ -327,6 +339,7 @@ exports[`Card component should render without throwing an error and match snapsh
           class="card__title card__title--portrait "
         >
           <a
+            aria-label="mock name"
             href="/mockurl"
           >
             mock name

package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap

@@ -21,6 +21,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
           class="card__image card__image--portrait"
         >
           <a
+            aria-label="Open /nautors-swan/swan-78"
             class="card__image-link"
             href="/nautors-swan/swan-78"
           />
@@ -40,6 +41,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
               class="card__title card__title--portrait "
             >
               <a
+                aria-label="Swan 78"
                 href="/nautors-swan/swan-78"
               >
                 Swan 78
@@ -58,6 +60,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
           class="card__image card__image--portrait"
         >
           <a
+            aria-label="Open /nautors-swan/swan-98"
             class="card__image-link"
             href="/nautors-swan/swan-98"
           />
@@ -77,6 +80,7 @@ exports[`CardsContainer component should render with carousel if option is enabl
               class="card__title card__title--portrait "
             >
               <a
+                aria-label="Swan 98"
                 href="/nautors-swan/swan-98"
               >
                 Swan 98
@@ -109,6 +113,7 @@ exports[`CardsContainer component should render without throwing error and match
         class="card__image card__image--portrait"
       >
         <a
+          aria-label="Open /nautors-swan/swan-78"
           class="card__image-link"
           href="/nautors-swan/swan-78"
         />
@@ -128,6 +133,7 @@ exports[`CardsContainer component should render without throwing error and match
             class="card__title card__title--portrait "
           >
             <a
+              aria-label="Swan 78"
               href="/nautors-swan/swan-78"
             >
               Swan 78
@@ -146,6 +152,7 @@ exports[`CardsContainer component should render without throwing error and match
         class="card__image card__image--portrait"
       >
         <a
+          aria-label="Open /nautors-swan/swan-98"
           class="card__image-link"
           href="/nautors-swan/swan-98"
         />
@@ -165,6 +172,7 @@ exports[`CardsContainer component should render without throwing error and match
             class="card__title card__title--portrait "
           >
             <a
+              aria-label="Swan 98"
               href="/nautors-swan/swan-98"
             >
               Swan 98

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