Doc tweaks for sectioned form. (#1074)

src/app/components/demo-components.service.ts

@@ -855,7 +855,7 @@ export class SkyDemoComponentsService {
         name: 'Sectioned form',
         icon: 'object-group',
         // tslint:disable-next-line
-        summary: `A sectioned form combines multiple forms while allowing users to target specific independent areas.`,
+        summary: `A sectioned form combines multiple forms and allows users to target specific, independent areas.`,
         url: '/components/sectioned-form',
         getCodeFiles: function () {
           return [

src/app/components/sectioned-form/demo-information-form.component.html

@@ -20,7 +20,7 @@
       for="inputId" 
       class="sky-control-label"
     >
-      Id
+      ID
     </label>
     <input 
       class="sky-form-control"
@@ -34,7 +34,7 @@
 <div style="margin-top: 10px;">
   <sky-checkbox [(ngModel)]="nameRequired">
     <sky-checkbox-label>
-      Mark 'Name' required
+      Make 'Name' required
     </sky-checkbox-label>
   </sky-checkbox>
 </div>

src/app/components/sectioned-form/demo-phone-form.component.html

@@ -1,11 +1,14 @@
-<div> 
-  <div>
-    <span class="sky-emphasized">Home</span> 303.997.3301
-  </div>
-  <div>
-    <span class="sky-emphasized">Mobile</span> 888.387.1211
-  </div>
-  <div>
-    <span class="sky-emphasized">Work</span> 303.997.2000
-  </div>
-</div>
+<div class="sky-emphasized" style="margin-bottom: 5px;">
+  <label>Home</label>
+</div>
+<div>303.997.3301</div>
+
+<div class="sky-emphasized" style="margin: 5px 0 5px 0;">
+  <label>Vacation</label>
+</div>
+<div>888.387.1211</div>
+
+<div class="sky-emphasized" style="margin: 5px 0 5px 0;">
+  <label>Vacation</label>
+</div>
+<div>303.997.2000</div>

src/app/components/sectioned-form/index.html

@@ -1,7 +1,7 @@
-<sky-demo-page pageTitle="Sectioned Form">
+<sky-demo-page pageTitle="Sectioned form">
   <sky-demo-page-summary>
     <p>
-      Sectioned forms are used when displaying a large amount of conceptually related information.
+      Sectioned forms combine multiple forms to display large amounts of conceptually related information.
     </p>
   </sky-demo-page-summary>
 
@@ -10,20 +10,20 @@
         propertyName="active"
         isOptional="true"
     >
-      A boolean value to indicate the active section.
+      Indicates whether the section is active when the form loads.
     </sky-demo-page-property>
 
     <sky-demo-page-property
         propertyName="heading"
     >
-      The display text used to identify the section.
+      Specifies the section header.
     </sky-demo-page-property>
 
     <sky-demo-page-property
         propertyName="itemCount"
         isOptional="true"
     >
-      The number of items contained within a given section.
+      Indicates the number of items within the section and displays a counter alongside the section header.
     </sky-demo-page-property>
 
   </sky-demo-page-properties>
@@ -32,7 +32,7 @@
     <sky-demo-page-property
         propertyName="indexChanged"
     >
-      Fires when the active tab changes. Emits the index of the active section.
+      Fires when the active tab changes and emits the index of the active section. The index is based on the section's position when the form loads.
     </sky-demo-page-property>
   </sky-demo-page-properties>
 

src/app/components/sectioned-form/sectioned-form-demo.component.html

@@ -1,3 +1,3 @@
 <button type="button" class="sky-btn sky-btn-primary" (click)="openModal()">
-  Open tab sectioned modal
+  Open sectioned form
 </button>

src/app/components/sectioned-form/sectioned-modal-form-demo.component.html

@@ -1,6 +1,6 @@
 <sky-modal>
   <sky-modal-header>
-      Tab sectioned modal - Index: {{ activeIndexDisplay }}
+      Sectioned form — Index: {{ activeIndexDisplay }}
   </sky-modal-header>
   <sky-modal-content>
     <sky-sectioned-form (indexChanged)="updateIndex($event)">