From 4f5578a34467883d973bca6e371ec932f7971fb2 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Thu, 8 Jun 2017 11:40:08 -0700
Subject: [PATCH] chore: add tabs and expansion components to kitchen-sink

---
 src/demo-app/expansion/expansion-demo.html    |  6 +--
 src/lib/expansion/accordion.ts                |  4 +-
 .../kitchen-sink/kitchen-sink.html            | 51 ++++++++++++++-----
 .../kitchen-sink/kitchen-sink.ts              |  2 +
 src/universal-app/prerender.ts                |  7 ++-
 5 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/demo-app/expansion/expansion-demo.html b/src/demo-app/expansion/expansion-demo.html
index fe2fa05517de..a8be35bde049 100644
--- a/src/demo-app/expansion/expansion-demo.html
+++ b/src/demo-app/expansion/expansion-demo.html
@@ -1,8 +1,8 @@
 <h1>Single Expansion Panel</h1>
 <md-expansion-panel class="md-expansion-demo-width" #myPanel>
   <md-expansion-panel-header>
-    <mat-panel-description>This is a panel description.</mat-panel-description>
-    <mat-panel-title>Panel Title</mat-panel-title>
+    <md-panel-description>This is a panel description.</md-panel-description>
+    <md-panel-title>Panel Title</md-panel-title>
   </md-expansion-panel-header>
     This is the content text that makes sense here.
   <md-action-row>
@@ -49,4 +49,4 @@ <h1>Accordion</h1>
       <button md-button (click)="panel3.expanded = false">CLOSE</button>
     </md-action-row>
   </md-expansion-panel>
-</md-accordion>
\ No newline at end of file
+</md-accordion>
diff --git a/src/lib/expansion/accordion.ts b/src/lib/expansion/accordion.ts
index 6e46135373da..bece9f76e09d 100644
--- a/src/lib/expansion/accordion.ts
+++ b/src/lib/expansion/accordion.ts
@@ -51,8 +51,6 @@ export class CdkAccordion {
  */
 @Directive({
   selector: 'mat-accordion, md-accordion',
-  host: {
-    class: 'mat-accordion'
-  }
+  host: {'class': 'mat-accordion'}
 })
 export class MdAccordion extends CdkAccordion {}
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index fa237cca4f67..5ddf71d1582b 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -91,6 +91,34 @@ <h2>Datepicker</h2>
   <md-datepicker #birthday></md-datepicker>
 </md-input-container>
 
+<h2>Expansion</h2>
+
+<md-expansion-panel class="md-expansion-demo-width" #myPanel>
+  <md-expansion-panel-header>
+    <md-panel-description>This is a panel description.</md-panel-description>
+    <md-panel-title>Panel Title</md-panel-title>
+  </md-expansion-panel-header>
+    This is the content text that makes sense here.
+  <md-action-row>
+    <button md-button>Cancel</button>
+    <button md-button>Save</button>
+  </md-action-row>
+</md-expansion-panel>
+
+<md-accordion multi>
+  <md-expansion-panel>
+    <md-expansion-panel-header>Section 1</md-expansion-panel-header>
+    <p>This is the content text that makes sense here.</p>
+  </md-expansion-panel>
+  <md-expansion-panel>
+    <md-expansion-panel-header>Section 2</md-expansion-panel-header>
+    <p>This is the content text that makes sense here.</p>
+  </md-expansion-panel>
+  <md-expansion-panel>
+    <md-expansion-panel-header>Section 3</md-expansion-panel-header>
+  </md-expansion-panel>
+</md-accordion>
+
 <h2>Grid list</h2>
 
 <md-grid-list cols="4">
@@ -184,18 +212,17 @@ <h2>Slider</h2>
 
 <h2>Tabs</h2>
 
-<!-- Tabs don't work because `_updateTabScrollPosition` tries to set the transform on start-up -->
-<!--<md-tab-group>-->
-  <!--<md-tab label="Overview">-->
-    <!--The overview-->
-  <!--</md-tab>-->
-  <!--<md-tab>-->
-    <!--<ng-template md-tab-label>-->
-      <!--API docs-->
-    <!--</ng-template>-->
-    <!--The API docs-->
-  <!--</md-tab>-->
-<!--</md-tab-group>-->
+<md-tab-group>
+  <md-tab label="Overview">
+    The overview
+  </md-tab>
+  <md-tab>
+    <ng-template md-tab-label>
+      API docs
+    </ng-template>
+    The API docs
+  </md-tab>
+</md-tab-group>
 
 <nav md-tab-nav-bar>
  <a md-tab-link href="https://google.com">Google</a>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
index 9320e7459e80..65d2b4fa3cc2 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.ts
+++ b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -10,6 +10,7 @@ import {
   MdChipsModule,
   MdDatepickerModule,
   MdDialogModule,
+  MdExpansionModule,
   MdGridListModule,
   MdIconModule,
   MdInputModule,
@@ -51,6 +52,7 @@ export class KitchenSink { }
     MdChipsModule,
     MdDatepickerModule,
     MdDialogModule,
+    MdExpansionModule,
     MdGridListModule,
     MdIconModule,
     MdInputModule,
diff --git a/src/universal-app/prerender.ts b/src/universal-app/prerender.ts
index cca64e72d971..789f90f2376b 100644
--- a/src/universal-app/prerender.ts
+++ b/src/universal-app/prerender.ts
@@ -4,7 +4,7 @@ import 'zone.js';
 import {enableProdMode} from '@angular/core';
 import {renderModuleFactory} from '@angular/platform-server';
 import {join} from 'path';
-import {readFileSync} from 'fs-extra';
+import {readFileSync, writeFileSync} from 'fs-extra';
 import {KitchenSinkServerModuleNgFactory} from './kitchen-sink/kitchen-sink.ngfactory';
 
 enableProdMode();
@@ -14,7 +14,10 @@ const result = renderModuleFactory(KitchenSinkServerModuleNgFactory, {
 });
 
 result
-  .then(html => console.log(html))
+  .then(html => {
+    console.log(html);
+    writeFileSync(join('dist', 'prerender.html'), html, 'utf-8');
+  })
   // If rendering the module factory fails, exit the process with an error code because otherwise
   // the CI task will not recognize the failure and will show as "success". The error message
   // will be printed automatically by the `renderModuleFactory` method.