Implement Stacked Progress Bar Component

Proposal

We need to implement a stacked progress bar component for the GitLab UI library, similar to the one described in the Bootstrap documentation.

Requirements:

1. Design:
   • Each segment in the progress bar should have configurable colors.
   • Should visually align with the Pajamas design guidelines.
2. Functionality:
   • The progress bar should support multiple stacked segments.
   • Each segment should accept a value representing its percentage width.
   • Tooltips or labels can be added for better accessibility and user understanding.
   • Should accept props for configuring the values, colors, and other styling options for each bar.
3. Add Documentation and Story in the Storybook

Example:

A stacked progress bar with four segments:

Example usage can be found at gitlab#514340[Asset_inventory-_group-level_-_MVC_-_subgroup_expanded.png]

Implementation Plan:

We can utilize the existing GlProgressBar to define the stacked progress bar component.

Checklist

Make sure the following are completed before closing the issue:

1. Assign the correct component label to this issue.
2. Create an MR with the additions or updates needed.
   • feat(GlStackedProgressBar): Implement GlStacked... (!4987 - closed)
3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
   • Is this covered by adding a story in !4987 (closed)?
5. When applicable, create an MR in Pajamas to update the component status.
6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
   • Add GlStackedProgressBar documentation (gitlab-org/gitlab-services/design.gitlab.com#2002 - closed)
7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
   • Figma > GlStackedProgressBar - Add to component... (gitlab-org/gitlab-services/design.gitlab.com#2001 - closed)
8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
9. 🎉 Congrats, you made it! You can now close this issue.