Add documentation to progress indicators

Closes #148

Co-authored-by: Ben Sheldon <[email protected]>

app/views/cfa/styleguide/pages/index.html.erb

@@ -62,8 +62,8 @@
 <%= render 'section', title: 'Tab bar', example: 'molecules/tab_bar' %>
 <%= render 'section', title: 'Flash messages', example: 'molecules/flash_messages' %>
 <%= render 'section', title: 'Example Group', example: 'molecules/example_group' %>
-<%= render 'section', title: 'Progress indicator', example: 'molecules/progress_indicator' %>
-<%= render 'section', title: 'Progress step bar', example: 'molecules/progress_step_bar' %>
+<%= render 'section', title: 'Progress indicator', example: 'molecules/progress_indicator', explanation: 'The progress indicator shows the user how much of a flow they have completed. It helps set time expectations, as well as giving a sense of progress. Use this if you have a flow of more than a few pages, or when users won’t be able to guess how long a flow is. The indicator may be used alone, or in conjunction with the <a href="#molecules-progress_step_bar">step bar</a>. The indicator is the more granular of the two, ticking forward on an individual page basis.' %>
+<%= render 'section', title: 'Progress step bar', example: 'molecules/progress_step_bar', explanation: 'The step bar shows users which steps they have completed, and what’s coming up. It serves a similar purpose to the <a href="#molecules-progress_indicator">progress indicator</a>, but it deals with sections rather than individual pages. Use this if your flow has defined steps or sections. It helps users mentally prepare for the section they’re about to start.' %>
 <%= render 'section', title: 'Reveal', example: 'molecules/reveal' %>
 <%= render 'section', title: 'Accordion', example: 'molecules/accordion' %>
 <%= render 'section', title: 'Show More', example: 'molecules/show_more' %>