Feature/v2 Make ProgressBar accept breakpoints

[robesonck]

Description

This request solves V2 of the Progress Bar Exercise.

Where should the reviewer start?

• src/progress_bar_exercise/ProgressBarExercise.js
• src/progress_bar_exercise/components/ProgressBar/useProgressBarState.js
• src/progress_bar_exercise/components/ProgressBar/ProgressBar.js

Changes:

• Added support for smaller buttons
• Added a BreakPointFiller component to be able to choose the breakpoints with a user friendly UI. This component shouldn't go to production, it's only there to make testing of the breakpoints easier. The usage of this component is as follows:

Screen.Recording.2021-12-26.at.14.07.02.mov

• Removing some not needed code
• Modified the ProgressBar to work with breakpoints, while keeping the previous behavior intact.
  The interface to add them is:

  const breakpoints = [50, 75];

      <ProgressBar
        loading={loading}
        breakpoints={breakpoints}
        expectedSeconds={10}
      />

Recordings

Here we're first showing the behavior of it working with 2 breakpoints, then adding another one and still working.

Both cases work with the 90% rule too

Screen.Recording.2021-12-26.at.14.13.56.mov

Assumptions

• Same assumptions as in previous PR
• Assuming we want to keep the 90% limit from the previous exercise, so that's always added as the last breakpoint. If we wanted to change this, we would only need to change that and only add it if we have empty breakpoints.