@blaze-cms/react-page-builder 0.135.0 → 0.136.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.135.0",
+  "version": "0.136.0-alpha.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -32,7 +32,7 @@
     "@blaze-cms/core-errors-ui": "^0.131.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
     "@blaze-cms/nextjs-components": "^0.134.0",
-    "@blaze-cms/plugin-search-ui": "^0.134.0",
+    "@blaze-cms/plugin-search-ui": "0.136.0-alpha.0",
     "@blaze-cms/setup-ui": "^0.131.0",
     "@blaze-cms/utils": "^0.131.0",
     "@blaze-cms/utils-handlebars": "^0.134.0",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "37423f2681b9ec2a1b949f2f3e09094c9920a6c8"
+  "gitHead": "1097c61e5ff2f2e0bc67772fb489efdd80e10d90"
 }

package/src/components/Banner/AdSlotRender.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { AdSlot } from 'react-dfp';
 import PropTypes from 'prop-types';
 import { BANNER_LOADING, BANNER_EMPTY, BANNER_LOADED } from '../../constants';
+import Wrapper from '../Wrapper';
 
 const AdSlotRender = ({
   shouldShowBanner,
@@ -9,6 +10,7 @@ const AdSlotRender = ({
   sizeId,
   parsedAdunit,
   parsedSizes,
+  modifiers,
   targetingArguments
 }) => {
   const [{ loadingStatus = BANNER_LOADING, minHeight }, setLoadingStatus] = useState({});
@@ -24,11 +26,11 @@ const AdSlotRender = ({
       })
       .sort();
   const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;
-
+  const newModifers = `${modifiers} banner-${loadingStatus}`;
   return (
-    <>
+    <Wrapper className="banner" modifiers={newModifers}>
       {styles && <style>{styles.join('\n')}</style>}
-      <div className={className} style={{ minHeight }}>
+      <div className={className} style={{ minHeight }} data-testid="ad-slot">
         {shouldShowBanner && (
           <AdSlot
             adUnit={parsedAdunit}
@@ -46,7 +48,7 @@ const AdSlotRender = ({
           />
         )}
       </div>
-    </>
+    </Wrapper>
   );
 };
 
@@ -56,11 +58,13 @@ AdSlotRender.propTypes = {
   sizeId: PropTypes.string.isRequired,
   parsedAdunit: PropTypes.string.isRequired,
   parsedSizes: PropTypes.array,
+  modifiers: PropTypes.string,
   targetingArguments: PropTypes.object.isRequired
 };
 
 AdSlotRender.defaultProps = {
-  parsedSizes: null
+  parsedSizes: null,
+  modifiers: ''
 };
 
 export default AdSlotRender;

package/src/components/Banner/Banner.js

@@ -7,7 +7,6 @@ import { useQuery } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { buildUserQuery, buildPropsData } from './helpers';
 import { getSingleEntitySchema, getUser } from '../../application/query';
-import Wrapper from '../Wrapper';
 import BannerRender from './BannerRender';
 import buildPropsQuery from '../../helpers/build-props-query';
 import { getClassModifiers } from '../../utils';
@@ -47,16 +46,15 @@ const Banner = ({ type, ...otherProps }) => {
   const bannerKey = `${sizeId}${asPath}`;
 
   return (
-    <Wrapper className={type} modifiers={modifiers}>
-      <BannerRender
-        key={bannerKey}
-        {...otherProps}
-        action={action}
-        actionKey={actionKey}
-        asPath={asPath}
-        userPropsData={userPropsData}
-      />
-    </Wrapper>
+    <BannerRender
+      key={bannerKey}
+      {...otherProps}
+      action={action}
+      actionKey={actionKey}
+      asPath={asPath}
+      userPropsData={userPropsData}
+      modifiers={modifiers}
+    />
   );
 };
 

package/src/components/Banner/BannerRender.js

@@ -34,6 +34,7 @@ const BannerRender = ({
   actionKey,
   renderCounter,
   userPropsData,
+  modifiers,
   ...otherProps
 }) => {
   const { id } = otherProps;
@@ -90,6 +91,7 @@ const BannerRender = ({
       sizeId={sizeId}
       parsedAdunit={parsedAdunit}
       parsedSizes={parsedSizes}
+      modifiers={modifiers}
       targetingArguments={targetingArguments}
     />
   );
@@ -108,6 +110,7 @@ BannerRender.propTypes = {
   targetings: PropTypes.string,
   sizes: PropTypes.string,
   renderCounter: PropTypes.number,
+  modifiers: PropTypes.string,
   userPropsData: PropTypes.object
 };
 
@@ -120,6 +123,7 @@ BannerRender.defaultProps = {
   targetings: '',
   sizes: '',
   renderCounter: null,
+  modifiers: '',
   userPropsData: {}
 };
 

package/src/components/DataSummary/helpers/build-loop-props-content.js

@@ -45,11 +45,12 @@ const buildLoopPropsContent = (loopProps = [], propsToDisplay = [], limit = 0, d
 
         return propertiesToDisplay.map(key => {
           const loopValue = loopValues[key];
-          const propValue = loopValue ? getLoopValue(loopValue[i]) : regularValues[key];
+          const loopValueItem = loopValue && loopValue[i];
+          const propValue = loopValueItem ? getLoopValue(loopValueItem) : regularValues[key];
           if (!propValue) return null;
 
           const processedValue = processDataSummaryValue(propValue, options);
-          const linkToPublishedContent = getLinkToPublishedContent(key, data);
+          const linkToPublishedContent = getLinkToPublishedContent(key, data, loopValueItem);
           return [upperFirst(label), processedValue, linkToPublishedContent, modifier];
         });
       })

package/src/components/DataSummary/helpers/get-link-to-published-content.js

@@ -1,6 +1,9 @@
-const getLinkToPublishedContent = (key = '', props = {}) => {
+const getLinkToPublishedContent = (key = '', props = {}, currentValue = null) => {
   const [baseKey] = key.split('.');
   if (!props[baseKey]) return '';
+
+  if (currentValue && typeof currentValue.url !== 'undefined') return currentValue.url;
+
   const content = Array.isArray(props[baseKey]) ? props[baseKey][0] : props[baseKey];
   return content && content.url ? content.url : '';
 };

package/tests/unit/src/components/Banner/AdSlotRender.test.js

@@ -50,17 +50,17 @@ describe('Banner render component', () => {
       <AdSlotRender {...defaultProps} shouldShowBanner={false} />
     );
 
-    expect(container.childNodes[0].nodeName).toEqual('STYLE');
-    expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+    expect(container.childNodes[0].nodeName).toEqual('DIV');
+    expect(getByTestId('ad-slot')).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
     expect(() => getByTestId(slotTestId)).toThrow();
     expect(asFragment()).toMatchSnapshot();
   });
 
   describe('AdSlot loading', () => {
     it('should render AdSlot', () => {
-      const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
+      const { asFragment, getByTestId } = render(<AdSlotRender {...defaultProps} />);
       expect(getByTestId('adslot-test')).toBeDefined();
-      expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+      expect(getByTestId('ad-slot')).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
       expect(asFragment()).toMatchSnapshot();
     });
 
@@ -69,16 +69,11 @@ describe('Banner render component', () => {
       const adSlot = getByTestId(slotTestId);
 
       fireEvent.mouseOver(adSlot);
-      await waitFor(() =>
-        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-loaded banner-sizeId')
-      );
-      expect(container.childNodes[0]).toHaveStyle('min-height: 250px');
+      await waitFor(() => expect(container.childNodes[0]).toHaveClass('banner banner-loaded'));
       expect(asFragment()).toMatchSnapshot();
 
       fireEvent.mouseLeave(adSlot);
-      await waitFor(() =>
-        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-empty banner-sizeId')
-      );
+      await waitFor(() => expect(container.childNodes[0]).toHaveClass('banner banner-empty'));
       expect(asFragment()).toMatchSnapshot();
     });
   });

package/tests/unit/src/components/Banner/__snapshots__/AdSlotRender.test.js.snap

@@ -3,13 +3,18 @@
 exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 1`] = `
 <DocumentFragment>
   <div
-    class="ad-slot ad-slot-loaded banner-sizeId"
-    style="min-height: 250px;"
+    class="banner  banner-loaded"
   >
     <div
-      data-testid="adslot-test"
-      role="button"
-    />
+      class="ad-slot ad-slot-loaded banner-sizeId"
+      data-testid="ad-slot"
+      style="min-height: 250px;"
+    >
+      <div
+        data-testid="adslot-test"
+        role="button"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -17,44 +22,59 @@ exports[`Banner render component AdSlot loading should change class and remove r
 exports[`Banner render component AdSlot loading should change class and remove responsive styles after loaded events 2`] = `
 <DocumentFragment>
   <div
-    class="ad-slot ad-slot-empty banner-sizeId"
-    style=""
+    class="banner  banner-empty"
   >
     <div
-      data-testid="adslot-test"
-      role="button"
-    />
+      class="ad-slot ad-slot-empty banner-sizeId"
+      data-testid="ad-slot"
+      style=""
+    >
+      <div
+        data-testid="adslot-test"
+        role="button"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
 <DocumentFragment>
-  <style>
-    @media(min-width:320px){.banner-sizeId{min-height:100px;}
-@media(min-width:728px){.banner-sizeId{min-height:100px;}
-@media(min-width:970px){.banner-sizeId{min-height:250px;}
-  </style>
   <div
-    class="ad-slot ad-slot-loading banner-sizeId"
+    class="banner  banner-loading"
   >
+    <style>
+      @media(min-width:320px){.banner-sizeId{min-height:100px;}
+@media(min-width:728px){.banner-sizeId{min-height:100px;}
+@media(min-width:970px){.banner-sizeId{min-height:250px;}
+    </style>
     <div
-      data-testid="adslot-test"
-      role="button"
-    />
+      class="ad-slot ad-slot-loading banner-sizeId"
+      data-testid="ad-slot"
+    >
+      <div
+        data-testid="adslot-test"
+        role="button"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`Banner render component should not render AdSlot if shouldShowBanner=false but should render styles and wrapper 1`] = `
 <DocumentFragment>
-  <style>
-    @media(min-width:320px){.banner-sizeId{min-height:100px;}
+  <div
+    class="banner  banner-loading"
+  >
+    <style>
+      @media(min-width:320px){.banner-sizeId{min-height:100px;}
 @media(min-width:728px){.banner-sizeId{min-height:100px;}
 @media(min-width:970px){.banner-sizeId{min-height:250px;}
-  </style>
-  <div
-    class="ad-slot ad-slot-loading banner-sizeId"
-  />
+    </style>
+    <div
+      class="ad-slot ad-slot-loading banner-sizeId"
+      data-testid="ad-slot"
+    />
+  </div>
 </DocumentFragment>
 `;

package/tests/unit/src/components/Banner/__snapshots__/BannerRender.test.js.snap

@@ -2,9 +2,14 @@
 
 exports[`Banner render component should render 1`] = `
 <DocumentFragment>
-  <style />
   <div
-    class="ad-slot ad-slot-loading banner-sizeId"
-  />
+    class="banner  banner-loading"
+  >
+    <style />
+    <div
+      class="ad-slot ad-slot-loading banner-sizeId"
+      data-testid="ad-slot"
+    />
+  </div>
 </DocumentFragment>
 `;

package/tests/unit/src/components/DataSummary/helpers/build-loop-props-content.test.js

@@ -90,4 +90,45 @@ describe('buildLoopPropsContent helper function', () => {
     });
     expect.hasAssertions();
   });
+
+  it('should nested items with urls', () => {
+    const data = {
+      nestedLoopProp: [
+        {
+          nestedValue: 'abc',
+          url: 'http://blazecms.app/abc'
+        },
+        {
+          nestedValue: '123',
+          url: 'http://blazecms.app/123'
+        },
+        {
+          nestedValue: 'no url',
+          url: null
+        }
+      ]
+    };
+    const withUrl = buildLoopPropsContent(
+      mockedLoopProps,
+      [
+        {
+          bold: false,
+          enableLink: true,
+          label: '',
+          modifier: '',
+          prefix: '',
+          propertiesToDisplay: ['nestedLoopProp.nestedValue'],
+          shouldStrip: true
+        }
+      ],
+      0,
+      data
+    );
+
+    withUrl.forEach(([, value, url], index) => {
+      expect(value).toEqual(data.nestedLoopProp[index].nestedValue);
+      expect(url).toEqual(data.nestedLoopProp[index].url || '');
+    });
+    expect.hasAssertions();
+  });
 });

package/tests/unit/src/components/DataSummary/helpers/get-link-to-published-content.test.js

@@ -38,4 +38,25 @@ describe('get link to published content', () => {
     const result = getLinkToPublishedContent(publishedKey, props);
     expect(result).toEqual('');
   });
+
+  it('should return url from the currentValue', () => {
+    const currentValue = { url: 'currentValueUrl' };
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
+    expect(result).toEqual(currentValue.url);
+  });
+
+  it('should return url from the currentValue even if falsey', () => {
+    const currentValue = { url: null };
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
+    expect(result).toEqual(currentValue.url);
+  });
+
+  it('should not return url from the currentValue if not set', () => {
+    const currentValue = {};
+    const props = { content: [content] };
+    const result = getLinkToPublishedContent(publishedKey, props, currentValue);
+    expect(result).toEqual(content.url);
+  });
 });

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

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Placeholder component should render PlaceholderIcon 1`] = `
+<DocumentFragment>
+  <div
+    class="editor-view__placeholder"
+    data-testid="placeholder-icon"
+  >
+    <svg
+      height="25px"
+      version="1.1"
+      viewBox="0 0 20 20"
+      width="25px"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <title>
+        card
+      </title>
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        id="Icons"
+        stroke="none"
+        stroke-width="1"
+      >
+        <g
+          id="card"
+          transform="translate(-259, -214)"
+        >
+          <g
+            transform="translate(259, 214)"
+          >
+            <g
+              id="Group-7"
+              transform="translate(1, 1)"
+            >
+              <path
+                d="M1.07,10 C3.04212623,8.18723771 4.14171262,7.28085657 4.36875916,7.28085657 C4.79707626,7.28085657 7,9 7.5,9 C8.40867615,9 12.0764465,4.56171314 12.9,4.56171314 C13.4490356,4.56171314 14.8390356,5.81447543 17.07,8.32"
+                fill-rule="nonzero"
+                id="Path-3"
+                stroke="none"
+                stroke-width="1.3"
+              />
+              <path
+                d="M5.00003877,4.07973585 C5.00003879,3.4834142 5.50109477,3 6.11917864,3 C6.73726251,3 7.2383185,3.4834142 7.2383185,4.07973585 C7.2383185,4.6760575 6.73726252,5.15947172 6.11917864,5.15947172 C5.82268209,5.15728623 5.53857972,5.04442179 5.32645457,4.84454876 C5.11586241,4.64208328 4.99827309,4.36656405 5.00003877,4.07973585 Z"
+                fill="#899BBC"
+                fill-rule="nonzero"
+                id="Path"
+              />
+              <path
+                d="M3.375,14.625 C3.375,14.3143398 3.62683983,14.0625 3.9375,14.0625 L14.0625,14.0625 C14.3731602,14.0625 14.625,14.3143398 14.625,14.625 C14.625,14.9356602 14.3731602,15.1875 14.0625,15.1875 L3.9375,15.1875 C3.62683983,15.1875 3.375,14.9356602 3.375,14.625 Z"
+                fill="#899BBC"
+                fill-rule="nonzero"
+                id="Shape"
+              />
+              <rect
+                height="16.7"
+                id="Rectangle"
+                rx="2"
+                stroke="#899BBC"
+                stroke-width="1.3"
+                width="16.7"
+                x="0.65"
+                y="0.65"
+              />
+              <line
+                id="Line-2"
+                stroke="#899BBC"
+                stroke-linecap="square"
+                stroke-width="1.3"
+                x1="1"
+                x2="16.5625"
+                y1="11.8125"
+                y2="11.8125"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+    <span>
+      card
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/PlaceholderIcon/index.test.js

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+
+import PlaceholderIcon from '../../../../../../blaze-plugin-page-builder-ui/src/components/EditorView/PlaceholderIcon';
+import { CardIcon } from '../../../../../../blaze-plugin-page-builder-ui/src/Icons';
+
+const mockedProps = {
+  type: 'card',
+  icon: CardIcon
+};
+
+describe('Placeholder component', () => {
+  it('should render PlaceholderIcon', () => {
+    const { asFragment, getByTestId } = render(PlaceholderIcon, mockedProps);
+    expect(getByTestId('placeholder-icon')).toBeDefined();
+    expect(asFragment()).toMatchSnapshot();
+  });
+});