Complete UXA for BRD UI Affiliations Table and Table Actions

deetz99 commented 1 month ago

https://app.zenhub.com/workspaces/connect-6690070c1ee5ec09f20a0ec1/issues/gh/bcgov/entity/22990

Dev site: https://business-registry-dev.web.app/ BTR Search: https://dev.directorsearch.bcregistry.gov.bc.ca/ BCREG2050 pw bcreg 20242050

UXA Actions

Header, breadcrumb and footer

[ ] Re-use masthead component from BTR (add translation component to BTR masthead)
[ ] Add breadcrumb component from BTR and change back button arrow colour to #1669BB
[ ] Re-use footer component from BTR (add BC Online Application label with version component)

Page heading

[ ] Increase H1 / page heading (My Business Registry) font size (32px) to match existing
[ ] Reduce spacing between page subtitle and help text. Reference BTR page
[ ] Left align the help text

Help text content

[ ] Match line and paragraph spacing in "Help with Starting and Managing a Business" expansion, and add paragraph spacing for each section
[ ] Content should not exceed content width when browser width expands

Input field (for adding a business or name request)

[ ] Add indent and apostrophe to "Joes Plumbing" (search hint text)
[ ] Full quotation marks for hint text ", add end quotation mark
[ ] Input label should have a left padding of 16px.
[ ] Look-up: add comma between "...incorporation number, or registration number"
[ ] Check hint text colour contrast - grey looks too light, should be #495057
[ ] Top border radius for input fields should be 4px

My Business Registry list Table

[ ] Don't bold the (number.) in the My List (xx) label - only bold "My List"
[ ] Table heading row height - match existing
[ ] Increase padding below table filter fields in row to match padding above field
[ ] Increase left padding to 16px(currently 8px) and left align the table elements
[ ] Only display the "Clear Filters" button when a filter is applied
[ ] radius on components (buttons, field, etc.) should be .25 rem/4 px
[ ] text colour for table data should be #495057

Columns to show component

[ ] height and width of "columns to show" control should match with other tables.
[ ] use select list checkbox design from BTR Search but add rollover states to checkbox list items (need visual design spec for this)

Action button

[ ] match button rollover colours to style (table action button)
[ ] Make action buttons full column width (keep dropdown button segment fixed width - not a percentage of button width), and increase left padding to 16px.

Filter states

[ ] Match style of dropdown select lists with BTR (font size, line height) For future enhancement we want to define the following states: default, hover, selected, selected hover, pressed, and focus. Example:

Other

[ ] Page Title: My Business Registry (the text displayed on the tab in browser)
[ ] Adjust tooltips background colour and opacity
[ ] When using filter, the column width shifting a lot, all of the the table column width should be stable.
[ ] Update text - "Register Now" (we changed this button)
[ ] Review the 'remove business modal' - information is not accurate

forgeuxGH5 commented 1 month ago

@sandragornall tagging you for reference

deetz99 commented 1 month ago

@forgeuxGH5

Had some time to spare so worked on this a little bit. Not sure how you want to do it exactly but I can check off what I think is completed and then anything that needs updating can be unchecked or a new item?

forgeuxGH5 commented 1 month ago

@deetz99 @sandragornall - we haven't figured out how exactly we handle these UXA tickets, in the other boards the UXA changes are included as part of the original estimate for the ticket., UXA comments go in the dev ticket and the dev tickets are moved back to "In progress" to make the changes. If we are doing dev work we really should have a ticket that estimates and tracks that ticket.

deetz99 commented 1 month ago

@forgeuxGH5 @sandragornall

That sounds like a good plan moving forward.

Something that is a bit tricky though is handling any UX updates in the common layer. For example the header/footer come from the layer, not the main app. So changes there need to be made in a separate repo and then published to npm, then in the main app update the version of the module.

This might be a bigger discussion on how to track that. Or maybe we need to go through the common layer and comb through it to make sure it matches up with how we want it.

bcgov / entity