Support optional extra content in accordion item header (#726)

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.67.4 (2024-08-30)
+
+### Improvements
+
+- **Accordion**: Support extra description content in accordion items.
+
 # 2.67.3 (2024-08-29)
 
 ### Bug fix

projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.html

@@ -28,13 +28,40 @@
         </p>
       </pa-accordion-item-body>
     </pa-accordion-item>
+    <pa-accordion-item
+      id="item2"
+      itemTitle="Another accordion item with some extra content in its description"
+      description="Some description also visible in the header"
+      [(expanded)]="expanded2">
+      <pa-accordion-item-extra-description>
+        <p>
+          Any extra content can be added within
+          <code>pa-accordion-item-extra-description</code>
+          directive.
+        </p>
+        <pa-button (click)="$event.preventDefault(); $event.stopPropagation()">Some button</pa-button>
+      </pa-accordion-item-extra-description>
+      <pa-accordion-item-body>
+        <p>Some content</p>
+        <p>Some content that can be long or short.</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </p>
+      </pa-accordion-item-body>
+    </pa-accordion-item>
   </pa-demo-examples>
 
   <pa-demo-usage>
     <h3>Inputs</h3>
     <dl>
       <dt>description</dt>
-      <dd>Optional description to be displayed below the title in the item’s header.</dd>
+      <!-- prettier-ignore -->
+      <dd>Optional description to be displayed below the title in the item’s header.
+        The description is displayed with an <code>innerHTML</code> block, so it can contain simple HTML markup.</dd>
       <dt>expanded</dt>
       <dd>
         Boolean controlling the state of the item: expanded when true.
@@ -57,15 +84,20 @@ <h3>Outputs</h3>
       </dd>
     </dl>
 
-    <h3>Directive</h3>
+    <h3>Directives</h3>
     <!-- prettier-ignore -->
     <p>The item content must be wrapped in <code>pa-accordion-item-body</code> tag.</p>
+    <!-- prettier-ignore -->
+    <p>Whenever you need to display some components in the accordion item description, you can use the <code>pa-accordion-item-extra-description</code> directive.</p>
   </pa-demo-usage>
 
   <pa-demo-code>
     <h4>Static accordion item:</h4>
     <pre><code>{{code}}</code></pre>
 
+    <h4>Static accordion item with extra content in its description:</h4>
+    <pre><code>{{codeWithExtraContent}}</code></pre>
+
     <h4>updateContentHeight method</h4>
     <!-- prettier-ignore -->
     <p>

projects/demo/src/app/demo/pages/accordion-page/accordion-item-page.component.ts

@@ -1,16 +1,29 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { PaDemoModule } from '../../demo.module';
-import { AccordionBodyDirective, AccordionItemComponent } from '@guillotinaweb/pastanaga-angular';
+import {
+  AccordionBodyDirective,
+  AccordionExtraDescriptionDirective,
+  AccordionItemComponent,
+  PaButtonModule,
+} from '@guillotinaweb/pastanaga-angular';
 import { RouterLink } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [PaDemoModule, AccordionItemComponent, AccordionBodyDirective, RouterLink],
+  imports: [
+    PaDemoModule,
+    AccordionItemComponent,
+    AccordionBodyDirective,
+    RouterLink,
+    AccordionExtraDescriptionDirective,
+    PaButtonModule,
+  ],
   templateUrl: './accordion-item-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccordionItemPageComponent {
   expanded = false;
+  expanded2 = false;
 
   code = `<pa-accordion-item
   id="item1"
@@ -22,6 +35,20 @@ export class AccordionItemPageComponent {
   </pa-accordion-item-body>
 </pa-accordion-item>`;
 
+  codeWithExtraContent = `<pa-accordion-item
+  id="item2"
+  itemTitle="Another accordion item with some extra content in its description"
+  description="Some description also visible in the header"
+  [(expanded)]="expanded2">
+  <pa-accordion-item-extra-description>
+    <p>Some extra description content</p>
+    <pa-button (click)="$event.preventDefault(); $event.stopPropagation()">Some button</pa-button>
+  </pa-accordion-item-extra-description>
+  <pa-accordion-item-body>
+    <p>Some content</p>
+  </pa-accordion-item-body>
+</pa-accordion-item>`;
+
   conditionalExampleTemplate = `<pa-accordion-item
   #myAccordionItem
   id="item1"

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.67.3",
+    "version": "2.67.4",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/src/lib/accordion/accordion-item/accordion-item.component.html

@@ -13,6 +13,9 @@
     <div
       class="body-s"
       [innerHTML]="description"></div>
+    <div>
+      <ng-content select="pa-accordion-item-extra-description"></ng-content>
+    </div>
   </div>
 </div>
 

projects/pastanaga-angular/src/lib/accordion/accordion-item/accordion-item.component.ts

@@ -22,6 +22,12 @@ import { PaTranslateModule } from '../../translate';
 })
 export class AccordionBodyDirective {}
 
+@Directive({
+  selector: 'pa-accordion-item-extra-description',
+  standalone: true,
+})
+export class AccordionExtraDescriptionDirective {}
+
 @Component({
   selector: 'pa-accordion-item',
   standalone: true,