feat(component): Jumbotron & List-group added

(cherry picked from commit 49f1c61)

src/app/app-routing.module.ts

@@ -7,6 +7,8 @@ import { DocAccordionComponent } from './docs/accordion.component';
 import { DocBadgeComponent } from './docs/badge.component';
 import { DocCardComponent } from './docs/card.component';
 import { DocFormComponent } from './docs/form.component';
+import { DocJumbotronComponent } from './docs/jumbotron.component';
+import { DocListGroupComponent } from './docs/list-group.component';
 import { DocBreadcrumbComponent } from './docs/breadcrumb.component';
 import { DocButtonsComponent } from './docs/buttons.component';
 import { DocOCalendarComponent } from './docs/o-calendar.component';
@@ -88,6 +90,14 @@ const routes: Routes = [{
     path: 'documentation/forms',
     component: DocFormComponent
   },
+  {
+    path: 'documentation/jumbotron',
+    component: DocJumbotronComponent
+  },
+  {
+    path: 'documentation/list-group',
+    component: DocListGroupComponent
+  },
   {
     path: 'documentation/tabs',
     component: DocTabsComponent

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { DemoAccordionComponent } from './demos/accordion.component';
 import { DemoBadgeComponent } from './demos/badge.component';
 import { DemoCardComponent } from './demos/card.component';
 import { DemoFormComponent } from './demos/form.component';
+import { DemoJumbotronComponent } from './demos/jumbotron.component';
+import { DemoListGroupComponent } from './demos/list-group.component';
 import { DemoBreadcrumbComponent } from './demos/breadcrumb.component';
 import { DemoButtonsComponent } from './demos/buttons.component';
 import { DemoModalComponent } from './demos/modal.component';
@@ -45,6 +47,8 @@ import { DocAccordionComponent } from './docs/accordion.component';
 import { DocBadgeComponent } from './docs/badge.component';
 import { DocCardComponent } from './docs/card.component';
 import { DocFormComponent } from './docs/form.component';
+import { DocJumbotronComponent } from './docs/jumbotron.component';
+import { DocListGroupComponent } from './docs/list-group.component';
 import { DocBreadcrumbComponent } from './docs/breadcrumb.component';
 import { DocButtonsComponent } from './docs/buttons.component';
 import { DocOCalendarComponent } from './docs/o-calendar.component';
@@ -87,6 +91,8 @@ import { ScrollTopModule } from 'ng-boosted';
     DemoBadgeComponent,
     DemoCardComponent,
     DemoFormComponent,
+    DemoJumbotronComponent,
+    DemoListGroupComponent,
     DemoBreadcrumbComponent,
     DemoButtonsComponent,
     DemoCollapseComponent,
@@ -117,6 +123,8 @@ import { ScrollTopModule } from 'ng-boosted';
     DocBadgeComponent,
     DocCardComponent,
     DocFormComponent,
+    DocJumbotronComponent,
+    DocListGroupComponent,
     DocBreadcrumbComponent,
     DocAlertComponent,
     DocButtonsComponent,

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

@@ -12,6 +12,8 @@ import { DemoAccordionComponent } from '../demos/accordion.component';
 import { DemoBadgeComponent } from '../demos/badge.component';
 import { DemoCardComponent } from '../demos/card.component';
 import { DemoFormComponent } from '../demos/form.component';
+import { DemoJumbotronComponent } from '../demos/jumbotron.component';
+import { DemoListGroupComponent } from '../demos/list-group.component';
 import { DemoBreadcrumbComponent } from '../demos/breadcrumb.component';
 import { DemoModalComponent } from '../demos/modal.component';
 import { DemoTabsComponent } from '../demos/tabs.component';
@@ -47,6 +49,8 @@ import { DocBreadcrumbComponent } from '../docs/breadcrumb.component';
 import { DocModalComponent } from '../docs/modal.component';
 import { DocDropdownComponent } from '../docs/dropdown.component';
 import { DocFormComponent } from '../docs/form.component';
+import { DocJumbotronComponent } from '../docs/jumbotron.component';
+import { DocListGroupComponent } from '../docs/list-group.component';
 import { DocTabsComponent } from '../docs/tabs.component';
 import { DocPaginationComponent } from '../docs/pagination.component';
 import { DocAlertComponent } from '../docs/alert.component';
@@ -95,6 +99,8 @@ describe('BoostwatchComponent', () => {
         DemoBadgeComponent,
         DemoCardComponent,
         DemoFormComponent,
+        DemoJumbotronComponent,
+        DemoListGroupComponent,
         DemoBreadcrumbComponent,
         DemoButtonsComponent,
         DemoDatepickerComponent,
@@ -124,6 +130,8 @@ describe('BoostwatchComponent', () => {
         DocBadgeComponent,
         DocCardComponent,
         DocFormComponent,
+        DocJumbotronComponent,
+        DocListGroupComponent,
         DocBreadcrumbComponent,
         DocAlertComponent,
         DocButtonsComponent,

src/app/demos/jumbotron.component.html

@@ -0,0 +1,7 @@
+<div class="jumbotron">
+    <h1 class="display-4">Hello, world!</h1>
+    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+    <hr class="my-4">
+    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
+</div>

src/app/demos/jumbotron.component.ts

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

src/app/demos/list-group.component.html

@@ -0,0 +1,77 @@
+<ul class="list-group">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Morbi leo risus</li>
+</ul>
+
+<hr>
+
+<div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action active">
+      Cras justo odio
+    </a>
+    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
+</div>
+
+<hr>
+
+<ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+</ul>
+
+<hr>
+
+<ul class="list-group list-group-horizontal">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Morbi leo risus</li>
+</ul>
+
+<hr>
+
+<ul class="list-group">
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      Cras justo odio
+      <span class="badge badge-primary badge-pill">14</span>
+    </li>
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      Dapibus ac facilisis in
+      <span class="badge badge-primary badge-pill">2</span>
+    </li>
+    <li class="list-group-item d-flex justify-content-between align-items-center">
+      Morbi leo risus
+      <span class="badge badge-primary badge-pill">1</span>
+    </li>
+</ul>
+
+<hr>
+
+<div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action active">
+      <div class="d-flex w-100 justify-content-between">
+        <h5 class="mb-1">List group item heading</h5>
+        <small>3 days ago</small>
+      </div>
+      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      <small>Donec id elit non mi porta.</small>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action">
+      <div class="d-flex w-100 justify-content-between">
+        <h5 class="mb-1">List group item heading</h5>
+        <small class="text-muted">3 days ago</small>
+      </div>
+      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      <small class="text-muted">Donec id elit non mi porta.</small>
+    </a>
+    <a href="#" class="list-group-item list-group-item-action">
+      <div class="d-flex w-100 justify-content-between">
+        <h5 class="mb-1">List group item heading</h5>
+        <small class="text-muted">3 days ago</small>
+      </div>
+      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      <small class="text-muted">Donec id elit non mi porta.</small>
+    </a>
+</div>

src/app/demos/list-group.component.ts

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

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

@@ -17,6 +17,8 @@
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/datepicker">Datepicker</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/dropdown">Dropdown</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/forms">Forms</a></li>
+                        <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/jumbotron">Jumbotron</a></li>
+                        <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/list-group">List-group</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/modal">Modal</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/navbar">Navbar</a></li>
                         <li class="nav-item"><a class="nav-link py-md-2 px-md-0" routerLinkActive="active" routerLink="/documentation/pagination">Pagination</a></li>

src/app/docs/jumbotron.component.ts

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

src/app/docs/list-group.component.ts

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