FEATURE default bootstrap template (#42)

* FEATURE default bootstrap template

* remove thirdparty JS
* remove client dir
* remove JS requirements from template
* utilize Bootstrap 4 cards and collapse

README.md

@@ -45,7 +45,7 @@ A block that allows you to create collapsible content blocks.
 
 ### Template Notes
 
-The default templates are based off the [jQuery UI Accordion](https://jqueryui.com/accordion/) classes/styling
+The default templates are based off [Bootstrap 4](https://getbootstrap.com/) cards and collapse. If a theme is not using bootstrap, panel functionality will need to be implemented based on the theme’s UX options or via third party scripts such as jQuery UI.
 
 ## Screen Shots
 

composer.json

@@ -41,12 +41,6 @@
         },
         "process-timeout": 600
     },
-    "extra": {
-        "expose": [
-            "thirdparty",
-            "client/dist"
-        ]
-    },
     "scripts": {
         "lint": "vendor/bin/phpcs src/ tests/",
         "lint-clean": "vendor/bin/phpcbf src/ tests/"

templates/Dynamic/Elements/Accordion/Elements/ElementAccordion.ss

@@ -1,23 +1,29 @@
-<div class="element_content__content <% if $Style %>element_content__$ExtraClass<% end_if %>">
-    <% if $ShowTitle %><h3>$Title</h3><% end_if %>
-    <% if $Content %>$Content<% end_if %>
-    <% if $Panels %>
-        <div id="accordion-{$ID}" class="accordion" role="tablist">
-            <% loop $Panels %>
-                <h3>$Title</h3>
-                <div>
+<% if $Title && $ShowTitle %><h2 class="element__title">$Title</h2><% end_if %>
+<% if $Content %><div class="element__content">$Content</div><% end_if %>
+
+<% if $Panels %>
+    <div id="accordion-{$ID}" class="element__accordion__list">
+        <% loop $Panels %>
+            <div class="card">
+                <div class="card-header" id="accordion-{$Up.ID}-heading-{$Pos}">
+                    <h3 class="mb-0">
+                        <button class="btn btn-link btn-lg btn-block<% if not $First %> collapsed<% end_if %>" data-toggle="collapse" data-target="#accordion-{$Up.ID}-collapse-{$Pos}" aria-expanded="<% if $First %>true<% else %>false<% end_if %>" aria-controls="accordion-{$Up.ID}-collapse-{$Pos}">
+                            $Title
+                        </button>
+                    </h3>
+                </div>
+                <div id="accordion-{$Up.ID}-collapse-{$Pos}" class="collapse<% if $First %> show<% end_if %>" aria-labelledby="accordion-{$Up.ID}-heading-{$Pos}" data-parent="#accordion-{$Up.ID}">
                     <% if $Image %>
-                        <img src="$Image.URL" class="img-responsive" alt="$Title.ATT">
+                        <div class="col-md-5 img-side">
+                            <img src="$Image.URL" class="img-fluid" alt="$Image.Title.ATT">
+                        </div>
                     <% end_if %>
-                    $Content
-                    <% if $ElementLink %>$ElementLink<% end_if %>
+                    <div class="card-body">
+                        $Content
+                        <% if $ElementLink %>$ElementLink<% end_if %>
+                    </div>
                 </div>
-            <% end_loop %>
-        </div>
-    <% end_if %>
-</div>
-
-<% require css('dynamic/silverstripe-elemental-accordion: thirdparty/jquery-ui/jquery-ui.min.css') %>
-<% require javascript('silverstripe/admin: thirdparty/jquery/jquery.js') %>
-<% require javascript('dynamic/silverstripe-elemental-accordion: thirdparty/jquery-ui/jquery-ui.min.js') %>
-<% require javascript('dynamic/silverstripe-elemental-accordion: client/dist/accordion.init.min.js') %>
+            </div>
+        <% end_loop %>
+    </div>
+<% end_if %>