Progress bar with percentages

[alfetopito]

Description

Create a progress bar component with percentages on top.
Clicking on the percentages should update the bar.

Proposal

This component will later be used in the claiming page.
The value will be read from and persisted to input state (to be defined).
Bar should be updated on percentage click as well as manual input change.

Maybe this state will be stored on redux? Still not defined.

For further context, this what what the surrounding page will look like:

Additional context

• Wireframes: https://www.figma.com/file/DPp3awAUcqpwpV1dD4wFB9/CoW-claiming?node-id=92%3A5718

[alfetopito]

Proposed interface for the bar component:

type Props = {
  percentage: number // between 0 - 100
  onPercentageClick: (percentage: number) => void
}

• The callback onPercentageClick will be called when there's a click on any of the percentage values on the bar.
• The parent component will calculate and pass down the percentage prop on input changes.
• Any input outside the range 0-100 should round to nearest edge (negative goes to 0, over 100 goes to 100)
• Decimal numbers are allowed as input (0.5, 44.23132)