#557: User access Row action panel with 2+ level nesting - Static tests fixes

Author: hannahnida

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_var.less

@@ -77,3 +77,9 @@
 @pagebuilder-transition: @pagebuilder-transition-duration ease-in-out;
 @pagebuilder-animation: .35s ease-in-out both;
 
+//
+//  Affordance
+//  ---------------------------------------------
+
+@pagebuilder-affordance-box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.34);
+@pagebuilder-affordance-box-shadow-active: 0 0 0 1px @color-pagebuilder-light-silver;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less

@@ -30,7 +30,7 @@
         .pagebuilder-system-border-hover;
 
         &.pagebuilder-content-type-affordance {
-            box-shadow: 0 0 0 1px @color-pagebuilder-light-silver;
+            box-shadow: @pagebuilder-affordance-box-shadow-active;
         }
     }
 
@@ -189,7 +189,7 @@
 
 .pagebuilder-content-type-affordance {
     border: 15px solid @color-gray98;
-    box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.34); // #ebebeb
+    box-shadow: @pagebuilder-affordance-box-shadow; // #ebebeb
     padding: 0;
 
     &:before {

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

@@ -9,11 +9,11 @@
      ko-style="data.main.style"
      css="data.main.css">
     <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
-         ko-style="getStyle('inner', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
+         ko-style="getStyle(data.inner, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
         <div class="pagebuilder-content-type no-system-border type-container pagebuilder-row children-min-height"
              attr="data.inner.attributes"
-             ko-style="getStyleWithout('inner', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
+             ko-style="getStyleWithout(data.inner, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
              css="Object.assign(data.inner.css(), {
                 'empty-container': contentType.children().length == 0,
                 'jarallax': data.inner.attributes()['data-enable-parallax'] == 1 || data.inner.attributes()['data-background-type'] == 'video'

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

@@ -6,11 +6,11 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
-     ko-style="getStyle('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
+     ko-style="getStyle(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"
          attr="data.main.attributes"
-         ko-style="getStyleWithout('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
+         ko-style="getStyleWithout(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          css="Object.assign(data.main.css(), {
             'empty-container': contentType.children().length == 0,
             'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

@@ -6,11 +6,11 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
-     ko-style="getStyle('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
+     ko-style="getStyle(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div class="pagebuilder-content-type pagebuilder-row type-container no-system-border children-min-height"
          attr="data.main.attributes"
-         ko-style="getStyleWithout('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
+         ko-style="getStyleWithout(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          css="Object.assign(data.main.css(), {
             'empty-container': contentType.children().length == 0,
             'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html

@@ -213,24 +213,23 @@ export default class Preview extends PreviewCollection {
     /**
      * Return selected element styles
      *
-     * @param {String} element
+     * @param {Object} element
      * @param {Array} styleProperties
      */
-    public getStyle(element: String, styleProperties: Array<string>) {
-        let stylesObject = (element === 'main' ? this.data.main.style() : this.data.inner.style());
+    public getStyle(element: {[key: string]: any}, styleProperties: Array<string>) {
+        let stylesObject = element.style();
 
         return styleProperties.reduce((obj, key) => ({ ...obj, [key]: stylesObject[key] }), {});
     }
 
-
     /**
      * Return element styles without selected
      *
-     * @param {String} element
+     * @param {Object} element
      * @param {Array} styleProperties
      */
-    public getStyleWithout(element: String, styleProperties: Array<string>) {
-        let stylesObject = (element === 'main' ? this.data.main.style() : this.data.inner.style());
+    public getStyleWithout(element: {[key: string]: any}, styleProperties: Array<string>) {
+        let stylesObject = element.style();
 
         return Object.keys(stylesObject)
             .filter(key => !styleProperties.includes(key))
@@ -241,5 +240,4 @@ export default class Preview extends PreviewCollection {
                 };
             }, {});
     }
-
 }