MAGETWO-89294: Slider Data Separation

- Fixed slides hover test

Author: raith-hamzah

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

@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
-     ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getBackgroundStyles())"
+     ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">

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

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

@@ -47,12 +47,28 @@ export default class Preview extends BasePreview {
             this.displayLabel($t(`Slide ${slider.children().indexOf(this.parent) + 1}`));
         });
     }
+
     /**
-     * Get the slide wrapper attributes for the preview
+     * 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: "",
+        };
+    }
+    /**
+     * 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 =  {};