@blaze-cms/react-page-builder 0.124.0-alpha.0 → 0.124.0-alpha.3

package/src/components/BackToTop/index.js

@@ -0,0 +1,3 @@
+import BackToTop from './BackToTop';
+
+export default BackToTop;

package/src/components/CarouselWrapper.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
 const CarouselWrapper = ({
   children,
@@ -81,9 +80,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation();
             }}>
-            <i>
-              <FaAngleLeft size={arrowSize} />
-            </i>
+            <i className="carousel--arrow-left" />
           </button>
         )}
       </div>
@@ -96,9 +93,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation(true);
             }}>
-            <i>
-              <FaAngleRight size={arrowSize} />
-            </i>
+            <i className="carousel--arrow-left" />
           </button>
         )}
       </div>

package/src/components/Video/Video.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import useGetImages from '../../hooks/use-get-images';
 import VideoRender from './VideoRender';
+import VideoModal from './VideoModal';
 import Wrapper from '../Wrapper';
 import getClassModifiers from '../../utils/get-class-modifiers';
 import { shouldShowProperty } from '../../helpers';
@@ -14,13 +16,21 @@ const Video = ({
   credits,
   areVideoCreditsDisplayed,
   provider,
-  ...variableProps
+  playInModal,
+  imageId,
+  ...props
 }) => {
+  const {
+    data: { getFile: imageData },
+    loading
+  } = useGetImages(imageId);
+
+  if (loading) return '';
   if (!url) return null;
 
   const modifiers = `video--${provider.toLowerCase()} ${getClassModifiers('video', {
     modifier,
-    ...variableProps
+    ...props
   })}`;
 
   const shouldDisplayCaption = shouldShowProperty({
@@ -34,13 +44,26 @@ const Video = ({
 
   return (
     <Wrapper className="video" modifiers={modifiers}>
-      <VideoRender
-        url={url}
-        modifier={modifier}
-        autoplay={autoplay}
-        provider={provider}
-        {...variableProps}
-      />
+      {playInModal ? (
+        <VideoModal
+          url={url}
+          modifier={modifier}
+          autoplay={autoplay}
+          provider={provider}
+          imageData={imageData}
+          {...props}
+        />
+      ) : (
+        <VideoRender
+          url={url}
+          modifier={modifier}
+          autoplay={autoplay}
+          provider={provider}
+          imageData={imageData}
+          {...props}
+        />
+      )}
+
       {(shouldDisplayCaption || shouldDisplayCredits) && (
         <div className="video__details" data-testid="video-details">
           {shouldDisplayCaption && <div className="caption">{caption}</div>}
@@ -59,18 +82,22 @@ Video.propTypes = {
   autoplay: PropTypes.bool,
   areVideoCreditsDisplayed: PropTypes.bool,
   isCaptionDisplayed: PropTypes.bool,
-  provider: PropTypes.string
+  provider: PropTypes.string,
+  playInModal: PropTypes.bool,
+  imageId: PropTypes.string
 };
 
 Video.defaultProps = {
   caption: '',
   credits: '',
   modifier: '',
-  autoplay: false,
+  imageId: '',
   url: '',
   provider: 'youtube',
+  autoplay: false,
   isCaptionDisplayed: false,
-  areVideoCreditsDisplayed: false
+  areVideoCreditsDisplayed: false,
+  playInModal: false
 };
 
 export default Video;

package/src/components/Video/VideoModal.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Modal from '@blaze-react/modal';
+import VideoRender from './VideoRender';
+
+const VideoModal = ({ ...props }) => {
+  const [displayModal, setDisplayModal] = useState(false);
+
+  return (
+    <>
+      <div
+        role="button"
+        onClick={() => {
+          setDisplayModal(!displayModal);
+        }}>
+        <VideoRender placeholderOnly autoplay={false} {...props} />
+      </div>
+      {displayModal && (
+        <Modal
+          className="modal--video"
+          isFullScreen
+          showFooter={false}
+          isSimple
+          onClose={() => setDisplayModal(!displayModal)}>
+          <VideoRender {...props} placeholderOnly={false} autoplay />
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default VideoModal;

package/src/components/Video/VideoRender.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import getProvider from './providers';
 import { withTitle } from '../../HOC';
 
-const VideoRender = ({ provider, ...varibleProps }) => {
+const VideoRender = ({ provider, ...props }) => {
   const Provider = getProvider(provider);
-  return <Provider {...varibleProps} />;
+  return <Provider {...props} />;
 };
 
 VideoRender.propTypes = {

package/src/components/Video/providers/JWPlayer/JWPlayerProvider.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactJWPlayer from 'react-jw-player';
-import useGetImages from '../../../../hooks/use-get-images';
 import { JW_PLAYER_TYPE_FILE, VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
 import JWPlayerController from './JWPlayerController';
 
@@ -15,13 +14,9 @@ const JWPlayerProvider = ({
   type,
   urlScript,
   muted,
-  imageId,
+  imageData,
   loop: repeat
 }) => {
-  const { data, loading } = useGetImages(imageId);
-
-  if (loading) return null;
-
   const handleOnReady = () => {
     const jwPlayer = window.jwplayer(name);
     if (jwPlayer) {
@@ -43,7 +38,7 @@ const JWPlayerProvider = ({
     };
 
     if (type === JW_PLAYER_TYPE_FILE) {
-      const { url: imageURL = '' } = data.getFile || {};
+      const { url: imageURL = '' } = imageData;
       return { ...props, image: imageURL, file: url };
     }
 
@@ -62,7 +57,8 @@ JWPlayerProvider.propTypes = {
   loop: PropTypes.bool,
   controls: PropTypes.bool,
   muted: PropTypes.bool,
-  type: PropTypes.string
+  type: PropTypes.string,
+  imageData: PropTypes.object
 };
 
 JWPlayerProvider.defaultProps = {
@@ -71,7 +67,8 @@ JWPlayerProvider.defaultProps = {
   controls: true,
   muted: false,
   type: 'playlist',
-  imageId: null
+  imageId: null,
+  imageData: {}
 };
 
 export default JWPlayerProvider;

package/src/components/Video/providers/YouTube/YouTubeProvider.js

@@ -4,7 +4,7 @@ import YoutubeEmbeded from './YoutubeEmbeded';
 import { getYouTubeID, booleanToNumber } from './helpers';
 import { VIDEO_WRAPPER_CLASS_NAME } from '../../../../constants';
 
-const YouTubeProvider = ({ url, autoplay, loop }) => {
+const YouTubeProvider = ({ url, autoplay, loop, placeholderOnly, imageData }) => {
   const videoId = getYouTubeID(url);
 
   if (!videoId) return null;
@@ -12,7 +12,13 @@ const YouTubeProvider = ({ url, autoplay, loop }) => {
 
   return (
     <div className={VIDEO_WRAPPER_CLASS_NAME}>
-      <YoutubeEmbeded autoplay={autoplay} videoId={videoId} params={params} />
+      <YoutubeEmbeded
+        autoplay={autoplay}
+        videoId={videoId}
+        params={params}
+        placeholderOnly={placeholderOnly}
+        imageData={imageData}
+      />
     </div>
   );
 };
@@ -20,12 +26,16 @@ const YouTubeProvider = ({ url, autoplay, loop }) => {
 YouTubeProvider.propTypes = {
   url: PropTypes.string.isRequired,
   autoplay: PropTypes.bool,
-  loop: PropTypes.bool
+  loop: PropTypes.bool,
+  placeholderOnly: PropTypes.bool,
+  imageData: PropTypes.object
 };
 
 YouTubeProvider.defaultProps = {
   autoplay: false,
-  loop: false
+  loop: false,
+  placeholderOnly: false,
+  imageData: {}
 };
 
 export default YouTubeProvider;

package/src/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -2,9 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { IN_VIEW_CONFIG } from '../../../../constants';
-
-const YT_HQ_FORMAT = 'hqdefault';
-const YT_IMAGE_URL = 'https://i.ytimg.com';
+import { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';
 
 const YoutubeEmbeded = ({
   autoplay,
@@ -21,7 +19,9 @@ const YoutubeEmbeded = ({
   muted,
   adNetwork,
   iframeClass,
-  priority
+  priority,
+  placeholderOnly,
+  imageData
 }) => {
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
   const [preconnected, setPreconnected] = useState(false);
@@ -32,16 +32,16 @@ const YoutubeEmbeded = ({
   });
 
   const encodedId = encodeURIComponent(videoId);
-  const videoPlaylisCovertId =
-    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
   const paramsImp = videoParams ? `&${videoParams}` : '';
-  const format = webp ? 'webp' : 'jpg';
-  const vi = webp ? 'vi_webp' : 'vi';
-  const posterUrl = !playlist
-    ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`
-    : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;
   const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
-
+  const posterUrl = getPosterUrl({
+    imageData,
+    playlistCoverId,
+    playlist,
+    encodedId,
+    imageSize,
+    webp
+  });
   const mutedValue = muted ? '&mute=1' : '';
   const iframeSrc = !playlist
     ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`
@@ -71,7 +71,7 @@ const YoutubeEmbeded = ({
   };
 
   const addIframe = () => {
-    if (renderIframe) return;
+    if (renderIframe || placeholderOnly) return;
     onIframeAdded();
     setRenderIframe(true);
   };
@@ -136,7 +136,9 @@ YoutubeEmbeded.propTypes = {
   announce: PropTypes.string,
   playlistCoverId: PropTypes.string,
   videoParams: PropTypes.string,
-  videoTitle: PropTypes.string
+  videoTitle: PropTypes.string,
+  placeholderOnly: PropTypes.bool,
+  imageData: PropTypes.object
 };
 
 YoutubeEmbeded.defaultProps = {
@@ -154,7 +156,9 @@ YoutubeEmbeded.defaultProps = {
   videoId: '',
   playlistCoverId: '',
   videoParams: '',
-  videoTitle: ''
+  videoTitle: '',
+  placeholderOnly: false,
+  imageData: {}
 };
 
 export default YoutubeEmbeded;

package/src/components/Video/providers/YouTube/helpers/index.js

@@ -1,4 +1,6 @@
 const YOUTUBE_REGEX = /^.*((m\.)?youtu\.be\/|vi?\/|u\/\w\/|embed\/|\?vi?=|\&vi?=)([^#\&\?]*).*/;
+const YT_IMAGE_URL = 'https://i.ytimg.com';
+const YT_HQ_FORMAT = 'hqdefault';
 
 function getYouTubeID(uri) {
   const [, , , videoId] = uri.match(YOUTUBE_REGEX) || [];
@@ -9,4 +11,16 @@ function booleanToNumber(flag) {
   return flag ? 1 : 0;
 }
 
-export { getYouTubeID, booleanToNumber };
+const getPosterUrl = ({ imageData, playlistCoverId, playlist, encodedId, imageSize, webp }) => {
+  if (imageData && imageData.url) return imageData.url;
+  const videoPlaylisCovertId =
+    typeof playlistCoverId === 'string' ? encodeURIComponent(playlistCoverId) : null;
+
+  const format = webp ? 'webp' : 'jpg';
+  const vi = webp ? 'vi_webp' : 'vi';
+  return !playlist
+    ? `${YT_IMAGE_URL}/${vi}/${encodedId}/${imageSize}.${format}`
+    : `${YT_IMAGE_URL}/${vi}/${videoPlaylisCovertId}/${imageSize}.${format}`;
+};
+
+export { getYouTubeID, booleanToNumber, getPosterUrl, YT_IMAGE_URL, YT_HQ_FORMAT };

package/src/components/Wrapper.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Wrapper = React.forwardRef(({ children, className, modifiers, style, tagType }, ref) => {
-  const TagType = !tagType || tagType === 'Default' ? 'div' : tagType;
-  return (
-    <>
-      {children && (
-        <TagType ref={ref} className={`${className} ${modifiers}`} style={style}>
-          {children}
-        </TagType>
-      )}
-    </>
-  );
-});
+const Wrapper = React.forwardRef(
+  ({ children, className, modifiers, style, tagType, ...props }, ref) => {
+    const TagType = !tagType || tagType === 'Default' ? 'div' : tagType;
+    return (
+      <>
+        {children && (
+          <TagType ref={ref} className={`${className} ${modifiers}`} style={style} {...props}>
+            {children}
+          </TagType>
+        )}
+      </>
+    );
+  }
+);
 
 Wrapper.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

package/src/components/index.js

@@ -41,5 +41,6 @@ export default {
   passwordresetrequest: dynamic(() =>
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
   ),
-  breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb'))
+  breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
+  backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
 };

package/src/helpers/build-raw-query.js

@@ -71,7 +71,8 @@ const buildRawQuery = (
             type: 'number',
             script: {
               lang: 'painless',
-              source: "doc['_id'].value != null ? params.sortOrder.indexOf(doc['_id'].value) : 0",
+              source:
+                "!doc['id.keyword'].empty ? params.sortOrder.indexOf(doc['id.keyword'].value) : 0",
               params: {
                 sortOrder: itemsToDisplayIds
               }

package/tests/helpers/mocks.js

@@ -2096,7 +2096,7 @@ const RAW_QUERY_WITH_SHOULD_APPLY_SORT = {
       type: 'number',
       script: {
         lang: 'painless',
-        source: "doc['_id'].value != null ? params.sortOrder.indexOf(doc['_id'].value) : 0",
+        source: "!doc['id.keyword'].empty ? params.sortOrder.indexOf(doc['id.keyword'].value) : 0",
         params: {
           sortOrder: ITEMS_TO_DISPLAY
         }

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

@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import BackToTop from '../../../../../src/components/BackToTop';
+
+describe('Breadcrumb 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
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

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

package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap

@@ -96,7 +96,10 @@ exports[`CardContainer component should render with carousel if option is enable
 exports[`CardContainer component should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <div
+    autoscrolltimer="0"
+    bannermodifier=""
     class="grid grid-cols-1 "
+    itemsperrow="1"
   >
     <div
       class="card card--portrait"

package/tests/unit/src/components/Card/__snapshots__/CardRender.test.js.snap

@@ -5,7 +5,10 @@ exports[`CardRender component should render empty string if parent matches resul
 exports[`CardRender component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
+    autoscrolltimer="0"
+    bannermodifier=""
     class="grid grid-cols-1 grid--one"
+    itemsperrow="1"
   >
     <div
       class="card card--portrait"

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

@@ -4,6 +4,9 @@ exports[`ImageFactory component should render image 1`] = `
 <DocumentFragment>
   <div
     class="image "
+    entity=""
+    imagerelation="publishedPage.otherImageIds"
+    parent="[object Object]"
   >
     <a
       class="image__wrapper"
@@ -24,6 +27,9 @@ exports[`ImageFactory component should render image fetching data from relation
 <DocumentFragment>
   <div
     class="image "
+    entity="page"
+    imagerelation="publishedPage.otherImageIds"
+    parent="[object Object]"
   >
     <a
       class="image__wrapper"
@@ -39,6 +45,9 @@ exports[`ImageFactory component should render image fetching data from relation
   </div>
   <div
     class="image "
+    entity="page"
+    imagerelation="publishedPage.otherImageIds"
+    parent="[object Object]"
   >
     <a
       class="image__wrapper"

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

@@ -3,10 +3,18 @@ import '@testing-library/jest-dom/extend-expect';
 import { render } from '@testing-library/react';
 import Video from '../../../../../src/components/Video';
 
+jest.mock('../../../../../src/hooks/use-get-images', () =>
+  jest.fn(() => ({ data: { getFile: { url: 'poster-url' } } }))
+);
+
 jest.mock('../../../../../src/components/Video/VideoRender', () =>
   jest.fn(({ provider, modifier }) => <div data-testid={`VideoRender-${provider}-${modifier}`} />)
 );
 
+jest.mock('../../../../../src/components/Video/VideoModal', () =>
+  jest.fn(() => <div>video modal</div>)
+);
+
 const getMockedProps = overrides => ({
   url: 'https://www.youtube.com/watch?v=mockedID',
   modifier: 'mocked-modifier',
@@ -18,10 +26,6 @@ const getMockedProps = overrides => ({
 describe('Video component', () => {
   const mockedProps = getMockedProps();
 
-  it('should be defined', () => {
-    expect(Video).toBeDefined();
-  });
-
   it('should match snapshot', () => {
     const { asFragment } = render(<Video {...mockedProps} />);
     expect(asFragment()).toMatchSnapshot();
@@ -60,4 +64,8 @@ describe('Video component', () => {
     expect(getByText(caption)).toBeDefined();
     expect(asFragment()).toMatchSnapshot();
   });
+  it('should video in modal if playInModal is true', () => {
+    const { asFragment } = render(<Video {...mockedProps} playInModal />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/Video/VideoModal.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import VideoModal from '../../../../../src/components/Video/VideoModal';
+
+jest.mock('../../../../../src/components/Video/VideoRender', () =>
+  jest.fn(({ provider, modifier }) => <div data-testid={`VideoRender-${provider}-${modifier}`} />)
+);
+
+describe('VideoModal component', () => {
+  it('should match snapshot', () => {
+    const { asFragment } = render(<VideoModal />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -45,3 +45,15 @@ exports[`Video component should render caption 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Video component should video in modal if playInModal is true 1`] = `
+<DocumentFragment>
+  <div
+    class="video video--youtube mocked-modifier"
+  >
+    <div>
+      video modal
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/Video/__snapshots__/VideoModal.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoModal component should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    role="button"
+  >
+    <div
+      data-testid="VideoRender-undefined-undefined"
+    />
+  </div>
+</DocumentFragment>
+`;

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

@@ -3,6 +3,7 @@
 exports[`Wrapper component should handle Default value and render default tag 1`] = `
 <DocumentFragment>
   <div
+    backgroundimage="test-id"
     class="row wide desktop tablet mobile"
   >
     &lt;span /&gt;&lt;span /&gt;&lt;WithTitle(TextBlock) /&gt;
@@ -13,6 +14,7 @@ exports[`Wrapper component should handle Default value and render default tag 1`
 exports[`Wrapper component should render with custom tag 1`] = `
 <DocumentFragment>
   <article
+    backgroundimage="test-id"
     class="row wide desktop tablet mobile"
   >
     &lt;span /&gt;&lt;span /&gt;&lt;WithTitle(TextBlock) /&gt;
@@ -23,6 +25,7 @@ exports[`Wrapper component should render with custom tag 1`] = `
 exports[`Wrapper component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
+    backgroundimage="test-id"
     class="row wide desktop tablet mobile"
   >
     &lt;span /&gt;&lt;span /&gt;&lt;WithTitle(TextBlock) /&gt;

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

@@ -2,6 +2,10 @@
 
 exports[`Components should match snapshot 1`] = `
 Object {
+  "backtotop": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "banner": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],