From 0ec3f1b569ae6b6276599a31287de46438a0322e Mon Sep 17 00:00:00 2001
From: blackbaud-johnly <John.Lyons@blackbaud.com>
Date: Fri, 15 Sep 2017 14:42:45 -0400
Subject: [PATCH] Doc tweaks for sectioned form.

---
 src/app/components/demo-components.service.ts |  2 +-
 .../demo-information-form.component.html      |  4 +--
 .../demo-phone-form.component.html            | 25 +++++++++++--------
 src/app/components/sectioned-form/index.html  | 12 ++++-----
 .../sectioned-form-demo.component.html        |  2 +-
 .../sectioned-modal-form-demo.component.html  |  2 +-
 6 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/app/components/demo-components.service.ts b/src/app/components/demo-components.service.ts
index 35e4a3bfa..1d2c99ff9 100644
--- a/src/app/components/demo-components.service.ts
+++ b/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 [
diff --git a/src/app/components/sectioned-form/demo-information-form.component.html b/src/app/components/sectioned-form/demo-information-form.component.html
index 85ba9c4f4..dfdef693d 100644
--- a/src/app/components/sectioned-form/demo-information-form.component.html
+++ b/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>
diff --git a/src/app/components/sectioned-form/demo-phone-form.component.html b/src/app/components/sectioned-form/demo-phone-form.component.html
index 4248ab8b4..b38609aec 100644
--- a/src/app/components/sectioned-form/demo-phone-form.component.html
+++ b/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>
\ No newline at end of file
+<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>
diff --git a/src/app/components/sectioned-form/index.html b/src/app/components/sectioned-form/index.html
index 03c1f108e..3b514e85d 100644
--- a/src/app/components/sectioned-form/index.html
+++ b/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>
 
diff --git a/src/app/components/sectioned-form/sectioned-form-demo.component.html b/src/app/components/sectioned-form/sectioned-form-demo.component.html
index bf67055ce..9f05ca2b1 100644
--- a/src/app/components/sectioned-form/sectioned-form-demo.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html b/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html
index 677f556f2..839f2c9c2 100644
--- a/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html
+++ b/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)">