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

package/lib/ContentTypes/Image/__tests__/image.spec.js

@@ -14,7 +14,7 @@ test('renders an empty Image component', () => {
 
 test('renders a Image component', () => {
     const imageProps = {
-        desktopImage: 'test-image.png'
+        desktopImage: { src: 'test-image.png' }
     };
     const component = createTestInstance(<Image {...imageProps} />);
 
@@ -23,8 +23,8 @@ test('renders a Image component', () => {
 
 test('renders a Image component with all props configured', () => {
     const imageProps = {
-        desktopImage: 'desktop-image.png',
-        mobileImage: 'mobile-image.png',
+        desktopImage: { src: 'desktop-image.png' },
+        mobileImage: { src: 'mobile-image.png' },
         altText: 'Alt Text',
         title: 'Title Text',
         link: 'http://www.adobe.com/',
@@ -53,7 +53,7 @@ test('renders a Image component with all props configured', () => {
 
 test('renders a Image component with openInNewTab set to false', () => {
     const imageProps = {
-        desktopImage: 'desktop-image.png',
+        desktopImage: { src: 'desktop-image.png' },
         link: 'http://www.adobe.com/',
         linkType: 'default',
         openInNewTab: false
@@ -65,7 +65,7 @@ test('renders a Image component with openInNewTab set to false', () => {
 
 test('renders a Image component with only mobile image', () => {
     const imageProps = {
-        mobileImage: 'mobile-image.png'
+        mobileImage: { src: 'mobile-image.png' }
     };
     const component = createTestInstance(<Image {...imageProps} />);
 

package/lib/ContentTypes/Image/configAggregator.js

@@ -4,7 +4,8 @@ import {
     getIsHidden,
     getMargin,
     getPadding,
-    getTextAlign
+    getTextAlign,
+    getMediaQueries
 } from '../../utils';
 
 export default node => {
@@ -17,35 +18,67 @@ export default node => {
             ? node.childNodes[0].childNodes
             : node.childNodes;
 
-    const mobileImageSrc = () => {
-        if (imageNode[1]) {
-            return imageNode[1].getAttribute('src');
+    const getImageData = imageNode => {
+        let imageDimension = null;
+        try {
+            imageDimension = JSON.parse(
+                imageNode.getAttribute('data-image-dimensions')
+            );
+        } catch (e) {
+            // Do nothing
         }
-        if (imageNode[0]) {
-            return imageNode[0].getAttribute('src');
+        return {
+            src: imageNode.getAttribute('src'),
+            dimensions: imageDimension
+        };
+    };
+
+    const getImageProps = () => {
+        const image = imageNode[0];
+        let imageProps = {
+            desktopImage: null,
+            mobileImage: null,
+            altText: null,
+            title: null
+        };
+        if (image) {
+            const imageData = getImageData(image);
+            if (image.getAttribute('data-element') === 'desktop_image') {
+                imageProps.desktopImage = imageData;
+                const image2 = imageNode[1];
+                if (
+                    image2.getAttribute('data-element') === 'mobile_image' &&
+                    image2.getAttribute('src') !== imageData.src
+                ) {
+                    imageProps.mobileImage = getImageData(image2);
+                }
+            } else {
+                // If there is no desktop image
+                imageProps.mobileImage = imageData;
+            }
+            imageProps.altText = image.getAttribute('alt');
+            imageProps.title = image.getAttribute('title');
+            imageProps = {
+                ...imageProps,
+                ...getBorder(image)
+            };
         }
-        return null;
+
+        return imageProps;
     };
 
     const props = {
-        desktopImage:
-            imageNode[0] && imageNode[1]
-                ? imageNode[0].getAttribute('src')
-                : null,
-        mobileImage: mobileImageSrc(),
-        altText: imageNode[0] ? imageNode[0].getAttribute('alt') : null,
-        title: imageNode[0] ? imageNode[0].getAttribute('title') : null,
+        ...getImageProps(),
         openInNewTab: node.childNodes[0].getAttribute('target') === '_blank',
         ...getPadding(node),
         ...getMargin(node),
         ...(imageNode[0] ? getBorder(imageNode[0]) : []),
         ...getCssClasses(node),
         ...getTextAlign(node),
-        ...getIsHidden(node)
+        ...getIsHidden(node),
+        ...getMediaQueries(node)
     };
-    if (props.desktopImage === props.mobileImage) {
-        props.mobileImage = null;
-    }
+
     if (node.childNodes[0].nodeName === 'A') {
         props.link = node.childNodes[0].getAttribute('href');
         props.linkType = node.childNodes[0].getAttribute('data-link-type');

package/lib/ContentTypes/Image/image.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import defaultClasses from './image.module.css';
-import { arrayOf, bool, oneOf, shape, string } from 'prop-types';
+import { arrayOf, bool, oneOf, shape, string, number } from 'prop-types';
 import { Link } from 'react-router-dom';
 import resolveLinkProps from '../../resolveLinkProps';
 import { useStyle } from '@magento/venia-ui/lib/classify';
@@ -67,10 +67,10 @@ const Image = props => {
         return null;
     }
 
-    const SourceFragment = mobileImage ? (
+    const MobileSourceFragment = mobileImage ? (
         <source
             media="(max-width: 48rem)"
-            srcSet={resourceUrl(mobileImage, {
+            srcSet={resourceUrl(mobileImage.src, {
                 type: 'image-wysiwyg',
                 quality: 85
             })}
@@ -80,7 +80,7 @@ const Image = props => {
     );
 
     const imgSrc = desktopImage
-        ? resourceUrl(desktopImage, {
+        ? resourceUrl(desktopImage.src, {
               type: 'image-wysiwyg',
               quality: 85
           })
@@ -94,7 +94,7 @@ const Image = props => {
     const PictureFragment = (
         <>
             <picture>
-                {SourceFragment}
+                {MobileSourceFragment}
                 <img
                     className={imgClassName}
                     srcSet={`${imgSrc} 1x`}
@@ -115,6 +115,7 @@ const Image = props => {
 
         return (
             <figure
+                data-cy="PageBuilder-Image-root"
                 style={figureStyles}
                 className={[classes.root, ...cssClasses].join(' ')}
             >
@@ -129,6 +130,7 @@ const Image = props => {
     } else {
         return (
             <figure
+                data-cy="PageBuilder-Image-root"
                 style={figureStyles}
                 className={[classes.root, ...cssClasses].join(' ')}
             >
@@ -145,8 +147,8 @@ const Image = props => {
  *
  * @property {Object} classes An object containing the class names for the Image
  * @property {String} classes.img CSS classes for the img element
- * @property {String} desktopImage URL src of the desktop image
- * @property {String} mobileImage URL src of the mobile image
+ * @property {Object} desktopImage desktop image URL src and dimensions
+ * @property {Object} mobileImage mobile image URL src and dimensions
  * @property {String} altText Alternate text
  * @property {String} title Title of the image
  * @property {String} link URL to redirect to
@@ -174,8 +176,22 @@ Image.propTypes = {
         img: string,
         mobileOnly: string
     }),
-    desktopImage: string,
-    mobileImage: string,
+    desktopImage: shape({
+        src: string,
+        dimensions: shape({
+            height: number,
+            ratio: number,
+            width: number
+        })
+    }),
+    mobileImage: shape({
+        src: string,
+        dimensions: shape({
+            height: number,
+            ratio: number,
+            width: number
+        })
+    }),
     altText: string,
     title: string,
     link: string,

package/lib/ContentTypes/Image/image.module.css

@@ -3,6 +3,8 @@
 }
 .img {
     max-width: 100%;
+    vertical-align: middle;
+    display: inline-block;
 }
 
 @media (min-width: 48rem) {

package/lib/ContentTypes/Image/image.shimmer.js

@@ -0,0 +1,191 @@
+import React, { useMemo, useRef, useEffect } from 'react';
+import { arrayOf, shape, string, number } from 'prop-types';
+import defaultClasses from './image.shimmer.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+/**
+ * Page Builder Image Shimmer component.
+ *
+ * @typedef ImageShimmer
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element|null} A React component that displays an Image Shimmer.
+ */
+const ImageShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        desktopImage,
+        mobileImage,
+        textAlign,
+        border,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        cssClasses = []
+    } = props;
+
+    const figureStyles = {
+        textAlign,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft
+    };
+    const imageStyles = {
+        border,
+        borderColor,
+        borderWidth,
+        borderRadius
+    };
+
+    const figureRef = useRef();
+
+    const dimensions = useMemo(() => {
+        const value = {
+            height: 0,
+            width: 0
+        };
+        if (
+            window.matchMedia('(max-width: 48rem)').matches &&
+            mobileImage &&
+            mobileImage.dimensions
+        ) {
+            value.width = mobileImage.dimensions.width;
+            value.height = mobileImage.dimensions.height;
+        } else if (desktopImage && desktopImage.dimensions) {
+            value.width = desktopImage.dimensions.width;
+            value.height = desktopImage.dimensions.height;
+        } else {
+            return null;
+        }
+        return value;
+    }, [desktopImage, mobileImage]);
+
+    useEffect(() => {
+        if (figureRef.current) {
+            const width = figureRef.current.offsetWidth;
+            if (dimensions.width > width) {
+                if (
+                    window.matchMedia('(max-width: 48rem)').matches &&
+                    mobileImage &&
+                    mobileImage.dimensions
+                ) {
+                    dimensions.width = width;
+                    dimensions.height =
+                        dimensions.width * mobileImage.dimensions.ratio;
+                } else if (desktopImage && desktopImage.dimensions) {
+                    dimensions.width = width;
+                    dimensions.height =
+                        dimensions.width * desktopImage.dimensions.ratio;
+                }
+            }
+        }
+    }, [desktopImage, dimensions, mobileImage]);
+
+    if (!dimensions) {
+        return null;
+    }
+
+    return (
+        <figure style={figureStyles} ref={figureRef}>
+            <Shimmer
+                aria-live="polite"
+                aria-busy="true"
+                classes={{
+                    root_rectangle: [
+                        classes.root,
+                        classes.shimmerRoot,
+                        ...cssClasses
+                    ].join(' ')
+                }}
+                style={imageStyles}
+                height={dimensions.height + 'px'}
+                width={dimensions.width + 'px'}
+            />
+        </figure>
+    );
+};
+
+/**
+ * Props for {@link ImageShimmer}
+ *
+ * * @typedef props
+ *  *
+ *  * @property {Object} classes An object containing the class names for the Image
+ *  * @property {String} classes.img CSS classes for the img element
+ *  * @property {Object} desktopImage desktop image URL src and dimensions
+ *  * @property {Object} mobileImage mobile image URL src and dimensions
+ *  * @property {String} altText Alternate text
+ *  * @property {String} textAlign Alignment of the divider within the parent container
+ *  * @property {String} border CSS border property
+ *  * @property {String} borderColor CSS border color property
+ *  * @property {String} borderWidth CSS border width property
+ *  * @property {String} borderRadius CSS border radius property
+ *  * @property {String} marginTop CSS margin top property
+ *  * @property {String} marginRight CSS margin right property
+ *  * @property {String} marginBottom CSS margin bottom property
+ *  * @property {String} marginLeft CSS margin left property
+ *  * @property {String} paddingTop CSS padding top property
+ *  * @property {String} paddingRight CSS padding right property
+ *  * @property {String} paddingBottom CSS padding bottom property
+ *  * @property {String} paddingLeft CSS padding left property
+ *  * @property {Array} cssClasses List of CSS classes to be applied to the component
+ *  */
+ImageShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        shimmerRoot: string,
+        overlay: string,
+        content: string,
+        wrapper: string,
+        img: string,
+        mobileOnly: string
+    }),
+    desktopImage: shape({
+        src: string,
+        dimensions: shape({
+            height: number,
+            ratio: number,
+            width: number
+        })
+    }),
+    mobileImage: shape({
+        src: string,
+        dimensions: shape({
+            height: number,
+            ratio: number,
+            width: number
+        })
+    }),
+    altText: string,
+    textAlign: string,
+    border: string,
+    borderColor: string,
+    borderWidth: string,
+    borderRadius: string,
+    marginTop: string,
+    marginRight: string,
+    marginBottom: string,
+    marginLeft: string,
+    paddingTop: string,
+    paddingRight: string,
+    paddingBottom: string,
+    cssClasses: arrayOf(string)
+};
+
+export default ImageShimmer;

package/lib/ContentTypes/Image/image.shimmer.module.css

@@ -0,0 +1,5 @@
+.shimmerRoot {
+    composes: root_rectangle from '~@magento/venia-ui/lib/components/Shimmer/shimmer.module.css';
+    composes: root img from './image.module.css';
+    margin: 1rem 0;
+}

package/lib/ContentTypes/Image/index.js

@@ -1 +1,2 @@
 export { default } from './image';
+export { default as ImageShimmer } from './image.shimmer';

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

@@ -93,3 +93,21 @@ test('config is aggregated correctly for row appearance == full-width with video
         })
     );
 });
+
+test('config is aggregated correctly for row containing dynamic block', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div data-content-type="row" data-appearance="contained" data-element="main"><div class="class1 class2" data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-element="inner" style="justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; text-align: right; border-style: dashed; border-color: rgb(252, 0, 9); border-width: 20px; border-radius: 30px; margin: 5px; padding: 10px; min-height: 40px;"><div data-content-type="dynamic_block" data-appearance="default" data-element="main">{{widget type="Magento\\Banner\\Block\\Widget\\Banner" display_mode="fixed" rotate="" template="widget/block.phtml" banner_ids="2" unique_id="2" type_name="Dynamic Blocks Rotator"}}</div></div></div>`;
+    const config = configAggregator(node.childNodes[0], {
+        appearance: 'contained'
+    });
+
+    // minHeight should be null, minHeight is managed by dynamicBlock
+    expect(config).toEqual(
+        expect.objectContaining({
+            minHeight: null,
+            backgroundColor: null,
+            enableParallax: false,
+            parallaxSpeed: 0.5
+        })
+    );
+});

package/lib/ContentTypes/Row/__tests__/row.spec.js

@@ -75,7 +75,8 @@ test('render row with parallax initializes JarallaxVideo', () => {
         videoLazyLoading: true,
         videoLoop: true,
         videoPlayOnlyVisible: true,
-        videoSrc: 'https://example.video'
+        videoSrc: 'https://example.video',
+        zIndex: 'auto'
     });
 });
 

package/lib/ContentTypes/Row/configAggregator.js

@@ -2,7 +2,8 @@ import {
     getAdvanced,
     getBackgroundImages,
     getVerticalAlignment,
-    getIsHidden
+    getIsHidden,
+    getMediaQueries
 } from '../../utils';
 
 export default (node, props) => {
@@ -16,8 +17,16 @@ export default (node, props) => {
             : dataNode.childNodes[0] &&
               dataNode.childNodes[0].getAttribute('data-video-overlay-color');
 
+    const minHeight = dataNode.style.minHeight
+        ? dataNode.style.minHeight
+        : null;
+
+    const containsDynamicBlock = [...dataNode.childNodes].some(e => {
+        return e.getAttribute('data-content-type') === 'dynamic_block';
+    });
+
     return {
-        minHeight: dataNode.style.minHeight ? dataNode.style.minHeight : null,
+        minHeight: containsDynamicBlock ? null : minHeight,
         ...getVerticalAlignment(dataNode),
         backgroundColor: dataNode.style.backgroundColor
             ? dataNode.style.backgroundColor
@@ -35,6 +44,7 @@ export default (node, props) => {
             dataNode.getAttribute('data-video-lazy-load') === 'true',
         videoOverlayColor: videoOverlayColor || null,
         ...getAdvanced(dataNode),
-        ...getIsHidden(node)
+        ...getIsHidden(node),
+        ...getMediaQueries(dataNode)
     };
 };

package/lib/ContentTypes/Row/row.js

@@ -2,9 +2,18 @@ import React, { useEffect, useRef, useState } from 'react';
 import defaultClasses from './row.module.css';
 import { verticalAlignmentToFlex } from '../../utils';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import { arrayOf, oneOf, shape, bool, string, number } from 'prop-types';
+import {
+    arrayOf,
+    oneOf,
+    shape,
+    bool,
+    string,
+    number,
+    object
+} from 'prop-types';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { useDetectScrollWidth } from '@magento/peregrine/lib/hooks/useDetectScrollWidth';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 
 const { matchMedia } = globalThis;
 
@@ -24,6 +33,7 @@ const Row = props => {
     const backgroundElement = useRef(null);
     const [bgImageStyle, setBgImageStyle] = useState(null);
     const classes = useStyle(defaultClasses, props.classes);
+
     const {
         appearance,
         verticalAlignment,
@@ -46,6 +56,7 @@ const Row = props => {
         marginRight,
         marginBottom,
         marginLeft,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -61,6 +72,8 @@ const Row = props => {
         videoOverlayColor
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     let image = desktopImage;
     if (mobileImage && matchMedia && matchMedia('(max-width: 768px)').matches) {
         image = mobileImage;
@@ -171,7 +184,8 @@ const Row = props => {
                 videoSrc,
                 videoLoop,
                 videoPlayOnlyVisible,
-                videoLazyLoading
+                videoLazyLoading,
+                zIndex: 'auto'
             });
 
             parallaxElement.jarallax.video &&
@@ -218,6 +232,7 @@ const Row = props => {
                 ref={backgroundElement}
                 style={{
                     ...dynamicStyles,
+                    ...mediaQueryStyles,
                     marginLeft: null,
                     marginRight: null,
                     '--pbRowMarginLeft': marginLeft,
@@ -241,6 +256,7 @@ const Row = props => {
                 ref={backgroundElement}
                 style={{
                     ...dynamicStyles,
+                    ...mediaQueryStyles,
                     marginLeft: null,
                     marginRight: null,
                     '--pbRowMarginLeft': marginLeft,
@@ -263,7 +279,7 @@ const Row = props => {
             <div
                 ref={backgroundElement}
                 className={classes.inner}
-                style={dynamicStyles}
+                style={{ ...dynamicStyles, ...mediaQueryStyles }}
             >
                 {videoOverlay}
                 {children}
@@ -301,6 +317,7 @@ const Row = 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
@@ -343,6 +360,12 @@ Row.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,

package/lib/ContentTypes/Slider/configAggregator.js

@@ -1,4 +1,4 @@
-import { getAdvanced } from '../../utils';
+import { getAdvanced, getMediaQueries } from '../../utils';
 
 export default node => {
     const autoplaySpeed = parseInt(node.getAttribute('data-autoplay-speed'));
@@ -11,6 +11,7 @@ export default node => {
         showArrows: node.getAttribute('data-show-arrows') === 'true',
         showDots: node.getAttribute('data-show-dots') === 'true',
         ...(!isNaN(autoplaySpeed) && { autoplaySpeed }),
-        ...getAdvanced(node)
+        ...getAdvanced(node),
+        ...getMediaQueries(node)
     };
 };

package/lib/ContentTypes/Slider/slider.js

@@ -1,8 +1,17 @@
 import React, { Children } from 'react';
-import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
+import {
+    arrayOf,
+    bool,
+    number,
+    oneOf,
+    shape,
+    string,
+    object
+} from 'prop-types';
 import SlickSlider from 'react-slick';
 import defaultClasses from './slider.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 import { jarallax } from 'jarallax';
 
 /**
@@ -37,6 +46,7 @@ const Slider = props => {
         marginRight,
         marginBottom,
         marginLeft,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -45,6 +55,8 @@ const Slider = props => {
         children
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     const dynamicStyles = {
         minHeight,
         textAlign,
@@ -101,7 +113,7 @@ const Slider = props => {
             aria-live="polite"
             aria-busy="false"
             className={[classes.root, ...cssClasses].join(' ')}
-            style={dynamicStyles}
+            style={{ ...dynamicStyles, ...mediaQueryStyles }}
         >
             <SlickSlider {...sliderSettings}>{children}</SlickSlider>
         </div>
@@ -135,6 +147,7 @@ const Slider = 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
@@ -166,6 +179,12 @@ Slider.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,