From a0db4655dbce923e893064521699ccc9f9ca0a28 Mon Sep 17 00:00:00 2001 From: Matthew Dingee <52176351+humancompanion-usds@users.noreply.github.com> Date: Thu, 18 Jan 2024 18:06:14 -0500 Subject: [PATCH 1/3] Updates the signature pattern with details on how to generate a PDF. [Fixes #2382] --- src/_components/form/statement-of-truth.md | 6 +- src/_patterns/ask-users-for/signature.md | 65 +++++++++++++++++++--- src/_patterns/template.md | 9 ++- yarn.lock | 15 ++--- 4 files changed, 72 insertions(+), 23 deletions(-) diff --git a/src/_components/form/statement-of-truth.md b/src/_components/form/statement-of-truth.md index c33d677b9..d4ca5ca2d 100644 --- a/src/_components/form/statement-of-truth.md +++ b/src/_components/form/statement-of-truth.md @@ -42,7 +42,7 @@ anchors: ### How this component works -The component works by asking the user to populate the text-input field with their name. That name must match the name entered earlier into the form on a previous step. If the name does not match, an error message is returned. +The component works by asking the user to populate the text-input field with their name. That name must match the name entered earlier into the form on a previous step. If the name does not match, an error message is returned. ### Behavior @@ -54,7 +54,9 @@ The component works by asking the user to populate the text-input field with the ### Instances of this component in production -[VA Form 10-10CG (Application for Family Caregiver Benefits)](https://www.va.gov/family-member-benefits/apply-for-caregiver-assistance-form-10-10cg/introduction) +* [Application for Family Caregiver Benefits (VA Form 10-10CG)](https://www.va.gov/family-member-benefits/apply-for-caregiver-assistance-form-10-10cg/introduction) +* [Submit a lay or witness statement to support a VA claim - Lay/Witness Statement (VA Form 21-10210)](https://www.va.gov/supporting-forms-for-claims/lay-witness-statement-form-21-10210/introduction) +* [Request personal records - Freedom of Information Act (FOIA) or Privacy Act (PA) Request (VA Form 20-10206)](https://www.va.gov/records/request-personal-records-form-20-10206/introduction) {% include component-docs.html component_name=page.web-component %} diff --git a/src/_patterns/ask-users-for/signature.md b/src/_patterns/ask-users-for/signature.md index 16157de8a..8b776ad65 100644 --- a/src/_patterns/ask-users-for/signature.md +++ b/src/_patterns/ask-users-for/signature.md @@ -34,15 +34,64 @@ This pattern is used at the end of a form review page. ### Layout details -- Instructions for the user around signing the certification -- Card -- Heading: Veteran’s statement of truth -- Content (specific to form) -- Link to [privacy policy page](https://www.va.gov/privacy-policy/) -- Text input for signature -- Checkbox for certification +* Instructions for the user around signing the certification +* Card +* [Statement of truth component]({{ site.baseurl }}/components/form/statement-of-truth) ### How this pattern works - **Signature pattern does not exist in every form.** If your form needs a certification statement or statement of truth, we recommend using this pattern. -- **When using this pattern, do not add the privacy policy checkbox at the end of the form.** The user does not need to check another checkbox for privacy policy. \ No newline at end of file +- **When using this pattern, do not add the privacy policy checkbox at the end of the form.** The user does not need to check another checkbox for privacy policy. + +### Implementation details + + +

+ Generating a PDF: When generating a PDF for submission, for example when using the Benefits Intake API, the following rules must be adhered to. +

+ + +#### Generating a PDF + +* **Veteran's name from Statement of truth is entered into the Signature field.** Enter the input from the Statement of truth text-input into the Requester's or Veteran's signature field on the PDF. If the form is not using the Statement of truth component yet, use the user's signed-in name. **NOTE:** All forms should implement the Statement of truth component. +* **Current date is entered into the Date Signed field.** Enter the current date into Date Signed or Date field usually found next to the Signature field on the paper form. +* **Date & timestamp and authentication level are added at the bottom right of all generated pages.** At the bottom right of each page the date and time in UTC as well as the authentication level of the submitter of the form must be indicated. This takes the [Date and timestamp watermark format](#date-and-timestamp-watermark-format). +* **Date and timestamp the form in the VA DATE STAMP box, when available.** If the paper form you are populating has a VA DATE STAMP box in the upper right-hand corner, this field must be populated with the date and time in UTC that the form was submitted. This takes the [Date and timestamp VA DATE STAMP box format](#date-and-timestamp-va-date-stamp-box-format). NOTE: Older versions of some forms may not have the VA DATE STAMP box. +* **All date and time stamps are in Coordinated Universal Time (UTC).** Use the UTC timezone when generating date and time stamps on forms as this is how form submission data is stored. +* **All date and time stamps must be the date the form was initially submitted.** Date the time stamps must be the date the form was initially submitted and not the date and time the PDF was generated. This is a requirement due to potential delays or submission issues. This ensures Veterans get the earliest possible date -- when they first hit submit. + +#### Date and timestamp watermark format + +##### Unauthenticated + +> Signed electronically and submitted via VA.gov at 11:30 UTC 2023-12-13. Signee not signed in. + +##### Identity Assurance Level 1 (IAL1) + +> Signed electronically and submitted via VA.gov at 11:30 UTC 2023-12-13. Signee signed in but hasn’t verified their identity. + +##### Identity Assurance Level 2 (IAL2) + +> Signed electronically and submitted via VA.gov at 11:30 UTC 2023-12-13. Signee signed with an identity-verified account. + +#### Date and timestamp VA DATE STAMP box format + +> Application Submitted:
+> 11:30 UTC 2023-12-13 + +[Example PDFs](https://www.figma.com/file/Mcspa23rssXdDqwoWumuEV/Date-Authenticated-PDF-Stamp?type=design&node-id=1-25&mode=design&t=1tySoIe8RW7XGFMu-0) are available. + +### Components used in this pattern + +* [Statement of truth component]({{ site.baseurl }}/components/form/statement-of-truth) + +### Page templates available for this pattern + +* [VADS Templates](https://www.figma.com/file/4A3O3mVx4xDAKfHE7fPF1U/VADS-Templates---SANDBOX-USE-WITH-CAUTION?type=design&node-id=112%3A11074&mode=design&t=jGEZxdu9cs3idXUa-1) contains a page template for the Review page which contains this pattern. diff --git a/src/_patterns/template.md b/src/_patterns/template.md index 8a5f1885a..ab925356d 100644 --- a/src/_patterns/template.md +++ b/src/_patterns/template.md @@ -19,6 +19,7 @@ anchors: The intro-text appears fist and should contain the purpose and definition of the pattern. If you need to provide additional context of when and why to use this pattern then include it here. There are some potential types of patterns: + - Help a user to... - Ask a user for... @@ -29,7 +30,9 @@ There are some potential types of patterns: Criteria for when the pattern is appropriate. May contain: + #### Design principles + - Design principles to consider ### When not to use this pattern @@ -40,8 +43,8 @@ Criteria for when the pattern is inappropriate. Criteria for when the pattern could work with additional prototyping and testing. - **Additional Usage sub-sections may include:** + - Inputs and outputs - How to tell users - When to tell users @@ -52,13 +55,15 @@ Criteria for when the pattern could work with additional prototyping and testing Examples of this pattern on VA.gov. May contain reference or links to: + ### Other relevant examples + - Instances of this pattern at other agencies - Other digital services in other countries using this pattern ### Examples in production -## How to design and build +## How to design and build ### Anatomy or layout details diff --git a/yarn.lock b/yarn.lock index 3f2aa5910..b66405e4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21,13 +21,6 @@ react-focus-on "^3.5.1" react-transition-group "^1.0.0" -"@department-of-veterans-affairs/css-library@^0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/css-library/-/css-library-0.2.0.tgz#19d3c2a6428687034c9faf8aff4020167d274bad" - integrity sha512-Reaj5iUyg3WrSKD/fyiKyGkWFog5oJQzg4j9bC+uyazNXVFMmtqERvRI/FRsUhTV5cTrh52KGjoEWfRI/gdonA== - dependencies: - "@divriots/style-dictionary-to-figma" "^0.4.0" - "@department-of-veterans-affairs/css-library@^0.2.0": version "0.2.0" resolved "https://registry.npmjs.org/@department-of-veterans-affairs/css-library/-/css-library-0.2.0.tgz" @@ -35,10 +28,10 @@ dependencies: "@divriots/style-dictionary-to-figma" "^0.4.0" -"@department-of-veterans-affairs/formation@^9.0.1": - version "9.0.1" - resolved "https://registry.npmjs.org/@department-of-veterans-affairs/formation/-/formation-9.0.1.tgz" - integrity sha512-tovSaOQJ8IOYOjeDGmG7tuocq0LZ3YA58FrZTW2HratFZiFwGPE7UYSGt0a2YuSagQzIibcz0ZetphHMS6WicQ== +"@department-of-veterans-affairs/formation@^10.1.2": + version "10.1.2" + resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/formation/-/formation-10.1.2.tgz#79008f8c6720b15c67ac9747c3758f6700e5b51f" + integrity sha512-XWtY7t7Ud5lKgtiZbdNetv2eQoPuXfGNf2EznDeGnd1zTXa15SqZ+DvXtLe7E2c9dq65xF8M2pvwh/j8jyxMMQ== dependencies: "@fortawesome/fontawesome-free" "^5.15.4" domready "^1.0.8" From 4fca52feba192bf85cd5552baf46120593bff595 Mon Sep 17 00:00:00 2001 From: Matthew Dingee <52176351+humancompanion-usds@users.noreply.github.com> Date: Thu, 18 Jan 2024 18:16:01 -0500 Subject: [PATCH 2/3] Adds an additional page example for the language toggle. --- src/_components/language-toggle.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/_components/language-toggle.md b/src/_components/language-toggle.md index 8508a8025..70c9b220f 100644 --- a/src/_components/language-toggle.md +++ b/src/_components/language-toggle.md @@ -58,10 +58,18 @@ The component appears 32px below the "In this section" menu and 24px above the h ### Instances of this component in production +#### COVID-19 vaccines at VA + * [COVID-19 vaccines at VA](https://www.va.gov/health-care/covid-19-vaccine/) * [Vacunas contra el COVID-19 en VA](https://www.va.gov/health-care/covid-19-vaccine-esp/) * [Mga bakuna sa COVID-19 sa VA](https://www.va.gov/health-care/covid-19-vaccine-tag/) +#### The PACT Act and your VA benefits + +* [The PACT Act and your VA benefits](https://www.va.gov/resources/the-pact-act-and-your-va-benefits/) +* [La Ley PACT y sus beneficios de VA](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-esp/) +* [Ang PACT Act at ang iyong mga VA benefits](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-tag/) + ## Content considerations * **Link is in native language.** Links in this component should be in the native language. For example, "Español". Note: Sometimes the word is the same in both English and the target language, for example "Tagalog". From 13fc93d34d1ac0d3ec193bf6dcf875a2507035b4 Mon Sep 17 00:00:00 2001 From: Matthew Dingee <52176351+humancompanion-usds@users.noreply.github.com> Date: Fri, 19 Jan 2024 13:47:38 -0500 Subject: [PATCH 3/3] Updates post-feedback. [Amends #2382] --- src/_patterns/ask-users-for/signature.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/_patterns/ask-users-for/signature.md b/src/_patterns/ask-users-for/signature.md index 8b776ad65..25b0e54f2 100644 --- a/src/_patterns/ask-users-for/signature.md +++ b/src/_patterns/ask-users-for/signature.md @@ -60,8 +60,10 @@ This pattern is used at the end of a form review page. #### Generating a PDF +This guide is for software engineers generating a PDF for submission to the Benefits Intake API. + * **Veteran's name from Statement of truth is entered into the Signature field.** Enter the input from the Statement of truth text-input into the Requester's or Veteran's signature field on the PDF. If the form is not using the Statement of truth component yet, use the user's signed-in name. **NOTE:** All forms should implement the Statement of truth component. -* **Current date is entered into the Date Signed field.** Enter the current date into Date Signed or Date field usually found next to the Signature field on the paper form. +* **Current date is entered into the Date Signed field.** Enter the current date into Date Signed or Date field usually found next to the Signature field on the paper form. Entering the current date without asking the user for it is appropriate. * **Date & timestamp and authentication level are added at the bottom right of all generated pages.** At the bottom right of each page the date and time in UTC as well as the authentication level of the submitter of the form must be indicated. This takes the [Date and timestamp watermark format](#date-and-timestamp-watermark-format). * **Date and timestamp the form in the VA DATE STAMP box, when available.** If the paper form you are populating has a VA DATE STAMP box in the upper right-hand corner, this field must be populated with the date and time in UTC that the form was submitted. This takes the [Date and timestamp VA DATE STAMP box format](#date-and-timestamp-va-date-stamp-box-format). NOTE: Older versions of some forms may not have the VA DATE STAMP box. * **All date and time stamps are in Coordinated Universal Time (UTC).** Use the UTC timezone when generating date and time stamps on forms as this is how form submission data is stored.