@blaze-cms/react-page-builder 0.141.0-core-styles.20 → 0.141.0-core-styles.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.141.0-core-styles.20",
+  "version": "0.141.0-core-styles.22",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -31,18 +31,18 @@
     "@blaze-cms/core-errors": "0.140.2-core-styles.1",
     "@blaze-cms/core-errors-ui": "0.140.2-core-styles.1",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
-    "@blaze-cms/nextjs-components": "0.141.0-core-styles.0",
-    "@blaze-cms/plugin-search-ui": "0.141.0-core-styles.16",
+    "@blaze-cms/nextjs-components": "0.141.0-core-styles.21",
+    "@blaze-cms/plugin-search-ui": "0.141.0-core-styles.21",
     "@blaze-cms/setup-ui": "0.140.2-core-styles.1",
     "@blaze-cms/utils": "0.140.2-core-styles.1",
-    "@blaze-cms/utils-handlebars": "0.141.0-core-styles.0",
+    "@blaze-cms/utils-handlebars": "0.141.0-core-styles.21",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
-    "@blaze-react/input": "0.5.30",
+    "@blaze-react/input": "0.8.0-alpha.78",
     "@blaze-react/modal": "0.5.19",
     "@blaze-react/range-filter": "0.7.2",
-    "@blaze-react/select": "0.8.0-alpha.64",
+    "@blaze-react/select": "0.8.0-alpha.78",
     "@blaze-react/utils": "0.5.15",
     "core-js": "^3.2.1",
     "entities": "^2.0.0",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "4e9b6cfffbc04fa32476c3daed008594a54838e9"
+  "gitHead": "5c47857c58e770d9533e569522053fa587f41a38"
 }

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