Merge pull request #3679 from department-of-veterans-affairs/db/updat…

…e-confirmation-template-3659

Update Confirmation screenshots and guidance to latest template

src/_templates/forms/confirmation.md

@@ -18,63 +18,56 @@ Our current confirmation pages vary in format and content. Below are some of the
 
 ## Example
 
-![form confirmation template]({{site.baseurl}}/images/templates/forms/confirmation/mini-template.png)
+{% include component-example.html alt="Anatomy of Form Confirmation" file="/images/templates/forms/confirmation/mini-template.png" caption="Anatomy of Form Confirmation" class="x2" %}
 
 The form confirmation page consists of:
 
 1. [Page title](#page-title)
-2. [Success alert](#success-alert)
-3. [Help users to keep a record of submitted information pattern](#help-users-to-keep-a-record-of-submitted-information-pattern)
-4. [Other content elements](#other-content-elements)
-5. [Back to VA.gov link](#back-to-vagov-link)  
-6. [Need help](#need-help)
+2. [Help users to keep a record of submitted information pattern](#help-users-to-keep-a-record-of-submitted-information-pattern)
+3. [Success Alert](#success-alert)
+4. [Download Link]({{ site.baseurl }}/components/link/#download)
+5. [Accordion]({{ site.baseurl }}/components/accordion) of data submitted
+6. [Primary Button]({{ site.baseurl }}/components/button/) to print confirmation
+7. [Other content elements](#other-content-elements)
+8. [Back to VA.gov link](#back-to-vagov-link)
+9. [Need help](#need-help)
+
+### Production example
+
+{% include component-example.html alt="An example of a confirmation page." file="/images/templates/forms/confirmation/personal-records-confirmation.png" caption="Example of the request for personal records confirmation page." width="50%" %}
 
 ### Instances of this template in production
 
-{% include component-example.html alt="An example of a confirmation page." file="/images/templates/forms/confirmation/health-care-confirmation.png" caption="Example of the Apply for health care confirmation page." width="50%" %}
+* [Request for personal records](https://www.va.gov/records/request-personal-records-form-20-10206/)
+* [Authorize the release of non-VA medical information to VA](https://www.va.gov/supporting-forms-for-claims/release-information-to-va-form-21-4142/)
+* [Submit a lay or witness statement to support a VA claim](https://www.va.gov/supporting-forms-for-claims/lay-witness-statement-form-21-10210/)
 
 ## Structure
 
 ### Page title
 
-The H1 for this page should carry over from H1 for the online form. File for [benefit] or Apply for [benefit] and the VA paper form equivalency appears next to or below the H1.
-
-Example:  
-File for disability compensation (Form 21-526EZ)
+The page title (`H1`) for this page should carry over from the online form.
 
 ### Success alert
 
-![success alert]({{ site.baseurl }}/images/templates/forms/confirmation/success-alert.png)
-
-After the H1 there should be a line of content letting users know that they successfully submitted their application. Use a [success alert]({{ site.baseurl }}/components/alert#success-alert) to let your user know that they’ve successfully submitted their form. Content for the success alert will depend on the form.
-
-Example messages of success alerts on form confirmation pages:
+Use a [Success Alert]({{ site.baseurl }}/components/alert#success-alert) to let your user know that they’ve successfully submitted their form placed after the page title. Content for the success alert will depend on the form.
 
->**You’ve successfully submitted your application.** <br>
-Once we’ve reviewed your application, a Caregiver Support Coordinator will contact you to discuss next steps.
+An example message of a success alert on form confirmation page:
 
->We've received your application.
+> **Form submission started on [date]**  
+Your submission is in progress.  
+It can take up to 30 days for us to receive your form. Your confirmation number is XXX.  
+[Action Link] Check the status of your form on My VA
 
 ### Help users to keep a record of submitted information pattern
 
 Follow the [Help users to keep a record of submitted information]({{ site.baseurl }}/patterns/help-users-to/keep-a-record-of-submitted-information) pattern to allow users to keep a printable record of their form submission.
 
-This pattern employs the [Summary box component]({{ site.baseurl }}/components/summary-box), content, and a “Print this page” [Button - Primary]({{ site.baseurl }}/components/button).
-
-The Featured content component should contain:
-
-- Applicant name
-- Benefit they’ve applied for
-- Confirmation number (if applicable)
-- The date that claim or application was submitted
-- Other important information about their claim, such as disability conditions, they’re claiming. (if applicable)
-- “Print this page” default blue button
-
 ### Other content elements
 
 Content to include on the confirmation page will depend on the type of benefit. Some benefit confirmation pages might need more information than others.
 
-Content writers and designers should work together to determine the best format and content for the confirmation page, based on the type of benefit and stakeholder input. The [Process list (subway map) component]({{ site.baseurl }}/components/process-list) can be a good solution for presenting next steps or processes where the user may need to track progress over an extended period of time.
+Content writers and designers should work together to determine the best format and content for the confirmation page, based on the type of benefit and stakeholder input. A [Process List]({{ site.baseurl }}/components/process-list) can be a good solution for presenting next steps or processes where the user may need to track progress over an extended period of time.
 
 Some examples of other questions we might want to include on a form's confirmation page are:
 
@@ -84,9 +77,7 @@ Some examples of other questions we might want to include on a form's confirmati
 - Are there any actions the applicant needs to take while they wait?
 - What can the applicant do if they have additional questions after they apply?
 
-Some examples of other content we might want to include on a form's confirmation page are:
-
-Letting the applicant know that VA might contact them for more information or documents.
+An example of other content we might want to include on a form's confirmation page is letting the applicant know that VA might contact them for more information or documents.
 
 Example message:
 
@@ -100,6 +91,4 @@ Example message:
 
 ### Need help
 
-The Need help component is a footer that appears on the bottom of every page of the form. This content lets users know how to get additional help with the form or the benefits. The content is customized depending on the form and usually points the user to a number they can call if they need help with their form.  
-
-{% include component-example.html alt="An example of a need help footer for forms pages." file="/images/templates/forms/confirmation/need-help.png" caption="An example of a Need help component used on all forms pages." class="x2" %}
+The [Need help]({{site.baseurl}}/components/form/need-help) component is a footer that appears on the bottom of every page of the form. This content lets users know how to get additional help with the form or the benefits. The content is customized depending on the form and usually points the user to a number they can call if they need help with their form.