PWA-3052::Page Builder column-line content type is not supported, thi…

packages/pagebuilder/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",
+    }
+  }
+/>
+`;

packages/pagebuilder/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();
+});

packages/pagebuilder/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'
+        })
+    );
+});

packages/pagebuilder/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;

packages/pagebuilder/lib/ContentTypes/ColumnLine/columnLine.module.css

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

packages/pagebuilder/lib/ContentTypes/ColumnLine/configAggregator.js

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

packages/pagebuilder/lib/ContentTypes/ColumnLine/index.js

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

packages/pagebuilder/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')),