docs(progressbar): extend documentation for types (#3393)

This change outlines that types are based on Bootstrap background color
variants, thus allowing types like 'dark', 'light', etc.

Fixes #3391

demo/src/app/components/progressbar/demos/basic/progressbar-basic.html

@@ -2,3 +2,6 @@
 <p><ngb-progressbar type="info" [value]="50"></ngb-progressbar></p>
 <p><ngb-progressbar type="warning" [value]="75"></ngb-progressbar></p>
 <p><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></p>
+<p><ngb-progressbar type="primary" [value]="75"></ngb-progressbar></p>
+<p><ngb-progressbar type="secondary" [value]="50"></ngb-progressbar></p>
+<p><ngb-progressbar type="dark" [value]="25"></ngb-progressbar></p>

demo/src/app/components/progressbar/demos/config/progressbar-config.html

@@ -2,4 +2,4 @@
 <p><ngb-progressbar value="250"></ngb-progressbar></p>
 
 <p>This progress bar uses the customized default values, but changes the type using an input.</p>
-<p><ngb-progressbar value="500" type="info"></ngb-progressbar></p>
+<p><ngb-progressbar value="500" type="dark"></ngb-progressbar></p>

src/progressbar/progressbar-config.spec.ts

@@ -9,5 +9,6 @@ describe('ngb-progressbar-config', () => {
     expect(config.animated).toBe(false);
     expect(config.type).toBeUndefined();
     expect(config.showValue).toBe(false);
+    expect(config.height).toBeUndefined();
   });
 });

src/progressbar/progressbar.spec.ts

@@ -138,6 +138,10 @@ describe('ngb-progressbar', () => {
       fixture.componentInstance.type = 'info';
       fixture.detectChanges();
       expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-info');
+
+      fixture.componentInstance.type = 'dark';
+      fixture.detectChanges();
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-dark');
     });
 
     it('accepts animated as normal attr', () => {

src/progressbar/progressbar.ts

@@ -44,7 +44,8 @@ export class NgbProgressbar {
   /**
    * The type of the progress bar.
    *
-   * Currently Bootstrap supports `"success"`, `"info"`, `"warning"` or `"danger"`.
+   * Supports types based on Bootstrap background color variants, like:
+   *  `"success"`, `"info"`, `"warning"`, `"danger"`, `"primary"`, `"secondary"`, `"dark"` and so on.
    */
   @Input() type: string;