@magento/pagebuilder 8.0.0 → 8.1.0-alpha.1

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

@@ -303,12 +303,7 @@ exports[`renders a configured collage-left Banner component on mobile 1`] = `
       className="wrapper"
       style={
         Object {
-          "backgroundAttachment": "scroll",
           "backgroundColor": "blue",
-          "backgroundImage": "url(null)",
-          "backgroundPosition": "center center",
-          "backgroundRepeat": "no-repeat",
-          "backgroundSize": "cover",
           "border": "solid",
           "borderColor": "rgb(0,0,0)",
           "borderRadius": "15px",

package/lib/ContentTypes/Banner/banner.js

@@ -160,7 +160,7 @@ const Banner = props => {
     ]);
     /* eslint-enable react-hooks/exhaustive-deps */
 
-    if (image) {
+    if (image && bgImageStyle) {
         wrapperStyles.backgroundImage = `url(${bgImageStyle})`;
         wrapperStyles.backgroundSize = backgroundSize;
         wrapperStyles.backgroundPosition = backgroundPosition;

package/lib/ContentTypes/ColumnLine/__tests__/__snapshots__/columnLine.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a ColumnLine component 1`] = `
+<div
+  style={
+    Object {
+      "display": undefined,
+    }
+  }
+/>
+`;
+
+exports[`renders a ColumnLine component with all props configured 1`] = `
+<div
+  style={
+    Object {
+      "display": "flex",
+    }
+  }
+/>
+`;

package/lib/ContentTypes/ColumnLine/__tests__/columnLine.spec.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import ColumnLine from '../columnLine';
+
+test('renders a ColumnLine component', () => {
+    const component = createTestInstance(<ColumnLine />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('renders a ColumnLine component with all props configured', () => {
+    const columnLineProps = {
+        display: 'flex'
+    };
+    const component = createTestInstance(<ColumnLine {...columnLineProps} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,13 @@
+import configAggregator from '../configAggregator';
+
+test('columnLine config is aggregated correctly retrieving display property', () => {
+    const node = document.createElement('div');
+    node.innerHTML = `<div class="pagebuilder-column-line" style="display:flex;" data-content-type="column-line" 
+        data-grid-size="12" data-element="main"></div>`;
+
+    expect(configAggregator(node.childNodes[0])).toEqual(
+        expect.objectContaining({
+            display: 'flex'
+        })
+    );
+});

package/lib/ContentTypes/ColumnLine/columnLine.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import defaultClasses from './columnLine.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { shape, string } from 'prop-types';
+
+/**
+ * Page Builder ColumnLine component.
+ *
+ * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
+ *
+ * @typedef ColumnLine
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that wraps {@link Column} components.
+ */
+const ColumnLine = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { display, children } = props;
+    const dynamicStyles = {
+        display
+    };
+
+    return (
+        <div style={dynamicStyles} className={classes.root}>
+            {children}
+        </div>
+    );
+};
+
+/**
+ * Props for {@link ColumnLine}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the ColumnLine
+ * @property {String} classes.root CSS classes for the root container element
+ * @property {String} display CSS display property
+ */
+ColumnLine.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    display: string
+};
+
+export default ColumnLine;

package/lib/ContentTypes/ColumnLine/columnLine.module.css

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 768px) {
+    .root {
+        flex-wrap: wrap;
+    }
+}

package/lib/ContentTypes/ColumnLine/configAggregator.js

@@ -0,0 +1,5 @@
+export default node => {
+    return {
+        display: node.style.display
+    };
+};

package/lib/ContentTypes/ColumnLine/index.js

@@ -0,0 +1 @@
+export { default } from './columnLine';

package/lib/config.js

@@ -5,6 +5,8 @@ import columnConfigAggregator from './ContentTypes/Column/configAggregator';
 import Column from './ContentTypes/Column';
 import columnGroupConfigAggregator from './ContentTypes/ColumnGroup/configAggregator';
 import ColumnGroup from './ContentTypes/ColumnGroup';
+import columnLineConfigAggregator from './ContentTypes/ColumnLine/configAggregator';
+import ColumnLine from './ContentTypes/ColumnLine';
 import imageConfigAggregator from './ContentTypes/Image/configAggregator';
 import { ImageShimmer } from './ContentTypes/Image';
 import headingConfigAggregator from './ContentTypes/Heading/configAggregator';
@@ -43,6 +45,10 @@ const contentTypesConfig = {
         configAggregator: columnGroupConfigAggregator,
         component: ColumnGroup
     },
+    'column-line': {
+        configAggregator: columnLineConfigAggregator,
+        component: ColumnLine
+    },
     image: {
         configAggregator: imageConfigAggregator,
         component: React.lazy(() => import('./ContentTypes/Image')),

package/lib/handleHtmlContentClick.js

@@ -18,10 +18,10 @@ const handleHtmlContentClick = (history, event) => {
         event.preventDefault();
 
         const eventOrigin = event.view.location.origin;
-
         const {
             origin: linkOrigin,
             pathname: path,
+            search: query,
             target: tabTarget,
             href
         } = target;
@@ -29,7 +29,11 @@ const handleHtmlContentClick = (history, event) => {
         if (tabTarget && globalThis.open) {
             globalThis.open(href, '_blank');
         } else if (linkOrigin === eventOrigin) {
-            history.push(path);
+            if (query) {
+                history.push(path + query);
+            } else {
+                history.push(path);
+            }
         } else {
             globalThis.location.assign(href);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/pagebuilder",
-  "version": "8.0.0",
+  "version": "8.1.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -34,9 +34,9 @@
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/pagebuilder#readme",
   "dependencies": {},
   "devDependencies": {
-    "@magento/peregrine": "~13.0.0",
+    "@magento/peregrine": "13.0.1-alpha.1",
     "@magento/pwa-buildpack": "~11.4.1",
-    "@magento/venia-ui": "~10.0.0",
+    "@magento/venia-ui": "10.1.0-alpha.1",
     "@storybook/react": "~6.3.7",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
@@ -50,9 +50,9 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.2.2",
-    "@magento/peregrine": "~13.0.0",
+    "@magento/peregrine": "13.0.1-alpha.1",
     "@magento/pwa-buildpack": "~11.4.1",
-    "@magento/venia-ui": "~10.0.0",
+    "@magento/venia-ui": "10.1.0-alpha.1",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",