[Feature Request]: New container component variation: Left aligned vertical accent bar

[jakuhn]

Is your feature request related to a problem? Please describe

Currently the design system has limited variations on the 'container' component. The ones available are awesome, but I think we are missing an opportunity to expand the variations. In my service (Court of Justice Criminal Scheduling), we have containers that stack into lists, and the current container variations don't provide a solution that visually supports the list in a way that makes the container list easily readable and navigable. Only having the option for a top accent bar creates too much of a break between listed container items. (please see screenshot explorations in the alternatives considered section)

Describe the solution you'd like

A container with a left side accent bar, with variations for grey and interactive colours. Please see screenshot of preferred design

Provide evidence this is a needed component

• Accessibility wise vertical line helps to orient the user with what information is grouped for those that are visually impaired.
• Scan-ability of a container list
• Navigation, helps to clearly define each container unit so the user can see that multiple container cards are a part of the list, and easily find the container they're looking for.

Describe alternatives you've considered

I've done a handful of visual variations to work through this challenge, screenshots attached.

6e49693ebb">

Do you have anything already created for this that we can use?

yes

Are you currently using this proposal inside your own service

yes

Are you able to assist to bring the feature to reality?

no

Additional context

Let me know if you have any additional questions!

[twjeffery]

@markpawson Can you add some context of your service here as well? I see you are doing something similar in Shelter exchange. Interested to hear of any testing with users on this as well!

[markpawson6]

Below is a screenshot of our prod Shelter Exchange product using the Test Env. The idea is stolen from our SCSS Intake Mgmt app. The developer on our team had developed these containers with FED Khean Murphy when they worked together on Intake mgmt. When Housing and Homelessness team needed to display a listing of Shelters it was natural to use this since they had already developed it. We only have one color for the accent bar; however I "think" Intake Mgmt containers used red accent bar to highlight applicants deemed emergency vs regular applicants. Our color accent was more to make a bright contrast with the white background.
Click on any card and a drawer opens to show the Shelter details and allows editing of the fields using text input, and dropdowns. Since this project was a 7 week rush no formal usability testing was done. However we have observed internal GOA workers use the app and have not seen nor heard any issues with this screen.