feat: added bar graph component and demo

[giuliana-gladeye]

This feature branch includes work for linear ticket "Add Equality single line bar graph component"

Added:

• Generalizable single line bar graph widget to Equality with customizable colour and label properties per bar section
• Bar graph has tooltips for each section using our tooltip component, tooltip content (string or react component) as a required prop
• Added doc page including demos and usage example
• Added min width to segments so small and zero values stay visible
• Aligned labels to the left of the container since it works better in small segment cases

Followed this mockup:

End results:

Tooltip view:

[Shrinks99]

This bar graph component is really nice!! Two thoughts:

1. We should add a size prop to control the height of the graph with at least sm, md, and lg variants. Right now it's pretty thin which is good for some scenarios, but there are others where we'll want it to be a bit bolder. For these larger sizes I'd like the graph to be rounded rectangles, not fully rounded.
2. I haven't tested this with a screen reader yet, but I suspect having both the sr-only labels aren't actually that helpful? The tooltip content should be the main way screen reader users interface with the graph. Will give it a shot in a few hours before merging, but if you haven't tested with VoiceOver to ensure it's not a pain in the ass to navigate already, that'd be great!

[giuliana-gladeye]

@Shrinks99 Added:

• Added support for sizes to control the bar's height. sm is a thin pill, the default md and lg are bolder and use rounded rectangles instead of a full pill.
• Updated labels so that each segment is exposed individually with its tooltip as the accessible name, there's no single bar level label, and screen reader users read it one segment at a time. Tested with VoiceOver.

[Shrinks99]

Tested with VoiceOver, added some more accessibility rendering fixes so the items are only read aloud once.