[New] - progress bar component

[jaynguyenslng]

For the form journey component used in MYA and PI, there isn't a progress bar component on canopy.

Design for progress indicator:
https://www.figma.com/design/hJUsMXF6fNJVoa57SJuMpX/Components?node-id=2977-15323&t=V4oXRSxAMxahdcIk-0

Hence, I'd like to add the progress bar as the sub component under the form component

Suggest template:

  <lg-progress-bar [stepsCount]="stepsCount" [currentStep]="currentStep"></lg-progress-bar>

stepCount: number, required: true
currentStep: number, required: true

This would serve as a basic block either as a part of the progress indicator component or the complete form journey component.

[owensgit]

Thanks for submitting @jaynguyenslng, the suggested template above looks good 👍

Just a couple of additional questions / suggestions from me:

• Under the hood, the component should apply the relevant aria attributes and values. Aria progress role seems most appropriate as suggested here. General advice is to prefer use of the native <progress> HTML tag, but that seems to provide limited styling options with inconsistencies between browsers, so I think it's okay in our case to create the bar ourselves and then label it up properly with the right aria stuff for screenreaders.
• We might want to consider making the input names a bit more generic, as this component could also be used for progress indicators on other things, such as file upload or a process going on - maybe we could copy the <progress> attribute names and rename stepsCount to max and currentStep to value - e.g. <lg-progress-bar [max]="10" [value]="4"></lg-progress-bar>?
• Am I right by saying that currently we only need to support that blue colour theme? If we need to support others we may want to consider adding a variant input too - e.g. variant="theme-blue | theme-green | etc".

Any questions please give me a shout 🙂

[owensgit]

@jaynguyenslng and I just had a call and agreed on using the input names max and value to align with the HTML progress tag

[owensgit]

After a discussion with @jaynguyenslng, we proposed that we could do the following:

From the designs, it looks like we need two independent components: lg-progress-indicator and lg-progress-bar

Example API:

<lg-progress-indicator [max]="10" [value]="1">
  Journey Title
</lg-progress-indicator>

<lg-progress-bar [max]="10" [value]="1"/>

To make it a bit easier to use in the templates,lg-progress-indicator could have an input showProgressBar="true | false", which would render a progress bar underneath without having to pass the max and current input values twice, e.g.

<lg-progress-indicator [max]="10" [value]="1" [showProgressBar]="true">
  Open a stocks and shares ISA
</lg-progress-indicator>

A possible extra input could be stepsPrefix - which can change the default "Step" to something else, like "Person", "Item" or "Product" - e.g. "Item 1 of 3" - although this isn't needed at the time, it could be useful in future:

<lg-progress-indicator [max]="10" [value]="1" [showProgressBar]="true" stepsPrefix="Page">
  Open a stocks and shares ISA
</lg-progress-indicator>

[ashB100]

Here are a few thoughts/suggestions on accessibility:

• Using aria-valuemin and aria-valuemax values to match the min and max values. The default values are 0 and 100.
• We should also set and update aria-valuenow
• Consider providing the option for live-region update
• Consider giving an optional input for the value to be read as a percentage or text. The default is percentage unless we specify 'aria-valuetext`.
• I am wondering how the accessible name will be provided to the component. Is the projected text content the accessible name and you'll set aria-label to that projected content?

Just one more thought, I wonder if the tag available in Canopy should be called lg-progress, it would do what <lg-progress-indicator> does but have the selector you'd expect to find if you were looking for a progress bar component. We could call the component that implements it something else :).

[jaynguyenslng]

Good shout @ashB100!
I was wondering if the "Step Heading" is a part of the lg-progress-indicator.

If it not a part of the canopy component, but a part of a form journey then we can use it like this

<div>
	<lg-progress-indicator [max]="max" [value]="value">
		Journey title
	</lg-progress-indicator>
	<h1>Step heading</h1>
</div>

Else, if it's a part of the lg-progress-indicator then we can have something like this.

<lg-progress-indicator>
	<lg-progress-journey>
		Journey title
	</lg-progress-journey>
	<lg-progress-bar></lg-progress-bar>
	<lg-progress-heading>
		Step heading
	<lg-progress-heading>
</lg-progress-indicator>

[alexcanning]

You're right, the step header was intended to be part of the component. We'd never want the progress indicator used without it.

[alexcanning]

Looks good - only comment from me is that the progress indicator was intended to either allow:

1. Steps such as Step 1 of 10
2. A percentage - e.g. 25%.

[owensgit]

Sounds good, perhaps we can add another Input for this called showAsPercentage, e.g.:

<lg-progress-indicator [max]="100" [value]="1" [showProgressBar]="true" [showAsPercentage]="true">
  Open a stocks and shares ISA
</lg-progress-indicator>

When set to true this input can override the steps text (and ignore stepsPrefix) and show the current value as a percentage of the max value. E.g. if the current value is 25, and max is 100, it will display 25%. If the current value is 5 and the max is 20, then it will display 25%.

Another example: [max]="80" [value]="40" will display 50%.

This will also play nicely with the accessibility suggestions from @ashB100 above.

[jaynguyenslng]

Here is what I got so far, minor change from what discussed above.

I tried to be as much as modular as possible with the components. At the end, I created 3 basic components and 1 composite component.

<lg-progress-journey [max]="max" [value]="value" [showAsPercentage]="showAsPercentage" [showProgressBar]="showProgressBar">
    Journey title
</lg-progress-journey>

<lg-progress-bar [max]="max" [value]="value"></lg-progress-bar>

<lg-progress-header>
    Step Heading
</lg-progress-header>

For the wrapper component, it provides a single html tag that make it easy to use.

<lg-progress-indicator [max]="max" [value]="value" [name]="name" [showAsPercentage]="showAsPercentage" [showProgressBar]="showProgressBar">
  Step heading
</lg-progress-indicator>

@owensgit let's me know if it follows the correct practice, especially with the naming convention - if it's not am happy to correct it :D
here is a draft PR, still WIP atm: #1415

[owensgit]

This looks really good, thanks @jaynguyenslng.

Just a few small things:

I think that lg-progress-journey should be a simple atomic component for displaying the journey title and steps/percentage, I don't think it needs showProgressBar, as that is something the container lg-progress-indicator can take care of. When a developer wants to render the lg-progress-journey and lg-progress-bar together, they just use the lg-progress-indicator, using the correct inputs which will get passed down to the child components.

<!-- individual child components -->
<lg-progress-journey [max]="max" [value]="value" [showAsPercentage]="showAsPercentage" [stepsPrefix]="stepsPrefix">
    Journey title
</lg-progress-journey>

<lg-progress-bar [max]="max" [value]="value"></lg-progress-bar>

<lg-progress-header>
    Step Heading
</lg-progress-header>

<!-- Combined using the container component -->
<lg-progress-indicator 
  [max]="max" 
  [value]="value" 
  [showProgressBar]="true"
  [showAsPercentage]="showAsPercentage"
  [stepsPrefix]="stepsPrefix">
   Journey title
  <lg-progress-header>
      Step Heading
  </lg-progress-header>
</lg-progress-indicator>

Note that in the example above, "Journey title" would be using a generic un-named <ng-content> slot, whereas lg-progress-header would be using a named slot such as <ng-content select="lg-progress-header">. I think this makes sense, because the "Journey title" text needs to go inside the lg-progress-journey and we will need to pass the input values into it from the container: e.g. inside the lg-progress-indicator template:

<!-- Input values are inherited form the container -->
<lg-progress-journey [max]="max" [value]="value" [showAsPercentage]="showAsPercentage" [stepsPrefix]="stepsPrefix">
    <ng-content /> <!-- Journey title text projected here -->
</lg-progress-journey>
<lg-progress-bar *ngIf="showProgressBar" [max]="max" [value]="value"></lg-progress-bar>
<ng-content select="lg-progress-header">

Happy to jump on a call toady if it helps :)

[ghost]

Since I also worked on journeys, I'm wondering - isn't the Journey title the main header? 🤔
I would also recommend not adding the Step Heading as part of the component as it's just a h1 in the end which can be added after the component. This removes responsibility from the the component and makes components more reusable.

[jaynguyenslng]

Hey, you are right - it is the same as header.

For simple progress bar, you can use

<lg-progress-bar [max]="max" [value]="value"/>

In the case of just want to have journey title with step/percentage and progress bar you can use

<lg-progress-indicator ...>
  Journey title
</lg-progress-indicator>

For component like form journey - as the journey title is a part of the progress indicator so that's why it included. Here is how it can be use

<lg-progress-indicator ...>
  Journey title
  <lg-progress-header>
    Step Heading
  </lg-progress-header>
</lg-progress-indicator>

But you don't have to use lg-progress-header if not required.