Skip to content

Add documents upload form step#3978

Merged
aduth merged 9 commits intomasterfrom
aduth-documents-step
Jul 28, 2020
Merged

Add documents upload form step#3978
aduth merged 9 commits intomasterfrom
aduth-documents-step

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Jul 27, 2020

Why: As a user, I expect to be able to upload my ID documents, so that I can complete the identity verification step.

This is a basic initial implementation of the documents upload step as part of the new React-based document capture flow.

Screen Recording:

document-upload mov

Implementation Notes:

  • This makes use of the new File input component from USWDS, introduced in version 2.8.0.
    • Because identity-style-guide is currently running USWDS 2.0.3, it was implemented here by adding USWDS as a dependency and importing the stylesheet directly. It's unclear if this pull request should instead be blocked by a (pending) upgrade of USWDS in the Login Design System. The import should be relatively self-contained. In any case, long-term, it's not expected that uswds should need to be defined as a dependency of the project.
    • The File input component needs to be largely reimplemented due to current lack of support for localization in the default component implementation. See also Use localized data for interactive components uswds/uswds#3445 (comment).
  • The FormSteps component was changed to support front and back being assigned in a single step, where now each step will receive the full current form values object, and is expected to trigger changes as a patch object.
  • A new useInstanceId hook was introduced to simplify ID generation in accessible label association. This would be useful in the current Accordion component implementation, but I chose not to update it here, since it is pending removal at Update accordion to use Login Design System #3974, since it is not proposed to be used in current designs.

cc @anniehirshman-gsa

aduth added 3 commits July 27, 2020 11:33
**Why**: To more easily migrate to Login Design System standardized buttons, consolidate to abstracted component usage
Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Comment on lines +9 to +14
// This import is temporary and scoped to the new Document Capture screen. The File Input component
// is part of a USWDS version newer than what's currently shipped with Login Design System. Follow-
// up work should upgrade to use a newer USWDS, at which time this should be removed altogether.
#document-capture-form {
@import 'uswds/dist/scss/elements/form-controls/file-input';
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In some last-minute testing to see what potential side-effects could occur from this import, I noticed that the USWDS file input stylesheet applies some styles to file inputs globally. While the version of USWDS which is bundled with Login Design System does include some as well, they are not the same (margin, padding). This has the result that file inputs elsewhere in the application would have their styling altered unintentionally.

As a workaround, I updated the @import to be scoped to the #document-capture-form element used as the mounting point for the new React application, to ensure that styling only takes effect for the new page, until the design system can be upgraded as a whole.

**Why**: The rule makes sense in cases where styling is intended to be reused. In this case, the usage is where it's explicitly intended not to be reused.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants