feat(component): card & form added

(cherry picked from commit 011827b)

src/app/app-routing.module.ts

@@ -5,6 +5,8 @@ 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 { DocCardComponent } from './docs/card.component';
+import { DocFormComponent } from './docs/form.component';
 import { DocBreadcrumbComponent } from './docs/breadcrumb.component';
 import { DocButtonsComponent } from './docs/buttons.component';
 import { DocOCalendarComponent } from './docs/o-calendar.component';
@@ -66,6 +68,10 @@ const routes: Routes = [{
     path: 'documentation/badge',
     component: DocBadgeComponent
   },
+  {
+    path: 'documentation/card',
+    component: DocCardComponent
+  },
   {
     path: 'documentation/breadcrumb',
     component: DocBreadcrumbComponent
@@ -78,6 +84,10 @@ const routes: Routes = [{
     path: 'documentation/dropdown',
     component: DocDropdownComponent
   },
+  {
+    path: 'documentation/forms',
+    component: DocFormComponent
+  },
   {
     path: 'documentation/tabs',
     component: DocTabsComponent

src/app/app.module.ts

@@ -14,6 +14,8 @@ 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 { DemoCardComponent } from './demos/card.component';
+import { DemoFormComponent } from './demos/form.component';
 import { DemoBreadcrumbComponent } from './demos/breadcrumb.component';
 import { DemoButtonsComponent } from './demos/buttons.component';
 import { DemoModalComponent } from './demos/modal.component';
@@ -41,6 +43,8 @@ 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 { DocCardComponent } from './docs/card.component';
+import { DocFormComponent } from './docs/form.component';
 import { DocBreadcrumbComponent } from './docs/breadcrumb.component';
 import { DocButtonsComponent } from './docs/buttons.component';
 import { DocOCalendarComponent } from './docs/o-calendar.component';
@@ -81,6 +85,8 @@ import { ScrollTopModule } from 'ng-boosted';
     DocsMenuComponent,
     DemoAccordionComponent,
     DemoBadgeComponent,
+    DemoCardComponent,
+    DemoFormComponent,
     DemoBreadcrumbComponent,
     DemoButtonsComponent,
     DemoCollapseComponent,
@@ -109,6 +115,8 @@ import { ScrollTopModule } from 'ng-boosted';
     DemoTypeaheadComponent,
     DocAccordionComponent,
     DocBadgeComponent,
+    DocCardComponent,
+    DocFormComponent,
     DocBreadcrumbComponent,
     DocAlertComponent,
     DocButtonsComponent,

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

@@ -10,6 +10,8 @@ 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 { DemoCardComponent } from '../demos/card.component';
+import { DemoFormComponent } from '../demos/form.component';
 import { DemoBreadcrumbComponent } from '../demos/breadcrumb.component';
 import { DemoModalComponent } from '../demos/modal.component';
 import { DemoTabsComponent } from '../demos/tabs.component';
@@ -40,9 +42,11 @@ 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 { DocCardComponent } from '../docs/card.component';
 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 { DocTabsComponent } from '../docs/tabs.component';
 import { DocPaginationComponent } from '../docs/pagination.component';
 import { DocAlertComponent } from '../docs/alert.component';
@@ -89,6 +93,8 @@ describe('BoostwatchComponent', () => {
         HomeComponent,
         DemoAccordionComponent,
         DemoBadgeComponent,
+        DemoCardComponent,
+        DemoFormComponent,
         DemoBreadcrumbComponent,
         DemoButtonsComponent,
         DemoDatepickerComponent,
@@ -116,6 +122,8 @@ describe('BoostwatchComponent', () => {
         DemoTypeaheadComponent,
         DocAccordionComponent,
         DocBadgeComponent,
+        DocCardComponent,
+        DocFormComponent,
         DocBreadcrumbComponent,
         DocAlertComponent,
         DocButtonsComponent,

src/app/demos/card.component.html

@@ -0,0 +1,66 @@
+<div class="card" style="width: 18rem;">
+    <img src="https://dummyimage.com/800x600/cccccc/000000&text=image" class="card-img-top" alt="...">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+</div>
+
+<hr>
+
+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+
+<hr>
+
+<div class="card mb-3" style="max-width: 540px;">
+  <div class="row no-gutters">
+    <div class="col-md-4">
+      <img src="https://dummyimage.com/800x800/cccccc/000000&text=image" class="card-img" alt="...">
+    </div>
+    <div class="col-md-8">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr>
+
+<div class="card-group">
+  <div class="card">
+    <img src="https://dummyimage.com/800x600/cccccc/000000&text=1" class="card-img-top" alt="...">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img src="https://dummyimage.com/800x600/cccccc/000000&text=2" class="card-img-top" alt="...">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img src="https://dummyimage.com/800x600/cccccc/000000&text=3" class="card-img-top" alt="...">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
+  </div>
+</div>

src/app/demos/card.component.ts

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

src/app/demos/form.component.html

@@ -0,0 +1,106 @@
+<form>
+    <div class="form-group">
+      <label for="exampleInputEmail1">Email address</label>
+      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">Password</label>
+      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+    </div>
+    <div class="custom-control custom-checkbox">
+      <input type="checkbox" class="custom-control-input" id="exampleCheck1">
+      <label class="custom-control-label" for="exampleCheck1">Check me out</label>
+    </div>
+    <div class="form-group">
+      <label for="exampleFormControlSelect2">Example multiple select</label>
+      <select multiple class="custom-select" id="exampleFormControlSelect2">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <input class="form-control" type="text" placeholder="Readonly input here..." readonly>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+
+<hr>
+
+<form>
+  <div class="form-row">
+    <div class="form-group col-md-6">
+      <label for="staticEmail2" class="sr-only">Email</label>
+      <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
+    </div>
+    <div class="form-group col-md-6">
+      <label for="inputPassword4">Password</label>
+      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputAddress">Address</label>
+    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+  </div>
+  <div class="form-group">
+    <label for="inputAddress2">Address 2</label>
+    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+  </div>
+  <div class="form-row">
+    <div class="form-group col-md-6">
+      <label for="inputCity">City</label>
+      <input type="text" class="form-control" id="inputCity">
+    </div>
+    <div class="form-group col-md-4">
+      <label for="inputState">State</label>
+      <select id="inputState" class="custom-select">
+        <option selected>Choose...</option>
+        <option>...</option>
+      </select>
+    </div>
+    <div class="form-group col-md-2">
+      <label for="inputZip">Zip</label>
+      <input type="text" class="form-control" id="inputZip">
+    </div>
+  </div>
+  <fieldset class="form-group">
+    <div class="row">
+      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
+      <div class="col-sm-10">
+        <div class="custom-control custom-radio">
+          <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
+          <label class="custom-control-label" for="gridRadios1">
+            First radio
+          </label>
+        </div>
+        <div class="custom-control custom-radio">
+          <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
+          <label class="custom-control-label" for="gridRadios2">
+            Second radio
+          </label>
+        </div>
+        <div class="custom-control custom-radio">
+          <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
+          <label class="custom-control-label" for="gridRadios3">
+            Third disabled radio
+          </label>
+        </div>
+      </div>
+    </div>
+  </fieldset>
+  <div class="form-group row">
+    <div class="col-sm-2">Checkbox</div>
+    <div class="col-sm-10">
+      <div class="custom-control custom-checkbox">
+        <input class="custom-control-input" type="checkbox" id="gridCheck1">
+        <label class="custom-control-label" for="gridCheck1">
+          Example checkbox
+        </label>
+      </div>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-primary">Sign in</button>
+</form>

src/app/demos/form.component.ts

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

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

@@ -11,10 +11,12 @@
                         <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/card">Card</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>
                         <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/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/card.component.ts

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

src/app/docs/form.component.ts

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