Merge pull request #5784 from department-of-veterans-affairs/5725-Update-screenshots-for-status-tag

Cards: Updated screenshots to use Tag - Status

Author: babsdenney

src/_components/card/index.md

@@ -183,7 +183,7 @@ A radio button tile has a title and description within the label and a Card-like
 
 ### A list of services or tools
 
-{% include component-example.html alt="A set of information—designed to be shown within a list—that contains a header, a bright call to action, a Status Tag, four sets of data formatted as 'Label: Value' pairs, and a link."  file="/images/components/service-list-item/annotated-service-list-item-component.png" %}
+{% include storybook-preview.html story="components-va-service-list-item--maximal-base" link_text="va-service-list-item maximal example" height="400px" %}
 
 When you want to show benefits or tools the user is currently enrolled in or has access to, use the [Service list item]({{ site.baseurl }}/components/service-list-item) component instead of the Card component.
 

src/_components/service-list-item.md

@@ -58,27 +58,24 @@ anchors:
 
 ### Anatomy or layout details
 
-{% include component-example.html alt="An annotated Service List Item, calling out the header, Critical Action, status, details, and link." file="/images/components/service-list-item/annotated-service-list-item-component.png" %}
-
 A Service List Item can have:
 
+* **Status (required)**
+  * Status must be represented by a [Tag - Status]({{ site.baseurl }}/components/tag/tag-status/) component.
+  * Every benefit or tool in a list has a set of internal states, which are used to track the progress of enrolling in that benefit or using that tool. A status is the way to communicate the item's state to the user (such as Active, Pending, etc).
+  * Statuses do not have to mirror internal states in a one-to-one manner. (They can, but they are not required to.) Every state change does not necessarily warrant a status change.
 * **Header (required)**
   * The header consists of an icon (optional), header text, and chevron. These elements combine to create a link to a page with more details about the benefit or tool. All Service List Items must link to a details page from the header.
   * The icon should only be used when listing VA benefits. The icons should include the [standard icons](https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=293-6211&t=h01Z6dAbcelp997f-1) for VA benefits, placed within a circle using the [color]({{ site.baseurl }}/foundation/color-palette#semantic-color-tokens) associated with each benefit.
   * Headers should be visually consistent in each list item within the list. For example, if some list item headers have icons, all list items in the list should have icons.
   * The header has a default, hover, active, focus, and visited state. See details in the [Header states section](#header-states) below.
-* **Status (required)**
-  * Status must be represented by a gray Tag component.
-  * Every benefit or tool in a list has a set of internal states, which are used to track the progress of enrolling in that benefit or using that tool. A status is the way to communicate the item's state to the user (such as Active, Pending, etc).
-  * Statuses do not have to mirror internal states in a one-to-one manner. (They can, but they are not required to.) Every state change does not necessarily warrant a status change.
 * **Critical Action**
   * The [Critical Action]({{ site.baseurl }}/components/critical-action) component is still under development. It navigates the user to the most direct path to take action on the critical action. Future updates will include adjustments to color contrast, focus states, and more.
 * **Details (required)**
   * The details provide users with helpful information, formatted in a “Label: Value” structure (for example, “Approved on: May 5, 2011”).
   * There can be anywhere from one to five lines of “Label: Value” pairs.
 * **Link (optional)**
-  * Some Service List Items might require an additional link, in addition to the details page linked to from the header and the actionable link offered in the [Critical Action]({{ site.baseurl }}/components/critical-action) component. In these cases, one additional link may be displayed at the bottom of the Service List Item.
-The link should use the standard default, hover, focus, active, and visited link states.
+  * Some Service List Items might require an additional link, in addition to the details page linked to from the header and the actionable link offered in the [Critical Action]({{ site.baseurl }}/components/critical-action) component. In these cases, one additional link may be displayed at the bottom of the Service List Item. The link should use the standard default, hover, focus, active, and visited link states.
 
 ### Header states
 * **Default**: The link and chevron are the standard vads-color-link.
@@ -113,4 +110,4 @@ The below components are nested within the Service List Item component:
 * [Tag]({{ site.baseurl }}/components/tag)
 * [Link]({{ site.baseurl }}/components/link/)
 
-{% include _component-checklist.html component_name="va-service-list-item" %}
+{% include _component-checklist.html component_name="va-service-list-item" %}

src/_includes/patterns/form-status-cards.html

@@ -0,0 +1,60 @@
+<div class="site-component-example vads-u-padding--2">
+  <va-card>
+    <va-tag-status status="info" text="Draft"></va-tag-status>
+    <h3 class="vads-u-margin-top--1">Application for VA education benefits (22-1990)</h3>
+    <span>VA Form 22-1990N</span>
+    <div class="status-indicator vads-u-margin-top--1">
+      <va-icon icon="info" size="3"></va-icon>
+      <span>Application expires on: December 20, 2023</span>
+    </div>
+    <p class="vads-u-margin-top--1">Last saved on: December 20, 2023</p>
+    <va-link href="https://www.va.gov" text="Continue application" />
+  </va-card>
+</div>
+
+<div class="site-component-example vads-u-padding--2">
+  <va-card>
+    <va-tag-status status="info" text="Submission in progress"></va-tag-status>
+    <h3 class="vads-u-margin-top--1">Application for authorization to release medical information</h3>
+    <span>VA Form 21-4142</span>
+    <p class="vads-u-margin-top--1">Next step: We'll prepare your form for review. This may take up to 30 days.</p>
+    <p>If you have questions, call us at <va-telephone contact="8773459876"></va-telephone> (TTY: <va-telephone contact="711"></va-telephone>). We're here Monday through Friday, 8:00 a.m. to 9:00 p.m. ET.</p>
+  </va-card>
+</div>
+
+<div class="site-component-example vads-u-padding--2">
+  <va-card>
+    <va-tag-status status="success" text="Received"></va-tag-status>
+    <h3 class="vads-u-margin-top--1">Application for authorization to release medical information</h3>
+    <span>VA Form 21-4142</span>
+    <p class="vads-u-margin-top--1">
+      <va-link download filetype="PDF" href="https://www.va.gov" pages="5" text="Download your completed form" />
+    </p>
+    <p>Submitted on: [Month Day, 20XX] <br />
+    Received on: [Month Day, 20XX] <br />
+    Download available until: [Month Day, 20XX]
+    </p>
+    <p>Next step: We'll review your form. If we need more information, we'll contact you.</p>
+    <p>If you have questions, call us at <va-telephone contact="8773459876"></va-telephone> (TTY: <va-telephone contact="711"></va-telephone>). We're here Monday through Friday, 8:00 a.m. to 9:00 p.m. ET.</p>
+  </va-card>
+</div>
+
+<div class="site-component-example vads-u-padding--2">
+  <va-card>
+    <va-tag-status status="error" text="Action needed"></va-tag-status>
+    <h3 class="vads-u-margin-top--1">Application for authorization to release medical information</h3>
+    <span>VA Form 21-4142</span>
+    
+    <p class="vads-u-margin-top--1">
+      <va-link download filetype="PDF" href="https://www.va.gov" pages="5" text="Download your completed form" />
+    </p>
+
+    <p>Submitted on: [Month Day, 20XX] <br />
+    Submission failed on: [Month Day, 20XX] <br />
+    </p>
+
+    <va-alert status="error" slim class="vads-u-margin-top--2">
+      <p class="vads-u-margin-y--0">We're sorry. There was a problem with our system. We couldn't process this form. Call us at <va-telephone contact="8773459876"></va-telephone> (TTY: <va-telephone contact="711"></va-telephone>). We're here Monday through Friday, 8:00 a.m. to 9:00 p.m. ET.</p>
+    </va-alert>
+  </va-card>
+</div>

src/_patterns/help-users-to/check-personal-information.md

@@ -69,7 +69,26 @@ The on this page component should start with a link to the list itself, and then
 #### Integrating contextual questions in the cards
 Overall questions should be in a content area accessed by the "on this page" component, but more contextual questions can be "additional info" components on the cards themselves. Example provided.
 
-![image]({{site.baseurl}}/images/patterns/help-users-to/check-personal-information/additional-info.png)
+<div class="site-component-example vads-u-padding--2">
+  <va-card>
+    <va-tag-status status="info" text="In progress"></va-tag-status>
+    <h3 class="vads-u-margin-top--1">Claim for compensation</h3>
+    <span>Received: May 15, 2023</span>
+    <div class="status-indicator vads-u-margin-top--1">
+      <va-icon icon="mail" size="3"></va-icon>
+      <span>We sent you a development letter</span>
+    </div>
+    <p class="vads-u-margin-top--1">Step 3 of 5: Evidence gathering, review, and decision <br/>
+    Moved to this step on June 21, 2024</p>
+    
+    <va-alert status="warning" slim class="vads-u-margin-top--2">
+      <p class="vads-u-margin-y--0">An item in the claim needs your attention</p>
+    </va-alert>
+    
+    
+    <va-link class="vads-u-margin-top--2" href="/disability/view-claim-status/" active text="Details" />
+  </va-card>
+</div>
 
 #### Items on the card and optional card elements 
 Make sure to not overload elements on the cards. If you're finding you need to let the user know about a fair amount of information about a single card, link to a details page with more detail.

src/_patterns/help-users-to/keep-a-record-of-submitted-information.md

@@ -40,7 +40,22 @@ Note that breadcrumbs should be excluded from the print preview/final printout,
 
 ### My VA card with download link
 
-{% include component-example.html alt="An example My VA status card with download link" file="/images/patterns/help-users-to/stay-informed-of-their-application-status/myva-status-cards.png" width="75%" %}
+<div class="site-component-example vads-u-padding--2">
+  <va-card>
+    <va-tag-status status="success" text="Received"></va-tag-status>
+    <h3 class="vads-u-margin-top--1">Application for authorization to release medical information</h3>
+    <span>VA Form 21-4142</span>
+    <p class="vads-u-margin-top--1">
+      <va-link download filetype="PDF" href="https://www.va.gov" pages="5" text="Download your completed form" />
+    </p>
+    <p>Submitted on: [Month Day, 20XX] <br />
+    Received on: [Month Day, 20XX] <br />
+    Download available until: [Month Day, 20XX]
+    </p>
+    <p>Next step: We'll review your form. If we need more information, we'll contact you.</p>
+    <p>If you have questions, call us at <va-telephone contact="8773459876"></va-telephone> (TTY: <va-telephone contact="711"></va-telephone>). We're here Monday through Friday, 8:00 a.m. to 9:00 p.m. ET.</p>
+  </va-card>
+</div>
 
 Note that the download link includes the expiration date for the file download (60 days from submission, as described in the research findings below).
 

src/_patterns/help-users-to/manage-benefits-and-tools.md

@@ -82,7 +82,7 @@ Below are some potential benefits a Veteran or family member may enroll in, whic
 * Pension
 * Vocational rehabilitation (VRE)
 
-{% include component-example.html alt="A list of benefits a Veteran is currently enrolled in. Two of the benefits have Critical Action components shown, linking the user to a page where they can take important actions." file="/images/patterns/help-users-to/manage-benefits-and-tools/service-list-example.png" caption="An example of how this pattern can be applied to help users navigate and learn about their benefits." class="x2" %}
+{% include storybook-preview.html story="components-va-service-list-item--service-list-with-multiple-service-list-items" link_text="Service List showing multiple benefits" height="600px" %}
 
 ### Tools
 

src/_patterns/help-users-to/stay-informed-of-their-application-status.md

@@ -27,7 +27,9 @@ anchors:
 
 ### Form submission status in My VA
 
-{% include component-example.html alt="Screenshots of 4 My VA status cards." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/myva-status-cards.png" caption="Four Card component variations used to show the status of someone's form or application submission in My VA." reverse="true" %}
+#### In-progress forms
+
+{% include patterns/form-status-cards.html %}
 
 ## How to design and build