Feature/horizontal stepper

[emoralesb05]

Description

Redesigned stepper to allow changing between horizontal/vertical mode without too much complexity.
#29

What's included?

• Redesigned internally to be make it easier for it to implement layout changes using material2 Portals (following how tabs are implemented to some extent)
• Added td-step-body and td-step-header to create the step internally.
• Added mode which takes [StepMode.Horizontal | StepMode.Vertical] or [horizontal | vertical] as input to change the layout of td-steps
• Added validation to not allow a td-steps component without any td-step children.
• Added validation to not allow a td-step without a parent td-steps
• Updated scss to follow specs more to the line.
• Added ripple effect with md-ripple.
• Updated layout docs with stepper breaking changes.
• Updated docs.
• Updated demo + added responsive demo leveraging our MediaService.

Breaking Change

• Removed multiple attribute from td-steps since it defeats the purpose of a stepper.
• td-step-summary and td-step-actions are now directives used with a template (needed for Portal usage)

Before:

<td-step-summary>
  // summary here
</td-step-summary>

<td-step-actions>
  // actions here
</td-step-actions>

After:

<template td-step-summary>
  // summary here
</template >

<template td-step-actions>
  // actions here
</template >

• td-step content is defined differently now:

Before:

<td-step>
  // content here
</td-step>

After:

<td-step>
  <template td-step-content>
    // content here
  </template >
</td-step>

Test Steps

• ng serve
• Go to http://localhost:4200/#/components/steps
• Play with demo and change mode as needed.

Screenshots or link to CodePen/Plunker/JSfiddle

[mrjasonweaver]

This is great, @emoralesb05 💥
One thing I noticed in testing the UX: the steps text gets cropped in horizontal mode on small screens.

[mrjasonweaver]

@emoralesb05 Reviewed too soon before realizing there was a responsive change toggle 😄. UX LGTM!

[kyleledbetter]

Updates

• blue complete check color like material spec
• use material2 scss theme
• text on button toggles
• bigger warning icon for better fit
• docs: vertical by default
• docs: updated text
• docs: step 1 active for better docs experience