Merge branch 'main' into JaciWilkinson-patch-1

package.json

@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme",
   "devDependencies": {
-    "@department-of-veterans-affairs/component-library": "^46.3.0",
+    "@department-of-veterans-affairs/component-library": "^46.4.0",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-rename": "^2.0.0",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@department-of-veterans-affairs/formation": "^11.0.12",
-    "@department-of-veterans-affairs/css-library": "^0.11.0"
+    "@department-of-veterans-affairs/css-library": "^0.12.0"
   },
   "engines": {
     "npm": "6.14.8"

src/_components/form/select.md

@@ -47,6 +47,10 @@ anchors:
 
 {% include storybook-preview.html story="uswds-va-select--internationalization" link_text="va-select internationalization" %}
 
+### Widths
+
+{% include storybook-preview.html story="uswds-va-select--widths" link_text="va-select widths" height="800px" %}
+
 ## Usage
 
 <a class="vads-c-action-link--blue" href="https://designsystem.digital.gov/components/select/">Refer to the U.S. Web Design System for usage guidance</a>

src/_foundation/typography.md

@@ -6,8 +6,8 @@ anchors:
   - anchor: Fonts
   - anchor: Headings
   - anchor: Paragraphs
-  - anchor: Lists
   - anchor: Typography tokens
+  - anchor: Related
 ---
 
 # Typography
@@ -172,4 +172,8 @@ Don’t change heading level in order to use a different font size.
 ### Semantic typography tokens
 
 {% assign font_semantic = site.data.tokens.vads-font-semantic %}
-{% include tokens.html tokens=font_semantic %}
+{% include tokens.html tokens=font_semantic %}
+
+## Related
+
+* [List]({{ site.baseurl }}/components/list)

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

@@ -3,47 +3,102 @@ layout: pattern
 title: Stay informed of their application status
 permalink: /patterns/help-users-to/stay-informed-of-their-application-status
 sub-section: help-users-to
-intro-text: "When we need to keep the user informed of their application status, there is currently no \"one size fits all\" solution. To provide clarity, this page shows examples of patterns that exist on VA.gov today."
+intro-text: "Follow this pattern to notify users when their request is submitted, received, and has hit an error. These are required notification touch points." 
 status: use-with-caution-candidate
 research-title: Help users to stay informed of app status
 anchors:
   - anchor: Usage
   - anchor: Examples
   - anchor: How to design and build
+  - anchor: Examples in production
 ---
 
-Review examples of patterns that exist today that help users to stay informed of their application status.
-
 ## Usage
 
 ### When to use this pattern
 
-**When users need to stay informed of their application status.** After users have submitted an application, keep them informed of their application status.
+* **Any application that takes data from a user and submits that data to a back-end system.** This pattern is widely applicable to any application or service that accepts users data and submits that data, synchronously or asynchronously, to a system of record. It is a requirement that we notify the user at critical touch points as their request is processed.
+
 
 ## Examples
 
-### MyVA
+### Email notifications
+
+{% include component-example.html alt="Screen shots of 3 email templates." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/email-templates.png" caption="Three templates for email notification touch points sent via VA Notify." class="x2" %}
+
+### Status in MyVA
+
+{% include component-example.html alt="Screen shots of 3 MyVA status cards." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/myva-status-cards.png" caption="Three Card component variations used to convey status of a user's submission in MyVA for Benefits applications." reverse="true" %}
+
+## How to design and build
+
+### Email notification touch points
+
+When a request reaches these 3 touch points the user must be notified via email: 
+
+1. **Submission in progress**: The status immediately after a user clicks "submit" on a form. This is the period between the submission and when that submission reaches a system of record. During this time, data submitted by the user may travel through several systems.
+  * **Not required for synchronous status.** This touch point is only necessary if the user's data submission is being handled asynchronously. If you can synchronously confirm that the user's data has reached the system of record immediately then you can skip this status notification.
+2. **Received**: The status when a request has arrived in the system of record. From there it can be worked on and ultimately completed. **This status notification must not be sent unless we have confirmation that the request has reached the system of record.**
+3. **Action needed:** The status which informs the user that their request has failed as it has not reached the system of record. This status may be accompanied by directions for re-submission or directions to call our call center for help.
+
+Submit a [VA Notify intake ticket](https://github.com/department-of-Veterans-affairs/va.gov-team/issues/new?assignees=christy-tongty%2C+mjones-oddball%2C+GitSamJennings&labels=vanotify-intake&template=VANotify-Business-Intake.md&title=Business+intake+form+for+%5BBusiness+or+team%5D) to start the process of activating email notifications for your application.
+
+#### Protecting PII & PHI in notifications
+
+* **Do NOT send PII or PHI in notifications.** It is imperative that notifications not include any PII or PHI.
+* **Obfuscate filenames.** File names for evidence and other uploads of documents to the VA can often include personal information. Thus we obfuscate all filenames in notifications. To do this:
+  * Replace all but the first 3 and last 2 characters (numbers or letters) of the filename with the "X" character.
+  * Show the MIME type of the file (e.g. ".png", ".pdf", etc.)
+
+### Showing status in MyVA for Benefits applications
+
+Submissions to the VA made via VA.gov or the mobile app must show the status of a request in MyVA such that authenticated users can see the status of any and all submissions. MyVA includes several sections where status can be conveyed:
+
+* Claims and appeals
+* Health care
+* Outstanding debts
+* Benefit payments
+* Benefit applications and forms
 
-{% include component-example.html alt="An example of a claims and appeals status card in My VA." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/status-in-myva.png" caption="A status Card component used in MyVA to show the status of a claim with a call-to-action to retrieve details on that claim." reverse="true" class="x2" %}
+#### Claims and appeals
 
-### 10-10ez application status on health care intro page
+Obtains status from the Claims Status Tool.
 
-{% include component-example.html alt="An example of the 10-10ez health care application status on intro page." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/10-10ez-status-on-intro-page.png" caption="The 10-10ez Health Care application provides status to users if and when they return to the introduction page." class="x2" %}
+#### Benefit applications and forms
+
+Currently obtains status from the [Lighthouse Benefits Intake API](https://developer.va.gov/explore/api/benefits-intake) polling mechanism for submissions processed asynchronously.
+
+### How this pattern works
+
+Communicating status of a request has three critical phases that all teams must account for in their applications:
+
+1. **Status notification via email or text.**
+2. **Status notification in the user interface of VA.gov and the flagship mobile app.** 
+3. **Providing a clear next step in the event of an error.**
+
+#### How to provide a clear next step in the event of an error
+
+In the event of an error, an application may determine the next logical step a user can take to remedy that error. At the very least users must be notified that they can contact the Call Center in the event of a submission failure.
+
+### Components used in this pattern
+
+* [Alert]({{site.baseurl}}/components/alert)
+* [Card]({{site.baseurl}}/components/card)
+
+### Page templates available for this pattern
+
+[Email templates are available in VA Notify](https://notifications.va.gov/information/emails). NOTE: You must have a VA Notify account to access these templates.
+
+## Examples in production
 
 ### Claim status
 
-{% include component-example.html alt="An example of the track your claims page." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/track-your-claims.png" caption="The Claim status page uses Cards that provide details on the current step of the process." class="x2" %}
+{% include component-example.html alt="An example of the track your claims page." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/track-your-claims.png" caption="The Claim Status Tool uses Cards that provide details on the current step of the process." class="x2" %}
 
 ### Decision letter
 
 {% include component-example.html alt="An example of a claim status card that shows the ability to download a decision letter" file="/images/patterns/help-users-to/stay-informed-of-their-application-status/decision-letter-status-card.png" caption="This claim Card component provides a status of the claim and indicates that a decision letter is available for download." class="x2" %}
 
 ### Certificate of eligibility
 
-{% include component-example.html alt="An example of the Certificate of eligibility status page." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/COE-automatic-download-page.png" caption="The Certificate of eligibility uses an Alert component to show status." class="x2" %}
-
-### Components used in this pattern
-
-* [Alert]({site.baseurl}/components/alert)
-* [Card]({site.baseurl}/components/card)
-* [Process list]({site.baseurl}/components/process-list)
+{% include component-example.html alt="An example of the Certificate of eligibility status page." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/COE-automatic-download-page.png" caption="The Certificate of eligibility uses an Alert component on the confirmation page to show status of a synchronous request." class="x2" %}

yarn.lock

@@ -9,22 +9,31 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@department-of-veterans-affairs/component-library@^46.3.0":
-  version "46.3.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-46.3.0.tgz#9ead49541a4e50884e6812d025778298362e8bae"
-  integrity sha512-mxr847y/7/JrhLpfZo8obOM5bmmX2EBuimcvmhHgTMaHAPzpCdMcD1G7qHpPA6PdMz7aaib+F1wEfMulNDRHAw==
+"@department-of-veterans-affairs/component-library@^46.4.0":
+  version "46.4.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-46.4.0.tgz#e656e6b3e0c45a63f31256fc4e2cd4c301c542dd"
+  integrity sha512-gHMsFj5uJ8tSlL2QnDIHkMROYn+cDgoYCGsCwNpvk5p9swla8aVio/DCB3O2a9ueMhuxawvQpggG70KmawvRqw==
   dependencies:
     "@department-of-veterans-affairs/react-components" "28.1.0"
-    "@department-of-veterans-affairs/web-components" "14.3.0"
+    "@department-of-veterans-affairs/web-components" "14.4.0"
     i18next "^21.6.14"
     i18next-browser-languagedetector "^6.1.4"
     react-focus-on "^3.5.1"
     react-transition-group "^1.0.0"
 
-"@department-of-veterans-affairs/css-library@^0.11.0":
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.11.0.tgz#7ffca0910032550e72efef8d934ca070a2028ce0"
-  integrity sha512-mudcu4SVI02oz51q1jW7y4IFW8cOK+gDyswOMBmiatJrtmeuoxq8S6kFUQd77kEN1eRhxkbGLqSnVXxxq+ULkA==
+"@department-of-veterans-affairs/css-library@^0.11.1":
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.11.1.tgz#6f00091e90a3476dc90ff99e80a0d8eca7edae1f"
+  integrity sha512-OAwcKvEE62shIXutqqadAQ1VyE0oADLfybgSzKr4W5d6uUVRR5cu8zUx0aztZSGJj11yUcsgrWxnq3O0MEgZ0A==
+  dependencies:
+    "@divriots/style-dictionary-to-figma" "^0.4.0"
+    "@uswds/uswds" "^3.8.1"
+    rimraf "^5.0.5"
+
+"@department-of-veterans-affairs/css-library@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.12.0.tgz#41ac17420b1dcd13332b22cf0c4fa562bb067b3a"
+  integrity sha512-j7r9QADrf35ki0Nn8WiUhlCB6pRBZ/CPG/giJV6hwNi8PQ4X6AldgSnJ+mnZprSuswq4LAw9Sq3dKE4ezGT//Q==
   dependencies:
     "@divriots/style-dictionary-to-figma" "^0.4.0"
     "@uswds/uswds" "^3.8.1"
@@ -51,12 +60,12 @@
     react-transition-group "1"
     recast "^0.14.4"
 
-"@department-of-veterans-affairs/web-components@14.3.0":
-  version "14.3.0"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-14.3.0.tgz#3c67e86513d85c259822dc2851354abf780310c4"
-  integrity sha512-EQeKQNbenoPnprqNZPLRhw8i23R/3QPvfkMyiLd/BNmo0CgKHt0Z2Oo/octYKO9qeUIjB+d8xyfUCzQ3CQSMdA==
+"@department-of-veterans-affairs/web-components@14.4.0":
+  version "14.4.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-14.4.0.tgz#c4d4aceb91dbc80b596e24c9a9f90c1031a5d6b8"
+  integrity sha512-TGEvokHsMqQMuon34IAL5BFMByiQzsiKzmN1S66aRktNZOWN7v9OTNpAlBSuQBs976KidZD/Ac12b7vn4692Lw==
   dependencies:
-    "@department-of-veterans-affairs/css-library" "^0.11.0"
+    "@department-of-veterans-affairs/css-library" "^0.11.1"
     "@stencil/core" "4.20.0"
     aria-hidden "^1.1.3"
     body-scroll-lock "^4.0.0-beta.0"
@@ -2629,7 +2638,7 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.3.tgz#85b8fab4d71010fc3ba8772e8046cc49b8a3864b"
   integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -2647,6 +2656,15 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
+string-width@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -2663,7 +2681,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -2677,6 +2695,13 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"