feat(component): badge & breadcrumb added

(cherry picked from commit ef59c80)

src/app/app-routing.module.ts

@@ -4,6 +4,8 @@ import { HomeComponent } from './home/home.component';
 import { StartComponent } from './start/start.component';
 import { BoostwatchComponent } from './boostwatch/boostwatch.component';
 import { DocAccordionComponent } from './docs/accordion.component';
+import { DocBadgeComponent } from './docs/badge.component';
+import { DocBreadcrumbComponent } from './docs/breadcrumb.component';
 import { DocButtonsComponent } from './docs/buttons.component';
 import { DocOCalendarComponent } from './docs/o-calendar.component';
 import { DocModalComponent } from './docs/modal.component';
@@ -60,6 +62,14 @@ const routes: Routes = [{
     path: 'documentation/accordion',
     component: DocAccordionComponent
   },
+  {
+    path: 'documentation/badge',
+    component: DocBadgeComponent
+  },
+  {
+    path: 'documentation/breadcrumb',
+    component: DocBreadcrumbComponent
+  },
   {
     path: 'documentation/modal',
     component: DocModalComponent

src/app/app.module.ts

@@ -13,6 +13,8 @@ import { BoostwatchComponent } from './boostwatch/boostwatch.component';
 import { HomeComponent } from './home/home.component';
 import { CodeBoxComponent } from './docs/code-box.component';
 import { DemoAccordionComponent } from './demos/accordion.component';
+import { DemoBadgeComponent } from './demos/badge.component';
+import { DemoBreadcrumbComponent } from './demos/breadcrumb.component';
 import { DemoButtonsComponent } from './demos/buttons.component';
 import { DemoModalComponent } from './demos/modal.component';
 import { DemoTabsComponent } from './demos/tabs.component';
@@ -38,6 +40,8 @@ import { DemoNavbarComponent } from './demos/navbar.component';
 import { DemoRatingComponent } from './demos/rating.component';
 import { DemoTypeaheadComponent } from './demos/typeahead.component';
 import { DocAccordionComponent } from './docs/accordion.component';
+import { DocBadgeComponent } from './docs/badge.component';
+import { DocBreadcrumbComponent } from './docs/breadcrumb.component';
 import { DocButtonsComponent } from './docs/buttons.component';
 import { DocOCalendarComponent } from './docs/o-calendar.component';
 import { DocModalComponent } from './docs/modal.component';
@@ -76,6 +80,8 @@ import { ScrollTopModule } from 'ng-boosted';
     BoostwatchComponent,
     DocsMenuComponent,
     DemoAccordionComponent,
+    DemoBadgeComponent,
+    DemoBreadcrumbComponent,
     DemoButtonsComponent,
     DemoCollapseComponent,
     DemoDatepickerComponent,
@@ -102,6 +108,8 @@ import { ScrollTopModule } from 'ng-boosted';
     DemoAlertComponent,
     DemoTypeaheadComponent,
     DocAccordionComponent,
+    DocBadgeComponent,
+    DocBreadcrumbComponent,
     DocAlertComponent,
     DocButtonsComponent,
     DocCarouselComponent,

src/app/boostwatch/boostwatch.component.spec.ts

@@ -9,6 +9,8 @@ import { AppRoutingModule } from '../app-routing.module';
 import { StartComponent } from '../start/start.component';
 import { CodeBoxComponent } from '../docs/code-box.component';
 import { DemoAccordionComponent } from '../demos/accordion.component';
+import { DemoBadgeComponent } from '../demos/badge.component';
+import { DemoBreadcrumbComponent } from '../demos/breadcrumb.component';
 import { DemoModalComponent } from '../demos/modal.component';
 import { DemoTabsComponent } from '../demos/tabs.component';
 import { DemoPaginationComponent } from '../demos/pagination.component';
@@ -37,6 +39,8 @@ import { DocCollapseComponent } from '../docs/collapse.component';
 import { DocOCalendarComponent } from '../docs/o-calendar.component';
 import { DocsMenuComponent } from '../docs-menu/docs-menu.component';
 import { DocAccordionComponent } from '../docs/accordion.component';
+import { DocBadgeComponent } from '../docs/badge.component';
+import { DocBreadcrumbComponent } from '../docs/breadcrumb.component';
 import { DocModalComponent } from '../docs/modal.component';
 import { DocDropdownComponent } from '../docs/dropdown.component';
 import { DocTabsComponent } from '../docs/tabs.component';
@@ -84,6 +88,8 @@ describe('BoostwatchComponent', () => {
         CodeBoxComponent,
         HomeComponent,
         DemoAccordionComponent,
+        DemoBadgeComponent,
+        DemoBreadcrumbComponent,
         DemoButtonsComponent,
         DemoDatepickerComponent,
         DemoDropdownComponent,
@@ -109,6 +115,8 @@ describe('BoostwatchComponent', () => {
         DemoCollapseComponent,
         DemoTypeaheadComponent,
         DocAccordionComponent,
+        DocBadgeComponent,
+        DocBreadcrumbComponent,
         DocAlertComponent,
         DocButtonsComponent,
         DocCarouselComponent,

src/app/demos/badge.component.html

@@ -0,0 +1,24 @@
+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+
+<hr>
+
+<button type="button" class="btn btn-primary">
+    Notifications <span class="badge badge-light">4</span>
+</button>
+
+<hr>
+
+<div class="bd-example">
+    <span class="badge badge-primary mr-2">Primary</span>
+    <span class="badge badge-secondary mr-2">Secondary</span>
+    <span class="badge badge-success mr-2">Success</span>
+    <span class="badge badge-danger mr-2">Danger</span>
+    <span class="badge badge-warning mr-2">Warning</span>
+    <span class="badge badge-info mr-2">Info</span>
+    <span class="badge badge-light">Light</span>
+</div>

src/app/demos/badge.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-badge',
+  templateUrl: './badge.component.html'
+})
+export class DemoBadgeComponent {}

src/app/demos/breadcrumb.component.html

@@ -0,0 +1,23 @@
+<nav role="navigation" aria-labelledby="breadcrumb-intro">
+    <p class="sr-only" id="breadcrumb-intro">You are here:</p>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item active" aria-current="location">Home</li>
+    </ol>
+</nav>
+
+<nav role="navigation" aria-labelledby="breadcrumb-intro-2">
+    <p class="sr-only" id="breadcrumb-intro-2">You are here:</p>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item active" aria-current="location">Library</li>
+    </ol>
+</nav>
+
+<nav role="navigation" aria-labelledby="breadcrumb-intro-3">
+    <p class="sr-only" id="breadcrumb-intro-3">You are here:</p>
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="location">Data</li>
+    </ol>
+</nav>

src/app/demos/breadcrumb.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-breadcrumb',
+  templateUrl: './breadcrumb.component.html'
+})
+export class DemoBreadcrumbComponent {}

src/app/docs-menu/docs-menu.component.html

@@ -8,6 +8,8 @@
                     <ul class="nav flex-column">
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/accordion">Accordion</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/alert">Alert</a></li>
+                        <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/badge">Badge</a></li>
+                        <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/breadcrumb">Breadcrumb</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/buttons">Buttons</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/carousel">Carousel</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/collapse">Collapse</a></li>

src/app/docs/badge.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'doc-badge',
+  template: `
+    <docs-wrapper component="Badge">
+      <p class="mt-4">Check the <a target="_blank" rel="noopener noreferrer"
+      href="https://boosted.orange.com/docs/4.5/components/badge">ng-bootstrap's original component documentation</a>.</p>
+      <h3>Demo</h3>
+      <demo-badge></demo-badge>
+      <code-box [snippets]="demoSnippets"></code-box>
+    </docs-wrapper>
+  `
+})
+export class DocBadgeComponent {
+  public demoSnippets = {
+    markup: require('!!prismjs-loader?lang=html!../demos/badge.component.html'),
+    typescript: require('!!prismjs-loader?lang=typescript!../demos/badge.component.ts')
+  };
+}

src/app/docs/breadcrumb.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'doc-breadcrumb',
+  template: `
+    <docs-wrapper component="Breadcrumb">
+      <p class="mt-4">Check the <a target="_blank" rel="noopener noreferrer"
+      href="https://boosted.orange.com/docs/4.5/components/breadcrumb">ng-bootstrap's original component documentation</a>.</p>
+      <h3>Demo</h3>
+      <demo-breadcrumb></demo-breadcrumb>
+      <code-box [snippets]="demoSnippets"></code-box>
+    </docs-wrapper>
+  `
+})
+export class DocBreadcrumbComponent {
+  public demoSnippets = {
+    markup: require('!!prismjs-loader?lang=html!../demos/breadcrumb.component.html'),
+    typescript: require('!!prismjs-loader?lang=typescript!../demos/breadcrumb.component.ts')
+  };
+}