feat(accordion): add panels type option

Closes #420 Closes #431
ng-bootstrap · Jul 13, 2016 · b5ad117 · b5ad117
1 parent a546197
commit b5ad117
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 5 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -31,8 +31,9 @@ describe('ngb-accordion', () => {
 
   beforeEach(() => {
     html = `
-      <ngb-accordion #acc="ngbAccordion" [closeOthers]="closeOthers" [activeIds]="activeIds" (change)="changeCallback($event)">
-        <ngb-panel *ngFor="let panel of panels" [id]="panel.id" [disabled]="panel.disabled">
+      <ngb-accordion #acc="ngbAccordion" [closeOthers]="closeOthers" [activeIds]="activeIds" 
+        (change)="changeCallback($event)" [type]="classType">
+        <ngb-panel *ngFor="let panel of panels" [id]="panel.id" [disabled]="panel.disabled" [type]="panel.type">
           <template ngbPanelTitle>{{panel.title}}</template>       
           <template ngbPanelContent>{{panel.content}}</template>        
         </ngb-panel>        
@@ -271,15 +272,58 @@ describe('ngb-accordion', () => {
          expectOpenPanels(fixture.nativeElement, [false, false, false]);
        });
      })));
+
+  it('should have specified type of accordion ', async(inject([TestComponentBuilder], (tcb) => {
+       const testHtml = `
+      <ngb-accordion #acc="ngbAccordion" [closeOthers]="closeOthers" [type]="type">
+        <ngb-panel *ngFor="let panel of panels" [id]="panel.id" [disabled]="panel.disabled">
+          <template ngbPanelTitle>{{panel.title}}</template>       
+          <template ngbPanelContent>{{panel.content}}</template>        
+        </ngb-panel>        
+      </ngb-accordion>
+      <button *ngFor="let panel of panels" (click)="acc.toggle(panel.id)">Toggle the panel {{ panel.id }}</button>
+    `;
+       tcb.overrideTemplate(TestComponent, testHtml).createAsync(TestComponent).then((fixture) => {
+         fixture.detectChanges();
+
+         fixture.componentInstance.type = 'warning';
+         fixture.detectChanges();
+
+         let el = fixture.nativeElement.querySelectorAll('.card-header');
+         expect(el[0]).toHaveCssClass('card-warning');
+         expect(el[1]).toHaveCssClass('card-warning');
+         expect(el[2]).toHaveCssClass('card-warning');
+
+       });
+     })));
+
+  it('should override the type in accordion with type in panel', async(inject([TestComponentBuilder], (tcb) => {
+       tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
+         fixture.detectChanges();
+         fixture.componentInstance.classType = 'warning';
+
+         const tc = fixture.componentInstance;
+         tc.panels[0].type = 'success';
+         tc.panels[1].type = 'danger';
+         fixture.detectChanges();
+
+         let el = fixture.nativeElement.querySelectorAll('.card-header');
+         expect(el[0]).toHaveCssClass('card-success');
+         expect(el[1]).toHaveCssClass('card-danger');
+         expect(el[2]).toHaveCssClass('card-warning');
+
+       });
+     })));
 });
 
 @Component({selector: 'test-cmp', directives: [NGB_ACCORDION_DIRECTIVES], template: ''})
 class TestComponent {
   activeIds = [];
+  classType;
   closeOthers = false;
   panels = [
-    {id: 'one', disabled: false, title: 'Panel 1', content: 'foo'},
-    {id: 'two', disabled: false, title: 'Panel 2', content: 'bar'},
+    {id: 'one', disabled: false, title: 'Panel 1', content: 'foo', type: ''},
+    {id: 'two', disabled: false, title: 'Panel 2', content: 'bar', type: ''},
     {id: 'three', disabled: false, title: 'Panel 3', content: 'baz'}
   ];
   changeCallback = () => {};

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -53,6 +53,11 @@ export class NgbPanel {
    */
   @Input() title: string;
 
+  /**
+   *  Panel type (CSS class). Bootstrap 4 recognizes the following types: "success", "info", "warning" and "danger".
+   */
+  @Input() type: string;
+
   @ContentChild(NgbPanelContent) contentTpl: NgbPanelContent;
   @ContentChild(NgbPanelTitle) titleTpl: NgbPanelTitle;
 }
@@ -76,7 +81,7 @@ export interface NgbPanelChangeEvent {
   template: `
   <div class="card">
     <template ngFor let-panel [ngForOf]="_panels">
-      <div class="card-header" [class.active]="_isOpen(panel.id)">
+      <div [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')" [class.active]="_isOpen(panel.id)">
         <a tabindex="0" (click)="toggle(panel.id)" [class.text-muted]="panel.disabled">
           {{panel.title}}<template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></template>          
         </a>
@@ -101,6 +106,12 @@ export class NgbAccordion implements AfterContentChecked {
    */
   @Input('closeOthers') closeOtherPanels: boolean = false;
 
+  /**
+   *  Type of accordion's panels. Bootstrap 4 recognizes the following types: "success", "info", "warning" and "danger".
+   */
+  @Input() type: string;
+
+
   /**
    * A panel change event fired right before the panel toggle happens. The event object has three properties:
    * 'panelId', the id of panel that id toggled, 'nextState' whether panel will be opened (true) or closed (false),