Ratings

Outline

<Ratings>
  <TotalRatings>{total}</TotalRatings>
  <StarList>
    <StyledStar key={1} isEmpty isFull data-percent={1/5} />
    <StyledStar key={2} isEmpty isFull data-percent={5/5} />
  </StarList>
</Ratings>

• renderWrap
• renderCount
• renderEmpty
• renderStarList
• renderTotal

1. Ratings
2. StarList
3. Star

Meta

• https://schema.org/Rating

TODO

• 1. configurable classname for count & star rating (full, empty, percent)
• 1. configurable formatting of count
• 1. schema data (unless it's at higher level)
• 1. only style :hover based on context
• 1. customizable should be before it even gets to this store, 1 level up

Related

INTERNAL

• https://jira.skava.net/confluence/display/ux/Product.Review+Breakdown

EXTERNAL

• https://css-tricks.com/clipping-masking-css/