@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.20 → 0.146.0-node18-tooltips.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-node18-core-styles-tooltips.20",
+  "version": "0.146.0-node18-tooltips.19",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,15 +27,15 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "0.146.0-node18-core-styles-tooltips.15",
-    "@blaze-cms/core-errors": "0.146.0-node18-core-styles-tooltips.3",
-    "@blaze-cms/core-errors-ui": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/core-auth-ui": "0.146.0-node18-tooltips.4",
+    "@blaze-cms/core-errors": "0.146.0-node18-tooltips.0",
+    "@blaze-cms/core-errors-ui": "0.146.0-node18-tooltips.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
-    "@blaze-cms/nextjs-components": "0.146.0-node18-core-styles-tooltips.3",
-    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.19",
-    "@blaze-cms/setup-ui": "0.146.0-node18-core-styles-tooltips.3",
-    "@blaze-cms/utils": "0.146.0-node18-core-styles-tooltips.15",
-    "@blaze-cms/utils-handlebars": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/nextjs-components": "0.146.0-node18-tooltips.0",
+    "@blaze-cms/plugin-search-ui": "0.146.0-node18-tooltips.11",
+    "@blaze-cms/setup-ui": "0.146.0-node18-tooltips.0",
+    "@blaze-cms/utils": "0.146.0-node18-tooltips.4",
+    "@blaze-cms/utils-handlebars": "0.146.0-node18-tooltips.0",
     "@blaze-react/badge": "^0.7.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.8.0-alpha.82",
@@ -92,5 +92,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "9cc20b1a43c13d866f03c6829f626813c5851dd4"
+  "gitHead": "2aed24333051ddcd4c2bec869a9df5835362d4c9"
 }

package/src/components/ContentGroup/ContentGroup.js

@@ -1,29 +1,53 @@
-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';
+
+const VALID_TYPES = Object.values(CONTENT_GROUP_TYPES);
+
+const ContentGroup = ({ contentType, isFaqContent, children, ...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(
+    () => getStructuredDataProperties(isFaqContent),
+    [isFaqContent]
+  );
+
+  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
 };
 
-ContentGroup.defaultProps = {};
+ContentGroup.defaultProps = {
+  isFaqContent: false
+};
 
 export default ContentGroup;

package/src/components/ContentGroup/ContentGroupAccordion.js

@@ -0,0 +1,163 @@
+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/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/Menu/Menu.js

@@ -11,7 +11,6 @@ import BlazeLink from '../BlazeLink';
 const Menu = ({
   children,
   collapse,
-  openActiveSubmenus,
   modifier,
   mobileMenuModifier,
   mobileMenuChildrenModifier,
@@ -52,7 +51,7 @@ const Menu = ({
   });
 
   return (
-    <MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>
+    <MenuContext.Provider value={{ showMobileMenu }}>
       <div className={menuWrapperClasses}>
         {collapse && (
           <div className="menu--mobile-wrapper">
@@ -100,7 +99,6 @@ const Menu = ({
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
-  openActiveSubmenus: PropTypes.bool.isRequired,
   logoOnMobile: PropTypes.bool.isRequired,
   logoOnDesktop: PropTypes.bool,
   logoOnMobileUrl: PropTypes.string,

package/src/components/Menu/MenuContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const MenuContext = React.createContext({ showMobileMenu: false, openActiveSubmenus: false });
+const MenuContext = React.createContext({ showMobileMenu: false });
 
 export default MenuContext;

package/src/components/MenuItem/MenuItemRender.js

@@ -1,23 +1,17 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
 import MenuContext from '../Menu/MenuContext';
-import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
+import { injectHelperIntoTemplate } from './helpers';
 
 const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
-  const router = useRouter();
-  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
-
-  const isHoverEvent = eventType === HOVER;
-  const isClickEvent = eventType === CLICK;
-
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
   const {
     loading: loadingText,
     data: [textToUse]
@@ -27,24 +21,14 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
-  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
-  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
+  const router = useRouter();
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
   const hasValidChildren = hasChildren(children);
 
-  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
-
   useEffect(() => {
-    if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
-  }, [
-    children,
-    isClickEvent,
-    loadingUrl,
-    openActiveSubmenus,
-    router,
-    shouldPreOpen,
-    showMobileMenu
-  ]);
+    if (!showMobileMenu) setDisplayChildren(false);
+  }, [showMobileMenu]);
 
   useEffect(() => {
     if (isHoverEvent) {
@@ -54,8 +38,6 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   if (loadingUrl || loadingText) return '';
 
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
       if (type === MOUSE_ENTER) {
@@ -73,25 +55,15 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
-  const menuItemLinkClassname = classnames('menu--item--link', {
-    'menu--item--link--active': isActive,
-    'menu--item--link--active-parent': isActiveParent
-  });
-
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div
-        className={menuItemLinkClassname}
+        className="menu--item--link"
         onClick={handleMobileClick}
         role={!urlToUse && hasValidChildren ? 'button' : undefined}
         tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
-        {urlToUse ? (
-          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent}>
-            {textToUse}
-          </span>
-        )}
+        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
+
         {hasValidChildren && (
           <i
             role="button"

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

@@ -1,5 +1,3 @@
 import injectHelperIntoTemplate from './inject-helper-into-template';
-import isUrlPathMatch from './isUrlPathMatch';
-import hasActiveChild from './has-active-child';
 
-export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };
+export { injectHelperIntoTemplate };

package/src/components/SearchContent/SearchContent.js

@@ -18,6 +18,7 @@ const SearchContent = props => {
     searchUrl,
     navigateToSingleSearchResult
   } = props;
+
   const searchContentRef = useRef(null);
   const [collapsed, setCollapsed] = useState(collapsedSearch);
   const [showResults, setShowResults] = useState(false);
@@ -43,7 +44,6 @@ const SearchContent = props => {
       if (collapsedSearch) setCollapsed(true);
     };
     router.events.on('routeChangeStart', handleRouteChange);
-
     return () => {
       router.events.off('routeChangeStart', handleRouteChange);
     };
@@ -53,15 +53,16 @@ const SearchContent = props => {
     const handleClickOutside = event => {
       if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
         setShowResults(false);
-        if (collapsedSearch) {
-          setCollapsed(true);
-          setSearchTerm('');
+        setSearchTerm('');
+        if (collapsedSearch) setCollapsed(true);
+
+        if (document.activeElement && document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
         }
       }
     };
 
     document.addEventListener('click', handleClickOutside);
-
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };

package/src/system-components/EditorMode/helpers/add-editor-mode-event-listeners.js

@@ -38,8 +38,10 @@ const addEditorModeEventListeners = ({ ref, name, adminHref, type, setLogoProps
       e.preventDefault();
       window.open(`${adminHref}#${componentId}`, adminHref);
     };
+
     const mouseenter = e => {
       e.stopPropagation();
+
       document.querySelectorAll(`.${EDITOR_MODE_HIGHLIGHT_CLASS}`).forEach(node => {
         node.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
       });
@@ -52,6 +54,7 @@ const addEditorModeEventListeners = ({ ref, name, adminHref, type, setLogoProps
         onClick: click
       });
     };
+
     const mouseleave = e => {
       e.stopPropagation();
       if (e.toElement) {
@@ -61,7 +64,6 @@ const addEditorModeEventListeners = ({ ref, name, adminHref, type, setLogoProps
           return;
         }
       }
-      childNode.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
       setLogoProps(null);
     };
 

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

@@ -1,16 +1,46 @@
 /**
  * @jest-environment jsdom
  */
+import React from 'react';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import ContentGroup from '../../../../../src/components/ContentGroup/ContentGroup';
 
+jest.mock('../../../../../src/components/ContentGroup/ContentGroupTabs', () => ({
+  __esModule: true,
+  default: ({ contentType }) => <div data-testid="content-group-tabs">Inner: {contentType}</div>
+}));
+
+const TestChild = ({ children }) => <div>{children}</div>;
+const buildChildren = (sectionsCount = 2) => (
+  <div>
+    <div>Header</div>
+    {Array.from({ length: sectionsCount }).map((_, i) => (
+      <TestChild key={`s${i + 1}`}>Section {i + 1}</TestChild>
+    ))}
+  </div>
+);
+
 describe('ContentGroup component', () => {
-  it('should match snapshot and render based on contentType prop', () => {
-    const { asFragment: tabContentGroup } = render(ContentGroup, { contentType: 'tab' });
+  it('matches snapshots for tab and sidepanel', () => {
+    const { asFragment: tabContentGroup } = render(ContentGroup, {
+      contentType: 'tab'
+    });
     const { asFragment: sidepanelContentGroup } = render(ContentGroup, {
       contentType: 'sidepanel'
     });
+
     expect(tabContentGroup()).toMatchSnapshot();
     expect(sidepanelContentGroup()).toMatchSnapshot();
   });
+
+  it('wraps output in FAQPage schema when isFaqContent is true', () => {
+    const { container } = render(ContentGroup, {
+      contentType: 'tab',
+      isFaqContent: true,
+      children: buildChildren()
+    });
+
+    const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+    expect(faqWrapper).toBeTruthy();
+  });
 });