Consolidated list of user interface updates

[natalia-fitzgerald]

User interface updates

Issues ready to be worked on

For the following issues, create an issue for them and add this comment to the description "Relates to: cfpb/sbl-project#286", and then link the PR to the item when it's completed

• @tanner-ricks Pipe character between Financial institution name and Year should have two spaces before and after (check DSR)
• @tanner-ricks ? Use CFPB colors for all code (tailwind theme based on CFPB colors)
• @meissadia Sync DSR to design system for expandable component
• @meissadia Change Update financial institution profile form to use "Not applicable"
• Bug: Multi-select state styling: Invalid blue line / red line on top of each other
• DSR component bug: Mobile pagination implementation doesn't match CFPB Design System component -- I spoke to Sigmund and he said he'd like to look into rebuilding the pagination component to use flexbox and maybe tweak the sizes of certain items.
• @billhimmelsbach Change all external links to open in a new tab (including links to cf.gov - outside of the platform) - Bill will put up Meissa's work on Dev
• Multi-Select - State Selector hover styling issue
• Pagination - Mobile styling issue - DS vs DSR vs SBL
• Improvements to platform navigation menu #1033 (might be related to [Styling Issues] Landing pages #315)

Issues that need to be confirmed were done:

For the following check the site to see if these are implemented, if they are, check the box and add your name

• Confirm that card border is using #B4B5B6 (Gray 40). If it is not update to this color. (filing home)
• Confirm: 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). Confirm this is true.
• Confirm: 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".
• Confirm: "Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)
• Confirm: Change space under the following section headings from 45px to 30px (space under "Single-field warnings" and "Multi-field warnings"
• Confirm: "Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)
• Confirm: Fix error status styling for state selector
• Confirm: Inline data collection Privacy Notice - Text block should be 670px wide (currently set to 708px on the platform).
• Confirm: padding for mobile around the outside of the page (match cf.gov)

Issues that may take longer:

These issues might take longer than an hour or two, but feel free to pick them up if time allows

• Consolidate styling into tailwind (convert certain css or less files into tailwind and then remove)
• Secondary button styling - Additional style updates - 2px weight for border on hover. Discuss with @shindigira (DS)
• Frontend reporting -> upon 500 send the error to backend

Below is the full list of issues, not categorized

1. Step indicator

[Story] cfpb/sbl-project#277

• Pipe character between financial institution name and year in step indicator should have two spaces before and after
• Add mobile H4 for step indicator labels (if we don't implement the mobile styling yet)
• Implement mobile styling for step indicator (shown below)
  • At mobile, step labels go away and instead UI shows "Step # of #" styled as an H5 with 15px of space above and below

Current implementation

Shared platform	Filing app

Proposed implementation

Shared platform	Filing app

2. Loading indicator

• Change loading text to H3
  • [Loading] Use generic "Loading" message for all statuses #774
• Position the loading indicator higher up on the page (currently, vertically centered between the header and footer but @meissadia is checking whether the Loading component is driving the sizing of the page or whether the destination page size is driving this)
  • Meissa: Approach to positioning is odd but it seems we can solve this by setting the top margin to a constant, smaller amount.

3. 500 and 404 errors

• 500 page should have the same url as the page that brings you there: a refresh should retry loading the page you were on. You could do this with some history manipulation or by making it an Error Boundary.
• chore(deps): bump ws from 8.16.0 to 8.17.1 in the npm_and_yarn group #730
• Update subheading and button text to what is shown in the mock-ups below
• Update expandable to reflect standard expandable component in the CFPB Design System component
  
• Expandable should pull in the DS component style. In the current implementation the text is too large and the open close button is black instead of blue. Padding is also incorrect.
• Update expandable header text to "View error details"
  

500 page: We have encountered an error. Visit the small business lending data submission platform homepage for additional resources or contact our support staff. Button: Visit homepage

404 page: Visit the small business lending data submission platform homepage for additional resources or contact our support staff. Button: Visit homepage

4. Enable save and continue (or submit) button

• I created this ticket to track my review of this --- Review design implementation of enable save and continue  sbl-ux#11
• Bill checked this off because he believes that it is done and has been pushed to beta but I will click around to confirm
• Add error box at the bottom of the page for when a user hits save and continue without completing required fields. This alert will appear at the bottom when the page is not a form. The one exception is Review warnings which technically could have the standard form approach but we will do implement this snowflake approach on account of the page being potentially long. When the page is a form the alert will appear at the top with jump links to the relevant required fields (this includes all of the shared platform forms and type of financial institution and point of contact).

Upload file (mock-ups)

For discussion

• Should "Upload new file" stay enabled during upload? Is there a benefit or reason to have it be disabled?

PR for the following 4 scenarios

• [Filing] Upload - Adjust when we render the 'Unable to continue' messaging #767

Scenarios for clicking "Save and continue"

• Scenario 1: When no file has been uploaded and the user clicks "Save and continue", then they see "You must successfully upload your file and complete validation checks to save and continue."
  

• Scenario 2: When a file is in the process of being uploaded and having validation checks performed and they click "Save and continue", then they will see "You must successfully upload your file and complete validation checks to save and continue."
  
  

• Scenario 3: When a file fails to upload or get through validations, then the users sees a "Problem uploading your file" message. If a user clicks “Save and continue” when the page is in this state the alert is added to the bottom of the page (and the rest of the page content persists)
  

• Scenario 4: When a file has been uploaded and validated (success) and the user clicks "Save and continue", they go to the errors pages. 
  

Type of financial institution and Point of contact (mock-ups)

These will follow the standard forms flow where the alert appears at the top of the page with links to the relevant required fields. Clicking submit bounces the user to the top of the page where the form-level alert sits with the relevant jump links.

Resolve errors (mock-ups)

Review warnings (mock-ups)

5. Other updates/fixes

• Change all external links to open in a new tab (including links to cf.gov - outside of the platform)

  • Open external links in new tab #784

• @shindigira Bug: Multi-select state styling: Invalid blue line / red line on top of each other
  

• @shindigira DSR component bug: Mobile pagination implementation doesn't match CFPB Design System component -- I spoke to Sigmund and he said he'd like to look into rebuilding the pagination component to use flexbox and maybe tweak the sizes of certain items. Here's an image of DS versus DSR
  

Shared platform home (authenticated)

• Pipe character between Financial institution name and LEI should have two spaces before and after

View your user profile

• Pipe character between Financial institution name and LEI should have two spaces before and after

Filing home

• Pipe character between Financial institution name and Year should have two spaces before and after
• Confirm that card border is using #B4B5B6 (Gray 40). If it is not update to this color.

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).

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".
• Field-level warning alert for number of errors for validation code exceed display limit
  • "Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)

Review warnings

• Change space under the following section headings from 45px to 30px (space under "Single-field warnings" and "Multi-field warnings"

• Field-level warning alert for number of errors for validation code exceed display limit

  • "Download report" link should be an inline link - Regular weight (400) instead of Medium weight (500)

Provide point of contact

• Fix error status styling for state selector
• Pipe character between Financial institution name and Year in step indicator should have two spaces before and after

Post-MVP backlog items

• Consolidate styling into tailwind (convert certain css or less files into tailwind and then remove)
• Add external link icon to all links that take users away from the CFPB website (my assumption would be that we would NOT include the external link icon if the website is within the universe of CFPB websites)
  • WIP: [Links] Show external-link icon where applicable #768
• Secondary button styling - Additional style updates - 2px weight for border on hover. Discuss with @shindigira
• Create a form for "Update your user profile details"
• Explore merging "View and update your user profile details" and "View and update your financial institution profile"
• Create an email to case form to get support staff help
• Define, design and implement mobile styling
• Use CFPB colors for all code
• Adjustment to the width of the page - Ensure Header and page content widths align #756

  Regarding the 1200px max-width: This setting is coming from the Design System classes. Looking at the DS code, this value should be 1170px, and has been set to that value for at least the last two years, so even the fact that we're using an older version of the DS library (from Feb 2024) does not explain the mismatch. I have been unable to determine why the coded value does not align with the calculated value.
  That said, we will eventually be upgrading to new BEM version of the DS library (v1+) so I think we should re-visit this issue then.
  -- @meissadia

• For discussion/Open question: Sub-landing page (authenticated): Should we add the privacy notice (and maybe PRA statement blurbs) to the sidebar on the authenticated landing page. I discussed this with Angel and we will hold off on this at this time because of a number of considerations related much broader questions.
• Add CFPB megamenu to unauthenticated home

Feedback from bug bashes (post-MVP testing)

• Open question --- Does the upload new file link have the right amount of prominence in the "Sign and submit" step warning alert?
• Open question --- Do users understand what the "Other" field in type of financial institution is for? @dpadgett - Can we look out for this in testing? 


Possible Design System component enhancements and updates

• Consistent hover and focus styling for form inputs (checkboxes, radio buttons, text inputs, text area inputs, single selects, multi-selects, date selector)
• Field-level alert: Space between icon and text (5px) and vertical centering of icon next to text (baseline)
• Add secondary button to the Design System
• Add step indicator to the Design System?
• Add button component
• Define and implement single select status styling
• Audit of custom adjustments that have been added directly to the DSR or SBL frontend that should post-MVP be added to the CFPB Design System

Discussion points for future discussion:

• Design discussion: “Go back” -> “Back to Upload file” @billhimmelsbach - Do you have context on this future discussion point?

[natalia-fitzgerald]

Inline data collection Privacy Notice

• Text block should be 670px wide (currently set to 708px on the platform).
• Make sure that this width is correct where it appears on the platform: Complete your user profile and Provide point of contact

[billhimmelsbach]

Text block should be 670px wide (currently set to 708px on the platform).

Ensure that this is true.

[natalia-fitzgerald]

@billhimmelsbach
In order to start to centralize the remaining open items I am moving this from this other ticket to here:

Read-only (aka display) fields without data

• @billhimmelsbach --- This is currently being worked on and is captured in this story: [Story] Know which fields are "Not applicable"  sbl-project#287
• Data not available to the platform (temporarily not available) -- We handle this with an error box and message. Is there additional work needed?
• Data not available because user has not provided it
• This is something that @meissadia and I are discussing. In the current draft this type of content is blank. We are discussing whether to include "Not provided" or some other text instead.
• Data not available because it isn't applicable for that financial institution --- This one is being handled in this ticket: [View Institution profile] Update language #1013