@magento/pagebuilder 7.1.0 → 7.2.0

package/lib/ContentTypes/Slider/slider.shimmer.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { arrayOf, bool, shape, string } from 'prop-types';
+import { arrayOf, bool, shape, string, object } from 'prop-types';
 import defaultClasses from './slider.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 Slider Shimmer component.
@@ -25,6 +26,7 @@ const SliderShimmer = props => {
         marginRight = 0,
         marginBottom = 0,
         marginLeft = 0,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -32,8 +34,10 @@ const SliderShimmer = props => {
         cssClasses = []
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     const dynamicStyles = {
-        minHeight,
+        minHeight: mediaQueryStyles?.minHeight || minHeight,
         border,
         borderWidth,
         marginTop,
@@ -86,6 +90,7 @@ const SliderShimmer = 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
@@ -105,6 +110,12 @@ SliderShimmer.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,

package/lib/ContentTypes/TabItem/configAggregator.js

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

package/lib/ContentTypes/TabItem/tabItem.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { verticalAlignmentToFlex } from '../../utils';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './tabItem.module.css';
-import { arrayOf, oneOf, shape, string } from 'prop-types';
+import { arrayOf, oneOf, shape, string, object } from 'prop-types';
 
 const { matchMedia } = globalThis;
 
@@ -40,6 +41,7 @@ const TabItem = props => {
         marginRight,
         marginBottom,
         marginLeft,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -48,6 +50,8 @@ const TabItem = props => {
         cssClasses = []
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     let image = desktopImage;
     if (mobileImage && matchMedia && matchMedia('(max-width: 768px)').matches) {
         image = mobileImage;
@@ -94,7 +98,7 @@ const TabItem = props => {
 
     return (
         <div
-            style={dynamicStyles}
+            style={{ ...dynamicStyles, ...mediaQueryStyles }}
             className={[cssClasses, classes.root].join(' ')}
         >
             {children}
@@ -128,6 +132,7 @@ const TabItem = 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
@@ -157,6 +162,12 @@ TabItem.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,

package/lib/ContentTypes/Tabs/configAggregator.js

@@ -5,7 +5,8 @@ import {
     getMargin,
     getPadding,
     getTextAlign,
-    getVerticalAlignment
+    getVerticalAlignment,
+    getMediaQueries
 } from '../../utils';
 
 export default node => {
@@ -33,6 +34,7 @@ export default node => {
         ...getPadding(node),
         ...getBorder(contentEl),
         ...getIsHidden(node),
-        ...getCssClasses(node)
+        ...getCssClasses(node),
+        ...getMediaQueries(contentEl)
     };
 };

package/lib/ContentTypes/Tabs/tabs.js

@@ -13,7 +13,8 @@ import {
 } from 'react-tabs';
 import defaultClasses from './tabs.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import { arrayOf, number, oneOf, shape, string } from 'prop-types';
+import { useMediaQuery } from '@magento/peregrine/lib/hooks/useMediaQuery';
+import { arrayOf, number, oneOf, shape, string, object } from 'prop-types';
 
 /**
  * Upper case the first letter of a string
@@ -62,6 +63,7 @@ const Tabs = props => {
         marginRight,
         marginBottom,
         marginLeft,
+        mediaQueries,
         paddingTop,
         paddingRight,
         paddingBottom,
@@ -70,6 +72,8 @@ const Tabs = props => {
         children
     } = props;
 
+    const { styles: mediaQueryStyles } = useMediaQuery({ mediaQueries });
+
     const handleMouseDown = useCallback(event => {
         isScrolling.current = true;
         clientX.current = event.clientX;
@@ -94,6 +98,9 @@ const Tabs = props => {
     const handleScroll = useCallback(
         event => {
             const navScrollElement = event.target;
+            // Sync scrollLeft
+            scrollX.current = event.target.scrollLeft;
+
             if (navScrollElement.scrollLeft > 0) {
                 // If we've scrolled to the end of the scrollable element we only display a left gradient
                 if (
@@ -220,7 +227,10 @@ const Tabs = props => {
                     {tabHeaders}
                 </TabList>
             </div>
-            <div className={contentClass} style={contentStyles}>
+            <div
+                className={contentClass}
+                style={{ ...contentStyles, ...mediaQueryStyles }}
+            >
                 {tabPanels}
             </div>
         </TabWrapper>
@@ -261,6 +271,7 @@ const Tabs = 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
@@ -298,6 +309,12 @@ Tabs.propTypes = {
     marginRight: string,
     marginBottom: string,
     marginLeft: string,
+    mediaQueries: arrayOf(
+        shape({
+            media: string,
+            style: object
+        })
+    ),
     paddingTop: string,
     paddingRight: string,
     paddingBottom: string,

package/lib/__tests__/parseStorageHtml.spec.js

@@ -75,3 +75,38 @@ test('convert to inline styles', () => {
     getElementsByTagNameSpy.mockRestore();
     setAttributeSpy.mockRestore();
 });
+
+test('saves media query styles into data attributes', () => {
+    const styleSheet = new CSSStyleSheet();
+    styleSheet.insertRule(
+        '#html-body [data-pb-style=D119W07] { color: transparent }',
+        0
+    );
+    styleSheet.insertRule(
+        '@media only screen and (max-width: 768px) { #html-body [data-pb-style=D119W07] { min-height: 100px }}',
+        1
+    );
+    const getElementsByTagNameSpy = jest
+        .spyOn(Document.prototype, 'getElementsByTagName')
+        .mockReturnValueOnce([
+            {
+                sheet: styleSheet
+            }
+        ]);
+    const setAttributeSpy = jest
+        .spyOn(Element.prototype, 'setAttribute')
+        .mockImplementation();
+    parseStorageHtml(testMasterFormat);
+    expect(setAttributeSpy).toHaveBeenNthCalledWith(
+        1,
+        'data-media-0',
+        'only screen and (max-width: 768px)'
+    );
+    expect(setAttributeSpy).toHaveBeenNthCalledWith(
+        2,
+        'data-media-style-0',
+        'min-height: 100px;'
+    );
+    getElementsByTagNameSpy.mockRestore();
+    setAttributeSpy.mockRestore();
+});

package/lib/__tests__/utils.spec.js

@@ -6,7 +6,8 @@ import {
     getPadding,
     getTextAlign,
     getVerticalAlignment,
-    verticalAlignmentToFlex
+    verticalAlignmentToFlex,
+    getMediaQueries
 } from '../utils';
 
 test('can retrieve background image from node', () => {
@@ -124,3 +125,22 @@ test('can retrieve CSS classes', () => {
     node.innerHTML = '<div></div>';
     expect(getCssClasses(node.childNodes[0]).cssClasses).toEqual([]);
 });
+
+test('can retrieve mediaQueries', () => {
+    const node = document.createElement('div');
+    node.setAttribute('data-media-0', 'only screen and (min-width: 768px)');
+    node.setAttribute(
+        'data-media-style-0',
+        'display: flex; min-height: 300px;'
+    );
+    const { mediaQueries } = getMediaQueries(node);
+    expect(mediaQueries).toEqual([
+        {
+            media: 'only screen and (min-width: 768px)',
+            style: {
+                display: 'flex',
+                minHeight: '300px'
+            }
+        }
+    ]);
+});

package/lib/config.js

@@ -6,7 +6,7 @@ import Column from './ContentTypes/Column';
 import columnGroupConfigAggregator from './ContentTypes/ColumnGroup/configAggregator';
 import ColumnGroup from './ContentTypes/ColumnGroup';
 import imageConfigAggregator from './ContentTypes/Image/configAggregator';
-import Image from './ContentTypes/Image';
+import { ImageShimmer } from './ContentTypes/Image';
 import headingConfigAggregator from './ContentTypes/Heading/configAggregator';
 import Heading from './ContentTypes/Heading';
 import textConfigAggregator from './ContentTypes/Text/configAggregator';
@@ -14,6 +14,7 @@ import Text from './ContentTypes/Text';
 import tabsConfigAggregator from './ContentTypes/Tabs/configAggregator';
 import tabItemConfigAggregator from './ContentTypes/TabItem/configAggregator';
 import blockConfigAggregator from './ContentTypes/Block/configAggregator';
+import dynamicBlockConfigAggregator from './ContentTypes/DynamicBlock/configAggregator';
 import productsConfigAggregator from './ContentTypes/Products/configAggregator';
 import buttonsConfigAggregator from './ContentTypes/Buttons/configAggregator';
 import buttonItemConfigAggregator from './ContentTypes/ButtonItem/configAggregator';
@@ -26,6 +27,7 @@ import { BannerShimmer } from './ContentTypes/Banner';
 import ButtonItem from './ContentTypes/ButtonItem';
 import sliderConfigAggregator from './ContentTypes/Slider/configAggregator';
 import { SliderShimmer } from './ContentTypes/Slider';
+import { DynamicBlockShimmer } from './ContentTypes/DynamicBlock';
 
 /* istanbul ignore next */
 const contentTypesConfig = {
@@ -43,7 +45,8 @@ const contentTypesConfig = {
     },
     image: {
         configAggregator: imageConfigAggregator,
-        component: Image
+        component: React.lazy(() => import('./ContentTypes/Image')),
+        componentShimmer: ImageShimmer
     },
     heading: {
         configAggregator: headingConfigAggregator,
@@ -73,6 +76,11 @@ const contentTypesConfig = {
         configAggregator: blockConfigAggregator,
         component: React.lazy(() => import('./ContentTypes/Block'))
     },
+    dynamic_block: {
+        configAggregator: dynamicBlockConfigAggregator,
+        component: React.lazy(() => import('./ContentTypes/DynamicBlock')),
+        componentShimmer: DynamicBlockShimmer
+    },
     products: {
         configAggregator: productsConfigAggregator,
         component: React.lazy(() => import('./ContentTypes/Products'))

package/lib/parseStorageHtml.js

@@ -84,6 +84,7 @@ const bodyId = 'html-body';
 const convertToInlineStyles = document => {
     const styleBlocks = document.getElementsByTagName('style');
     const styles = {};
+    const mediaStyles = {};
 
     if (styleBlocks.length > 0) {
         Array.from(styleBlocks).forEach(styleBlock => {
@@ -100,11 +101,42 @@ const convertToInlineStyles = document => {
                         }
                         styles[selector].push(rule.style);
                     });
+                } else if (rule instanceof CSSMediaRule) {
+                    Array.from(rule.media).forEach(media => {
+                        const styles = Array.from(rule.cssRules).map(rule => {
+                            return {
+                                selectors: rule.selectorText
+                                    .split(',')
+                                    .map(selector => selector.trim()),
+                                css: rule.style.cssText
+                            };
+                        });
+                        mediaStyles[media] = styles;
+                    });
                 }
             });
         });
     }
 
+    Object.keys(mediaStyles).map((media, i) => {
+        mediaStyles[media].forEach(style => {
+            style.selectors.forEach(selector => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    element.setAttribute(`data-media-${i}`, media);
+                    const savedStyles = element.getAttribute(
+                        `data-media-style-${i}`
+                    );
+                    // avoids overwriting previously saved styles
+                    element.setAttribute(
+                        `data-media-style-${i}`,
+                        `${savedStyles ? `${savedStyles} ` : ''}${style.css}`
+                    );
+                }
+            });
+        });
+    });
+
     Object.keys(styles).map(selector => {
         const element = document.querySelector(selector);
         if (!element) {

package/lib/utils.js

@@ -173,3 +173,52 @@ export function getIsHidden(node) {
         isHidden: node.style.display === 'none'
     };
 }
+
+/**
+ * Converts a CSS string style into a JSX object inline style
+ *
+ * @param {String} style
+ * @returns {Object}
+ */
+export function cssToJSXStyle(style) {
+    const toCamelCase = str => str.replace(/-(.)/g, (_, p) => p.toUpperCase());
+    const result = {};
+    style.split(';').forEach(el => {
+        const [prop, value] = el.split(':');
+        if (prop) {
+            result[toCamelCase(prop.trim())] = value.trim();
+        }
+    });
+
+    return result;
+}
+
+/**
+ * Retrieve media queries from a master format node
+ *
+ * @param node
+ * @param {Array} mediaQueries
+ *
+ * @returns {{mediaQueries: {media: string, style: string}}}
+ */
+export function getMediaQueries(node) {
+    const response = [];
+    const dataset = Object.keys(node.dataset);
+
+    const medias = dataset
+        .filter(key => key.match(/media-/))
+        .map(key => node.dataset[key]);
+
+    const styles = dataset
+        .filter(key => key.match(/mediaStyle/))
+        .map(key => node.dataset[key]);
+
+    medias.forEach((media, i) => {
+        response.push({
+            media,
+            style: cssToJSXStyle(styles[i])
+        });
+    });
+
+    return { mediaQueries: response };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/pagebuilder",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -34,9 +34,9 @@
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/pagebuilder#readme",
   "dependencies": {},
   "devDependencies": {
-    "@magento/peregrine": "~12.2.0",
-    "@magento/pwa-buildpack": "~11.1.0",
-    "@magento/venia-ui": "~9.2.0",
+    "@magento/peregrine": "~12.3.0",
+    "@magento/pwa-buildpack": "~11.2.0",
+    "@magento/venia-ui": "~9.3.0",
     "@storybook/react": "~6.3.7",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
@@ -50,9 +50,9 @@
   "peerDependencies": {
     "@apollo/client": "~3.4.0",
     "@magento/babel-preset-peregrine": "~1.2.0",
-    "@magento/peregrine": "~12.2.0",
-    "@magento/pwa-buildpack": "~11.1.0",
-    "@magento/venia-ui": "~9.2.0",
+    "@magento/peregrine": "~12.3.0",
+    "@magento/pwa-buildpack": "~11.2.0",
+    "@magento/venia-ui": "~9.3.0",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",