@blaze-cms/react-page-builder 0.139.0-project-admin-customisations.0 → 0.139.0

package/src/components/SearchContent/SearchContentToggleIcon.js

@@ -1,27 +1,14 @@
 import React from 'react';
+import { CLOSE_ICON, SEARCH_ICON } from './constants';
 
-const SearchContentToggleIcon = ({ results, onClear }) => {
-  if (results && results.length > 0) {
-    return (
-      <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
-        <path
-          fillRule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          clipRule="evenodd"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
-      <path
-        fillRule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-};
+const SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (
+  <svg
+    className="search-content--expanded__icon"
+    viewBox="0 0 20 20"
+    onClick={onClick}
+    data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>
+    <path fillRule="evenodd" clipRule="evenodd" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />
+  </svg>
+);
 
 export default SearchContentToggleIcon;

package/src/components/SearchContent/constants.js

@@ -0,0 +1,6 @@
+const SEARCH_ICON =
+  'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
+const CLOSE_ICON =
+  'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
+
+export { SEARCH_ICON, CLOSE_ICON };

package/src/hooks/helpers/RenderComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from '@blaze-cms/core-errors-ui';
 import getComponent from './getComponent';
+import getVariant from './getVariant';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
 import { BannerContextProvider } from '../../BannerContext';
@@ -24,16 +25,19 @@ const RenderComponent = ({
   const imageOptions = isImage ? imageProps : {};
   if (!Component) return null;
   const updatedSettings = appendGtmClassName(settings, childComponents);
+  const [VariantComponent, variantSettings] = getVariant(settings);
 
   return (
     <ErrorBoundary>
       <Component
         key={id}
         type={type}
+        VariantComponent={VariantComponent}
         {...options}
         {...imageOptions}
         {...nestedComponentsProps}
         {...updatedSettings}
+        {...variantSettings}
         name={name || settings.name}>
         {hasTextBlockBanners ? (
           <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>

package/src/hooks/helpers/getVariant.js

@@ -0,0 +1,11 @@
+import { variantHandler } from '../../utils';
+
+export default function getVariant(settings) {
+  const { variant } = settings;
+  if (!variant) return [null, {}];
+  const { VariantComponent, getSettings } = variantHandler.get(variant) || {};
+  const variantSettings =
+    !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;
+
+  return [VariantComponent, variantSettings];
+}

package/src/hooks/use-get-image-id-from-relation.js

@@ -1,9 +1,20 @@
 import { useQuery } from '@apollo/client';
 import { generateSingleItemQuery } from '../application/query';
 
-function useGetImageIdFromRelation(id, imageRelation, actions, isUsingRelationImage, isPreview) {
+function useGetImageIdFromRelation(
+  id,
+  imageRelation,
+  actions,
+  isUsingRelationImage,
+  isPreview,
+  hasImgSrc
+) {
   const skip =
-    !id || typeof id !== 'string' || !isUsingRelationImage || !Object.keys(actions).length;
+    !id ||
+    hasImgSrc ||
+    typeof id !== 'string' ||
+    !isUsingRelationImage ||
+    !Object.keys(actions).length;
 
   const [imageRelationData = ''] = imageRelation;
   const [relationName = '', relationProp = ''] = imageRelationData.split('.');

package/src/hooks/use-get-images.js

@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/client';
 import { getFiles, getFileById } from '../application/query';
 
-function shouldSkip(id) {
+function checkShouldSkip(id) {
   return !id || (Array.isArray(id) && !id.length);
 }
 
@@ -10,11 +10,11 @@ const getWhereQuery = id => {
   return { where: { id: { _in: inClause } } };
 };
 
-const useGetImages = (id, hasMultipleIds = false) => {
-  const skip = shouldSkip(id);
+const useGetImages = (id, hasMultipleIds = false, skip = false) => {
+  const shouldSkip = skip || checkShouldSkip(id);
   const variables = hasMultipleIds ? getWhereQuery(id) : { id };
   const currentQuery = hasMultipleIds ? getFiles : getFileById;
-  const { data = {}, loading, error } = useQuery(currentQuery, { variables, skip });
+  const { data = {}, loading, error } = useQuery(currentQuery, { variables, skip: shouldSkip });
 
   return { data, loading, error };
 };

package/src/index.js

@@ -1,8 +1,9 @@
 export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';
 export { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';
 export { default as getComponent } from './hooks/helpers/getComponent';
-export { componentMap, getClassModifiers } from './utils';
+export { componentMap, variantHandler, getClassModifiers } from './utils';
 export { default as components } from './components';
+export { default as variants } from './variants';
 export {
   getAction,
   generateSingleItemQuery,

package/src/utils/component-map.js

@@ -1,8 +1,7 @@
 import { BlazeError } from '@blaze-cms/core-errors';
 
-function componentMap() {
+function componentMapHandler() {
   const components = new Map();
-
   function get(key) {
     return components.get(key);
   }
@@ -18,7 +17,7 @@ function componentMap() {
 
   function validate(key, component) {
     if (!key || !component) throw new BlazeError('Component requires key and component');
-    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exist`);
+    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exists`);
   }
 
   return {
@@ -29,6 +28,6 @@ function componentMap() {
   };
 }
 
-const test = componentMap();
+const componentMap = componentMapHandler();
 
-export default test;
+export default componentMap;

package/src/utils/index.js

@@ -1,7 +1,15 @@
 import getClassModifiers from './get-class-modifiers';
 import componentMap from './component-map';
+import variantHandler from './variant-handler';
 import isObjectEmpty from './is-object-empty';
 import getImageData from './get-image-data';
 import getPropsToDisplayModifiers from './get-props-to-display-modifiers';
 
-export { getClassModifiers, componentMap, isObjectEmpty, getImageData, getPropsToDisplayModifiers };
+export {
+  componentMap,
+  variantHandler,
+  getClassModifiers,
+  isObjectEmpty,
+  getImageData,
+  getPropsToDisplayModifiers
+};

package/src/utils/variant-handler.js

@@ -0,0 +1,33 @@
+import { BlazeError } from '@blaze-cms/core-errors';
+
+function variantMapHandler() {
+  const variants = new Map();
+
+  function get(key) {
+    return variants.get(key);
+  }
+
+  function getAll() {
+    return Array.from(variants.entries());
+  }
+
+  function add(key, variant) {
+    validate(key, variant);
+    variants.set(key, variant);
+  }
+
+  function validate(key, variant) {
+    if (!key || !variant) throw new BlazeError('Variant requires key and component');
+    if (variants.has(key) && key !== 'array') throw new BlazeError(`Variant already exists`);
+  }
+
+  return {
+    add,
+    get,
+    getAll
+  };
+}
+
+const variantHandler = variantMapHandler();
+
+export default variantHandler;

package/src/variants/index.js

@@ -0,0 +1 @@
+export default {};

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

@@ -15,8 +15,10 @@ const getMockedProps = overrides => ({
   imageId,
   toggleModal: jest.fn(),
   handleSelectedImage: jest.fn(),
+  displayCount: true,
   ...overrides
 });
+
 const mock = [
   {
     request: {
@@ -40,6 +42,8 @@ const mock = [
   }
 ];
 
+const MockedVariantComponent = () => <div>Variation component</div>;
+
 const setup = props => {
   const mockComponent = (
     <MockedProvider mocks={mock}>
@@ -88,4 +92,23 @@ describe('Carousel component', () => {
     setup(mockedProps);
     expect(screen.getByText(caption)).toBeInTheDocument();
   });
+
+  it('should render VariantComponent if it is set', () => {
+    const mockedProps = getMockedProps({ VariantComponent: MockedVariantComponent });
+    const { container } = setup(mockedProps);
+
+    expect(container.innerHTML).toBe('<div>Variation component</div>');
+  });
+
+  it('should display image count if displayCount is true', () => {
+    const mockedProps = getMockedProps({ imageIds: ['id1', 'id2', 'id3'] });
+    setup(mockedProps);
+    expect(screen.getByTestId('count')).toHaveTextContent('3 images');
+  });
+
+  it('should not display image count if displayCount is false', () => {
+    const mockedProps = getMockedProps({ displayCount: false });
+    setup(mockedProps);
+    expect(screen.queryByTestId('count')).toBeNull();
+  });
 });

package/tests/unit/src/components/Carousel/CarouselRender/CarouselRender.test.js

@@ -11,17 +11,22 @@ jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
 }));
 
-const getMockedProps = overrides => ({
+const mockedProps = {
   imageIds: ['test-id', 'test-altText', 'test-caption'],
   displayCount: true,
   enableLightbox: true,
   toggleModal: jest.fn(),
   handleSelectedImage: jest.fn(),
-  ...overrides
-});
+  shouldDisplayCount: true,
+  shouldDisplayCaption: true,
+  direction: {
+    next: true,
+    back: false
+  },
+  handleNavigation: jest.fn()
+};
 
 describe('CarouselRender component', () => {
-  const mockedProps = getMockedProps();
   let wrapper;
 
   beforeAll(() => {
@@ -42,24 +47,12 @@ describe('CarouselRender component', () => {
     expect(wrapper.find('p').length).toEqual(1);
   });
 
-  it('should render one image button if there is one image to display', () => {
-    const overrides = { imageIds: ['test1'] };
-    const wrapperTwoImages = shallow(
-      <CarouselRender.WrappedComponent {...mockedProps} {...overrides} />
-    );
-    expect(wrapperTwoImages.find('p').text()).toEqual('1 image');
-  });
-
-  it('should render n images button if there is more than one image to display', () => {
-    expect(wrapper.find('p').text()).toEqual('3 images');
-  });
-
   it('should render the right amount of images to display', () => {
     expect(wrapper.find(CarouselImage).length).toEqual(3);
   });
 
   it('should not render number count if display count is disabled', () => {
-    const overrides = { displayCount: false };
+    const overrides = { shouldDisplayCount: false };
     const wrapperCountDisabled = shallow(
       <CarouselRender.WrappedComponent {...mockedProps} {...overrides} />
     );
@@ -67,15 +60,14 @@ describe('CarouselRender component', () => {
   });
 
   it('should not display number count after clicking previous image', () => {
-    expect(wrapper.find('p').length).toEqual(1);
-    wrapper.find('div.carousel__button--previous').simulate('click');
-    expect(wrapper.find('p').length).toEqual(0);
+    const wrapperPrevClick = shallow(<CarouselRender.WrappedComponent {...mockedProps} />);
+    wrapperPrevClick.find('div.carousel__button--previous').simulate('click');
+    expect(mockedProps.handleNavigation).toHaveBeenCalledWith(mockedProps.direction.back);
   });
 
   it('should not display number count after clicking next image', () => {
     const wrapperNextClick = shallow(<CarouselRender.WrappedComponent {...mockedProps} />);
-    expect(wrapperNextClick.find('p').length).toEqual(1);
     wrapperNextClick.find('div.carousel__button--next').simulate('click');
-    expect(wrapperNextClick.find('p').length).toEqual(0);
+    expect(mockedProps.handleNavigation).toHaveBeenCalledWith(mockedProps.direction.next);
   });
 });

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

@@ -27,6 +27,11 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         class="carousel__button carousel__button--next"
         role="button"
       >
+        <p
+          data-testid="count"
+        >
+          1 image
+        </p>
         <div
           class="arrow arrow--right"
         />
@@ -69,6 +74,11 @@ exports[`Carousel component should render priority images and match snapshot 1`]
         class="carousel__button carousel__button--next"
         role="button"
       >
+        <p
+          data-testid="count"
+        >
+          1 image
+        </p>
         <div
           class="arrow arrow--right"
         />

package/tests/unit/src/components/Image/ImageFactory.test.js

@@ -6,7 +6,13 @@ import '@testing-library/jest-dom/extend-expect';
 import { render, act, waitFor } from '@testing-library/react';
 import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
 import ImageFactory from '../../../../../src/components/Image/ImageFactory';
-import { MOCK_BASIC, MOCK_NO_URL, MOCK_WITH_ERR, MOCK_RELATION } from './mocks';
+import {
+  MOCK_BASIC,
+  MOCK_HANDLEBAR_IMG_SRC,
+  MOCK_NO_URL,
+  MOCK_WITH_ERR,
+  MOCK_RELATION
+} from './mocks';
 
 jest.mock('@blaze-react/utils/lib/customHooks', () => ({
   useInView: jest.fn(() => [true, null])
@@ -34,7 +40,8 @@ const setupTest = async (props = {}, mocks = {}) => {
   const mockProps = {
     parent: {
       itemId: 'parentId',
-      getAction: 'getPublishedPage'
+      getAction: 'getPublishedPage',
+      itemEntity: 'page'
     },
     imageId: 'test-id',
     url: 'www.url-test-prop.com',
@@ -55,7 +62,7 @@ const setupTest = async (props = {}, mocks = {}) => {
 
 const options = {
   interval: 500,
-  timeout: 5000
+  timeout: 8000
 };
 
 describe('ImageFactory component', () => {
@@ -72,6 +79,16 @@ describe('ImageFactory component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should render image with handlebar compiled value if imgSrc is present and returns a value', async () => {
+    const { asFragment } = await setupTest(
+      { imgSrc: '{{currentParent.image.url}}' },
+      MOCK_HANDLEBAR_IMG_SRC
+    );
+
+    await waitFor(() => expect(asFragment()).toBeDefined(), options);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should render image fetching data from relation', async () => {
     const entity = 'page';
     const { asFragment, container } = await setupTest(

package/tests/unit/src/components/Image/ImageRender.test.js

@@ -39,4 +39,16 @@ describe('Image Render component', () => {
     expect(container.childNodes[0]).toHaveStyle({ cursor: 'pointer' });
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render plain img tag if imgSrc is present', () => {
+    const { asFragment } = render(
+      <ImageRender
+        {...mockedProps}
+        shouldRenderImgTag
+        imageUrl="some-external-image-url"
+        alt="image-alt"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/Image/__snapshots__/ImageFactory.test.js.snap

@@ -63,3 +63,27 @@ exports[`ImageFactory component should render image fetching data from relation
   </div>
 </DocumentFragment>
 `;
+
+exports[`ImageFactory component should render image with handlebar compiled value if imgSrc is present and returns a value 1`] = `
+<DocumentFragment>
+  <div
+    class="image "
+    entity=""
+    imagerelation="publishedPage.otherImageIds"
+    imgsrc="{{currentParent.image.url}}"
+    parent="[object Object]"
+  >
+    <a
+      class="image__wrapper"
+      href="http://www.url-test-prop.com"
+      rel="noopener nofollow"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="parent-image-url"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/Image/__snapshots__/ImageRender.test.js.snap

@@ -21,6 +21,15 @@ exports[`Image Render component should render image and lightbox 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Image Render component should render plain img tag if imgSrc is present 1`] = `
+<DocumentFragment>
+  <img
+    alt="image-alt"
+    src="some-external-image-url"
+  />
+</DocumentFragment>
+`;
+
 exports[`Image Render component should set cursor style when lightbox enabled 1`] = `
 <DocumentFragment>
   <img

package/tests/unit/src/components/Image/mocks.js

@@ -1,6 +1,7 @@
 import {
   getFiles,
   getFileById,
+  getSingleEntitySchema,
   generateSingleItemQuery
 } from '../../../../../src/application/query';
 import { DATA_SUMMARY_MOCK } from '../../../../helpers/mocks';
@@ -26,6 +27,53 @@ const MOCK_BASIC = [
   }
 ];
 
+const MOCK_HANDLEBAR_IMG_SRC = [
+  {
+    request: {
+      query: getSingleEntitySchema,
+      variables: { id: 'page' }
+    },
+    result: {
+      loading: false,
+      data: {
+        getEntitySchema: {
+          actions: {
+            getPublished: 'getPublishedPage',
+            get: 'getPage'
+          },
+          id: 'page',
+          identifier: 'page',
+          properties: {},
+          dynamicProperties: {},
+          interfaces: [],
+          relations: [],
+          __typename: 'page'
+        }
+      }
+    }
+  },
+  {
+    request: {
+      query: generateSingleItemQuery('getPublishedPage', 'image { url }'),
+      variables: {
+        id: 'parentId'
+      }
+    },
+    result: {
+      loading: false,
+      data: {
+        entityData: {
+          id: 'parentId',
+          image: {
+            url: 'parent-image-url'
+          },
+          __typename: 'PublishedPage'
+        }
+      }
+    }
+  }
+];
+
 const MOCK_RELATION = [
   ...DATA_SUMMARY_MOCK,
   {
@@ -204,4 +252,4 @@ const MOCKS = [
   ]
 ];
 
-export { MOCKS, MOCK_BASIC, MOCK_WITH_ERR, MOCK_NO_URL, MOCK_RELATION };
+export { MOCKS, MOCK_BASIC, MOCK_HANDLEBAR_IMG_SRC, MOCK_WITH_ERR, MOCK_NO_URL, MOCK_RELATION };

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

@@ -11,6 +11,7 @@ import useGetImages from '../../../../../src/hooks/use-get-images';
 jest.mock('../../../../../src/hooks/use-get-images', () => jest.fn(() => ({ data: {} })));
 
 const testId = 'child-test-id';
+const MockedVariantComponent = () => <div>Variation component</div>;
 
 describe('Layout component', () => {
   const simpleComponent = <div data-testid="child-test-id" />;
@@ -20,6 +21,16 @@ describe('Layout component', () => {
     expect(Layout).toBeDefined();
   });
 
+  it('should render VariantComponent insted of wrapper', () => {
+    const { getByText } = render(Layout, {
+      type: COLUMN,
+      children: simpleChildren,
+      VariantComponent: MockedVariantComponent
+    });
+    const titleTag = getByText('Variation component');
+    expect(titleTag).toBeDefined();
+  });
+
   it('should render empty if its a column with no children', () => {
     const { container } = render(Layout, { type: COLUMN, children: [] });
     expect(container).toBeEmptyDOMElement();

package/tests/unit/src/components/List/components/Full/FullRender.test.js

@@ -8,7 +8,11 @@ import FullRender from '../../../../../../../src/components/List/components/Full
 import { MOCKED_LIST_OPTIONS } from '../mocks';
 
 jest.mock('../../../../../../../src/components/List/components/Full/FullRenderItem', () =>
-  jest.fn().mockImplementation(({ itemId }) => <div>{itemId}</div>)
+  jest.fn().mockImplementation(({ itemId, entity }) => (
+    <div>
+      {itemId}:{entity}
+    </div>
+  ))
 );
 
 describe('FullRender component', () => {
@@ -17,6 +21,15 @@ describe('FullRender component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should backward compatibility check', async () => {
+    const { asFragment } = await render(FullRender, {
+      ...MOCKED_LIST_OPTIONS,
+      entity: 'page',
+      entities: undefined
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should render without wrapper, when requested', async () => {
     const { asFragment } = await render(FullRender, { ...MOCKED_LIST_OPTIONS, omitWrappers: true });
     expect(asFragment()).toMatchSnapshot();

package/tests/unit/src/components/List/components/Full/__snapshots__/FullRender.test.js.snap

@@ -1,18 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`FullRender component should backward compatibility check 1`] = `
+<DocumentFragment>
+  <div
+    class="list list--full "
+  >
+    <div>
+      item1:page
+    </div>
+    <div>
+      item2:article
+    </div>
+    <div>
+      item3:article
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`FullRender component should render if orderedListData is received 1`] = `
 <DocumentFragment>
   <div
     class="list list--full "
   >
     <div>
-      item1
+      item1:page
     </div>
     <div>
-      item2
+      item2:article
     </div>
     <div>
-      item3
+      item3:article
     </div>
   </div>
 </DocumentFragment>
@@ -21,13 +39,13 @@ exports[`FullRender component should render if orderedListData is received 1`] =
 exports[`FullRender component should render without wrapper, when requested 1`] = `
 <DocumentFragment>
   <div>
-    item1
+    item1:page
   </div>
   <div>
-    item2
+    item2:article
   </div>
   <div>
-    item3
+    item3:article
   </div>
 </DocumentFragment>
 `;