Page summary component (#130)

* Added page summary component

* Visual regression tests and key info move behavior

* Unit tests

demo/src/page-summary/app.component.html

@@ -0,0 +1,69 @@
+<sky-page-summary>
+  <sky-page-summary-alert *ngIf="showAlert">
+    <sky-alert [alertType]="'info'">This is an alert.</sky-alert>
+  </sky-page-summary-alert>
+  <sky-page-summary-image *ngIf="showImage">
+    <sky-avatar [name]="name"></sky-avatar>
+  </sky-page-summary-image>
+  <sky-page-summary-title *ngIf="showTitle">
+    {{name}}
+  </sky-page-summary-title>
+  <sky-page-summary-subtitle *ngIf="showSubtitle">
+    Board member
+  </sky-page-summary-subtitle>
+  <sky-page-summary-status *ngIf="showStatus">
+    <sky-label labelType="success">Fundraiser</sky-label>
+    <sky-label>Inactive</sky-label>
+  </sky-page-summary-status>
+  <sky-page-summary-content *ngIf="showContent">
+    This is the arbitrary content section. You can display any kind of content to complement the content on a page. We recommend that you display content to support the key tasks of users of users who visit the page. We also recommend that you keep in mind the context of how users will use the content and limit the amount of content to avoid overloading the summary.
+  </sky-page-summary-content>
+  <sky-page-summary-key-info *ngIf="showKeyInfo">
+    <sky-key-info>
+      <sky-key-info-value>The key information</sky-key-info-value>
+    </sky-key-info>
+    <sky-key-info>
+      <sky-key-info-value>section highlights</sky-key-info-value>
+    </sky-key-info>
+    <sky-key-info>
+      <sky-key-info-value>important details</sky-key-info-value>
+    </sky-key-info>
+  </sky-page-summary-key-info>
+</sky-page-summary>
+<ul style="list-style: none">
+  <li>
+    <sky-checkbox [(ngModel)]="showTitle">
+      <sky-checkbox-label>Show title</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+  <li>
+    <sky-checkbox [(ngModel)]="showSubtitle">
+      <sky-checkbox-label>Show subtitle</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+  <li>
+    <sky-checkbox [(ngModel)]="showImage">
+      <sky-checkbox-label>Show image</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+  <li>
+    <sky-checkbox [(ngModel)]="showStatus">
+      <sky-checkbox-label>Show record status</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+  <li>
+    <sky-checkbox [(ngModel)]="showKeyInfo">
+      <sky-checkbox-label>Show key information</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+  <li>
+    <sky-checkbox [(ngModel)]="showContent">
+      <sky-checkbox-label>Show arbitrary content</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+  <li>
+    <sky-checkbox [(ngModel)]="showAlert">
+      <sky-checkbox-label>Show alert</sky-checkbox-label>
+    </sky-checkbox>
+  </li>
+</ul>

demo/src/page-summary/app.component.ts

@@ -0,0 +1,46 @@
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { SkyModule } from '../../../src/core';
+
+import { Bootstrapper } from '../../bootstrapper';
+
+@Component({
+  selector: 'sky-demo-app',
+  template: require('./app.component.html')
+})
+export class AppComponent {
+  public name = 'Robert C. Hernandez';
+
+  public showAlert = true;
+
+  public showImage = true;
+
+  public showTitle = true;
+
+  public showSubtitle = true;
+
+  public showStatus = true;
+
+  public showContent = true;
+
+  public showKeyInfo = true;
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    SkyModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+class AppModule { }
+
+Bootstrapper.bootstrapModule(AppModule);

src/core.ts

@@ -11,6 +11,7 @@ import { SkyKeyInfoModule } from './modules/key-info';
 import { SkyLabelModule } from './modules/label';
 import { SkyModalModule } from './modules/modal';
 import { SkyNavbarModule } from './modules/navbar';
+import { SkyPageSummaryModule } from './modules/page-summary';
 import { SkyRepeaterModule } from './modules/repeater';
 import { SkyTabsModule } from './modules/tabs';
 import { SkyTilesModule } from './modules/tiles';
@@ -27,6 +28,7 @@ import { SkyTilesModule } from './modules/tiles';
     SkyLabelModule,
     SkyModalModule,
     SkyNavbarModule,
+    SkyPageSummaryModule,
     SkyRepeaterModule,
     SkyTabsModule,
     SkyTilesModule
@@ -43,6 +45,7 @@ export * from './modules/key-info';
 export * from './modules/label';
 export * from './modules/modal';
 export * from './modules/navbar';
+export * from './modules/page-summary';
 export * from './modules/repeater';
 export * from './modules/tabs';
 export * from './modules/tiles';

src/modules/label/label.component.html

@@ -1,3 +1,3 @@
-<span class="sky-label" [ngClass]="'sky-label-' + labelType">
+<span class="sky-label" [ngClass]="labelType ? 'sky-label-' + labelType : ''">
   <ng-content></ng-content>
 </span>

src/modules/label/label.component.scss

@@ -1,7 +1,8 @@
 @import '../../scss/mixins';
 
 .sky-label {
-  color: white;
+  background-color: $sky-color-gray-lightest;
+  color: $sky-color-gray;
   display: inline;
   border-radius: 10rem;
   font-weight: 600;
@@ -12,17 +13,21 @@
 }
 
 .sky-label-success {
+  color: white;
   background-color: $sky-color-green;
 }
 
 .sky-label-info {
+  color: white;
   background-color: $sky-color-aqua;
 }
 
 .sky-label-warning {
+  color: white;
   background-color: $sky-color-yellow;
 }
 
 .sky-label-danger {
+  color: white;
   background-color: $sky-color-red;
 }

src/modules/label/label.component.ts

@@ -7,5 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class SkyLabelComponent {
   @Input()
-  public labelType = 'info';
+  public labelType: string;
 }

src/modules/page-summary/fixtures/page-summary-fixtures.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SkyPageSummaryModule } from '../';
+
+import { SkyPageSummaryTestComponent } from './page-summary.component.fixture';
+
+@NgModule({
+  declarations: [
+    SkyPageSummaryTestComponent
+  ],
+  imports: [
+    CommonModule,
+    SkyPageSummaryModule
+  ],
+  exports: [
+    SkyPageSummaryTestComponent
+  ]
+})
+export class SkyPageSummaryFixturesModule { }

src/modules/page-summary/fixtures/page-summary.component.fixture.html

@@ -0,0 +1,5 @@
+<sky-page-summary>
+  <sky-page-summary-key-info>
+    <div class="key-info-find-me"></div>
+  </sky-page-summary-key-info>
+</sky-page-summary>

src/modules/page-summary/fixtures/page-summary.component.fixture.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: require('./page-summary.component.fixture.html')
+})
+export class SkyPageSummaryTestComponent { }

src/modules/page-summary/fixtures/page-summary.component.visual-fixture.html

@@ -0,0 +1,42 @@
+<div id="screenshots-page-summary">
+  <sky-page-summary>
+    <sky-page-summary-alert *ngIf="showAlert">
+      <sky-alert [alertType]="'info'">This is an alert.</sky-alert>
+    </sky-page-summary-alert>
+    <sky-page-summary-image *ngIf="showImage">
+      <sky-avatar [name]="name"></sky-avatar>
+    </sky-page-summary-image>
+    <sky-page-summary-title *ngIf="showTitle">
+      {{name}}
+    </sky-page-summary-title>
+    <sky-page-summary-subtitle *ngIf="showSubtitle">
+      Board member
+    </sky-page-summary-subtitle>
+    <sky-page-summary-status *ngIf="showStatus">
+      <sky-label labelType="success">Fundraiser</sky-label>
+      <sky-label>Inactive</sky-label>
+    </sky-page-summary-status>
+    <sky-page-summary-content *ngIf="showContent">
+      This is the arbitrary content section. You can display any kind of content to complement the content on a page. We recommend that you display content to support the key tasks of users of users who visit the page. We also recommend that you keep in mind the context of how users will use the content and limit the amount of content to avoid overloading the summary.
+    </sky-page-summary-content>
+    <sky-page-summary-key-info *ngIf="showKeyInfo">
+      <sky-key-info>
+        <sky-key-info-value>The key information</sky-key-info-value>
+      </sky-key-info>
+      <sky-key-info>
+        <sky-key-info-value>section highlights</sky-key-info-value>
+      </sky-key-info>
+      <sky-key-info>
+        <sky-key-info-value>important details</sky-key-info-value>
+      </sky-key-info>
+    </sky-page-summary-key-info>
+  </sky-page-summary>
+</div>
+<div style="margin-top: 20px">
+  <input
+    type="text"
+    id="screenshots-page-summary-items"
+    [(ngModel)]="itemsToShow"
+    aria-hidden="true"
+  />
+</div>

src/modules/page-summary/fixtures/page-summary.component.visual-fixture.ts

@@ -0,0 +1,66 @@
+import {
+  Component,
+  NgModule
+} from '@angular/core';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { SkyModule } from '../../../../src/core';
+
+import { Bootstrapper } from '../../../../visual/bootstrapper';
+
+@Component({
+  selector: 'sky-demo-app',
+  template: require('./page-summary.component.visual-fixture.html')
+})
+export class AppComponent {
+  public name = 'Robert C. Hernandez';
+
+  public showAlert = false;
+
+  public showImage = false;
+
+  public showTitle = false;
+
+  public showSubtitle = false;
+
+  public showStatus = false;
+
+  public showContent = false;
+
+  public showKeyInfo = false;
+
+  public get itemsToShow(): string {
+    return this._itemsToShow;
+  };
+
+  public set itemsToShow(value: string) {
+    let itemsToShow = value.split(',');
+
+    itemsToShow.forEach((itemToShow) => {
+        this['show' + itemToShow] = true;
+    });
+
+    this._itemsToShow = value;
+  }
+
+  private _itemsToShow = '';
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    SkyModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+class AppModule { }
+
+Bootstrapper.bootstrapModule(AppModule);

src/modules/page-summary/index.ts

@@ -0,0 +1,9 @@
+export * from './page-summary-alert';
+export * from './page-summary-content';
+export * from './page-summary-image';
+export * from './page-summary-key-info';
+export * from './page-summary-status';
+export * from './page-summary-subtitle';
+export * from './page-summary-title';
+export * from './page-summary.component';
+export * from './page-summary.module';

src/modules/page-summary/page-summary-adapter.service.ts

@@ -0,0 +1,15 @@
+import { ElementRef, Injectable } from '@angular/core';
+
+@Injectable()
+export class SkyPageSummaryAdapterService {
+  public updateKeyInfoLocation(elRef: ElementRef, isXS: boolean) {
+    let el = elRef.nativeElement;
+    let keyInfoContainerEl = el.querySelector('.sky-page-summary-key-info-container');
+
+    if (isXS) {
+      el.querySelector('.sky-page-summary-key-info-xs').appendChild(keyInfoContainerEl);
+    } else {
+      el.querySelector('.sky-page-summary-key-info-sm').appendChild(keyInfoContainerEl);
+    }
+  }
+}

src/modules/page-summary/page-summary-alert/index.ts

@@ -0,0 +1 @@
+export * from './page-summary-alert.component';

src/modules/page-summary/page-summary-alert/page-summary-alert.component.scss

@@ -0,0 +1,7 @@
+@import '../../../scss/mixins';
+
+/deep/ .sky-alert {
+  margin-top: 0;
+  margin-bottom: $sky-margin-double;
+  line-height: initial;
+}

src/modules/page-summary/page-summary-alert/page-summary-alert.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-page-summary-alert',
+  template: require('../../shared/simple-content.html'),
+  styles: [require('./page-summary-alert.component.scss')]
+})
+export class SkyPageSummaryAlertComponent { }

src/modules/page-summary/page-summary-content/index.ts

@@ -0,0 +1 @@
+export * from './page-summary-content.component';

src/modules/page-summary/page-summary-content/page-summary-content.component.html

@@ -0,0 +1,3 @@
+<div class="sky-page-summary-content">
+  <ng-content></ng-content>
+</div>

src/modules/page-summary/page-summary-content/page-summary-content.component.scss

@@ -0,0 +1,5 @@
+@import '../../../scss/mixins';
+
+.sky-page-summary-content {
+    margin-top: $sky-margin-double;
+}

src/modules/page-summary/page-summary-content/page-summary-content.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-page-summary-content',
+  template: require('./page-summary-content.component.html'),
+  styles: [require('./page-summary-content.component.scss')]
+})
+export class SkyPageSummaryContentComponent { }

src/modules/page-summary/page-summary-image/index.ts

@@ -0,0 +1 @@
+export * from './page-summary-image.component';