[Task] [Complete your user profile] DSR and Figma Alignment #146

shindigira · 2024-01-05T20:48:43Z

Closes #85
Closes #120

Important note to Developer Reviewers

DSR has been updated so you will need to reinstall the DSR package

Pending Approvals

Deploy to AWS DEV environment (Navigate to /profile-form)
Design team approval
Development team review

Additional Changes Needed (01/11/2024) -- [comment update]](#146 (comment))

Error Head Links - Used ListLink styling to make the links heavier weighted
Denied email notification - Updated the content text again

Additional Changes Needed (01/10/2024) -- comment update

Header Bar - Remove “User name” and “Log out” links.
TextInput/Checkbox - Removed extra gray border when a red border is used during an error (tailwind override styles problem)
Update Text - Based on [Task] [Complete your user profile] DSR and Figma Alignment #146 (review)
Moved Select Institutions error to within the well.
Pending DSR update to fix the AlertFieldLevel styling issues

Additional Changes Needed (01/09/2024) -- Figma update

Content change (In well) - If you are authorized to file for an institution that is not listed above, please contact our support staff. 
Content change (Section heading) - Select the institution you are authorized to file for
Design change - Change sections to H2 (includes Provide your identifying information and Select the financial institution you are authorized to file for. Top margin for these H2 sections: 60px [3.75rem].
Design - Checkbox label should use the inline label component: https://cfpb.github.io/design-system-react/?path=/docs/components-verified-labels--overview#inline-label. It appears that both checkboxes and radio buttons in the DSR are pulling in a-label-heading which is larger. The bank name should be styled Medium and the rest of the items be Regular weight.
Additional spacing changes - [Task] [Complete your user profile] DSR and Figma Alignment #146 (comment)

Main Changes

Utilizes DSR's TextInput in InputEntry
Utilizes DSR's AlertFieldLevel in InputErrorMessage
Utilizes DSR's AlertFieldLevel in NoDatabaseResultError
Utilizes DSR's TextIntroduction in Step1FormHeader

Dev Changes

Added a logout command usable from the brower's console due to after logging in with a non-domain email the app hard-forwards the user to the SBL Help link with no way of stopping this.
Resolved TypeScript errors in AssociatedFinancialInsitutions.
Centralized sblHelp and gleif links in a common spot.

Screenshot

Checkbox styling update

…rofile

…S errors in Associated

src/api/submitUserProfile.tsx

src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx

shindigira · 2024-01-08T17:50:49Z

@natalia-fitzgerald At your convenience, please review and point out where the User Profile does not meet the design standard. Danke!

shindigira · 2024-01-08T18:48:50Z

@natalia-fitzgerald At your convenience, please review and point out where the User Profile does not meet the design standard. Danke!

Actually, noticed a few new changes in the Figma. I will make a few more changes before requesting your review.

…rofile

shindigira · 2024-01-08T21:40:09Z

@meissadia @billhimmelsbach Ready for another developer review before pushing to AWS and having Natalia review it.

billhimmelsbach

Looking good, one quick comment and a question for @natalia-fitzgerald.

@natalia-fitzgerald, could we get one more quick look through the content on Figma for this page? I see some small discrepancies in the content between Figma and this PR, but I want to make sure I'm looking at the right thing on Figma before I tell Sigmund to update it.

src/utils/common.ts

billhimmelsbach

Hey @shindigira! Worked with @natalia-fitzgerald a bit this morning to make sure the content copy is right, so could you update the content text to the latest version in Figma?

shindigira · 2024-01-09T16:41:46Z

@billhimmelsbach
I updated the content text. Please re-review.

…rective

shindigira · 2024-01-11T10:41:41Z

@natalia-fitzgerald Thanks for the feedback. I updated all changes based on your last comment except for the AlertFieldLevel style issues which will require this DSR PR to be integrated.

As soon as this gets in, we can update the AWS deployment for you to review again.

Also, the TextInput component was already dev verified. Just needs you to verify it officially here.

natalia-fitzgerald · 2024-01-11T13:10:31Z

@shindigira
Two more changes:

These links should be styled as list links/get the heavier weight (because they are on their own line instead of inline with the body text):
Can we check the checkbox expected behavior here against the DS? Is the blue line supposed to show through in the error state? I think we need to work to verify the Alert component in the DSR.

40cf8971cdd6)
Ok, I'll review the Text input component later today. I didn't realize that was pending design review/approval.

natalia-fitzgerald · 2024-01-11T16:47:33Z

@shindigira
One last change on the content for the denied email notification. Please use this content.

If you are still having trouble, visit Login.gov/account and confirm that your financial institution email has been added to your account. If your financial institution email is not listed, follow the steps to add it to your account.

With this the content changes should be completed.

shindigira · 2024-01-11T17:12:05Z

@natalia-fitzgerald I've updated this PR based on your feedback.

I also found the reason for the "gray border under the red border" problem you've found in the TextInput as it turns out tailwind had interferring styles. Here is the TextInput fixed:

The AlertFieldLevel style issues should be fixed in wip fix: [AlertFieldLevel] margin 0.5em, icon vertical centering issue, TextInput changes, Checkbox changes design-system-react#278. Please check out the DSR update previewed here.
The Checkbox styling is proper. You are seeing the red border during an error on the Checkbox component which was never before in the DSR so that is why you are noticing the red/blue interference during hover.

* feat: utilized useRef in Step1FormErrorHeader Changes: - utilized useRef in Step1FormErrorHeader to focus an error element * fix: lint errors * chore: moved function to profileformutils * feat: added back scroll animation to step1formerrorheader * chore: remove unused useref * fix: removed unused var * refactor: added type to submitprofile * chore: pulled in 85 and fixed merge conflicts * fix: resolved conflicts 2 * revert: reverted to document.querySelector use * fix: resolved merge conflicts * style: fix gray/red border * style: remove periods from error header text * chore: removed class attribute

billhimmelsbach

Looking good! @shindigira and I talked about two future PRs to get to another design review by Natalia.

shindigira added 2 commits January 5, 2024 15:47

refactor: Utilized DSR AlertFieldLevel in NoDatabaseResultError

7aadbcc

refactor: created a const for the sblhelp link

7f27a85

shindigira changed the title ~~wip 85 dsr userprofile~~ wip 85 120 dsr userprofile Jan 5, 2024

shindigira added 7 commits January 5, 2024 16:09

refactor: InputEntry utilizes DSR's TextInput

0fc8bc8

refactor: Utilized DSR AlertFieldLevel in InputErrorMessage

0b3a026

dev: placed a way to destroy the login creds during development

75099ba

refactor: auto-format

f708e8f

chore: removed import

b9b75bf

Merge branch 'main' of github.com:cfpb/sbl-frontend into 85-dsr-userp…

c92bdfa

…rofile

refactor: Utilized TextIntroduction in Step1FormHeader and resolved T…

1132062

…S errors in Associated

shindigira changed the title ~~wip 85 120 dsr userprofile~~ [Task] [User Profile] DSR and Figma Alignment Jan 5, 2024

shindigira requested review from meissadia, billhimmelsbach and natalia-fitzgerald January 5, 2024 22:59

billhimmelsbach reviewed Jan 8, 2024

View reviewed changes

src/api/submitUserProfile.tsx Outdated Show resolved Hide resolved

billhimmelsbach requested changes Jan 8, 2024

View reviewed changes

src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx Outdated Show resolved Hide resolved

shindigira added 2 commits January 8, 2024 12:38

fix: RSSD not RSS

7b62970

chore: changed type to null

131dbf4

shindigira added 4 commits January 8, 2024 14:09

chore: changed TAX ID to TIN

db5ff92

feat: email text instead of disabled input

d8cfb37

style: adjusted spacing styles on User Profile

0a6cd9e

Merge branch 'main' of github.com:cfpb/sbl-frontend into 85-dsr-userp…

5997892

…rofile

billhimmelsbach requested changes Jan 9, 2024

View reviewed changes

src/utils/common.ts Show resolved Hide resolved

chore: added TODO

fac1333

billhimmelsbach requested changes Jan 9, 2024

View reviewed changes

refactor: updated content text to the figma

17a49da

shindigira added 2 commits January 11, 2024 05:35

style: fixed tailwind overriding styles by removing @tailwind directives

53aa0ad

style: fixed tailwind overriding styles by removing @tailwind base di…

7991c7d

…rective

shindigira added 2 commits January 11, 2024 11:56

chore: updated denied email notification based on figma

e79c9b5

style: uses the listlink in the step1formerrorheader

b7fad69

shindigira mentioned this pull request Jan 11, 2024

wip fix: [AlertFieldLevel] margin 0.5em, icon vertical centering issue, TextInput changes, Checkbox changes cfpb/design-system-react#278

Draft

5 tasks

shindigira added 3 commits January 11, 2024 13:25

style: moved error within well

9b21bdc

style: small em to rem fix

fc0ec76

style: style mt fix

59eba5f

shindigira force-pushed the 85-dsr-userprofile branch from 225e982 to 59eba5f Compare January 11, 2024 18:49

shindigira added 6 commits January 11, 2024 13:58

fix: merge conflicts

ee5966a

style: style updated spacings

6b056da

style: spacing 2

0bdb4e9

fix: removed unused variable

424b438

fix: resolved merge conflicts from authenticatedlanding PRs

74da277

billhimmelsbach requested review from natalia-fitzgerald and billhimmelsbach and removed request for natalia-fitzgerald January 11, 2024 22:33

shindigira added 3 commits January 11, 2024 17:41

chore: package fix

9bcb2df

chore: CFPB package update

64ad038

chore: updated content text - checkbox well

d0ec02d

billhimmelsbach approved these changes Jan 11, 2024

View reviewed changes

shindigira merged commit 72fc91a into main Jan 11, 2024

shindigira mentioned this pull request Jan 12, 2024

[Update] Complete Your User Profile - Content text updates from Figma, Checkbox Group Status/Focus Style Update #169

Merged

billhimmelsbach deleted the 85-dsr-userprofile branch May 31, 2024 14:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Task] [Complete your user profile] DSR and Figma Alignment #146

[Task] [Complete your user profile] DSR and Figma Alignment #146

shindigira commented Jan 5, 2024 •

edited

Loading

shindigira commented Jan 8, 2024

shindigira commented Jan 8, 2024

shindigira commented Jan 8, 2024

billhimmelsbach left a comment

billhimmelsbach left a comment

shindigira commented Jan 9, 2024 •

edited

Loading

shindigira commented Jan 11, 2024 •

edited

Loading

natalia-fitzgerald commented Jan 11, 2024 •

edited

Loading

natalia-fitzgerald commented Jan 11, 2024

shindigira commented Jan 11, 2024 •

edited

Loading

billhimmelsbach left a comment

[Task] [Complete your user profile] DSR and Figma Alignment #146

[Task] [Complete your user profile] DSR and Figma Alignment #146

Conversation

shindigira commented Jan 5, 2024 • edited Loading

Important note to Developer Reviewers

Pending Approvals

Additional Changes Needed (01/11/2024) -- [comment update]](#146 (comment))

Additional Changes Needed (01/10/2024) -- comment update

Additional Changes Needed (01/09/2024) -- Figma update

Main Changes

Dev Changes

Screenshot

shindigira commented Jan 8, 2024

shindigira commented Jan 8, 2024

shindigira commented Jan 8, 2024

billhimmelsbach left a comment

Choose a reason for hiding this comment

billhimmelsbach left a comment

Choose a reason for hiding this comment

shindigira commented Jan 9, 2024 • edited Loading

shindigira commented Jan 11, 2024 • edited Loading

natalia-fitzgerald commented Jan 11, 2024 • edited Loading

natalia-fitzgerald commented Jan 11, 2024

shindigira commented Jan 11, 2024 • edited Loading

billhimmelsbach left a comment

Choose a reason for hiding this comment

shindigira commented Jan 5, 2024 •

edited

Loading

shindigira commented Jan 9, 2024 •

edited

Loading

shindigira commented Jan 11, 2024 •

edited

Loading

natalia-fitzgerald commented Jan 11, 2024 •

edited

Loading

shindigira commented Jan 11, 2024 •

edited

Loading