Fix #29 : Added support to list-groups in Collapse class

CHANGELOG.md

@@ -6,6 +6,7 @@ Yii Framework 2 bootstrap extension Change Log
 
 - Bug #18: `label` option ignored by `yii\bootstrap\Activefield::checkbox()` and `yii\bootstrap\Activefield::radio()` (mikehaertl)
 - Bug #5984: `yii\bootstrap\Activefield::checkbox()` caused browser to link label to the wrong input (cebe)
+- Enh #29: Added support to list-groups for Collapse class (pana1990, skullcrasher)
 - Enh #2546: Added `visible` option to `yii\bootstrap\ButtonGroup::$buttons` (samdark, lukBarros)
 - Enh #7633: Added `ActionColumn::$buttonOptions` for defining HTML options to be added to the default buttons (cebe)
 - Enh: Added `Nav::$dropDownCaret` to allow customization of the dropdown caret symbol (cebe)
@@ -41,7 +42,7 @@ Yii Framework 2 bootstrap extension Change Log
 ----------------------
 
 - Bug #5323: Nested dropdown does not work for `yii\bootstrap\DropDown` (aryraditya)
-- Bug #5336: `yii\bootstrap\DropDown` should register bootstrap plugin asset (zelenin) 
+- Bug #5336: `yii\bootstrap\DropDown` should register bootstrap plugin asset (zelenin)
 - Chg #5231: Collapse `items` property uses `label` element instead of array key for headers (nkovacs)
 - Chg #5232: Collapse encodes headers by default (nkovacs)
 - Chg #5217: Tabs no longer requires content since empty tab could be used dynamically (damiandennis)

Collapse.php

@@ -33,6 +33,17 @@ use yii\helpers\Html;
  *             'contentOptions' => [...],
  *             'options' => [...],
  *         ],
+ *         // if you want to swap out .panel-body with .list-group, you may use the following
+ *         [
+ *             'label' => 'Collapsible Group Item #1',
+ *             'content' => [
+ *                 'Anim pariatur cliche...',
+ *                 'Anim pariatur cliche...'
+ *             ],
+ *             'contentOptions' => [...],
+ *             'options' => [...],
+ *             'footer' => 'Footer' // the footer label in list-group
+ *         ],
  *     ]
  * ]);
  * ```
@@ -50,7 +61,7 @@ class Collapse extends Widget
      * - label: string, required, the group header label.
      * - encode: boolean, optional, whether this label should be HTML-encoded. This param will override
      *   global `$this->encodeLabels` param.
-     * - content: string, required, the content (HTML) of the group
+     * - content: array|string, required, the content (HTML) of the group
      * - options: array, optional, the HTML attributes of the group
      * - contentOptions: optional, the HTML attributes of the group's content
      */
@@ -135,7 +146,22 @@ class Collapse extends Widget
 
             $header = Html::tag('h4', $headerToggle, ['class' => 'panel-title']);
 
-            $content = Html::tag('div', $item['content'], ['class' => 'panel-body']) . "\n";
+            if (is_string($item['content'])) {
+                $content = Html::tag('div', $item['content'], ['class' => 'panel-body']) . "\n";
+            } elseif (is_array($item['content'])) {
+                $content = Html::ul($item['content'], [
+                    'class' => 'list-group',
+                    'itemOptions' => [
+                        'class' => 'list-group-item'
+                    ],
+                    'encode' => false,
+                ]) . "\n";
+                if (isset($item['footer'])) {
+                    $content .= Html::tag('div', $item['footer'], ['class' => 'panel-footer']) . "\n";
+                }
+            } else {
+                throw new InvalidConfigException('The "content" option should be a string or array.');
+            }
         } else {
             throw new InvalidConfigException('The "content" option is required.');
         }

tests/CollapseTest.php

@@ -15,11 +15,32 @@ class CollapseTest extends TestCase
             'items' => [
                 [
                     'label' => 'Collapsible Group Item #1',
-                    'content' => 'test content1',
+                    'content' => [
+                        'test content1',
+                        'test content2'
+                    ],
+                ],
+                [
+                    'label' => 'Collapsible Group Item #2',
+                    'content' => [
+                        'test content1',
+                        'test content2'
+                    ],
+                    'contentOptions' => [
+                        'class' => 'testContentOptions'
+                    ],
+                    'options' => [
+                        'class' => 'testClass',
+                        'id' => 'testId'
+                    ],
+                    'footer' => 'Footer'
                 ],
                 [
-                    'label' => '<h1>Collapsible Group Item #2</h1>',
-                    'content' => '<h2>test content2</h2>',
+                    'label' => '<h1>Collapsible Group Item #3</h1>',
+                    'content' => [
+                        '<h2>test content1</h2>',
+                        '<h2>test content2</h2>'
+                    ],
                     'contentOptions' => [
                         'class' => 'testContentOptions2'
                     ],
@@ -27,11 +48,15 @@ class CollapseTest extends TestCase
                         'class' => 'testClass2',
                         'id' => 'testId2'
                     ],
-                    'encode' => true
+                    'encode' => false,
+                    'footer' => 'Footer2'
                 ],
                 [
-                    'label' => '<h1>Collapsible Group Item #3</h1>',
-                    'content' => '<h2>test content3</h2>',
+                    'label' => '<h1>Collapsible Group Item #4</h1>',
+                    'content' => [
+                        '<h2>test content1</h2>',
+                        '<h2>test content2</h2>'
+                    ],
                     'contentOptions' => [
                         'class' => 'testContentOptions3'
                     ],
@@ -39,11 +64,8 @@ class CollapseTest extends TestCase
                         'class' => 'testClass3',
                         'id' => 'testId3'
                     ],
-                    'encode' => false
-                ],
-                [
-                    'label' => '<h1>Collapsible Group Item #4</h1>',
-                    'content' => '<h1>test content4</h1>',
+                    'encode' => true,
+                    'footer' => 'Footer3'
                 ],
             ]
         ]);
@@ -52,19 +74,34 @@ class CollapseTest extends TestCase
 <div id="w0" class="panel-group">
 <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse1" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #1</a>
 </h4></div>
-<div id="w0-collapse1" class="panel-collapse collapse"><div class="panel-body">test content1</div>
+<div id="w0-collapse1" class="panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item">test content1</li>
+<li class="list-group-item">test content2</li>
+</ul>
 </div></div>
-<div id="testId2" class="testClass2 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #2&lt;/h1&gt;</a>
+<div id="testId" class="testClass panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #2</a>
 </h4></div>
-<div id="w0-collapse2" class="testContentOptions2 panel-collapse collapse"><div class="panel-body"><h2>test content2</h2></div>
+<div id="w0-collapse2" class="testContentOptions panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item">test content1</li>
+<li class="list-group-item">test content2</li>
+</ul>
+<div class="panel-footer">Footer</div>
 </div></div>
-<div id="testId3" class="testClass3 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0"><h1>Collapsible Group Item #3</h1></a>
+<div id="testId2" class="testClass2 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0"><h1>Collapsible Group Item #3</h1></a>
 </h4></div>
-<div id="w0-collapse3" class="testContentOptions3 panel-collapse collapse"><div class="panel-body"><h2>test content3</h2></div>
+<div id="w0-collapse3" class="testContentOptions2 panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item"><h2>test content1</h2></li>
+<li class="list-group-item"><h2>test content2</h2></li>
+</ul>
+<div class="panel-footer">Footer2</div>
 </div></div>
-<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #4&lt;/h1&gt;</a>
+<div id="testId3" class="testClass3 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #4&lt;/h1&gt;</a>
 </h4></div>
-<div id="w0-collapse4" class="panel-collapse collapse"><div class="panel-body"><h1>test content4</h1></div>
+<div id="w0-collapse4" class="testContentOptions3 panel-collapse collapse"><ul class="list-group">
+<li class="list-group-item"><h2>test content1</h2></li>
+<li class="list-group-item"><h2>test content2</h2></li>
+</ul>
+<div class="panel-footer">Footer3</div>
 </div></div>
 </div>