The product rating displays how satisfied are customers after completing orders and product purchases. The rating may include additional labels and may not include them. In general, labels should be considered optional.

Where this element can be seen?

A rating display can be found on the following elements:

• Product page
• Product lists

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

</aside>

How should this element be designed?

<aside> ➡️ Rating displays average rating as % by default. This means, that the rating may depict 74%, thus taking 3 whole and almost full 4th stars. Please specifically note the developer if the rating should be rounded up to some value for display.

</aside>

The rating display should be displayed accounting for the following:

• Each star filling logic (filled, empty + based on rounding logic more fills)
• Labels can be omitted in molecule design and added later for each specific use-case

How the design may look like?

Issue in designs

Not defined if we need to round up value to some value or not in case of rating summary is not dividable by 5.

How to develop styles for this element?

The ProductReviewRating component is responsible for rendering rating. Possibly changes for the StarIcon.component.js will be needed and ProductCard.style.scss cause there are declared --product-rating-size and --product-rating-background.

Implementation example #1