The quantity input allows a customer to select the amount of product they want to purchase. It consists of an input element and two buttons.

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

Where this element can be seen?

A quantity input is a common element for the e-commerce site. It can be found on the following elements:

• Cart item list
• Product page
• Category page (quick buy)

How should this element be designed?

The quantity input should be displayed in the following states:

• Default
• Default while minimum quantity is reached (possibly disabled -)
• Default while maximum quantity is reached (possibly disabled +)
• Hover on the increase button
• Hover on the increase button while maximum quantity is reached
• Hover on the decrease button
• Hover on the decrease button while minimum quantity is reached

Please account for the following:

• By default, clicking on the number does not let you type in the quantity, avoid this feature if possible
• If quantity input may be displayed in multiple scales

Design Example 1

Design Example 2

How to develop styles for this element?

The Field component of type FIELD_TYPE.number is responsible for rendering the quantity input. It consists of input with a type number and two buttons.

• Input with type number render "scandipwa": "5.0.7"

To style quantity input it is recommended to move style to Field.override.style.scss by creating related mixin to lower nesting level.

In the scope of this task AddIcon and MinusIcon components possibly should be modified to match provided designs.

Implementation example #1

Implementation example #2

<aside> ➡️ Taking some examples from the previous projects, the fact, that ScandiPWA version possibly will be different, should be taken into consideration

</aside>