refactor(stepper): refactor dev sample layout

Author: mmart1n

src/app/stepper/stepper.sample.html

@@ -1,7 +1,4 @@
 <div class="sample-actions">
-    <!-- <button (click)="stepper.navigateTo(1)">Navigate to 2 Step</button> -->
-    <!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
-    <!-- <igx-buttongroup [values]="titlePositions" (selected)="toggleTitlePos($event)"></igx-buttongroup> -->
     <button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
     <div class="sample-actions__btg">
         <p>Vertical Animation Type</p>
@@ -19,12 +16,28 @@
         <igx-suffix>ms</igx-suffix>
     </igx-input-group>
 </div>
+<div class="sample-actions">
+    <div class="sample-actions__btg">
+        <p>Step Type</p>
+        <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup>
+    </div>
+    <div class="sample-actions__btg">
+        <p>Horizontal Title Position</p>
+        <igx-buttongroup [values]="horizontalTitlePositions" (selected)="toggleHorizontalTitlePos($event)">
+        </igx-buttongroup>
+    </div>
+    <div class="sample-actions__btg">
+        <p>Vertical Title Position</p>
+        <igx-buttongroup [values]="verticalTitlePositions" (selected)="toggleVerticalTitlePos($event)">
+        </igx-buttongroup>
+    </div>
+</div>
 
 <div class="sample-stepper-wrapper">
     <igx-stepper #stepper [verticalAnimationType]="verticalAnimationType"
         [horizontalAnimationType]="horizontalAnimationType" [animationDuration]="animationDuration"
-        (activeStepChanging)="activeStepChanging($event)" (activeStepChanged)="activeChanged($event)" [stepType]="stepType" [horizontalTitlePosition]="horizontalTitlePos"
-        [verticalTitlePosition]="verticalTitlePos">
+        (activeStepChanging)="activeStepChanging($event)" (activeStepChanged)="activeChanged($event)"
+        [stepType]="stepType" [horizontalTitlePosition]="horizontalTitlePos" [verticalTitlePosition]="verticalTitlePos">
 
         <ng-template igxStepActiveIndicator>
             <igx-icon>edit</igx-icon>
@@ -206,19 +219,10 @@
 </div>
 
 <div class="sample-actions">
-    <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup>
+    <button igxButton="outlined" (click)="stepper.contentTop = !stepper.contentTop">change horizontal content
+        position</button>
     <button igxButton="outlined" (click)="stepper.navigateTo(2)">navigate to third</button>
     <button igxButton="outlined" (click)="stepper.reset()">reset</button>
     <igx-switch [(ngModel)]="stepper.linear">Linear</igx-switch>
-    <div>
-        <p>Horizontal Title Position</p>
-        <igx-buttongroup [values]="horizontalTitlePositions" (selected)="toggleHorizontalTitlePos($event)">
-        </igx-buttongroup>
-        <p>Vertical Title Position</p>
-        <igx-buttongroup [values]="verticalTitlePositions" (selected)="toggleVerticalTitlePos($event)">
-        </igx-buttongroup>
-    </div>
+    <igx-switch [(ngModel)]="displayStep">Display Step</igx-switch>
 </div>
-<button igxButton="outlined" (click)="stepper.contentTop = !stepper.contentTop">change horizontal content
-    position</button>
-<igx-switch [(ngModel)]="displayStep">Display Step</igx-switch>