@blaze-cms/react-page-builder 0.123.1-alpha.2 → 0.124.0-alpha.2

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],