@blaze-cms/react-page-builder 0.146.0-core-styles.0 → 0.146.0-core-styles.3

package/src/components/MenuItem/MenuItem.js

@@ -1,83 +1,33 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
-import { hasChildren } from '../../helpers';
-import BlazeLink from '../BlazeLink';
-import MenuContext from '../Menu/MenuContext';
+import MenuItemRender from './MenuItemRender';
+import MenuEntitiesItem from './MenuEntitiesItem';
 
-const MenuItem = ({ children, eventType, text, modifier, url }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+const MenuItem = ({ entities, parent, ...props }) => {
+  const hasEntities = entities && entities.length;
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [showMobileMenu]
-  );
+  if (!hasEntities) return <MenuItemRender parent={parent} {...props} />;
 
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
-  const handleItemEvent = ({ type }) => {
-    if (isHoverEvent) {
-      if (type === MOUSE_ENTER) {
-        setDisplayChildren(true);
-      }
-      if (type === MOUSE_LEAVE) {
-        setDisplayChildren(false);
-      }
-    }
-  };
-  const hasValidChildren = hasChildren(children);
-
-  return (
-    <li
-      className={modifier}
-      onMouseEnter={handleItemEvent}
-      onMouseLeave={handleItemEvent}
-      aria-label={text}>
-      <div className="menu--item--link">
-        {url ? (
-          <BlazeLink href={url}>{text}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent} aria-label={text}>
-            {text}
-          </span>
-        )}
-        {hasValidChildren && (
-          <i
-            role="button"
-            aria-label={
-              displayChildren ? `Collapse ${text} menu items` : `Expand ${text} menu items`
-            }
-            className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
-            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
-          </i>
-        )}
-      </div>
-      {hasValidChildren && (
-        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
-      )}
-    </li>
-  );
+  return <MenuEntitiesItem entities={entities} parent={parent} {...props} />;
 };
 
 MenuItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
+  parent: PropTypes.object,
   text: PropTypes.string,
   url: PropTypes.string,
-  eventType: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  entities: PropTypes.array
 };
 
 MenuItem.defaultProps = {
-  url: '',
+  children: null,
   modifier: '',
+  parent: {},
   text: '',
-  children: null
+  url: '',
+  entities: []
 };
 
 export default MenuItem;

package/src/components/MenuItem/MenuItemRender.js

@@ -0,0 +1,91 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { hasChildren } from '../../helpers';
+import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
+
+const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+  const {
+    loading: loadingText,
+    data: [textToUse]
+  } = useStringTemplate(parent, [text]);
+
+  const {
+    loading: loadingUrl,
+    data: [urlToUse]
+  } = useStringTemplate(parent, [url]);
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
+  if (loadingUrl || loadingText) return '';
+
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
+  const handleItemEvent = ({ type }) => {
+    if (isHoverEvent) {
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
+    }
+  };
+  const hasValidChildren = hasChildren(children);
+
+  return (
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+      <div className="menu--item--link">
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
+      )}
+    </li>
+  );
+};
+
+MenuItemRender.propTypes = {
+  modifier: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  eventType: PropTypes.string.isRequired,
+  parent: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+MenuItemRender.defaultProps = {
+  url: '',
+  modifier: '',
+  text: '',
+  children: null,
+  parent: {}
+};
+
+export default MenuItemRender;

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -38,6 +38,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case CHECKBOX:
         return (
           <div
@@ -56,6 +57,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case SELECT:
         return (
           <div
@@ -74,6 +76,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case RANGE:
         return (
           !!areAggregationsAvailable && (

package/src/components/SearchFilter/SearchFilter/MobileFormToolbar.js

@@ -9,7 +9,7 @@ const MobileFormToolbar = ({ formId, handleReset }) => (
       data-testid="reset-button"
       role="button"
       onClick={handleReset}
-      aria-label="Reset Filters">
+      aria-label="Reset search filters">
       {RESET}
     </div>
 

package/src/components/SearchFilter/SearchFilter/ResetDesktopForm.js

@@ -10,13 +10,14 @@ const ResetDesktopForm = ({ handleReset }) => (
       className="icon-button icon-button--reset"
       title="reset--button"
       data-testid="reset-icon"
-      onClick={handleReset}>
+      onClick={handleReset}
+      aria-label="Reset search filters">
       <i>
         <FaRedoAlt />
       </i>
     </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button" aria-label="Reset Filters">
+    <div role="button" onClick={handleReset} data-testid="reset-button">
       {RESET}
     </div>
   </div>

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -152,6 +152,11 @@ const SearchFilter = ({
                         data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
+                        aria-label={
+                          moreFiltersDesktopCollapsed
+                            ? 'Show more search filters'
+                            : 'Show less search filters'
+                        }
                         onClick={() =>
                           setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
                         }>
@@ -206,11 +211,11 @@ const SearchFilter = ({
 
       {isCollapsedOnResponsive &&
         !displaySearchFilter && (
-          <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
-            <div
-              role="button"
-              onClick={() => setDisplaySearchFilter(true)}
-              aria-label="Toggle Search Filter">
+          <div
+            className="filter__refine filter__refine--mobile-close"
+            data-testid="refine-mobile"
+            aria-label="Toggle Search Filter">
+            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
               {REFINE}
             </div>
           </div>

package/src/components/SearchFilter/components/Checkbox.js

@@ -84,7 +84,9 @@ const Checkbox = ({
           role="button"
           className="see-more"
           onClick={handleCheckboxOptions}
-          aria-label={shouldDisplayMore ? `See ${MORE} options` : `See ${LESS} options`}>
+          aria-label={
+            shouldDisplayMore ? `See ${MORE} ${label} options` : `See ${LESS} ${label} options`
+          }>
           {shouldDisplayMore ? (
             <>
               <i>

package/src/components/SearchFilter/components/TextSearch.js

@@ -22,6 +22,7 @@ const TextSearch = ({ label, searchValue, updateFilterValues, elementTitle }) =>
         <button
           type="button"
           className="icon-button icon-button--search"
+          aria-label="Search"
           onClick={e => {
             e.preventDefault();
             updateFilterValues({ [SEARCH_TERM]: searchValue }, true);

package/src/components/Video/providers/Vimeo/VimeoProvider.js

@@ -51,7 +51,6 @@ const VimeoProvider = ({ url, autoplay, loop, imageData }) => {
       role="button"
       className={VIDEO_WRAPPER_CLASS_NAME}
       style={videoStyle}
-      aria-label="Open video"
       onClick={() => !shouldRenderVideo && setShouldRenderVideo(true)}>
       {shouldRenderVideo && !videoError && wrappedCode}
       {videoError && videoError.message}

package/src/{components/Card/helpers → helpers}/filter-query-setup.js

@@ -1,6 +1,8 @@
 import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
-import { getGenericRenderVariables, buildRawQueryBase, buildSetFilters } from '../../../helpers';
-import { DEFAULT_LIMIT } from '../../../constants';
+import getGenericRenderVariables from './get-generic-render-variables';
+import buildRawQueryBase from './build-raw-query-base';
+import buildSetFilters from './build-set-filters';
+import { DEFAULT_LIMIT } from '../constants';
 
 const filterQuerySetup = ({
   getEntitySchemas,
@@ -13,7 +15,7 @@ const filterQuerySetup = ({
   itemsToDisplay,
   entitySameAsCurrentItemEntity,
   entitySchema,
-  useRandomSort
+  useRandomSort = false
 }) => {
   const stringProps = getStringTypeProps(entity, filterEntityRelations, getEntitySchemas);
   const filterValues =

package/src/{components/Card/helpers → helpers}/filters-setup.js

@@ -1,5 +1,7 @@
-import { buildQueryFields, getInheritedFilters, getQueryProps } from '../../../helpers';
-import { getSearchPublishedContent } from '../../../application/query';
+import buildQueryFields from './build-query-fields';
+import getInheritedFilters from './get-inherited-filters';
+import getQueryProps from './get-query-props';
+import { getSearchPublishedContent } from '../application/query';
 
 const filtersSetup = ({
   entityFields,
@@ -16,6 +18,7 @@ const filtersSetup = ({
   const fields = buildQueryFields(entityFields, entityTypes, isFull);
   const action = getSearchPublishedContent(fields);
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
+
   const entitySameAsCurrentItemEntity = entities.includes(itemEntityUpdated);
   const { relations: filterEntityRelations = [] } = filterEntitySchema;
   const queryProps = getQueryProps(inheritedFilters, currentSchema, filterEntitySchema);

package/src/helpers/index.js

@@ -53,5 +53,11 @@ export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
 export { default as processDataSummaryValue } from './process-data-summary-value';
 export { default as buildQueryKey } from './build-query-key';
+export { default as filterQuerySetup } from './filter-query-setup';
+export { default as filtersSetup } from './filters-setup';
+export { default as getUpdatedItemsToDisplay } from './get-updated-items-to-display';
+export { default as getUpdatedSortProperties } from './get-updated-sort-properties';
+export { default as shouldReturn } from './should-return';
+export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';

package/src/{components/Card/helpers → helpers}/should-skip-single-query.js

@@ -1,4 +1,4 @@
-import { ID } from '../../../constants';
+import { ID } from '../constants';
 
 const shouldSkipSingleQuery = (loading, getAction, queryProps) =>
   loading || !getAction || queryProps === ID;

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

@@ -1,19 +1,23 @@
 /**
  * @jest-environment jsdom
  */
+import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import { render, screen } from '@testing-library/react';
 import BackToTop from '../../../../../src/components/BackToTop';
 
-describe('Breadcrumb component', () => {
+describe('BackToTop component', () => {
   it('should be a function', () => {
     expect(typeof BackToTop).toEqual('function');
   });
 
   it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(BackToTop, {
-      showAfterPixels: 500
-    });
+    const { asFragment } = render(<BackToTop showAfterPixels={500} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should not render the button initially', () => {
+    render(<BackToTop showAfterPixels={500} />);
+    expect(screen.queryByRole('link', { name: /back to top/i })).not.toBeInTheDocument();
+  });
 });

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumb component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;
+exports[`BackToTop component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;

package/tests/unit/src/components/Card/helpers/get-updated-items-to-display.test.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom/extend-expect';
-import getUpdatedItemsToDisplay from '../../../../../../src/components/Card/helpers/get-updated-items-to-display';
+import getUpdatedItemsToDisplay from '../../../../../../src/helpers/get-updated-items-to-display';
 
 const mockedProps = {
   itemsToDisplay: [

package/tests/unit/src/components/Carousel/CarouselImage/__snapshots__/CarouselImage.test.js.snap

@@ -5,7 +5,7 @@ exports[`Carousel image component should match snapshot 1`] = `
   className="carousel__slide"
 >
   <img
-    alt=""
+    alt="Carousel image"
     aria-label="View Image"
     data-testid="lazy-image-mock"
     onClick={[Function]}

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

@@ -66,7 +66,7 @@ exports[`Carousel component should render priority images and match snapshot 1`]
         >
           <span>
             <img
-              alt=""
+              alt="Carousel image"
               aria-label="View Image"
               role="button"
               src="test-url"

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -11,7 +11,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
       role="tablist"
     >
       <button
-        aria-controls="panel-section-one"
+        aria-controls="section-one"
         aria-selected="true"
         class="content-group-sidepanel__button--is-active"
         id="tab-section-one"
@@ -21,7 +21,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
         sectionOne
       </button>
       <button
-        aria-controls="panel-section-two"
+        aria-controls="section-two"
         aria-selected="false"
         class="content-group-sidepanel__button"
         id="tab-section-two"
@@ -57,7 +57,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
       role="tablist"
     >
       <button
-        aria-controls="panel-section-one"
+        aria-controls="section-one"
         aria-selected="true"
         class="content-group-tabs__button--is-active"
         id="tab-section-one"
@@ -67,7 +67,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
         sectionOne
       </button>
       <button
-        aria-controls="panel-section-two"
+        aria-controls="section-two"
         aria-selected="false"
         class="content-group-tabs__button"
         id="tab-section-two"

package/tests/unit/src/components/ItemList/__snapshots__/ItemListNew.test.js.snap

@@ -3,7 +3,6 @@
 exports[`ItemListNew component should match snapshot and render without throwing an error 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Create new list_name"
     class="item-list-new button"
     type="button"
   >
@@ -19,7 +18,6 @@ exports[`ItemListNew component should not render if list not found 1`] = `<Docum
 exports[`ItemListNew component should render using listId from query 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Create new QUERY-LIST-ID"
     class="item-list-new button"
     type="button"
   >

package/tests/unit/src/components/MenuItem/MenuEntitiesItem.test.js

@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import MenuEntitiesItem from '../../../../../src/components/MenuItem/MenuEntitiesItem';
+import { MOCKED_MENUITEMS_PROPS } from './mocks';
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
+}));
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
+}));
+
+describe('MenuEntitiesItem component', () => {
+  it('should render based on listData received', async () => {
+    const { asFragment } = await render(MenuEntitiesItem, MOCKED_MENUITEMS_PROPS);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -6,25 +6,44 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
 import MenuItem from '../../../../../src/components/MenuItem';
 
-const props = {
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
+}));
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
+}));
+
+const componentProps = {
+  id: 'id',
+  name: 'mock name',
   eventType: 'hover',
-  text: 'Item 1',
+  url: '/search?category.name={{currentParent.name}}',
+  text: 'Category: {{currentParent.name}}',
+  entity: 'page',
+  parent: {
+    itemEntity: 'page',
+    itemId: 'item-id'
+  },
+  category: {
+    publishedListingPage: {
+      url: 'published-url'
+    },
+    name: 'Category name'
+  },
   modifier: 'menu-item-mod',
   children: [
     <div className="child_1" key="1" component={{ type: 'menuitem' }}>
-      some child
+      menu child
     </div>
-  ]
+  ],
+  displayCategory: true
 };
 
 describe('MenuItem component', () => {
-  it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(MenuItem, props);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render link if url is passed', () => {
-    const { asFragment } = render(MenuItem, { ...props, url: '/somewhere' });
+  it('should render a MenuItem based on passed parameters', async () => {
+    const { asFragment } = await render(MenuItem, componentProps);
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/tests/unit/src/components/MenuItem/MenuItemRender.test.js

@@ -0,0 +1,55 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import MenuRender from '../../../../../src/components/MenuItem/MenuItemRender';
+
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
+}));
+
+describe('MenuRender component', () => {
+  it('renders menu item with link when URL is provided', () => {
+    const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);
+    const linkElement = getByText('Home');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement.tagName).toBe('A');
+    expect(linkElement.getAttribute('href')).toBe('/home');
+  });
+
+  it('renders menu item without link when URL is not provided', () => {
+    const { getByText } = render(<MenuRender eventType="click" text="About" />);
+    const spanElement = getByText('About');
+    expect(spanElement).toBeInTheDocument();
+    expect(spanElement.tagName).toBe('SPAN');
+  });
+
+  it('toggles display of children on mouse enter and leave events', () => {
+    const { getByText, getByTestId } = render(
+      <MenuRender eventType="hover" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    const parentElement = getByText('Parent');
+    const childElement = getByTestId('child');
+
+    fireEvent.mouseEnter(parentElement);
+    expect(childElement).toBeInTheDocument();
+  });
+
+  it('toggles display of children on click event when URL is not provided', () => {
+    const { getByText, getByTestId } = render(
+      <MenuRender eventType="click" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    const parentElement = getByText('Parent');
+    const childElement = getByTestId('child');
+
+    fireEvent.click(parentElement);
+    expect(childElement).toBeInTheDocument();
+  });
+});

package/tests/unit/src/components/MenuItem/__snapshots__/MenuEntitiesItem.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuEntitiesItem component should render based on listData received 1`] = `<DocumentFragment />`;