docs(stepper): add better documentation and examples

[mmalerba]

• Need lots more examples (currently only one)
• Better explanation of interaction between various state flags (editable, completed, etc) - which combo leads to which icon

[WizardPC]

Can be linked to #10365 ?

[raygervais]

I'd like to try this as my first contribution to this project, but I need a few pointers such as what would make the documentation ideal, any things I should know about the stepper which is perhaps not in the current documentation, etc. Thanks!

[mmalerba]

@raygervais A good first step would be to convert the existing text-only examples to embedded examples: https://material.angular.io/components/stepper/overview

You could also look over the various components that make up the stepper (https://github.com/angular/material2/tree/master/src/cdk/stepper https://github.com/angular/material2/tree/master/src/lib/stepper) and make sure that the docs covers the various @Input() and @Output() options they support.

[raygervais]

Will do @mmalerba, thanks for the quick response and for the pointers!
I'm assuming it would build into this folder with more component examples? Just asking since no other folder implies relation to the website examples. 💻 🎆

[mmalerba]

Yep. Testing the examples is kind of a pain though, you have to clone our docs repo as well https://github.com/mmalerba/material.angular.io and run npm run fetch-local to import the examples from your local copy of the material2 repo. If you have trouble getting that to work just test them out in a StackBlitz and I can verify it in the docs site before approving.

[raygervais]

Noted, I have the fetch-local working so far, but when I attempt to view it locally via nom start, it fails to compile. Furthermore what is StackBlitz? 😨

Error log:

ERROR in ../@angular/material-examples/typings/index.ts(18,5): Error during template compile of 'ɵfl'
  Could not resolve @angular/cdk/tree relative to /Users/raygervais/Developer/Repositories/material.angular.io/node_modules/@angular/material-examples/typings/index.d.ts..
node_modules/@angular/material-examples/typings/bottom-sheet-overview/bottom-sheet-overview-example.d.ts(1,10): error TS2305: Module '"/Users/raygervais/Developer/Repositories/material.angular.io/node_modules/@angular/material/material"' has no exported member 'MatBottomSheet'.
node_modules/@angular/material-examples/typings/bottom-sheet-overview/bottom-sheet-overview-example.d.ts(1,26): error TS2305: Module '"/Users/raygervais/Developer/Repositories/material.angular.io/node_modules/@angular/material/material"' has no exported member 'MatBottomSheetRef'.
node_modules/@angular/material-examples/typings/cdk-tree-flat/cdk-tree-flat-example.d.ts(1,33): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/cdk-tree-flat/cdk-tree-flat-example.d.ts(2,57): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/cdk-tree-nested/cdk-tree-nested-example.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/cdk-tree-nested/cdk-tree-nested-example.d.ts(2,41): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/tree-flat-overview/tree-flat-overview-example.d.ts(1,33): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/tree-flat-overview/tree-flat-overview-example.d.ts(2,57): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/tree-nested-overview/tree-nested-overview-example.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/tree-nested-overview/tree-nested-overview-example.d.ts(2,41): error TS2307: Cannot find module '@angular/material/tree'.


webpack: Failed to compile.
webpack: Compiling...
Date: 2018-03-22T22:41:51.113Z - Hash: bbfb663ac926e9c6f894 - Time: 1427ms    n 8 unchanged chunks

ERROR in ../@angular/material-examples/typings/index.ts(18,5): Error during template compile of 'ɵfl'
  Could not resolve @angular/cdk/tree relative to /Users/raygervais/Developer/Repositories/material.angular.io/node_modules/@angular/material-examples/typings/index.d.ts..


webpack: Failed to compile.
ERROR in node_modules/@angular/material-examples/typings/bottom-sheet-overview/bottom-sheet-overview-example.d.ts(1,10): error TS2305: Module '"/Users/raygervais/Developer/Repositories/material.angular.io/node_modules/@angular/material/material"' has no exported member 'MatBottomSheet'.
node_modules/@angular/material-examples/typings/bottom-sheet-overview/bottom-sheet-overview-example.d.ts(1,26): error TS2305: Module '"/Users/raygervais/Developer/Repositories/material.angular.io/node_modules/@angular/material/material"' has no exported member 'MatBottomSheetRef'.
node_modules/@angular/material-examples/typings/cdk-tree-flat/cdk-tree-flat-example.d.ts(1,33): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/cdk-tree-flat/cdk-tree-flat-example.d.ts(2,57): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/cdk-tree-nested/cdk-tree-nested-example.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/cdk-tree-nested/cdk-tree-nested-example.d.ts(2,41): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/tree-flat-overview/tree-flat-overview-example.d.ts(1,33): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/tree-flat-overview/tree-flat-overview-example.d.ts(2,57): error TS2307: Cannot find module '@angular/material/tree'.
node_modules/@angular/material-examples/typings/tree-nested-overview/tree-nested-overview-example.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material-examples/typings/tree-nested-overview/tree-nested-overview-example.d.ts(2,41): error TS2307: Cannot find module '@angular/material/tree'.

Edit: Figured out Stackblitz

[raygervais]

@mmalerba, I've created a WIP PR so you can tell me what else we should have or what needs to be changed. Looking forward to this contribution helping to improve documentation 😄

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}