@blaze-cms/react-page-builder 0.146.0-translations.6 → 0.147.0-rc-eagle.2

package/src/components/ContentGroup/ContentGroup.js

@@ -1,29 +1,67 @@
-import React from 'react';
+import React, { Fragment, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { CONTENT_GROUP_TYPES } from './constants';
 import ContentGroupTabs from './ContentGroupTabs';
+import ContentGroupAccordion from './ContentGroupAccordion';
 import { getSectionsData } from './helpers';
+import getStructuredDataProperties from './helpers/get-structured-data-properties';
+import { getCustomHtmlProperties } from '../../helpers';
+
+const VALID_TYPES = Object.values(CONTENT_GROUP_TYPES);
+
+const ContentGroup = ({ contentType, isFaqContent, children, customHtmlProps, ...props }) => {
+  const groupSections = children?.props?.children?.[1];
+
+  const GroupComponent = useMemo(
+    () =>
+      contentType === CONTENT_GROUP_TYPES.ACCORDION ? ContentGroupAccordion : ContentGroupTabs,
+    [contentType]
+  );
+  const WrapperComponent = useMemo(() => (!isFaqContent ? Fragment : 'div'), [isFaqContent]);
+
+  const { topWrapperProps, ...schemaProperties } = useMemo(() => {
+    const structuredDataProperties = getStructuredDataProperties(isFaqContent);
+    return {
+      ...structuredDataProperties,
+      topWrapperProps: {
+        ...structuredDataProperties.topWrapperProps,
+        ...getCustomHtmlProperties({ customHtmlProps })
+      }
+    };
+  }, [isFaqContent, customHtmlProps]);
+
+  if (!groupSections || !groupSections.length || !VALID_TYPES.includes(contentType)) return '';
 
-const ContentGroup = ({ contentType, children, ...props }) => {
-  const groupSections = children?.props?.children[1];
-  if (!groupSections || !groupSections.length) return '';
-  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';
   const sectionsData = getSectionsData(groupSections);
 
   return (
-    <ContentGroupTabs
-      contentType={contentType}
-      groupSections={groupSections}
-      sectionsData={sectionsData}
-      {...props}
-    />
+    <WrapperComponent {...topWrapperProps}>
+      <GroupComponent
+        contentType={contentType}
+        groupSections={groupSections}
+        sectionsData={sectionsData}
+        {...props}
+        {...schemaProperties}
+      />
+    </WrapperComponent>
   );
 };
 
 ContentGroup.propTypes = {
   children: PropTypes.object.isRequired,
-  contentType: PropTypes.string.isRequired
+  contentType: PropTypes.oneOf(VALID_TYPES).isRequired,
+  isFaqContent: PropTypes.bool,
+  customHtmlProps: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string
+    })
+  )
 };
 
-ContentGroup.defaultProps = {};
+ContentGroup.defaultProps = {
+  isFaqContent: false,
+  customHtmlProps: []
+};
 
 export default ContentGroup;

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,18 +8,16 @@ 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`;
   const sectionClass = `${CONTENT_GROUP}-${contentClassame}__content-section`;
 
-  useEffect(
-    () => {
-      const activeTab = getActiveTab(sectionsData, asPath);
-      if (activeTab !== selectedTab) setSelectedTab(activeTab);
-    },
-    [asPath, sectionsData, selectedTab]
-  );
+  useEffect(() => {
+    const activeTab = getActiveTab(sectionsData, asPath);
+    if (activeTab !== selectedTab) setSelectedTab(activeTab);
+  }, [asPath, sectionsData, selectedTab]);
 
   const WrapperComponent = VariantComponent || 'div';
 
@@ -33,6 +31,7 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
           const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${
             isSelected ? '--is-active' : ''
           }`;
+
           return (
             <button
               id={tabId}
@@ -47,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
@@ -67,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/DataSummaryTypes/index.js

@@ -1,19 +1,23 @@
 import dynamic from 'next/dynamic';
 
 export const summaryComponents = {
-  list: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryListSummary" */ './ListSummary')
+  list: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryListSummary" */ './ListSummary')
   ),
-  large: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryLargeSummary" */ './LargeSummary')
+  large: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryLargeSummary" */ './LargeSummary')
   ),
-  text: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryTextSummary" */ './TextSummary')
+  text: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryTextSummary" */ './TextSummary')
   ),
-  heading_large: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryHeadingLargeSummary" */ './HeadingLargeSummary')
+  heading_large: dynamic(
+    () =>
+      import(
+        /* webpackChunkName: "blazePbDataSummaryHeadingLargeSummary" */ './HeadingLargeSummary'
+      )
   ),
-  item_details: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryItemDetailsSummary" */ './ItemDetailsSummary')
+  item_details: dynamic(
+    () =>
+      import(/* webpackChunkName: "blazePbDataSummaryItemDetailsSummary" */ './ItemDetailsSummary')
   )
 };

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/EmailConfirm/EmailConfirm.js

@@ -6,7 +6,7 @@ import { parseUrl } from 'query-string';
 import EMAIL_CONFIRM_MUTATION from './mutation';
 import { renderChildren } from '../../helpers';
 
-const EmailConfirm = ({ modifier, errorMessage, children }) => {
+function EmailConfirm({ modifier, errorMessage, children }) {
   const router = useRouter();
   const { asPath } = router;
 
@@ -16,8 +16,7 @@ const EmailConfirm = ({ modifier, errorMessage, children }) => {
     onCompleted: ({ confirmUserEmail }) => {
       const {
         result: { extras }
-      } =
-        confirmUserEmail || {};
+      } = confirmUserEmail || {};
       const { redirectUrl } = extras || {};
       setDisplayError(false);
       if (redirectUrl && !setRedirectUrl) {
@@ -26,18 +25,17 @@ const EmailConfirm = ({ modifier, errorMessage, children }) => {
     }
   });
 
-  useEffect(
-    () => {
-      if (token) emailConfirmMutation({ variables: { token } });
-    },
-    [emailConfirmMutation, token]
-  );
+  useEffect(() => {
+    if (token) emailConfirmMutation({ variables: { token } });
+  }, [emailConfirmMutation, token]);
 
   if ((token && !called) || loading) return null;
   const renderedChildren = renderChildren(children);
 
-  return <>{displayError ? <span className={modifier}>{errorMessage}</span> : renderedChildren}</>;
-};
+  return (
+    <div>{displayError ? <span className={modifier}>{errorMessage}</span> : renderedChildren}</div>
+  );
+}
 
 EmailConfirm.propTypes = {
   modifier: PropTypes.string,

package/src/components/ErrorMessage/index.js

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