[ProgressBar] Include complex needs (multiple limits, improved internal limit indicator, etc)

[donnavitan]

Problem statement

As a Designer, I would like to have the ability to use more complex types of ProgressBar, so that I can display complex ideas in a consistent way.

Recommendation

• Additional customer research
  • Customer’s understanding of more complex representations of progress bar in relation to its parent progress bars
  • Ability to discern when and how that particular user’s progress bar is in good standing and how it affects sibling progress bars
• Ability to display internal limit within the bar (re-introduce "stacked" progress bars???)
• Ability to display multiple internal limits
• Improved internal limit indicator
• Ability to include animation that enhances the user experience

Design intent

As a MyTELUS account user
I want to see a simple, visual representation of my data/account
So that I can quickly recognize the status of my account(s) and its progress

** Narrative **
Additional exploration required to be able to display complex progress bars (once an account exceeds available data limit, a new "bucket" triggered to measure overage which is usually displayed in the original progress bar but is not actually valued the same). Please refer to Apurv R., Daniel G., or Lynne P. for more in-depth examples of complex needs.

Designs

• Previous designs for consideration: https://telus.invisionapp.com/share/ANUENEL6SD3#/screens/388771310

Acceptance criteria (not yet available)

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:
Scenario: Displaying the component
Given text is provided
Then the text is displayed as a child
And the text size matches core-text medium

Out of scope

(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)

Related

• ProgressBar alternate use for Rewards #206
• [ProgressBar] use styled <progress> instead of styled <div> #178

Meta

• Include component name and version: vX.Y.Z
• Willing to design solution: Yes/No
• Willing to develop solution: Yes/No
• Has workaround: Yes/No
• Do any similar components already exist in TDS (core or community): Yes/No (link)
• Which teams/applications do you think would use this improvement?
• High impact: Yes/No