Design review: Shared platform and filing platform (running checklist)

Shared platform

✅ Shared platform home (unauthenticated)

[x] Pre-clearance -- Update body text under 1. Confirm that your financial institution has an LEI @meissadia
- https://github.com/cfpb/sbl-frontend/pull/676
[x] Pre-clearance -- Update sidebar heading to "Privacy Notice" @meissadia
- https://github.com/cfpb/sbl-frontend/pull/676
[x] Pre-clearance -- Update sidebar link to "View Privacy Notice" @meissadia
- https://github.com/cfpb/sbl-frontend/pull/676
[x] Pre-clearance --- On "Privacy Act" page change heading to "Privacy Notice" @meissadia
- https://github.com/cfpb/sbl-frontend/pull/676
[x] Pre-clearance change to hero text (see Figma mock-up/comment)
- https://github.com/cfpb/sbl-frontend/pull/645 @meissadia
[x] Change email subject line to match the alert text: "[BETA] Home page: Questions or feedback"
- https://github.com/cfpb/sbl-frontend/pull/645 @meissadia
[x] Update body text and URL under "1. Confirm that your financial institution has an LEI"
- https://github.com/cfpb/sbl-frontend/pull/602 @meissadia
[x] Update body text under "2. Create an account with Login.gov using your financial institution email address"
- https://github.com/cfpb/sbl-frontend/pull/606 @meissadia
[x] Update the text in the sidebar under "Privacy act"
- https://github.com/cfpb/sbl-frontend/pull/614 @meissadia
[x] Update text for "Paperwork Reduction Act statement"
- https://github.com/cfpb/sbl-frontend/pull/618 @meissadia
[x] Update text for "Privacy Act notice"
- https://github.com/cfpb/sbl-frontend/pull/618 @meissadia

✅ Complete your user profile (associated financial institutions)

[x] Pre-clearance Add Privacy Notice language and link @meissadia
- https://github.com/cfpb/sbl-frontend/pull/687
[x] Pre-clearance Update small text in introduction @meissadia
- https://github.com/cfpb/sbl-frontend/pull/678
[x] Add breadcrumb to Platform home (missing on AWS) @meissadia
- https://github.com/cfpb/sbl-frontend/pull/643
- [x] Add breadcrumb to Platform home (missing on AWS) @meissadia
- https://github.com/cfpb/sbl-frontend/pull/643
[x] Change email subject line to: "[BETA] Complete your user profile: Form assistance" @meissadia
- https://github.com/cfpb/sbl-frontend/pull/643
[x] Update small text in introduction to include link to email support staff and new URL for GLEIF. It would be best to swap in the whole block.
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira

✅ Complete your user profile (no associated financial institutions)

[x] Pre-clearance Add Privacy Notice language and link @meissadia
- https://github.com/cfpb/sbl-frontend/pull/687
[x] Update small text in introduction
- https://github.com/cfpb/sbl-frontend/pull/678
[x] Update body text under "Provide your financial institution details" to reference emailing support staff instead of "Add an additional financial institution" button/link.
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira
[x] Change name of link/button to "Add an additional financial institution"
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira
[x] Comment out "Add an additional financial institution" button/link
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira
[x] For error alert links, remove numbering from "financial institution name" and "LEI" because there will only be one for MVP. You can comment out the numbering in code so that we can bring it back when we reveal the button/link post-MVP.
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira
[x] Update text on error alert for "Your email domain" is not authorized (pre-clearance change).
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira
[x] Add a breadcrumb to the warning alert notification screen (Your request has been submitted) that takes a user back to "Platform home" (un-authenticated).
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira -- Reviewed on 6/3/2024 -- Clicking on the breadcrumb is going back to the blank Complete your user profile form -- @shindigira
[x] Add a breadcrumb to the error alert notification screen (Your email domain is not authorized) that takes a user back to "Platform home" (un-authenticated) -- Reviewed on 6/3/2024 --- Clicking on the breadcrumb does not go anywhere -- @shindigira
- https://github.com/cfpb/sbl-frontend/pull/598 @shindigira

Shared platform home (authenticated)

[ ] ~Pipe character between Financial institution name and LEI should have two spaces before and after~ --- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] Content change to form-level error alert when can't load associated institutions
- https://github.com/cfpb/sbl-frontend/pull/649 @meissadia
[x] Form-level error alert when can't load associated institutions
- https://github.com/cfpb/sbl-frontend/pull/649 @meissadia
[x] Pre-clearance body text under "File your small business lending data" (see Figma mock-up/comment)
- https://github.com/cfpb/sbl-frontend/pull/647 @meissadia
[x] Change link under "File your small business lending data" to a button "File your data"
- https://github.com/cfpb/sbl-frontend/pull/616 @meissadia
[x] Make button text: "File your data
- https://github.com/cfpb/sbl-frontend/pull/616 @meissadia
[x] Add underline to links for bank | LEI
- https://github.com/cfpb/sbl-frontend/pull/604 @meissadia

View your user profile

[ ] ~Pipe character between Financial institution name and LEI should have two spaces before and after~ --- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] Update body text block in introduction @billhimmelsbach
- https://github.com/cfpb/sbl-frontend/pull/634
[x] Add underline to links for bank | LEI
- https://github.com/cfpb/sbl-frontend/pull/604 @meissadia

✅ View your financial institution profile

[x] Pre-clearance -- Update GLEIF URL under "Financial institution details"
- https://github.com/cfpb/sbl-frontend/pull/683 @meissadia
[x] Pre-clearance -- Line break difference between Figma and AWS in body text in "Parent entity information" section @meissadia
- Noted in design file - I have added what I believe is a missing "to" in "If you wish update the following"
[x] Pre-clearance -- Update body text under "Financial institution details"
- https://github.com/cfpb/sbl-frontend/pull/681 @meissadia
[x] Pre-clearance -- Update body text under "Financial institution identifying information"
- https://github.com/cfpb/sbl-frontend/pull/681 @meissadia
[x] Pre-clearance -- Separate "Type of financial institution" into it's own well and update body text above.
- https://github.com/cfpb/sbl-frontend/pull/681 @meissadia
[x] Pre-clearance -- Update body text under "Parent entity information (if applicable)"
- https://github.com/cfpb/sbl-frontend/pull/681 @meissadia
[x] Add "(if applicable)" to the "Parent entity information" heading
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira
[x] Update heading: "Parent entity information"
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira
[x] Update body text under "Parent entity information"
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira

✅ Update your financial institution profile

[x] Pre-clearance -- Update GLEIF URL under "Financial institution details"
- https://github.com/cfpb/sbl-frontend/pull/683 @meissadia
[x] Pre-clearance -- Update body text under "Parent entity information (if applicable)"
- https://github.com/cfpb/sbl-frontend/pull/683 @meissadia
[x] Pre-clearance -- Update body text under "Financial institution details"
- https://github.com/cfpb/sbl-frontend/pull/683 @meissadia
[x] Pre-clearance -- Add helper text under "Type of financial institution"
- https://github.com/cfpb/sbl-frontend/pull/683 @meissadia
[x] #636 @meissadia
- https://github.com/cfpb/sbl-frontend/pull/637
[x] Add "(if applicable)" to the "Parent entity information" heading
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira
[x] Update heading: "Parent entity information"
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira
[x] Update body text under "Parent entity information"
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira
[x] On AWS the filing navigation buttons are showing up at the bottom of the page. Instead this page should use the "Submit" button and "Reset form" link.
- https://github.com/cfpb/sbl-frontend/pull/608 @meissadia
[x] Remove the "Provide additional details" section
- https://github.com/cfpb/sbl-frontend/pull/592 @shindigira
[x] Content update to form-level alert (warning) body text
- https://github.com/cfpb/sbl-frontend/pull/566 @shindigira

Filing home

[ ] ~Pipe character between Financial institution name and Year should have two spaces before and after~ --- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[ ] ~Confirm that card border is using #B4B5B6 (Gray 40). If it is not update to this color.~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] Pre-clearance --- Update body text in "Upload your lending data" card
- https://github.com/cfpb/sbl-frontend/pull/660
[x] Pre-clearance --- Update body text in "Resolve errors in your lending data" card
- https://github.com/cfpb/sbl-frontend/pull/660
[x] Pre-clearance --- Update body text in "Provide point of contact" card
- https://github.com/cfpb/sbl-frontend/pull/660
[x] There's a tiny spacing thing that is off by 4 px. It looks like it's 4px coming from the top of the cards.
[x] Change space above breadcrumb to 30px (currently 45px on AWS)
- https://github.com/cfpb/sbl-frontend/pull/600 @meissadia
[x] Update body text in intro.
- https://github.com/cfpb/sbl-frontend/pull/610 @meissadia
[x] In intro body text, add comma after "specifications" and change the link to lowercase ("filing instructions guide for small business lending data").
- https://github.com/cfpb/sbl-frontend/pull/621 @meissadia

✅ Provide type of financial institution

[x] Pre-clearance -- Update intro body text link and double check rest of body content in the intro
- https://github.com/cfpb/sbl-frontend/pull/664 AND https://github.com/cfpb/sbl-frontend/pull/663 AND https://github.com/cfpb/sbl-frontend/pull/674
[x] Pre-clearance -- Add helper text to "Type of financial institution" field set
- https://github.com/cfpb/sbl-frontend/pull/664
[x] Change heading to "Provide type of financial institution" instead of "Provide your type of financial institution"
[x] Include breadcrumb to "Filing home"
[x] Change space above breadcrumb to 30px (currently 45px on AWS)
- https://github.com/cfpb/sbl-frontend/pull/600 @meissadia

Upload file

[ ] ~When a user clicks the "Save and continue" button before they have completed the requirements for the "Upload file" step they should only see an error alert positioned at the bottom of the page that says: "File upload and validation checks must be completed to save and continue." Reference 4 scenarios in design file (mock-up).~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] Enable "Save and continue" button and make "Save and continue" turn to primary when file has been successfully uploaded and validation checks have completed. Upload new file turns secondary when this happens.
- https://github.com/cfpb/sbl-frontend/pull/552 @meissadia
[x] Pre-clearance change -- Update intro text
- https://github.com/cfpb/sbl-frontend/pull/666
[x] In intro body text, add comma after "specifications" and change the link to lowercase ("filing instructions guide for small business lending data").
- https://github.com/cfpb/sbl-frontend/pull/621 @meissadia
[x] Update FIG link in intro: https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/
[x] Swap in full intro body text (latest change 5/29 at 3:30 pm ET)

Resolve errors

[ ] ~Change space under the following section heading + body text from 45px to 30px (space under "Single-field errors + body text," "Multi-field errors + body text," and "Register level errors + body text".~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] On AWS the "Upload new file" link (next to "Download report" button) styling is not correct. On AWS it is loading at 400 weight and it should be 500 weight.
- https://github.com/cfpb/sbl-frontend/pull/764 @ojbravo
[ ] ~Field-level warning alert for number of errors for validation code exceed display limit~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
- [x] Add field-level warning alert
- [ ] ~"Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] Enable "Save and continue" button and make "Save and continue" turn to primary when requirements to complete step are met
- https://github.com/cfpb/sbl-frontend/pull/552 @meissadia
[x] Pagination bug flagged in Figma
[x] Change "Upload new file" button to a link
[x] For paginated tables follow the DS/DSR component: No border around table (See: https://cfpb.github.io/design-system-react/?path=/story/components-verified-tables--pagination)
- https://github.com/cfpb/sbl-frontend/pull/583 @shindigira
- [x] Only add a border to the last page of results. Border should go around the whole table on the last page of results. @shindigira - I included an image in my Figma comment.
- https://github.com/cfpb/sbl-frontend/pull/591 @shindigira
[x] Design enhancement: Remove border from horizontal scroll tables (multi-field tables) or make table border and scrolling functionality apply to tables in excess of 770px wide
- https://github.com/cfpb/sbl-frontend/pull/583 @shindigira
[x] Make "Upload new file" a secondary button (now that Download report is a primary button) -- now shown in mock-up
- https://github.com/cfpb/sbl-frontend/pull/576 @meissadia
[x] Add "(CSV)" to button text in the intro so it reads "Download report (CSV)" (1 of 2 and 2 of 2)
- https://github.com/cfpb/sbl-frontend/pull/576 @meissadia
[x] For the "Download report" button remove "(CSV)" and add download icon (for Resolve errors 1 and 2).
[x] In small intro text, add (CSV) in parenthesis after "validation report" as shown in the mock-up (for Resolve errors 1 and 2).

Review warnings

[ ] ~Change space under the following section headings from 45px to 30px (space under "Single-field warnings" and "Multi-field warnings"_--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] On AWS the "Upload new file" link (next to "Download report" button) styling is not correct. On AWS it is loading at 400 weight and it should be 500 weight.
- https://github.com/cfpb/sbl-frontend/pull/764 @ojbravo
[ ] ~Field-level warning alert for number of errors for validation code exceed display limit~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
- [x] Add field-level warning alert
- [ ] ~"Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] Enable "Save and continue" button and make "Save and continue" turn to primary when requirements to complete step are met...add error handling (content/approach in Figma) for when a user clicks Save and continue without completing the requirements for the step
- https://github.com/cfpb/sbl-frontend/pull/552 @meissadia
[x] Add field-level alert for number of errors for validation code exceed display limit
[x] Change "Upload new file" button to a link
[x] For paginated tables follow the DS/DSR component: No border around table (See: https://cfpb.github.io/design-system-react/?path=/story/components-verified-tables--pagination)
- https://github.com/cfpb/sbl-frontend/pull/583 @shindigira
- [x] Only add a border to the last page of results
- https://github.com/cfpb/sbl-frontend/pull/591 @shindigira
[x] Design enhancement: Remove border from horizontal scroll tables (multi-field tables) or make table border and scrolling functionality apply to tables in excess of 770px wide
- https://github.com/cfpb/sbl-frontend/pull/583 @shindigira
[x] For the "Download report" button remove "(CSV)" and add download icon.
[x] In small intro text, add (CSV) in parenthesis after "validation report" as shown in the mock-up.
[x] Make "Upload new file" a secondary button (now that Download report is a primary button)-- now shown in mock-up
- https://github.com/cfpb/sbl-frontend/pull/576 @meissadia
[x] Add "(CSV)" to button text in the intro so it reads "Download report (CSV)"
- https://github.com/cfpb/sbl-frontend/pull/576 @meissadia

Provide point of contact

[x] Pre-clearance Add Privacy Notice language and link to the "Provide contact information for your submission" section - @billhimmelsbach - The width of this text is 708px on AWS. Should be 670px wide.
- https://github.com/cfpb/sbl-frontend/pull/692 @meissadia
[x] Pre-clearance [Link is good. Need confirmation from FOIA] - Update small intro text and link
- https://github.com/cfpb/sbl-frontend/pull/668 AND https://github.com/cfpb/sbl-frontend/pull/674
[x] Pre-clearance -- Change "Phone number" to "Work phone number"
- https://github.com/cfpb/sbl-frontend/pull/668
[ ] ~Fix error status styling for state selector: https://github.com/cfpb/sbl-frontend/issues/561 -- @shindigira --- @billhimmelsbach - Moving this to the front-end nice to have issue~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
[x] When a mix of empty required fields and formatting errors are submitted use “There was a problem updating your point of contact information” for the heading 
- https://github.com/cfpb/sbl-frontend/pull/548 @shindigira
[x] 30px between fields
[x] Space between eyebrow and step indicator should be 45px
- https://github.com/cfpb/sbl-frontend/issues/631 @meissadia
[ ] ~Pipe character between Financial institution name and Year in step indicator should have two spaces before and after~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800

✅ Sign and submit

[x] Warnings count is showing up as "Not available"
[x] Update the paragraph text in the success alert box at the bottom of the page.
- https://github.com/cfpb/sbl-frontend/pull/674- [x] Pre-clearance -- Update reg link to link to iRegs
- https://github.com/cfpb/sbl-frontend/pull/674
[x] Update the paragraph text in the warning alert at the top of the page
[x] Pre-clearance -- Update "Confirm your financial institution details" body text
- https://github.com/cfpb/sbl-frontend/pull/671
[x] Pre-clearance -- Update "Confirm your financial institution identifying information" body text
- https://github.com/cfpb/sbl-frontend/pull/671
[x] Pre-clearance -- Update "Confirm your parent entity information (if applicable)" body text
- https://github.com/cfpb/sbl-frontend/pull/671
[x] Pre-clearance -- Update "Confirm your filing point of contact" body text
- https://github.com/cfpb/sbl-frontend/pull/671
[x] Pre-clearance -- Change "Phone number" to "Work phone number" in "Confirm your filing point of contact" section
- https://github.com/cfpb/sbl-frontend/pull/671
[x] Pre-clearance -- Update "Confirm your register information" body text
- https://github.com/cfpb/sbl-frontend/pull/671
[x] Pre-clearance -- "Sign and certify your filing" body text -- Update reg link to link to iRegs
- https://github.com/cfpb/sbl-frontend/pull/674

Global

[x] Visual bug in "Save and continue" button - Pipe should match the button colors and should not be gray
[x] Styling adjustments to step indicator: https://github.com/cfpb/sbl-frontend/issues/612
- https://github.com/cfpb/sbl-frontend/pull/638 @meissadia
- [x] For filing flow pages, hide the green rule line in the header
- https://github.com/cfpb/sbl-frontend/pull/576 @meissadia
[x] Mis-alignment in header/grid styling: https://github.com/cfpb/sbl-frontend/issues/529
[ ] Platform home button on 500 screen should take a user to unauthenticated home. Currently the button isn't taking a user anywhere if they aren't logged in.
[x] Visual bug: CFPB logo is warped in Safari
- https://github.com/cfpb/design-system-react/pull/369 @ojbravo
[ ] ~Update nav bar items and styling and related breadcrumbs~ @ojbravo
- [x] Desktop nav items: Home, Filing, [User Name], and Log out
- [ ] ~Mobile nav items: Home, Filing, Profile (still links to View your user profile), and Log out~--- Moved to https://github.com/cfpb/sbl-frontend/issues/800
- [x] Change "Platform home" breadcrumb to "Home"
- [x] Update nav bar links to use standard link colors
- [x] Style nav bar items with CFPB type styles: Home, Filing, and User name: Avenir Next Medium (500), 16px / Log out: Avenir Next Demi Bold (600), 14px / 18px, All caps, 1px letter spacing for log out and log in.
- [x] Update the non-selected nav links to not show the dotted underline AND the selected nav bar item to be black (#101820) with a 2px solid underline.

Here's a mock-up:

Updated on 6/27/2024:

Loosely based on the consumerfinance.gov mobile megamenu. Let's pull the code that we can. https://www.consumerfinance.gov

cfpb / sbl-frontend

Design review: Shared platform and filing platform (running checklist) #578

Shared platform

✅ Shared platform home (unauthenticated)

✅ Complete your user profile (associated financial institutions)

✅ Complete your user profile (no associated financial institutions)

Shared platform home (authenticated)

View your user profile

✅ View your financial institution profile

✅ Update your financial institution profile

Filing home

✅ Provide type of financial institution

Upload file

Resolve errors

Review warnings

Provide point of contact

✅ Sign and submit

Global