MC-3610: Remove use of legacy system within slide preview

 - remove uses of getBackgroundStyles() and getPaddingStyles()

Author: cspruiell

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

@@ -9,7 +9,7 @@
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style()">
             <scope args="getUploader().getUiComponent()">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html

@@ -9,7 +9,7 @@
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
          css="data.main.css"
          event="{ mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper }">
         <div class="pagebuilder-collage-overlay"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html

@@ -9,7 +9,7 @@
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style">
             <scope args="getUploader().getUiComponent()">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html

@@ -10,11 +10,11 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(getBackgroundStyles(), data.main.style())"
+         ko-style="Object.assign(data.desktop_image.style(), data.main.style)"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-poster-overlay"
              attr="data.overlay.attributes"
-             ko-style="Object.assign(data.desktop_image.style(), data.overlay.style(), getPaddingStyles())"
+             ko-style="data.overlay.style"
              css="data.overlay.css">
             <scope args="getUploader().getUiComponent()">
                 <render />

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html

@@ -46,69 +46,6 @@ export default class Preview extends BasePreview {
         });
     }
 
-    /**
-     * Get the background wrapper attributes for the preview
-     *
-     * @returns {any}
-     */
-    public getBackgroundStyles() {
-        const desktopStyles = this.data.desktop_image.style();
-        return {
-            ...desktopStyles,
-            paddingBottom: "",
-            paddingLeft: "",
-            paddingRight: "",
-            paddingTop: "",
-            borderStyle: "none",
-            borderRadius: "0px",
-        };
-    }
-
-    /**
-     * Get the slide wrapper attributes for the preview
-     *
-     * @returns {any}
-     */
-    public getPaddingStyles() {
-        const previewData = this.previewData;
-        const appearance = this.data.main.attributes()["data-appearance"];
-        const paddingData: any =  {};
-        switch (appearance) {
-            case "collage-centered":
-                paddingData.paddingLeft = `calc(25% + ${this.data.desktop_image.style().paddingLeft})`;
-                paddingData.paddingRight = `calc(25% + ${this.data.desktop_image.style().paddingRight})`;
-                break;
-            case "collage-left":
-                paddingData.paddingRight = `calc(50% + ${this.data.desktop_image.style().paddingRight})`;
-                break;
-            case "collage-right":
-                paddingData.paddingLeft = `calc(50% + ${this.data.desktop_image.style().paddingLeft})`;
-                break;
-            default:
-                break;
-        }
-        let backgroundImage: string = "none";
-        if (previewData.background_image() && previewData.background_image() !== "" &&
-            previewData.background_image() !== undefined &&
-            previewData.background_image()[0] !== undefined) {
-            backgroundImage = "url(" + previewData.background_image()[0].url + ")";
-        }
-        const styles =  {
-            backgroundImage,
-            backgroundSize: previewData.background_size(),
-            minHeight: previewData.min_height() ? previewData.min_height() + "px" : "300px",
-            overflow: "hidden",
-            paddingBottom: this.data.desktop_image.style().paddingBottom || "",
-            paddingLeft: this.data.desktop_image.style().paddingLeft || "",
-            paddingRight: this.data.desktop_image.style().paddingRight || "",
-            paddingTop: this.data.desktop_image.style().paddingTop || "",
-        };
-        return {
-            ...styles,
-            ...paddingData,
-        };
-    }
-
     /**
      * Set state based on overlay mouseover event for the preview
      */