Merge pull request #2407 from department-of-veterans-affairs/pdf-time…

…stamp-2382

Updates the signature pattern with details on how to generate a PDF. [Fixes #2382]

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 %}
 

src/_patterns/ask-users-for/signature.md

@@ -34,15 +34,66 @@ 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. 
+- **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
+
+<va-alert
+  close-btn-aria-label="Close notification"
+  full-width="false"
+  slim
+  status="warning"
+  uswds
+  visible="true"
+>
+  <p class="vads-u-margin-y--0">
+    <strong>Generating a PDF:</strong> When generating a PDF for submission, for example when using the <a href="https://developer.va.gov/explore/api/benefits-intake">Benefits Intake API</a>, the following rules must be adhered to.
+  </p>
+</va-alert>
+
+#### Generating a PDF
+
+This guide is for software engineers generating a PDF for submission to the <a href="https://developer.va.gov/explore/api/benefits-intake">Benefits Intake API</a>.
+
+* **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. Entering the current date without asking the user for it is appropriate.
+* **Date &amp; 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:<br />
+> 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.

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
 

yarn.lock

@@ -21,24 +21,17 @@
     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"
   integrity sha512-Reaj5iUyg3WrSKD/fyiKyGkWFog5oJQzg4j9bC+uyazNXVFMmtqERvRI/FRsUhTV5cTrh52KGjoEWfRI/gdonA==
   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"