chore(info-card): clean up info card example

src/app/card/info-status-card/examples/info-status-card-example.component.html

@@ -1,57 +1,77 @@
-<div class="padding-15">
-  <div class="row">
+<div class="row">
+  <div class="col-xs-12">
+    <h4>Info Card Component Example</h4>
+    <hr>
+  </div>
+</div>
+<div class="cards-pf pfng-isc-ex-container">
+  <div class="padding-top-10">
     <div class="col-xs-12">
-      <h4>Info Card Component Example</h4>
-      <hr/>
+      <h5>Restrictive Width Container Example</h5>
     </div>
   </div>
-  <div class="cards-pf">
-    <div class="row row-cards-pf">
-      <div class="col-sm-4">
-        <label>With top border, Icon Class, Href</label>
-        <pfng-info-status-card
-          [config]="card1Config">
-        </pfng-info-status-card>
-      </div>
+  <div class="pfng-restrictive-width-container">
+    <div class="row-cards-pf">
+      <label>With top border, Icon Class, Href</label>
+      <pfng-info-status-card
+        [config]="card1Config">
+      </pfng-info-status-card>
     </div>
-  </div>
-  <div class="cards-pf">
-    <div class="row row-cards-pf">
-      <div class="col-sm-4">
-        <label>No Top Border, Icon Image, No Title, No Html Content</label>
-        <pfng-info-status-card
-          [config]="card2Config">
-        </pfng-info-status-card>
-      </div>
+    <div class="row-cards-pf">
+      <label>No Top Border, Icon Image, No Title, No Html Content</label>
+      <pfng-info-status-card
+        [config]="card2Config">
+      </pfng-info-status-card>
     </div>
-  </div>
-  <div class="cards-pf">
-    <div class="row row-cards-pf">
-      <div class="col-sm-4">
-        <label>With HTML</label>
-        <pfng-info-status-card
-          [config]="card3Config">
-        </pfng-info-status-card>
-      </div>
+    <div class="row-cards-pf">
+      <label>With HTML</label>
+      <pfng-info-status-card
+        [config]="card3Config">
+      </pfng-info-status-card>
     </div>
   </div>
-  <div class="row padding-bottom-15 padding-top-15">
+  <div class="padding-top-10">
     <div class="col-xs-12">
-      <h4>Code</h4>
-      <hr/>
+      <h5>Fluid Width Container Example</h5>
+    </div>
+  </div>
+  <div class="container-fluid pfng-fluid-width-container">
+    <div class="col-lg-4">
+      <label>With top border, Icon Class, Href</label>
+      <pfng-info-status-card
+        [config]="card1Config">
+      </pfng-info-status-card>
+    </div>
+    <div class="col-lg-4">
+      <label>With HTML</label>
+      <pfng-info-status-card
+        [config]="card3Config">
+      </pfng-info-status-card>
+    </div>
+    <div class="col-lg-4">
+      <label>No Top Border, Icon Image, No Title, No Html Content</label>
+      <pfng-info-status-card
+        [config]="card2Config">
+      </pfng-info-status-card>
     </div>
   </div>
-  <div>
-    <tabset>
-      <tab heading="api">
-        <iframe class="demoframe" src="docs/classes/cardcomponent.html"></iframe>
-      </tab>
-      <tab heading="html">
-        <include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.html"></include-content>
-      </tab>
-      <tab heading="typescript">
-        <include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.ts"></include-content>
-      </tab>
-    </tabset>
+</div>
+<div class="row padding-bottom-15 padding-top-15">
+  <div class="col-xs-12">
+    <h4>Code</h4>
+    <hr>
   </div>
 </div>
+<div>
+  <tabset>
+    <tab heading="api">
+      <iframe class="demoframe" src="docs/classes/cardcomponent.html"></iframe>
+    </tab>
+    <tab heading="html">
+      <include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.html"></include-content>
+    </tab>
+    <tab heading="typescript">
+      <include-content src="src/app/card/info-status-card/examples/info-status-card-example.component.ts"></include-content>
+    </tab>
+  </tabset>
+</div>

src/app/card/info-status-card/examples/info-status-card-example.component.less

@@ -0,0 +1,34 @@
+@import '../../../../../node_modules/patternfly/dist/less/color-variables.less';
+@bottomMargin: 12px;
+.pfng-isc-ex-container {
+  padding-bottom: 20px;
+  h5 {
+    border-bottom: 1px dashed darken(@color-pf-blue-300, 15%);
+    padding-bottom: 16px;
+  }
+  .row-cards-pf {
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: @bottomMargin;
+    &:first-child {
+      padding-top: 0;
+    }
+  }
+  .pfng-restrictive-width-container {
+    display: inline-block;
+  }
+  .pfng-fluid-width-container {
+    [class*='col-'] {
+      margin-bottom: @bottomMargin;
+      padding: 0;
+    }
+  }
+  .pfng-card-info-status {
+    @supports not (word-break: break-word) {
+      word-break: break-all;
+    }
+    @supports (word-break: break-word) {
+      word-break: break-word;
+    }
+  }
+}

src/app/card/info-status-card/examples/info-status-card-example.component.ts

@@ -9,6 +9,7 @@ import { InfoStatusCardConfig } from '../info-status-card-config';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'info-status-card-example',
+  styleUrls: ['./info-status-card-example.component.less'],
   templateUrl: './info-status-card-example.component.html'
 })
 
@@ -31,13 +32,13 @@ export class InfoStatusCardExampleComponent implements OnInit {
   card2Config: InfoStatusCardConfig = {
     showTopBorder: false,
     htmlContent: false,
-    iconImageSrc: '//www.patternfly.org/assets/img/redhat.svg',
+    iconImageSrc: '//www.patternfly.org/assets/img/patternfly-orb.svg',
     info: [
       'Infastructure: VMware',
       'Vmware: 1 CPU (1 socket x 1 core), 1024 MB',
       '12 Snapshots',
       'Drift History: 1',
-      '<strong>No htmlContent</strong>'
+      '<b>No htmlContent</b>'
     ]
 
   };

src/app/card/info-status-card/info-status-card.component.html

@@ -1,10 +1,10 @@
-<div class="card-pf card-pf-info-status" [class.card-pf-accented]="config.showTopBorder">
-  <div class="card-pf-info-image">
+<div class="card-pf pfng-card-info-status" [class.card-pf-accented]="config.showTopBorder">
+  <div class="pfng-card-info-image">
     <img *ngIf="config.iconImageSrc" src="{{config.iconImageSrc}}" alt="" class="info-img">
     <span class="info-icon {{config.iconStyleClass}}"></span>
   </div>
-  <div class="card-pf-info-content">
-    <h2 *ngIf="config.title" class="card-pf-title">
+  <div class="pfng-card-info-content">
+    <h2 *ngIf="config.title" class="pfng-card-title">
       <a *ngIf="config.href" href="{{config.href}}">
         <span>{{config.title}}</span>
       </a>
@@ -15,10 +15,10 @@ <h2 *ngIf="config.title" class="card-pf-title">
     <ng-container *ngIf="config.htmlContent !== undefined">
       <div *ngIf="config.htmlContent; then showHtmlContent else showPlainTextContent"></div>
       <ng-template #showHtmlContent>
-        <div [innerHTML]="item" class="card-pf-info-item" *ngFor="let item of config.info"></div>
+        <div [innerHTML]="item" class="pfng-card-info-item" *ngFor="let item of config.info"></div>
       </ng-template>
       <ng-template #showPlainTextContent>
-        <div class="card-pf-info-item" *ngFor="let item of config.info">
+        <div class="pfng-card-info-item" *ngFor="let item of config.info">
           {{item}}
         </div>
       </ng-template>

src/app/card/info-status-card/info-status-card.component.less

@@ -1,7 +1,7 @@
-.card-pf-info-status {
+ .pfng-card-info-status {
   display: flex;
   margin: 0 10px;
-  .card-pf-info-image {
+  .pfng-card-info-image {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -14,9 +14,9 @@
       max-height: 50px;
     }
   }
-  .card-pf-info-content {
+  .pfng-card-info-content {
     margin: 10px 0;
-    .card-pf-title {
+    .pfng-card-title {
       margin-top: 10px;
       margin-bottom: 15px;
     }

src/app/card/info-status-card/info-status-card.component.spec.ts

@@ -65,8 +65,8 @@ describe('Info Status Card Component - ', () => {
   it('should set the title, title link, and icons class', () => {
     Object.assign(infoCard, cardConfig);
     fixture.detectChanges();
-    let numTitles = fixture.debugElement.queryAll(By.css('.card-pf-title')).length;
-    let numTitleLinks = fixture.debugElement.queryAll(By.css('.card-pf-title a[href]')).length;
+    let numTitles = fixture.debugElement.queryAll(By.css('.pfng-card-title')).length;
+    let numTitleLinks = fixture.debugElement.queryAll(By.css('.pfng-card-title a[href]')).length;
     let hasIconStyleClass = fixture.debugElement.queryAll(By.css('.info-icon.fa.fa-shield')).length;
     expect(numTitles).toBe(1);
     expect(numTitleLinks).toBe(1);
@@ -77,14 +77,14 @@ describe('Info Status Card Component - ', () => {
     cardConfig.href = null;
     Object.assign(infoCard, cardConfig);
     fixture.detectChanges();
-    let numTitleLinks = fixture.debugElement.queryAll(By.css('.card-pf-title a')).length;
+    let numTitleLinks = fixture.debugElement.queryAll(By.css('.pfng-card-title a')).length;
     expect(numTitleLinks).toBe(0);
   });
 
   it('should set three info elements', () => {
     Object.assign(infoCard, cardConfig);
     fixture.detectChanges();
-    let numInfoElements = fixture.debugElement.queryAll(By.css('.card-pf-info-item')).length;
+    let numInfoElements = fixture.debugElement.queryAll(By.css('.pfng-card-info-item')).length;
     expect(numInfoElements).toBe(4);
   });
 
@@ -114,7 +114,7 @@ describe('Info Status Card Component - ', () => {
     cardConfig.iconImageSrc = '//www.patternfly.org/assets/img/redhat.svg',
     Object.assign(infoCard, cardConfig);
     fixture.detectChanges();
-    let hasIconImg = fixture.debugElement.queryAll(By.css('.card-pf-info-image .info-img')).length;
+    let hasIconImg = fixture.debugElement.queryAll(By.css('.pfng-card-info-image .info-img')).length;
     expect(hasIconImg).toBe(1);
   });
 

src/app/card/info-status-card/info-status-card.component.ts

@@ -2,7 +2,8 @@ import {
   Component,
   Input,
   OnInit,
-  DoCheck
+  DoCheck,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { cloneDeep, defaults, isEqual } from 'lodash';
@@ -13,9 +14,11 @@ import { InfoStatusCardConfig } from './info-status-card-config';
  * Info Status Card Component
  */
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: 'pfng-info-status-card',
-  templateUrl: './info-status-card.component.html',
-  styleUrls: ['./info-status-card.component.less']
+  styleUrls: ['./info-status-card.component.less'],
+  templateUrl: './info-status-card.component.html'
+
 })
 
 export class InfoStatusCardComponent implements OnInit, DoCheck {