Rating

# Use When

• Providing a tool for comparing others’ opinions

# Don't Use When

• Displaying a range of data

# Content

• Always display the number of reviews next to the star rating
• Use accompanying text label ‘Reviews’ when space allows

# Behavior

• Rating appears with grey outlined stars when no reviews are available
• Link to the corresponding review content if on the same page

# Do / Don’t

# Resources

• Icons
• Iconography

# Props

# Installation

Resources are available within the CdrRating package:

• Component: @rei/cdr-rating
• Component styles: cdr-rating.css

To incorporate the required assets for a component, use the following steps:

# 1. Install using NPM

Install the CdrRating package using npm in your terminal:

Terminal

npm i @rei/cdr-rating

# 2. Import Dependencies

main.js

// import your required CSS.
import "@rei/cdr-rating/dist/cdr-rating.css";

# 3. Add Component to a Template

local.vue

<template>
  ...
     <cdr-rating rating="4.2" count="77" />
  ...
</template>

<script>
import { CdrRating } from '@rei/cdr-rating;
export default {
  ...
  components: {
     CdrRating  
  }
}
</script>

# Usage

By default the CdrRating component renders the icons in medium size (24px) with the total number of reviews.

# Rating Values

• The count for reviews will always be visible
• Ratings are rounded to the nearest .25 because icons are represented in 25% increments
• Screen reader text is provided which reads, “Rated [ rounded ] out of 5 with [ count ] reviews”