Experimental Design - Statement of Truth

[ndsprinkle]

What

The Statement of Truth is a section at the end of every form that contains legal text, the privacy policy, a signature input, and a checkbox.

Purpose

This allows the user to "sign" the digital form (which usually becomes a PDF/paper form eventually).

Usage

This would be used in every form created for VA.gov and would live on the review and submit page.

Behavior

Above the gray card, we need a default, unchangeable paragraph of text:

<strong>Note:</strong> According to federal law, there are criminal
penalties, including a fine and/or imprisonment for up to 5 years,
for withholding information or for providing incorrect information
(See 18 U.S.C. 1001).

I believe this is the penalty notice component, but I didn't see a way to currently use this.

Inside the gray card, we need an h3 heading that defaults to "Statement of truth" and supports custom text that can be passed in to fully replace the text.

For the body of the card, it would be great if this could be fully custom HTML as there is a need for support of more than just text. Sometimes the body of the statement of truth may contain things like a list or multiple sections, so just a string would not be a enough.

Following that, we need another paragraph that says "I have read and accept the privacy policy." that is unchangeable and properly links to the privacy policy.

After that, we need a text input followed by a checkbox. Both of these would need to support their normal web component properties and be able to support separate error messages that are both customizable via independent error properties. The label of the text input should default to "Your full name" (and again be fully customizable via the text input properties) and the checkbox label should default to "I certify the information above is correct and true to the best of my knowledge and belief." (again, customizable).

Examples

Also, the pattern is already defined here, although in a slightly out of date spec: https://design.va.gov/patterns/ask-users-for/signature

Accessibility

Accessibility guidelines were followed by our designers and engineers to update and implement this pattern in the forms library.

Guidance

That this should be used on the review page of every form digitized on VA.gov. The signature text input field should have validation configured to exactly match a previously entered name in the form. This name may vary based on the form or based on the path taken in the form. Our usage of this new web component will support that validation logic in a addition to a few other configuration options.

Research (optional)

Research has been performed by our team and I will update this ticket with a link to that.

Code (optional)

This has already been implemented in the PreSubmitSection.jsx file of our forms library. The section nested inside the statementOfTruth object contains the code that renders the pattern. Depending on the timing of a PR that is currently open, the old React checkbox may be currently in use, but we obviously intend on using the web component checkbox.

[humancompanion-usds]

The task here is for us to create a new component and then update our pattern to reference that new component.

[humancompanion-usds]

See also issue #344

[caw310]

@ndsprinkle , if there is time on Friday, July 14, we would like to discuss this during the DSC meeting. Are you available to attend?

[caw310]

This is on the agenda of the DSC meeting on 7.14.

[caw310]

Decision from DSC meeting. Will turn it into a component.

[caw310]

Stretch item for sprint 35

[caw310]

This will carry over into sprint 36. It was a stretch in sprint 35 and was started but will be completed in the next sprint.

[it-harrison]

@jeana-adhoc could you take a look at this PR to determine if the new component satisfies what the forms team is looking for? Thanks!

[jeana-adhoc]

Hi @it-harrison - I took a look in storybook, and populated the inputMessageAriaDescribedy and it worked with a screen reader as expected.

However - I noticed one thing that's probably unrelated to your specific work - it looks like there are 2 different font families going on in the component. "Source sans pro" for paragraph and header text and "Source sans pro web" on the input labels? And the sizes are defined differently. Is this expected?

[it-harrison]

PR is here

[it-harrison]

@jeana-adhoc fonts in the component have been harmonized. thanks for the nudge!

[caw310]

Sketch file link if we need it. https://www.sketch.com/s/9766bff3-3825-49af-a417-e018bf3e0e87/a/71an1Wb