Merge pull request #1563 from department-of-veterans-affairs/process-…

…list-1328

Links Process list to Sketch and the Templates - Forms - Intro page. …

src/_components/process-list.md

@@ -1,8 +1,9 @@
 ---
 layout: component
 title: "Process list"
-status: use-deployed
 intro-text: "The process list, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process."
+sketch-link: https://www.sketch.com/s/610156b6-f281-4497-81f3-64454fc72156/p/A47C20F3-B0BF-4187-ABD8-045F4250A196/canvas
+status: use-deployed
 web-component: va-process-list
 anchors:
   - anchor: Examples
@@ -14,13 +15,19 @@ anchors:
 
 ## Examples
 
+### Default - Content list
+
 {% include storybook-preview.html height="300px" story="components-va-process-list--default" link_text="va-process-list" %}
 
+### Additional styling
+
+{% include storybook-preview.html  story="components-va-process-list--additional-styling" link_text="va-process-list--additional-styling" %}
+
 ## Usage
 
 ### When to use a process list
 
-- **Displaying high-level sequential steps.** Use process lists to create a clear hierarchy and help users easily differentiate between individual steps or stages in a process.
+- **Displaying high-level sequential steps.** Use process lists to create a clear hierarchy and help users easily differentiate between individual **high-level** steps or stages in a process.
 - **For multi-step processes.** In a multi-step process where the user may need to track progress over an extended period.
 
 ### When to consider something else
@@ -30,6 +37,7 @@ anchors:
 * **In-page navigation.** Use the [side navigation]({{ site.baseurl }}/components/sidenav) component to display the "sub-navigation" within a section or page of the website.
 * **The steps are non-sequential.** Use lists to display text that doesn’t have a clear, logical order to it.
 * **The listed content is meant to improve readability of a complex sentence.** Use the ordered and unordered list components to break up sentences and paragraphs with lists. These lists are part of the general content of the page and don’t need the typographical hierarchy or visual impact of the process list.
+* **When instructing users to take specific actions that don't require explanation, not describing high-level steps.** This component isn't appropriate for a list of instructions such as "Click the login button" or "Right-click and select Save As" that don't require any additional description.
 
 
 ### How this component works
@@ -40,7 +48,7 @@ anchors:
 
 ### Placement
 
-The Process list usually appears towards the top of the page after the title and any informational alerts. Calls-to-action to start the application or process that the process list describes can be found above, within (in the case of apply), and below the list.
+The Process list appears after a start form link on the form [Introduction page]({{ site.baseurl }}/templates/forms/introduction#process-list). Additional calls-to-action to start the application or process that the process list describes can be found within (in the case of apply) and below the list.
 
 ### Instances of this component in production
 
@@ -55,4 +63,5 @@ The Process list usually appears towards the top of the page after the title and
 
 ## Accessibility considerations
 
-* **Use semantic heading levels.** While our examples uses a `<h3>`, use the appropriate heading level within your page.
+* **Use semantic heading levels.** While our examples uses a `<h3>`, use the appropriate heading level within your page.
+* **Don't use headings alone.** Each step should have both a heading and content that helps describe the step in more detail.