docs(expansion): create overview and examples

src/lib/expansion/expansion.md

@@ -0,0 +1,86 @@
+`<md-expansion-panel>` provides a way to show and hide content, by collapsing and expanding a 
+view with animation.
+
+<!-- example(expansion-overview) -->
+
+### Expansion panel content
+
+Each expansion panel has a header section (mandatory) and an actions (optional) sections.
+
+#### Header
+
+The header section is always visible at the top of the component and contains a `<md-panel-title>`
+ and a description `<md-panel-description>` subsections.
+
+The `<md-panel-title>` subsection is shown in the beginning of the header, followed by the 
+`<md-panel-description>` subsection, which is supposed to contain a summary of what's in the
+expansion content.
+
+By default, the expansion panel header has a toggle icon at the right edge, pointing up when 
+the panel is expanded and down when it's collapsed. The toggle icon can be hidden by setting the
+input property `hideToggle` to `true`. 
+
+```html
+<md-expansion-panel>
+  <md-expansion-panel-header>
+    <md-panel-title>
+      This is the expansion title
+    </md-panel-title>
+    <md-panel-description>
+      This is a summary of the content
+    </md-panel-description>
+  </md-expansion-panel-header>
+
+  <p>...</p>
+
+</md-expansion-panel>
+```
+
+#### Actions
+
+The actions section is optional and fixed at the bottom, visible only when the expansion is in its
+expanded state.
+
+```html
+<md-expansion-panel>
+  <md-expansion-panel-header>
+    This is the expansion title
+  </md-expansion-panel-header>
+
+  <p>...</p>
+
+  <md-action-row>
+    <button md-button>Click me</button>
+  </md-action-row>
+</md-expansion-panel>
+```
+
+### Accordion
+
+Multiple expansion panels can be combined into an accordion. The `multi="true"` input allows the
+expansions state to be set independently of each other. When `multi="false"` (default) just one
+panel can be expanded at a given time:
+
+```html
+<md-accordion>
+
+  <md-expansion-panel>
+    <md-expansion-panel-header>
+      This is the expansion 1 title
+    </md-expansion-panel-header>
+
+    This the expansion 1 content
+
+  </md-expansion-panel>
+
+  <md-expansion-panel>
+    <md-expansion-panel-header>
+      This is the expansion 2 title
+    </md-expansion-panel-header>
+
+    This the expansion 2 content
+
+  </md-expansion-panel>
+
+</md-accordion>
+```

src/material-examples/expansion-overview/expansion-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/expansion-overview/expansion-overview-example.html

@@ -0,0 +1,19 @@
+<md-expansion-panel>
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Personal data
+      </md-panel-title>
+      <md-panel-description>
+        Type your name and age
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="First name">
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Age">
+    </md-input-container>
+
+  </md-expansion-panel>

src/material-examples/expansion-overview/expansion-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'expansion-overview-example',
+  templateUrl: 'expansion-overview-example.html',
+})
+export class ExpansionOverviewExample {}

src/material-examples/expansion-steps/expansion-steps-example.css

@@ -0,0 +1,12 @@
+.example-headers-align .mat-expansion-panel-header-title, 
+.example-headers-align .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+.example-icons-to-right {
+  display: inline-block;
+  width: 100%;
+  text-align: right;
+  margin-top: 5px;
+  color: blue;
+}

src/material-examples/expansion-steps/expansion-steps-example.html

@@ -0,0 +1,70 @@
+<md-accordion class="example-headers-align">
+  <md-expansion-panel [expanded]="step === 0" (opened)="openEvent(0)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Personal data
+      </md-panel-title>
+      <md-panel-description>
+        <div>Type your name and age</div>
+        <div class="example-icons-to-right"><md-icon>account_circle</md-icon></div>
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="First name">
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Age">
+    </md-input-container>
+
+    <md-action-row>
+      <button md-button color="primary" (click)="nextStep()">Next</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+  <md-expansion-panel [expanded]="step === 1" (opened)="openEvent(1)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Destination
+      </md-panel-title>
+      <md-panel-description>
+        <div>Type the country name</div>
+        <div class="example-icons-to-right"><md-icon>map</md-icon></div>
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="Country">
+    </md-input-container>
+
+    <md-action-row>
+      <button md-button color="warn" (click)="prevStep()">Previous</button>
+      <button md-button color="primary" (click)="nextStep()">Next</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+  <md-expansion-panel [expanded]="step === 2" (opened)="openEvent(2)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Day of the trip
+      </md-panel-title>
+      <md-panel-description>
+        <div>Inform the date you wish to travel</div>
+        <div class="example-icons-to-right"><md-icon>date_range</md-icon></div>
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="Date" [mdDatepicker]="picker" 
+        (focus)="picker.open()" readonly>
+    </md-input-container>
+    <md-datepicker #picker></md-datepicker>
+
+    <md-action-row>
+      <button md-button color="warn" (click)="prevStep()">Previous</button>
+      <button md-button color="primary" (click)="nextStep()">End</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+</md-accordion>

src/material-examples/expansion-steps/expansion-steps-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'expansion-overview-example',
+  templateUrl: 'expansion-overview-example.html',
+})
+export class ExpansionStepsExample {
+  step = 0;
+
+  openEvent(stepNumb: number) {
+    this.step = stepNumb;
+  }
+
+  nextStep() {
+    this.step++;
+  }
+
+  prevStep() {
+    this.step--;
+  }
+}