MC-407: Empty banner displays on store front as big empty area

- Added converter and previe converters to set display none on condition
- Updated banner appearances to use the display converters

Author: Michael Yu

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/converter/style/display.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import {ConverterInterface} from "../../../../converter/converter-interface";
+import {DataObject} from "../../../../data-store";
+
+export default class Display implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): string | object {
+        return;
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param name string
+     * @param data Object
+     * @returns {string | DataObject}
+     */
+    public toDom(name: string, data: DataObject): string | object {
+        if (
+            data.background_color === ""
+            && data.background_image.length === 0
+            && (!data.link_url || !data.link_url.default || data.link_url.default === "")
+            && data.message === ""
+            && data.show_button === "never_show"
+            && data.show_overlay === "never_show"
+        ) {
+
+            return "none";
+        }
+
+        return;
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/converter/style/preview/display.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import {ConverterInterface} from "../../../../../converter/converter-interface";
+import {DataObject} from "../../../../../data-store";
+
+export default class Display implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): string | object {
+        return;
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param name string
+     * @param data DataObject
+     * @returns {string | object}
+     */
+    public toDom(name: string, data: DataObject): string | object {
+        return;
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/converter/style/display.ts

@@ -29,6 +29,7 @@
                                     <property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                                     <property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                                    <property name="display" source="display" virtual="true" preview_converter="Magento_PageBuilder/js/content-type/banner/converter/style/preview/display" converter="Magento_PageBuilder/js/content-type/banner/converter/style/display"/>
                                     <complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                                 </style_properties>
                                 <attributes>
@@ -121,6 +122,7 @@
                                     <property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                                     <property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                                    <property name="display" source="display" virtual="true" preview_converter="Magento_PageBuilder/js/content-type/banner/converter/style/preview/display" converter="Magento_PageBuilder/js/content-type/banner/converter/style/display"/>
                                     <complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                                 </style_properties>
                                 <attributes>
@@ -213,6 +215,7 @@
                                     <property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                                     <property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                                    <property name="display" source="display" virtual="true" preview_converter="Magento_PageBuilder/js/content-type/banner/converter/style/preview/display" converter="Magento_PageBuilder/js/content-type/banner/converter/style/display"/>
                                     <complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                                 </style_properties>
                                 <attributes>
@@ -305,6 +308,7 @@
                                     <property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                                     <property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                                    <property name="display" source="display" virtual="true" preview_converter="Magento_PageBuilder/js/content-type/banner/converter/style/preview/display" converter="Magento_PageBuilder/js/content-type/banner/converter/style/display"/>
                                     <complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                                 </style_properties>
                                 <attributes>