MC-3479: Remove Accordion

- add classes and styles to accordion and not html wrapper

Author: krissyhiserote

app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Accordion.php

@@ -60,11 +60,10 @@ public function render(array $itemData, array $additionalData = []) : string
         $eavData = $this->eavAttributeLoader->load($itemData['entityId']);
 
         $rootElementAttributes = [
-            'data-element' => 'main',
-            'data-role' => 'html',
-            'data-appearance' => 'default',
-            'class' => $eavData['css_classes'] ?? ''
+            'data-mage-init' => $this->getMageInitValue($itemData),
+            'class' => 'pagebuilder-accordion ' . ($eavData['css_classes'] ?? '')
         ];
+
         $rootElementAttributes['class'] = rtrim($rootElementAttributes['class']);
 
         if (isset($itemData['formData'])) {
@@ -74,13 +73,15 @@ public function render(array $itemData, array $additionalData = []) : string
             }
         }
 
-        $rootElementHtml = '<div';
+        $accordionElementHtml = '<div';
         foreach ($rootElementAttributes as $attributeName => $attributeValue) {
-            $rootElementHtml .= $attributeValue ? " $attributeName=\"$attributeValue\"" : '';
+            $accordionElementHtml .= $attributeValue ? " $attributeName=\"$attributeValue\"" : '';
         }
-        $rootElementHtml .= '><div class="pagebuilder-accordion" data-mage-init="' . $this->getMageInitValue($itemData) . '">' .
-            (isset($additionalData['children']) ? $additionalData['children'] : '') .
-            '</div></div>';
+        $accordionElementHtml .= '>' . (isset($additionalData['children']) ? $additionalData['children'] : '') .
+            '</div>';
+
+        $rootElementHtml = '<div data-element="main" data-role="html" data-appearance="default">';
+        $rootElementHtml .= $accordionElementHtml . '</div>';
 
         return $rootElementHtml;
     }

dev/tests/integration/testsuite/Magento/PageBuilder/_files/accordions.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="default"><div data-element="main" data-role="html" data-appearance="default" class="one two"><div class="pagebuilder-accordion" data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[0],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}"><div data-collapsible="true" class="item title accordion-collapsible" data-open-on-load="0"><div class="switch" data-role="trigger"><span>Accordion Title</span></div></div><div data-content="true" class="item content accordion-content"><p>Accordion Contents</p></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="default"><div data-element="main" data-role="html" data-appearance="default"><div data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[0],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}" class="pagebuilder-accordion one two"><div data-collapsible="true" class="item title accordion-collapsible" data-open-on-load="0"><div class="switch" data-role="trigger"><span>Accordion Title</span></div></div><div data-content="true" class="item content accordion-content"><p>Accordion Contents</p></div></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/accordions_open_on_load.html

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="default"><div data-element="main" data-role="html" data-appearance="default" class="one two"><div class="pagebuilder-accordion" data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[1],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}"><div data-collapsible="true" class="item title accordion-collapsible" data-open-on-load="0"><div class="switch" data-role="trigger"><span>Title 1</span></div></div><div data-content="true" class="item content accordion-content"><p>Content 1</p></div><div data-collapsible="true" class="item title accordion-collapsible" data-open-on-load="1"><div class="switch" data-role="trigger"><span>Title 2</span></div></div><div data-content="true" class="item content accordion-content"><p>Content 2</p></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="default"><div data-element="main" data-role="html" data-appearance="default"><div data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[1],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}" class="pagebuilder-accordion one two"><div data-collapsible="true" class="item title accordion-collapsible" data-open-on-load="0"><div class="switch" data-role="trigger"><span>Title 1</span></div></div><div data-content="true" class="item content accordion-content"><p>Content 1</p></div><div data-collapsible="true" class="item title accordion-collapsible" data-open-on-load="1"><div class="switch" data-role="trigger"><span>Title 2</span></div></div><div data-content="true" class="item content accordion-content"><p>Content 2</p></div></div></div></div>