feat(#1908): linear progress bar (take 2)

[willcodeforcoffee]

Figma Designs are here.

This PR replaces #3181 which I'm closing to keep things a little simpler.

Before (the change)

No progress bar.

After (the change)

Two kinds of linear progress bars.

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

PR files have been added for Angular and React under feat1908.

NOTE: This PR relies on unreleased design tokens
You will need to import the latest design tokens for the ProgressBar components to work.

1. pull latest design-tokens repo
2. change branch in design-tokens repo to eric/1908-linear-progress-tokens
3. from ui-components link to design-tokens: npm link ../design-tokens

[vanessatran-ddi]

Everything else is good. I have only 1 comment about accessibility.

[chrisolsen]

showPercentage can be changed to a bool type

[willcodeforcoffee]

@chrisolsen it actually can't be. Per the comment ¯_(ツ)_/¯.. It defaults to true, but passing false causes React and Angular to ignore the prop/attribute - thus causing it to default true.
We seem to have an established pattern to convert the string using the toBoolean util method. So I did that.

[chrisolsen]

This should probably use the reactive var

[chrisolsen]

Try to use data-testid attributes for queries within tests, to reduce breaking tests if someone decides to rename classes. It also allow for easier queries within tests as getByTestId is one of the functions that makes browser tests easier.

[willcodeforcoffee]

I've been thinking about this one. To be thorough I'm trying check values inside different elements in the controls. I think using the testid is going to actually complicate the tests more that simplify.

[willcodeforcoffee]

@chrisolsen I checked how some other components use testid, like the Accordion, and copied how they do it. LMK if you approve?

[twjeffery]

@willcodeforcoffee Visually it looks great! Well done.

A couple things:

1. The height of the progress bar in Figma is 4px. I'm not sure that ch makes sense as a unit for that height.

2. We have component tokens for all of our components, (see design-tokens/data/component-design-tokens/). I've drafted component design tokens for the linear progress component:

Token	Value
linear-progress-height	{space.2xs}
linear-progress-border-radius	{borderRadius.m}
linear-progress-color-track	{color.greyscale.200}
linear-progress-color-indicator	{color.info.default}
linear-progress-percentage-gap	{space.xs}
linear-progress-percentage-color	{color.text.secondary}
linear-progress-percentage-text	{typography.body.xs}
linear-progress-percentage-width	4ch

The design tokens need another PR in this repo: https://github.com/GovAlta/design-tokens. I can create the PR to design-tokens repo if you want, and you could update the component to use them. Or you can add the new design token file and update the component in your PR. Let me know what works for you, or if you want to discuss anything. Json file below.

linear-progress-design-tokens.json:

{
  "linear-progress-height": {
    "value": "{space.2xs}",
    "type": "sizing",
    "description": "4px - Height of the progress bar track"
  },
  "linear-progress-border-radius": {
    "value": "{borderRadius.m}",
    "type": "borderRadius",
    "description": "8px - Border radius of progress bar and indicator"
  },
  "linear-progress-color-track": {
    "value": "{color.greyscale.200}",
    "type": "color",
    "description": "Background color of the progress bar track"
  },
  "linear-progress-color-indicator": {
    "value": "{color.info.default}",
    "type": "color",
    "description": "Color of the progress indicator (both determinate and indeterminate)"
  },
  "linear-progress-percentage-gap": {
    "value": "{space.xs}",
    "type": "spacing",
    "description": "8px - Gap between the progress bar and percentage text"
  },
  "linear-progress-percentage-color": {
    "value": "{color.text.secondary}",
    "type": "color",
    "description": "Color of the percentage text"
  },
  "linear-progress-percentage-text": {
    "value": "{typography.body.xs}",
    "type": "other",
    "description": "Typography for the percentage text (14px/20px)"
  },
  "linear-progress-percentage-width": {
    "value": "4ch",
    "type": "sizing",
    "description": "Fixed width for percentage text to prevent layout shift"
  }
}