@magento/pagebuilder 7.1.0-beta.1 → 7.2.0-beta.1

package/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.shimmer.spec.js.snap

@@ -25,7 +25,6 @@ exports[`renders a BannerShimmer component with minHeight 1`] = `
         "borderColor": undefined,
         "borderRadius": undefined,
         "borderWidth": undefined,
-        "minHeight": "400px",
         "textAlign": undefined,
       }
     }

package/lib/ContentTypes/Banner/__tests__/__snapshots__/banner.spec.js.snap

@@ -503,7 +503,6 @@ exports[`renders an empty Banner component 1`] = `
         "borderColor": undefined,
         "borderRadius": undefined,
         "borderWidth": undefined,
-        "minHeight": undefined,
         "textAlign": undefined,
       }
     }

package/lib/ContentTypes/Banner/banner.js

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import defaultClasses from './banner.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import { arrayOf, bool, oneOf, shape, string, func } from 'prop-types';
+import { arrayOf, bool, oneOf, shape, string, func, object } from 'prop-types';
 import Button from '@magento/venia-ui/lib/components/Button/button';
 import resolveLinkProps from '../../resolveLinkProps';
 import { Link, useHistory } from 'react-router-dom';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 import handleHtmlContentClick from '../../handleHtmlContentClick';
 
 const { matchMedia } = globalThis;
@@ -60,6 +61,7 @@ const Banner = props => {
         marginRight,
         marginBottom,
         marginLeft,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -75,6 +77,8 @@ const Banner = props => {
         getParallax = () => {}
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     let image = desktopImage;
     if (mobileImage && matchMedia && matchMedia('(max-width: 768px)').matches) {
         image = mobileImage;
@@ -207,7 +211,6 @@ const Banner = props => {
     }, [backgroundElement, image, intersectionObserver, setBgImage]);
 
     if (appearance === 'poster') {
-        wrapperStyles.minHeight = minHeight;
         overlayStyles.minHeight = minHeight;
         overlayStyles.paddingTop = paddingTop;
         overlayStyles.paddingRight = paddingRight;
@@ -281,11 +284,20 @@ const Banner = props => {
     let BannerFragment = (
         <div
             className={classes.wrapper}
-            style={wrapperStyles}
+            style={{
+                ...wrapperStyles,
+                ...(appearance !== 'poster' && mediaQueryStyles)
+            }}
             ref={backgroundElement}
         >
             {videoOverlay}
-            <div className={overlayClass} style={overlayStyles}>
+            <div
+                className={overlayClass}
+                style={{
+                    ...overlayStyles,
+                    ...(appearance === 'poster' && mediaQueryStyles)
+                }}
+            >
                 <div
                     className={classes.content}
                     style={contentStyles}
@@ -379,6 +391,7 @@ const Banner = props => {
  * @property {String} marginRight CSS margin right property
  * @property {String} marginBottom CSS margin bottom property
  * @property {String} marginLeft CSS margin left property
+ * @property {Array} mediaQueries List of media query rules to be applied to the component
  * @property {String} paddingTop CSS padding top property
  * @property {String} paddingRight CSS padding right property
  * @property {String} paddingBottom CSS padding bottom property
@@ -445,6 +458,12 @@ Banner.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,

package/lib/ContentTypes/Banner/banner.shimmer.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { arrayOf, shape, string } from 'prop-types';
+import { arrayOf, shape, string, object } from 'prop-types';
 import defaultClasses from './banner.shimmer.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 
 /**
  * Page Builder Banner Shimmer component.
@@ -24,6 +25,7 @@ const BannerShimmer = props => {
         marginRight,
         marginBottom,
         marginLeft,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -31,6 +33,8 @@ const BannerShimmer = props => {
         cssClasses = []
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     const rootStyles = {
         marginTop,
         marginRight,
@@ -39,7 +43,7 @@ const BannerShimmer = props => {
     };
 
     const wrapperStyles = {
-        minHeight,
+        minHeight: mediaQueryStyles?.minHeight || minHeight,
         border,
         borderWidth,
         paddingTop,
@@ -89,6 +93,7 @@ const BannerShimmer = props => {
  * @property {String} marginRight CSS margin right property
  * @property {String} marginBottom CSS margin bottom property
  * @property {String} marginLeft CSS margin left property
+ * @property {Array} mediaQueries List of media query rules to be applied to the component
  * @property {String} paddingTop CSS padding top property
  * @property {String} paddingRight CSS padding right property
  * @property {String} paddingBottom CSS padding bottom property
@@ -111,6 +116,12 @@ BannerShimmer.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,

package/lib/ContentTypes/Banner/configAggregator.js

@@ -5,7 +5,8 @@ import {
     getPadding,
     getTextAlign,
     getCssClasses,
-    getIsHidden
+    getIsHidden,
+    getMediaQueries
 } from '../../utils';
 
 /**
@@ -84,6 +85,7 @@ export default (node, props) => {
         ...getCssClasses(node),
         ...getMargin(node),
         ...getPadding(minHeightPaddingElement),
-        ...getIsHidden(node)
+        ...getIsHidden(node),
+        ...getMediaQueries(minHeightPaddingElement)
     };
 };

package/lib/ContentTypes/Column/column.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
 import defaultClasses from './column.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import { arrayOf, oneOf, shape, string } from 'prop-types';
+import { arrayOf, oneOf, shape, string, object } from 'prop-types';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 
 const { matchMedia } = globalThis;
 
@@ -40,6 +41,7 @@ const Column = props => {
         marginLeft,
         marginRight,
         marginTop,
+        mediaQueries,
         minHeight,
         mobileImage,
         paddingBottom,
@@ -51,6 +53,8 @@ const Column = props => {
         width
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     let image = desktopImage;
     if (mobileImage && matchMedia && matchMedia('(max-width: 768px)').matches) {
         image = mobileImage;
@@ -151,7 +155,7 @@ const Column = props => {
 
     return (
         <div
-            style={dynamicStyles}
+            style={{ ...dynamicStyles, ...mediaQueryStyles }}
             ref={columnElement}
             className={[classes.root, ...cssClasses].join(' ')}
         >
@@ -184,6 +188,7 @@ const Column = props => {
  * @property {String} marginRight CSS margin right property
  * @property {String} marginTop CSS margin top property
  * @property {String} maxWidth Maximum width of the video
+ * @property {Array} mediaQueries List of media query rules to be applied to the component
  * @property {String} minHeight - CSS min-height property
  * @property {String} mobileImage Background image url to be used for mobile screen width
  * @property {String} paddingBottom CSS padding bottom property
@@ -219,6 +224,12 @@ Column.propTypes = {
     marginLeft: string,
     marginRight: string,
     marginTop: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     minHeight: string,
     mobileImage: string,
     paddingBottom: string,

package/lib/ContentTypes/Column/configAggregator.js

@@ -1,7 +1,8 @@
 import {
     getAdvanced,
     getBackgroundImages,
-    getVerticalAlignment
+    getVerticalAlignment,
+    getMediaQueries
 } from '../../utils';
 
 export default node => {
@@ -10,6 +11,7 @@ export default node => {
         display: node.style.display,
         width: node.style.width,
         backgroundColor: node.style.backgroundColor,
+        ...getMediaQueries(node),
         ...getAdvanced(node),
         ...getBackgroundImages(node),
         ...getVerticalAlignment(node)

package/lib/ContentTypes/DynamicBlock/__tests__/__snapshots__/dynamicBlock.ce.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#PageBuilder DynamicBlock CE renders 1`] = `null`;

package/lib/ContentTypes/DynamicBlock/__tests__/__snapshots__/dynamicBlock.ee.spec.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#PageBuilder DynamicBlock EE does not render a Dynamic Block component when no uids are provided 1`] = `null`;
+
+exports[`#PageBuilder DynamicBlock EE renders a Dynamic Block component inlined 1`] = `
+<span
+  aria-busy="false"
+  aria-live="polite"
+  className=""
+  style={
+    Object {
+      "border": "solid",
+      "borderColor": "red",
+      "borderRadius": "15px",
+      "borderWidth": "10px",
+      "marginBottom": "10px",
+      "marginLeft": "10px",
+      "marginRight": "10px",
+      "marginTop": "10px",
+      "minHeight": "40px",
+      "paddingBottom": "10px",
+      "paddingLeft": "10px",
+      "paddingRight": "10px",
+      "paddingTop": "10px",
+      "textAlign": "right",
+    }
+  }
+>
+  <mock-CmsDynamicBlockGroup
+    uids="uids"
+  />
+</span>
+`;
+
+exports[`#PageBuilder DynamicBlock EE renders a Dynamic Block component with custom classes 1`] = `
+<div
+  aria-busy="false"
+  aria-live="polite"
+  className=" test-class"
+  style={
+    Object {
+      "border": "solid",
+      "borderColor": "red",
+      "borderRadius": "15px",
+      "borderWidth": "10px",
+      "marginBottom": "10px",
+      "marginLeft": "10px",
+      "marginRight": "10px",
+      "marginTop": "10px",
+      "minHeight": "40px",
+      "paddingBottom": "10px",
+      "paddingLeft": "10px",
+      "paddingRight": "10px",
+      "paddingTop": "10px",
+      "textAlign": "right",
+    }
+  }
+>
+  <mock-CmsDynamicBlockGroup
+    uids="uids"
+  />
+</div>
+`;
+
+exports[`#PageBuilder DynamicBlock EE renders a Dynamic Block component without custom classes 1`] = `
+<div
+  aria-busy="false"
+  aria-live="polite"
+  className=""
+  style={
+    Object {
+      "border": "solid",
+      "borderColor": "red",
+      "borderRadius": "15px",
+      "borderWidth": "10px",
+      "marginBottom": "10px",
+      "marginLeft": "10px",
+      "marginRight": "10px",
+      "marginTop": "10px",
+      "minHeight": "40px",
+      "paddingBottom": "10px",
+      "paddingLeft": "10px",
+      "paddingRight": "10px",
+      "paddingTop": "10px",
+      "textAlign": "right",
+    }
+  }
+>
+  <mock-CmsDynamicBlockGroup
+    uids="uids"
+  />
+</div>
+`;

package/lib/ContentTypes/DynamicBlock/__tests__/__snapshots__/dynamicBlock.shimmer.spec.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a DynamicBlockShimmer component with minHeight 1`] = `
+<div
+  aria-busy="true"
+  aria-live="polite"
+  style={
+    Object {
+      "marginBottom": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginTop": undefined,
+      "minHeight": "40px",
+    }
+  }
+>
+  <div
+    className=" "
+    style={Object {}}
+  >
+    <div
+      style={
+        Object {
+          "border": undefined,
+          "borderWidth": undefined,
+          "paddingBottom": undefined,
+          "paddingLeft": undefined,
+          "paddingRight": undefined,
+          "paddingTop": undefined,
+        }
+      }
+    >
+      <div>
+        <div />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/lib/ContentTypes/DynamicBlock/__tests__/configAggregator.spec.js

@@ -0,0 +1,49 @@
+import configAggregator from '../configAggregator';
+
+test('dynamic block config aggregator does not render if widget block is not present', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div data-content-type="dynamic_block" data-appearance="default" data-element="main"></div>`;
+
+    const aggregatedConfig = configAggregator(node.childNodes[0]);
+
+    expect(aggregatedConfig).toEqual({});
+});
+
+test('dynamic block config aggregator does not render if no uids is found', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div data-content-type="dynamic_block" data-appearance="default" data-element="main"><div class="widget block block-banners" data-banner-id="1" data-types="" data-display-mode="fixed" data-ids="1" data-rotate="" data-store-id="1" data-banner-name="Block 1" data-banner-status="Enabled"></div></div>`;
+
+    const aggregatedConfig = configAggregator(node.childNodes[0]);
+
+    expect(aggregatedConfig).toEqual({});
+});
+
+test('dynamic block config aggregator retrieves data and display block', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div data-content-type="dynamic_block" data-appearance="default" data-element="main"><div class="widget block block-banners" data-banner-id="1" data-types="" data-display-mode="fixed" data-ids="1" data-rotate="" data-store-id="1" data-banner-name="Block 1" data-banner-status="Enabled" data-uids="uids"></div></div>`;
+
+    const aggregatedConfig = configAggregator(node.childNodes[0]);
+
+    expect(aggregatedConfig).toEqual(
+        expect.objectContaining({
+            displayInline: false,
+            displayMode: 'fixed',
+            uids: 'uids'
+        })
+    );
+});
+
+test('dynamic block config aggregator retrieves data and display inline', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div data-content-type="dynamic_block" data-appearance="default" data-element="main"><div class="widget block block-banners-inline" data-banner-id="2" data-types="" data-display-mode="fixed" data-ids="2" data-rotate="" data-store-id="2" data-banner-name="Block 2" data-banner-status="Enabled" data-uids="uids"></div></div>`;
+
+    const aggregatedConfig = configAggregator(node.childNodes[0]);
+
+    expect(aggregatedConfig).toEqual(
+        expect.objectContaining({
+            displayInline: true,
+            displayMode: 'fixed',
+            uids: 'uids'
+        })
+    );
+});

package/lib/ContentTypes/DynamicBlock/__tests__/dynamicBlock.ce.spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import DynamicBlock from '../dynamicBlock.ce';
+
+const Component = () => {
+    return <DynamicBlock />;
+};
+
+describe('#PageBuilder DynamicBlock CE', () => {
+    it('renders', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/ContentTypes/DynamicBlock/__tests__/dynamicBlock.ee.spec.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+import { DISPLAY_MODE_FIXED_TYPE } from '@magento/venia-ui/lib/components/CmsDynamicBlock';
+
+import DynamicBlock from '../dynamicBlock.ee';
+
+jest.mock('@magento/venia-ui/lib/components/CmsDynamicBlock', () => props => (
+    <mock-CmsDynamicBlockGroup {...props} />
+));
+
+const defaultProps = {
+    displayInline: false,
+    displayMode: DISPLAY_MODE_FIXED_TYPE,
+    uids: 'uids',
+    textAlign: 'right',
+    border: 'solid',
+    borderColor: 'red',
+    borderWidth: '10px',
+    borderRadius: '15px',
+    marginTop: '10px',
+    marginRight: '10px',
+    marginBottom: '10px',
+    marginLeft: '10px',
+    minHeight: '40px',
+    paddingTop: '10px',
+    paddingRight: '10px',
+    paddingBottom: '10px',
+    paddingLeft: '10px'
+};
+
+describe('#PageBuilder DynamicBlock EE', () => {
+    it('renders a Dynamic Block component without custom classes', () => {
+        const component = createTestInstance(
+            <DynamicBlock {...defaultProps} />
+        );
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders a Dynamic Block component with custom classes', () => {
+        const blockProps = {
+            ...defaultProps,
+            cssClasses: ['test-class']
+        };
+        const component = createTestInstance(<DynamicBlock {...blockProps} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders a Dynamic Block component inlined', () => {
+        const blockProps = {
+            ...defaultProps,
+            displayInline: true
+        };
+        const component = createTestInstance(<DynamicBlock {...blockProps} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('does not render a Dynamic Block component when no uids are provided', () => {
+        const blockProps = {
+            ...defaultProps,
+            uids: undefined
+        };
+        const component = createTestInstance(<DynamicBlock {...blockProps} />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/ContentTypes/DynamicBlock/__tests__/dynamicBlock.shimmer.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import DynamicBlockShimmer from '../dynamicBlock.shimmer';
+
+test('dynamicBlockShimmer should not render if minHeight not specified', () => {
+    const component = createTestInstance(<DynamicBlockShimmer />);
+
+    expect(component.toJSON()).toBe(null);
+});
+
+test('renders a DynamicBlockShimmer component with minHeight', () => {
+    const props = {
+        minHeight: '40px'
+    };
+    const component = createTestInstance(<DynamicBlockShimmer {...props} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});

package/lib/ContentTypes/DynamicBlock/configAggregator.js

@@ -0,0 +1,25 @@
+import { getAdvanced } from '../../utils';
+
+export default node => {
+    const widgetBlock = node.childNodes[0];
+
+    if (
+        !widgetBlock ||
+        (widgetBlock && !widgetBlock.getAttribute('data-uids'))
+    ) {
+        return {};
+    }
+
+    // dynamicBlock shimmer uses minHeight from closest row
+    const row = widgetBlock.closest('[data-content-type="row"]')?.firstChild;
+
+    return {
+        minHeight: row && row.style.minHeight ? row.style.minHeight : null,
+        displayInline: widgetBlock
+            .getAttribute('class')
+            .includes('block-banners-inline'),
+        displayMode: widgetBlock.getAttribute('data-display-mode'),
+        uids: widgetBlock.getAttribute('data-uids'),
+        ...getAdvanced(node)
+    };
+};

package/lib/ContentTypes/DynamicBlock/dynamicBlock.ce.js

@@ -0,0 +1,5 @@
+/**
+ * Dynamic Block is an EE-only feature for now.
+ * Here in CE, don't render the component at all.
+ */
+export default () => null;