@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/src/components/ContentGroup/ContentGroupAccordion.js

@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useRouter } from 'next/router';
+import { VscChevronUp, VscChevronDown } from 'react-icons/vsc';
+import { CONTENT_GROUP, OPEN_STATES } from './constants';
+
+const ContentGroupAccordion = ({
+  name,
+  groupSections,
+  sectionsData,
+  VariantComponent,
+  openState,
+  groupSectionProps,
+  groupSectionTitleProps,
+  groupContentWrapperProps,
+  groupContentProps
+}) => {
+  const router = useRouter();
+  const { asPath } = router;
+
+  const sectionPairs = useMemo(
+    () =>
+      sectionsData.map(([sectionName, sectionLabel]) => ({
+        sectionName,
+        sectionLabel,
+        panelId: `${sectionName}-panel`
+      })),
+    [sectionsData]
+  );
+
+  const sectionNames = useMemo(() => sectionPairs.map(p => p.sectionName), [sectionPairs]);
+
+  const baseInitialOpen = useMemo(() => {
+    if (openState === OPEN_STATES.ALL_OPEN) return new Set(sectionNames);
+    if (openState === OPEN_STATES.ALL_CLOSED && sectionNames.length) return new Set();
+
+    return new Set([sectionNames[0]]);
+  }, [openState, sectionNames]);
+
+  const [openSet, setOpenSet] = useState(baseInitialOpen);
+
+  useEffect(
+    () => {
+      const rawHash = (asPath.split('#')[1] || '').trim();
+      if (rawHash && sectionNames.includes(rawHash) && !openSet.has(rawHash)) {
+        setOpenSet(prev => {
+          const next = new Set(prev);
+          next.add(rawHash);
+          return next;
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [asPath, sectionNames]
+  );
+
+  const WrapperComponent = VariantComponent || 'div';
+
+  const baseClass = `${CONTENT_GROUP}-accordion`;
+  const itemsClass = `${baseClass}__items`;
+  const itemClass = `${baseClass}__item`;
+  const headerBtnClass = `${baseClass}__header-btn`;
+  const panelClass = `${baseClass}__panel`;
+  const headingClass = `${baseClass}__heading`;
+  const titleClass = `${baseClass}__title`;
+  const chevronClass = `${baseClass}__chevron`;
+  const chevronIconClass = `${baseClass}__chevron-icon`;
+
+  const onToggle = sectionName => {
+    setOpenSet(prev => {
+      const next = new Set(prev);
+      const willOpen = !next.has(sectionName);
+
+      if (willOpen) next.add(sectionName);
+      else next.delete(sectionName);
+
+      const baseUrl = asPath.split('#')[0];
+      const newUrl = willOpen ? `${baseUrl}#${sectionName}` : baseUrl;
+
+      router.replace(`/Resolver`, newUrl, { shallow: true, scroll: false });
+
+      return next;
+    });
+  };
+
+  return (
+    <div className={baseClass}>
+      <div className={itemsClass} aria-label={name}>
+        {groupSections.map((groupSection, index) => {
+          const { sectionName, sectionLabel, panelId } = sectionPairs[index];
+          const isOpen = openSet.has(sectionName);
+
+          return (
+            <div
+              key={sectionName}
+              className={classnames(itemClass, { [`${itemClass}--open`]: isOpen })}
+              {...groupSectionProps}>
+              <h3 className={headingClass}>
+                <button
+                  id={sectionName}
+                  type="button"
+                  className={classnames(headerBtnClass, { [`${headerBtnClass}--open`]: isOpen })}
+                  aria-expanded={isOpen}
+                  aria-controls={panelId}
+                  onClick={() => onToggle(sectionName)}>
+                  <span className={titleClass} {...groupSectionTitleProps}>
+                    {sectionLabel}
+                  </span>
+
+                  <span aria-hidden="true" className={chevronClass}>
+                    {isOpen ? (
+                      <VscChevronUp className={chevronIconClass} />
+                    ) : (
+                      <VscChevronDown className={chevronIconClass} />
+                    )}
+                  </span>
+                </button>
+              </h3>
+
+              <WrapperComponent
+                id={panelId}
+                role="region"
+                aria-labelledby={sectionName}
+                className={panelClass}
+                hidden={!isOpen}
+                data-section={sectionName}
+                {...groupContentWrapperProps}>
+                <div {...groupContentProps}>{groupSection}</div>
+              </WrapperComponent>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+ContentGroupAccordion.propTypes = {
+  name: PropTypes.string.isRequired,
+  groupSections: PropTypes.array.isRequired,
+  sectionsData: PropTypes.array.isRequired,
+  VariantComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]),
+  openState: PropTypes.oneOf(Object.values(OPEN_STATES)),
+  groupSectionProps: PropTypes.object,
+  groupSectionTitleProps: PropTypes.object,
+  groupContentWrapperProps: PropTypes.object,
+  groupContentProps: PropTypes.object
+};
+
+ContentGroupAccordion.defaultProps = {
+  VariantComponent: null,
+  openState: OPEN_STATES.ALL_CLOSED,
+  groupSectionProps: {},
+  groupSectionTitleProps: {},
+  groupContentWrapperProps: {},
+  groupContentProps: {}
+};
+
+export default ContentGroupAccordion;

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -8,6 +8,7 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
   const router = useRouter();
   const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
   const { asPath } = router;
+
   const contentClassame = contentType === TAB ? TABS : SIDEPANEL;
   const mainDivClass = `${CONTENT_GROUP}-${contentClassame}`;
   const contentGroupClass = `${CONTENT_GROUP}-${contentClassame}__buttons-wrapper`;
@@ -30,6 +31,7 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
           const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${
             isSelected ? '--is-active' : ''
           }`;
+
           return (
             <button
               id={tabId}
@@ -44,18 +46,18 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
                 const newUrl = `${baseUrl}#${sectionName}`;
                 if (asPath === newUrl) return;
                 router.push(`/Resolver`, newUrl, { shallow: true });
-                setSelectedTab(tabId);
               }}>
               {sectioLabel}
             </button>
           );
         })}
       </ul>
+
       {groupSections.map((groupSection, index) => {
         const [sectionName] = sectionsData[index];
         const tabId = `${TAB}-${sectionName}`;
         const panelId = `${PANEL}-${sectionName}`;
-        if (selectedTab !== tabId) return null;
+        const isSelected = selectedTab === tabId;
 
         return (
           <WrapperComponent
@@ -64,7 +66,9 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
             className={sectionClass}
             role="tabpanel"
             tabId={tabId}
-            aria-labelledby={tabId}>
+            aria-labelledby={tabId}
+            aria-hidden={!isSelected}
+            tabIndex={isSelected ? 0 : -1}>
             {groupSection}
           </WrapperComponent>
         );

package/src/components/ContentGroup/constants.js

@@ -3,5 +3,18 @@ const TABS = 'tabs';
 const SIDEPANEL = 'sidepanel';
 const CONTENT_GROUP = 'content-group';
 const PANEL = 'panel';
+const FAQ_PAGE = 'https://schema.org/FAQPage';
 
-export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL };
+const CONTENT_GROUP_TYPES = Object.freeze({
+  TAB: 'tab',
+  SIDEPANEL: 'sidepanel',
+  ACCORDION: 'accordion'
+});
+
+const OPEN_STATES = Object.freeze({
+  FIRST_OPEN: 'first_open',
+  ALL_CLOSED: 'all_closed',
+  ALL_OPEN: 'all_open'
+});
+
+export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL, CONTENT_GROUP_TYPES, OPEN_STATES, FAQ_PAGE };

package/src/components/ContentGroup/helpers/get-structured-data-properties.js

@@ -0,0 +1,36 @@
+const getStructuredDataProperties = isFaqContent => {
+  const properties = {
+    topWrapperProps: {},
+    groupSectionProps: {},
+    groupSectionTitleProps: {},
+    groupContentWrapperProps: {},
+    groupContentProps: {}
+  };
+  if (!isFaqContent) return properties;
+
+  properties.topWrapperProps = {
+    itemScope: true,
+    itemType: 'https://schema.org/FAQPage'
+  };
+  properties.groupSectionProps = {
+    itemScope: true,
+    itemProp: 'mainEntity',
+    itemType: 'https://schema.org/Question'
+  };
+  properties.groupSectionTitleProps = {
+    itemProp: 'name'
+  };
+  properties.groupContentWrapperProps = {
+    itemScope: true,
+    itemProp: 'acceptedAnswer',
+    itemType: 'https://schema.org/Answer'
+  };
+
+  properties.groupContentProps = {
+    itemProp: 'text'
+  };
+
+  return properties;
+};
+
+export default getStructuredDataProperties;

package/src/components/DataSummary/DataSummaryFactory.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema } from '../../application/query';
 import { buildPropsQuery, checkPropsToUse } from '../../helpers';
-import { getDataSummaryQuery, getLinkProps } from './helpers';
+import { getDataSummaryQuery, getLinkProps, getRecordId } from './helpers';
 import DataSummaryRender from './DataSummaryRender';
 
 const DataSummaryFactory = ({
@@ -27,7 +27,10 @@ const DataSummaryFactory = ({
     variables: { id: entityForQuery }
   });
 
+  const recordId = getRecordId(entityForQuery, dataRecordId, parent);
   const { isPreview } = useContext(MainContext);
+
+  if (!recordId) return null;
   if (loading) return '';
   if (error) return error.message;
   if (!data) return null;
@@ -36,7 +39,6 @@ const DataSummaryFactory = ({
   const linkProps = getLinkProps(propsToDisplay);
   const propsQueryString = buildPropsQuery(data, propsToDisplayValues, null, linkProps);
   const dataSummaryQuery = getDataSummaryQuery(data, isPreview, propsQueryString);
-  const recordId = dataRecordId[0] || parent.itemId;
   const isSlider = variant === 'slideSummary';
 
   return (

package/src/components/DataSummary/helpers/get-record-id.js

@@ -0,0 +1,14 @@
+import { checkIfLoggedIn } from '@blaze-cms/core-auth-ui';
+
+const getRecordId = (entityForQuery, dataRecordId, parent) => {
+  const [recordId] = dataRecordId;
+  let foundUserId;
+
+  if (entityForQuery === 'user' && !recordId) {
+    const { id: userId } = checkIfLoggedIn();
+    foundUserId = userId;
+  }
+  return foundUserId || recordId || (parent && parent.itemId);
+};
+
+export default getRecordId;

package/src/components/DataSummary/helpers/index.js

@@ -6,6 +6,7 @@ import buildLoopPropsContent from './build-loop-props-content';
 import parseBooleanValues from './parse-boolean-values';
 import getLinkBasedOnValue from './get-link-based-on-value';
 import getLinkProps from './get-link-props';
+import getRecordId from './get-record-id';
 
 export {
   getDataSummaryQuery,
@@ -15,5 +16,6 @@ export {
   buildLoopPropsContent,
   parseBooleanValues,
   getLinkBasedOnValue,
-  getLinkProps
+  getLinkProps,
+  getRecordId
 };

package/src/components/DateTime/DateTime.js

@@ -6,16 +6,16 @@ import Wrapper from '../Wrapper';
 
 dayjs.extend(LocalizedFormat);
 
-const DateTime = ({ format, customFormat, modifier }) => {
+const DateTime = ({ format, customFormat, modifier, prefix, suffix }) => {
   const dateFormat = customFormat || format;
 
   if (!dateFormat) return null;
 
-  const formatedDate = dayjs().format(dateFormat);
+  const formattedDate = dayjs().format(dateFormat);
 
   return (
     <Wrapper className="date" modifiers={modifier}>
-      {formatedDate}
+      {prefix} {formattedDate} {suffix}
     </Wrapper>
   );
 };
@@ -23,12 +23,16 @@ const DateTime = ({ format, customFormat, modifier }) => {
 DateTime.propTypes = {
   format: PropTypes.string.isRequired,
   customFormat: PropTypes.string,
-  modifier: PropTypes.string
+  modifier: PropTypes.string,
+  prefix: PropTypes.string,
+  suffix: PropTypes.string
 };
 
 DateTime.defaultProps = {
+  customFormat: '',
   modifier: null,
-  customFormat: ''
+  prefix: '',
+  suffix: ''
 };
 
 export default DateTime;

package/src/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { components, Modal } from '@blaze-cms/react-page-builder';
+import { GRAPH_QL_ERROR, PRIORITY_HIGH } from '../../constants';
+
+const { code: CodeComponent } = components;
+
+const ErrorMessage = ({ error, setErrorMessage }) => {
+  const errorMessageToDisplay =
+    typeof error === 'object' && error.message ? error.message.replace(GRAPH_QL_ERROR, '') : error;
+
+  const shouldDisplayInModal =
+    typeof error === 'object' && error.graphQLErrors
+      ? error.graphQLErrors.some(err => {
+          const { priority } = err.extensions.exception;
+          return priority === PRIORITY_HIGH;
+        })
+      : false;
+
+  return (
+    <div className="error_message">
+      {shouldDisplayInModal ? (
+        <Modal isSimple onClose={() => setErrorMessage(false)}>
+          <CodeComponent code={errorMessageToDisplay} />
+        </Modal>
+      ) : (
+        <CodeComponent code={errorMessageToDisplay} />
+      )}
+    </div>
+  );
+};
+
+export default ErrorMessage;

package/src/components/ErrorMessage/index.js

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(
+  () => import(/* webpackChunkName: "blazePbLoginErrorMessage" */ './ErrorMessage')
+);

package/src/components/Image/GlobalLightbox/GlobalLightbox.js

@@ -66,98 +66,96 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
   const showNext = index !== images.length - 1;
   const showPrevious = !!index;
 
-  const imageCounter = `${index + 1} of ${images.length}`;
+  const imageCounter = `${index + 1} / ${images.length}`;
 
   return (
-    <>
-      {!!images.length && (
-        <div>
-          <div className="overlay" />
-          <div className="modal modal--full-screen modal--gallery modal--show">
-            <header className="modal__header modal__header--gallery">
-              <div className="modal__title modal__title--gallery">
-                {parentName || metaTitle || name}
-              </div>
-              <div
-                role="button"
-                className="modal__close"
-                onClick={handleClose}
-                aria-label="Close modal">
-                <i>
-                  <FaTimes />
-                </i>
-              </div>
-            </header>
-            <div className="modal__content modal__content--gallery">
-              <div className="gallery">
-                <div className="gallery__column gallery__column--slider">
-                  <div className="gallery__slider">
-                    <div className="slider__wrapper slider__wrapper--gallery open">
-                      <div className="slider__header slider__header--gallery">
-                        <div
-                          className="slider__counter slider__counter--gallery"
-                          data-testid="image-counter">
-                          {imageCounter}
-                        </div>
+    !!images.length && (
+      <div>
+        <div className="overlay" />
+        <div className="modal modal--full-screen modal--gallery modal--show">
+          <header className="modal__header modal__header--gallery">
+            <div className="modal__title modal__title--gallery">
+              {parentName || metaTitle || name}
+            </div>
+            <div
+              role="button"
+              className="modal__close"
+              onClick={handleClose}
+              aria-label="Close modal">
+              <i>
+                <FaTimes />
+              </i>
+            </div>
+          </header>
+          <div className="modal__content modal__content--gallery">
+            <div className="gallery">
+              <div className="gallery__column gallery__column--slider">
+                <div className="gallery__slider">
+                  <div className="slider__wrapper slider__wrapper--gallery open">
+                    <div className="slider__header slider__header--gallery">
+                      <div
+                        className="slider__counter slider__counter--gallery"
+                        data-testid="image-counter">
+                        {imageCounter}
                       </div>
+                    </div>
 
-                      <NavButton
-                        handleAction={handlePrevious}
-                        show={showPrevious}
-                        modifier="previous"
-                        ariaLabel="Previous Image"
-                      />
-
-                      <div className="slider slider--gallery">
-                        <div className="slider__list slider__list--gallery">
-                          <div className="slider__list-wrapper slider__list-wrapper--gallery">
-                            <div className="slider__slide slider__slide--gallery">
-                              {loading && <div />}
-                              {Object.keys(imgWrapperProps).length ? (
-                                <BlazeLink {...imgWrapperProps}>
-                                  <ResponsiveImage
-                                    src={imageUrl}
-                                    alt={altText}
-                                    sizeKey="globalLightbox"
-                                    data-testid="globalLightboxImage"
-                                  />
-                                </BlazeLink>
-                              ) : (
+                    <NavButton
+                      handleAction={handlePrevious}
+                      show={showPrevious}
+                      modifier="previous"
+                      ariaLabel="Previous Image"
+                    />
+
+                    <div className="slider slider--gallery">
+                      <div className="slider__list slider__list--gallery">
+                        <div className="slider__list-wrapper slider__list-wrapper--gallery">
+                          <div className="slider__slide slider__slide--gallery">
+                            {loading && <div />}
+                            {Object.keys(imgWrapperProps).length ? (
+                              <BlazeLink {...imgWrapperProps}>
                                 <ResponsiveImage
                                   src={imageUrl}
                                   alt={altText}
                                   sizeKey="globalLightbox"
                                   data-testid="globalLightboxImage"
                                 />
-                              )}
-                            </div>
+                              </BlazeLink>
+                            ) : (
+                              <ResponsiveImage
+                                src={imageUrl}
+                                alt={altText}
+                                sizeKey="globalLightbox"
+                                data-testid="globalLightboxImage"
+                              />
+                            )}
                           </div>
                         </div>
                       </div>
-
-                      <NavButton
-                        ariaLabel="Next Image"
-                        handleAction={handleNext}
-                        show={showNext}
-                        modifier="next"
-                      />
                     </div>
-                    {(shouldDisplayCaption || shouldDisplayCredits) && (
-                      <ImageDetails
-                        caption={caption}
-                        credits={credits || imageCredits}
-                        shouldDisplayCaption={shouldDisplayCaption}
-                        shouldDisplayCredits={shouldDisplayCredits}
-                      />
-                    )}
+
+                    <NavButton
+                      ariaLabel="Next Image"
+                      handleAction={handleNext}
+                      show={showNext}
+                      modifier="next"
+                    />
                   </div>
+                  {(shouldDisplayCaption || shouldDisplayCredits) && (
+                    <ImageDetails
+                      caption={caption}
+                      credits={credits || imageCredits}
+                      shouldDisplayCaption={shouldDisplayCaption}
+                      shouldDisplayCredits={shouldDisplayCredits}
+                    />
+                  )}
                 </div>
               </div>
             </div>
           </div>
         </div>
-      )}
-    </>
+      </div>
+    )
   );
 };
 

package/src/components/Image/GlobalLightbox/NavButton.js

@@ -1,22 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavButton = ({ handleAction, show, modifier, ariaLabel }) => (
-  <>
-    {show && (
+const NavButton = ({ handleAction, show, modifier, ariaLabel }) =>
+  show ? (
+    <div
+      role="button"
+      className={`slider__button slider__button--gallery slider__button--${modifier}`}
+      onClick={handleAction}
+      aria-label={ariaLabel}>
       <div
-        role="button"
-        className={`slider__button slider__button--gallery slider__button--${modifier}`}
-        onClick={handleAction}
-        aria-label={ariaLabel}>
-        <div
-          className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
-          data-testid={`navButton-${modifier}`}
-        />
-      </div>
-    )}
-  </>
-);
+        className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
+        data-testid={`navButton-${modifier}`}
+      />
+    </div>
+  ) : null;
 
 NavButton.propTypes = {
   handleAction: PropTypes.func.isRequired,

package/src/components/ItemList/ItemListButton/ItemListButton.js

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  BsBookmarkStarFill,
-  BsBookmarkCheckFill,
-  BsBookmarkStar,
-  BsBookmarkXFill
-} from 'react-icons/bs';
 import { useQuery, useMutation } from '@apollo/client';
+import { AddedBookmark, BaseBookmark, HoverBookmark, RemoveBookmark } from '../icons';
 import { getItemList, addItemsToList, removeItemsFromList } from '../../../application/query';
 import { getItemListData, setItemListId } from '../helpers';
 import { useItemListId } from '../hooks';
@@ -16,11 +11,6 @@ const ItemListButton = ({ listName, parent, modifier }) => {
   const [isHover, setIsHover] = useState(false);
   const { listId } = useItemListId({ listName });
 
-  const getIcon = () => {
-    if (isInList) return isHover ? BsBookmarkXFill : BsBookmarkCheckFill;
-    return isHover ? BsBookmarkStarFill : BsBookmarkStar;
-  };
-
   const { data, error, loading } = useQuery(getItemList, {
     variables: { id: listId },
     skip: !listId
@@ -61,6 +51,14 @@ const ItemListButton = ({ listName, parent, modifier }) => {
     ({ itemId: idToCheck, itemEntity: entityToCheck }) =>
       idToCheck === itemId && entityToCheck === itemEntity
   );
+
+  const getIcon = () => {
+    if (isInList) {
+      return isHover ? RemoveBookmark : AddedBookmark;
+    }
+    return isHover ? HoverBookmark : BaseBookmark;
+  };
+
   const Icon = getIcon();
   const stateClassName = isInList ? 'item-list-button--selected' : '';
   const className = ['item-list-button', stateClassName, modifier].filter(Boolean).join(' ');
@@ -69,10 +67,10 @@ const ItemListButton = ({ listName, parent, modifier }) => {
     <div
       className={className}
       role="button"
+      tabIndex="0"
       onClick={clickHandler}
       onMouseEnter={() => setIsHover(true)}
-      onMouseLeave={() => setIsHover(false)}
-      aria-label={`Add to ${listName}`}>
+      onMouseLeave={() => setIsHover(false)}>
       <i>
         <Icon />
       </i>