MC-3479: Remove Accordion

- remove frontend less files and update data migrations

Author: krissyhiserote

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

@@ -61,10 +61,9 @@ public function render(array $itemData, array $additionalData = []) : string
 
         $rootElementAttributes = [
             'data-element' => 'main',
-            'data-role' => 'accordion',
+            'data-role' => 'html',
             'data-appearance' => 'default',
-            'data-mage-init' => $this->getMageInitValue($itemData),
-            'class' => 'pagebuilder-accordion ' . ($eavData['css_classes'] ?? '')
+            'class' => $eavData['css_classes'] ?? ''
         ];
         $rootElementAttributes['class'] = rtrim($rootElementAttributes['class']);
 
@@ -79,7 +78,9 @@ public function render(array $itemData, array $additionalData = []) : string
         foreach ($rootElementAttributes as $attributeName => $attributeValue) {
             $rootElementHtml .= $attributeValue ? " $attributeName=\"$attributeValue\"" : '';
         }
-        $rootElementHtml .= '>' . (isset($additionalData['children']) ? $additionalData['children'] : '') . '</div>';
+        $rootElementHtml .= '><div class="pagebuilder-accordion" data-mage-init="' . $this->getMageInitValue($itemData) . '">' .
+            (isset($additionalData['children']) ? $additionalData['children'] : '') .
+            '</div></div>';
 
         return $rootElementHtml;
     }

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

@@ -47,7 +47,7 @@ public function render(array $itemData, array $additionalData = []) : string
         // data-role is not present on the accordion item as it's no longer it's own type
         $rootElementAttributes = [
             'data-collapsible' => 'true',
-            'class' => 'accordion-collapsible',
+            'class' => 'item title accordion-collapsible',
             'data-open-on-load' => $eavData['open_on_load'] ? "1" : "0"
         ];
 
@@ -62,8 +62,8 @@ public function render(array $itemData, array $additionalData = []) : string
         foreach ($rootElementAttributes as $attributeName => $attributeValue) {
             $rootElementHtml .= $attributeValue !== '' ? " $attributeName=\"$attributeValue\"" : '';
         }
-        $rootElementHtml .= '><div data-role="trigger"><span>' . $eavData['title'] . '</span></div></div>'
-        . '<div data-content="true" class="accordion-content">' . $eavData['textarea'] . '</div>';
+        $rootElementHtml .= '><div class="switch" data-role="trigger"><span>' . $eavData['title'] . '</span></div></div>'
+        . '<div data-content="true" class="item content accordion-content">' . $eavData['textarea'] . '</div>';
 
         return $rootElementHtml;
     }

app/code/Magento/PageBuilder/view/frontend/web/css/source/_module.less

@@ -37,6 +37,10 @@
     margin-bottom: 20px;
 }
 
+.pagebuilder-accordion {
+    .lib-data-accordion();
+}
+
 //
 //  Responsive Classes
 //  _____________________________________________

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/_import.less

@@ -7,7 +7,6 @@
 //  _import imports all content types less files
 //  _____________________________________________
 
-@import 'accordion/_import.less';
 @import 'banner/_import.less';
 @import 'button-item/_import.less';
 @import 'column/_import.less';

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/accordion/_default.less

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="default"><div data-element="main" data-role="accordion" data-appearance="default" 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="accordion-collapsible" data-open-on-load="0"><div data-role="trigger"><span>Accordion Title</span></div></div><div data-content="true" class="accordion-content"><p>Accordion Contents</p></div></div></div>
+<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>

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/accordion/_import.less

@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="default"><div data-element="main" data-role="accordion" data-appearance="default" 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="accordion-collapsible" data-open-on-load="0"><div data-role="trigger"><span>Title 1</span></div></div><div data-content="true" class="accordion-content"><p>Content 1</p></div><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="1"><div data-role="trigger"><span>Title 2</span></div></div><div data-content="true" class="accordion-content"><p>Content 2</p></div></div></div>
+<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>